[SR] Component integration tests #36871

sebelga · 2019-05-22T09:25:55Z

This PR adds the component integration tests for Snapshot Repositories app.

While doing the tests I also updated the client side validation of the repository name and updated the Chrome extension to take into account all the different access paths to a DOM node.

E.g. Before, it only returned either the complete path or the leaf.
'grandParent.parent.child' or 'child'
Now it returns all the combination to access a node
'grandParent.parent.child', 'grandParent.child', 'grandParent.parent' 'parent.child' & 'child'

There is also now a "depth" config in the extension to limit the nested paths returned. 95% of the time a "parent -> child" access is enough to target a dom node.

Run the tests locally

In order to run the 3 component integration jest files, we need the latest react version 16.9.0 which is currently in alpha release. This next version brings asynchronous to the act() method which is needed to test our "hooked" components...

Dependencies

For now, in order to run the tests, make the following modifications in the package.json

root package.json

"react": "^16.8.0" ---> "react": "16.9.0-alpha.0"
"react-dom": "^16.8.0" ---> "react-dom": "16.9.0-alpha.0"

x-pack package.json

"react": "^16.8.0" ---> "react": "16.9.0-alpha.0"
"react-dom": "^16.8.0" ---> "react-dom": "16.9.0-alpha.0"

And then run yarn install in each folder.

This implies that the CI will never turn green until we don't upgrade to 16.9.0.

