Re-enable all React table-renderer-components tests

[marcdumais-work]

Fixes #1100

Had to mock some ag-grid objects that were used in the newly re-enabled tests.

It turns-out that many of these objects were not really used during our tests
(e.g. api: GridApi, column: Column). So for these, it was enough to mock
them using an empty JS object and use keyword "as" to present them as the real
thing. e.g.:

<SearchFilterRenderer
    api={{} as GridApi}
    column={{} as Column<any>}
>

To run the re-enabled tests against the original jest snapshots, you can checkout the snapshot file's version prior to the ag-grid upgrade:

$ pwd
<...>/theia-trace-extension

$ git log --oneline 
[...newer commits]
b911f00 Bump ag-grid-community from 28.2.1 to 32.0.1  // **6-deep vs this PR**
167c526 Update 0011-tsp-analysis-api for custom analysis // **7-deep vs this PR**
[... older commits]

$ git checkout HEAD~7 ./packages/react-components/src/components/__tests__/__snapshots__/table-renderer-components.test.tsx.snap
$ yarn && yarn test

Expected result: a single test should fail - one that was not disabled: <TableOutputComponent /> › Renders AG-Grid table with provided props & state
I believe that test fails/failed because of the newer version of ag-grid generates slightly different HTML code when rendered.

Confirm that all the newly re-enabled tests passed, using the original snapshot.

[bhufmann]

It works fine. I get a new warning when running the test with yarn test which was not there before. Do you see the same:

traceviewer-react-components:  PASS  src/components/__tests__/table-renderer-components.test.tsx (26.36 s)
traceviewer-react-components:   ● Console
traceviewer-react-components:     console.error
traceviewer-react-components:       Warning: An update to SearchFilterRenderer inside a test was not wrapped in act(...).
traceviewer-react-components:       
traceviewer-react-components:       When testing, code that causes React state updates should be wrapped into act(...):
traceviewer-react-components:       
traceviewer-react-components:       act(() => {
traceviewer-react-components:         /* fire events that update state */
traceviewer-react-components:       });
traceviewer-react-components:       /* assert on the output */
traceviewer-react-components:       
traceviewer-react-components:       This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
traceviewer-react-components:           at SearchFilterRenderer (/home/eedbhu/git/theia-training/theia-trace-extension/packages/react-components/src/components/table-renderer-components.tsx:88:9)
traceviewer-react-components: 
traceviewer-react-components:       209 |                 result.then(isFound => {
traceviewer-react-components:       210 |                     // need to trigger backend query
traceviewer-react-components:     > 211 |                     this.setState({
traceviewer-react-components:           |                          ^
traceviewer-react-components:       212 |                         isSearching: false,
traceviewer-react-components:       213 |                         isSearchSuccessful: isFound
traceviewer-react-components:       214 |                     });
traceviewer-react-components: 
traceviewer-react-components:       at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:86:30)
traceviewer-react-components:       at error (../../node_modules/react-dom/cjs/react-dom.development.js:60:7)
traceviewer-react-components:       at warnIfUpdatesNotWrappedWithActDEV (../../node_modules/react-dom/cjs/react-dom.development.js:27628:9)
traceviewer-react-components:       at scheduleUpdateOnFiber (../../node_modules/react-dom/cjs/react-dom.development.js:25547:5)
traceviewer-react-components:       at Object.enqueueSetState (../../node_modules/react-dom/cjs/react-dom.development.js:17925:7)
traceviewer-react-components:       at SearchFilterRenderer.Object.<anonymous>.Component.setState (../../node_modules/react/cjs/react.development.js:354:16)
traceviewer-react-components:       at src/components/table-renderer-components.tsx:211:26

[marcdumais-work]

It works fine. I get a new warning when running the test with yarn test which was not there before. Do you see the same:
[...]

Yes, I noticed this warning and tried to debug it. It happens in test Search filter renderer key interactions, when the search area is selected and the "Enter" key press is simulated on it, causing the table-renderer-component to trigger a (mocked) search for the next element.

ATM that test does not use "act()" blocks. I've tried adding some, for each line that triggers a state update, but I still got the warning. Looking at the code involved, I think this is because this code-path, though it has a synchronous interface, it ends-up executing the update asynchronously [1]. So, I think the async part of this flow can cause the React component state update, to happen pass the "Act()" block, rendering it useless.

At least for now, I think that's ok - we might face timing issues if we try adding more robust tests in this area, and that would be a good opportunity to potentially re-consider how this flow is implemented table-renderer-components.tsx.

[1]: In the tests, when there's a simulated "Enter" keystroke, "table-renderer-components.tsx", sync method onKeyDownEvent() is called, and in turn it calls method this.runSearch() which does some async operations.

[bhufmann]

It works fine. I get a new warning when running the test with yarn test which was not there before. Do you see the same:
[...]

Yes, I noticed this warning and tried to debug it. It happens in test Search filter renderer key interactions, when the search area is selected and the "Enter" key press is simulated on it, causing the table-renderer-component to trigger a (mocked) search for the next element.

ATM that test does not use "act()" blocks. I've tried adding some, for each line that triggers a state update, but I still got the warning. Looking at the code involved, I think this is because this code-path, though it has a synchronous interface, it ends-up executing the update asynchronously [1]. So, I think the async part of this flow can cause the React component state update, to happen pass the "Act()" block, rendering it useless.

At least for now, I think that's ok - we might face timing issues if we try adding more robust tests in this area, and that would be a good opportunity to potentially re-consider how this flow is implemented table-renderer-components.tsx.

[1]: In the tests, when there's a simulated "Enter" keystroke, "table-renderer-components.tsx", sync method onKeyDownEvent() is called, and in turn it calls method this.runSearch() which does some async operations.

Thanks for the explanation. I think we can merge it as is.

[bhufmann]

Thank you for the contribution.

[marcdumais-work]

Thanks for the review!