Another note about dependencies: when running the tests we get the warning Warning: componentWillMount is deprecated and will be removed in the next major version (...) Please update the following components: MemoryRouter, Route, Router, Switch. Updating to react-router v5.0.0 (which is backward compatible) removes the warning.... but break 3 of our apps (remote clusters, ccr and rollups) as they depend on the non-official old "Context" to access the router. The fix should not be too complex but maybe other plugins have the same issue and we probably want to make sure all our plugins are compatible with react-router v5 and allow ourselves updating to react 17.0.0 when needed (I know, this won't happen tomorrow 😊).

@jen-huang @silne30 ready to review!

CC @elastic/kibana-platform for the dependencies note .
@elastic/kibana-qa team for a preview on what we'll discuss
@alisonelizabeth as you might use this as a starting point to test watcher.

elasticmachine · 2019-05-22T09:27:13Z

Pinging @elastic/es-ui

elasticmachine · 2019-05-22T10:14:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-05-24T09:54:18Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-05-27T12:54:35Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

sebelga · 2019-05-28T00:05:15Z

x-pack/plugins/snapshot_restore/public/app/index.tsx

-  plugins: AppPlugins
-): Promise<void> => {
-  render(<ReactApp core={core} plugins={plugins} />, elem);
+export const renderReact = async (elem: Element, core: AppCore, plugins: AppPlugins) => {


Instead of providing the dependencies through props, I made it through a Provider component. This made is easier to test as I could wrap the component under test with this Providers Component.

sebelga · 2019-05-28T00:07:23Z

x-pack/plugins/snapshot_restore/public/app/index.tsx

-export const useAppDependencies = () => useContext<AppDependencies>(DependenciesContext);
+export const setAppDependencies = (deps: AppDependencies) => {
+  DependenciesContext = createContext<AppDependencies>(deps);
+  return DependenciesContext.Provider;


Create the context and return the Provider for it.

sebelga · 2019-05-28T00:09:28Z

x-pack/plugins/snapshot_restore/public/app/services/http/use_request.ts

@@ -30,7 +30,7 @@ export const sendRequest = async ({
  try {
    const response = await httpService.httpClient[method](path, body);

-    if (!response.data) {
+    if (typeof response.data === 'undefined') {


Had to change this as a 200 response with empty string '' was taken as an error.

sebelga · 2019-05-28T00:10:30Z

x-pack/plugins/snapshot_restore/public/app/services/http/use_request.ts

@@ -44,7 +44,7 @@ export const sendRequest = async ({
    };
  } catch (e) {
    return {
-      error: e,
+      error: e.response ? e.response : e,


Had to change this as the mocked error is under a "response" property.

alisonelizabeth · 2019-06-06T12:37:43Z

x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts

+  };
+
+  const clickSnapshotAt = async (index: number) => {
+    const { rows } = testBed.table.getMetaData(SNAPSHOT_TABLE);


nit: destructure testBed
const { table, router, component } = testBed

alisonelizabeth · 2019-06-06T12:46:06Z

x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts

+        expect(exists('reloadButton')).toBe(true);
+
+        await act(async () => {
+          find('reloadButton').simulate('click');


what do you think about adding this to the helpers file?

alisonelizabeth · 2019-06-06T12:47:42Z

x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts

+
+        expect(server.requests.length).toBe(totalRequests + 1);
+        expect(server.requests[server.requests.length - 1].url).toBe(
+          '/api/snapshot_restore/repositories'


nit: you could import the API_BASE_PATH const and use it here
${API_BASE_PATH}repositories

alisonelizabeth · 2019-06-06T12:48:21Z

x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts

+          const repositoryName = rows[0].columns[1].value;
+
+          expect(latestRequest.method).toBe('DELETE');
+          expect(latestRequest.url).toBe(`/api/snapshot_restore/repositories/${repositoryName}`);


alisonelizabeth · 2019-06-06T12:49:08Z

x-pack/plugins/snapshot_restore/__jest__/client_integration/home.test.ts

+          expect(find('repositoryDetail.title').text()).toEqual(repo1.name);
+        });
+
+        test('should show a loading while fetching the repository', async () => {


nit: missing word here? maybe should show a loading state...

alisonelizabeth · 2019-06-06T12:54:50Z

x-pack/plugins/snapshot_restore/__jest__/client_integration/repository_add.test.ts

+        form.selectCheckBox('compressToggle');
+
+        const error = {
+          statusCode: 400,


looks like setSaveRepositoryResponse is actually checking for status not statusCode

alisonelizabeth · 2019-06-06T13:08:06Z

x-pack/test_utils/lib/utils.ts

 export const nextTick = (time = 0) => new Promise(resolve => setTimeout(resolve, time));
+
+export const getRandomNumber = (range: { min: number; max: number } = { min: 1, max: 20 }) =>


nit: should the getRandomString util be added to this file as well, rather than in strings.ts?

alisonelizabeth · 2019-06-06T13:11:07Z

x-pack/test_utils/testbed/testbed.ts

+      const navigateTo = (_url: string) => {
+        const url =
+          _url[0] === '#'
+            ? _url.replace('#', '') // remove the begging hash as the memory router does not understand them


nit: type begging ---> beginning

elasticmachine · 2019-06-10T15:25:52Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-10T18:37:32Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-06-12T12:36:27Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

Version 0.19.0 has breaking change and does not work with the Sinon mock server Issue: axios/axios#2195

…_component_integration

elasticmachine · 2019-06-13T07:55:42Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

sebelga · 2019-06-13T07:59:16Z

retest

elasticmachine · 2019-06-13T08:14:48Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

This reverts commit 5ac4098.

elasticmachine · 2019-06-13T12:11:32Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

sebelga · 2019-06-13T13:20:30Z

@jen-huang @alisonelizabeth I have made the CR changes suggested. Could you have another look at the PR? Cheers! 😊

alisonelizabeth

Changes LGTM

elasticmachine · 2019-06-13T15:59:35Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

sebelga added v7.2.0 v8.0.0 labels May 22, 2019

jen-huang self-requested a review May 22, 2019 16:45

sebelga changed the title ~~[SR] Component integration tests~~ WIP [SR] Component integration tests May 23, 2019

jen-huang added the v7.3.0 label May 23, 2019

sebelga commented May 28, 2019

View reviewed changes

sebelga added 13 commits May 28, 2019 09:13

Setup tests for home section

8fed751

Refactor render react app

445c9dd

Refactor test providers

ba45dc7

Add test subjects

785cacd

Setup tests for repository_add

d30aaa9

Add test for repository list table

8151db6

Add test for repository edit

212655d

Add test for home tab navigation

72a4353

Add api error test

8c67b0b

Initial state demo tests

5ad033d

Initial state demo tests (2)

2b8059f

Put back tests

affb929

Test home repository list for all types

88a06b1

alisonelizabeth reviewed Jun 6, 2019

View reviewed changes

sebelga added 4 commits June 10, 2019 16:33

Add CR changes

8f182d6

Merge branch 'master' into test/repositories_component_integration

4bfe889

Skip tests until react 16.9.0 is released

0ccc9b4

Ignore ts error for act async

8d6e9ed

Fix i18n context provider

a5a3e89

Fix Typescript errors

2208e50

sebelga added 4 commits June 13, 2019 07:13

Fix router shape in catchRouter HOC

ae9c05b

Revert axios to v0.18.1

5ac4098

Version 0.19.0 has breaking change and does not work with the Sinon mock server Issue: axios/axios#2195

Fix failing tests on home

365a3e4

Merge remote-tracking branch 'upstream/master' into test/repositories…

c7a75ba

…_component_integration

sebelga added 2 commits June 13, 2019 12:39

Revert "Revert axios to v0.18.1"

22c0938

This reverts commit 5ac4098.

Fix Typescript error

c13f3db

alisonelizabeth approved these changes Jun 13, 2019

View reviewed changes

Add XHR adapter to Axios

16b392c

sebelga merged commit 941cc44 into elastic:master Jun 13, 2019

sebelga deleted the test/repositories_component_integration branch June 13, 2019 18:34

sebelga mentioned this pull request Jun 13, 2019

[7.x] [SR] Component integration tests (#36871) #38922

Merged

sebelga added a commit to sebelga/kibana that referenced this pull request Jun 13, 2019

[SR] Component integration tests (elastic#36871)

2812682

sebelga added a commit that referenced this pull request Jun 14, 2019

[SR] Component integration tests (#36871) (#38922)

21b22c5

cjcenizal mentioned this pull request Sep 30, 2019

Update react-router-dom to v5 #46885

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SR] Component integration tests #36871

[SR] Component integration tests #36871

sebelga commented May 22, 2019 •

edited

elasticmachine commented May 22, 2019

elasticmachine commented May 22, 2019

elasticmachine commented May 24, 2019

elasticmachine commented May 27, 2019

sebelga May 28, 2019

sebelga May 28, 2019

sebelga May 28, 2019

sebelga May 28, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

alisonelizabeth Jun 6, 2019

elasticmachine commented Jun 10, 2019

elasticmachine commented Jun 10, 2019

elasticmachine commented Jun 12, 2019

elasticmachine commented Jun 13, 2019

sebelga commented Jun 13, 2019

elasticmachine commented Jun 13, 2019

elasticmachine commented Jun 13, 2019

sebelga commented Jun 13, 2019

alisonelizabeth left a comment

elasticmachine commented Jun 13, 2019

		export const nextTick = (time = 0) => new Promise(resolve => setTimeout(resolve, time));

		export const getRandomNumber = (range: { min: number; max: number } = { min: 1, max: 20 }) =>

[SR] Component integration tests #36871

[SR] Component integration tests #36871

Conversation

sebelga commented May 22, 2019 • edited

Run the tests locally

Dependencies

elasticmachine commented May 22, 2019

elasticmachine commented May 22, 2019

💔 Build Failed

elasticmachine commented May 24, 2019

💔 Build Failed

elasticmachine commented May 27, 2019

💔 Build Failed

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Jun 10, 2019

💔 Build Failed

elasticmachine commented Jun 10, 2019

💔 Build Failed

elasticmachine commented Jun 12, 2019

💔 Build Failed

elasticmachine commented Jun 13, 2019

💔 Build Failed

sebelga commented Jun 13, 2019

elasticmachine commented Jun 13, 2019

💔 Build Failed

elasticmachine commented Jun 13, 2019

💚 Build Succeeded

sebelga commented Jun 13, 2019

alisonelizabeth left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 13, 2019

💚 Build Succeeded

sebelga commented May 22, 2019 •

edited