From 209e41663ec3b909e61e4a6ca6b5b79632a20600 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 17 Dec 2018 12:53:52 -0800 Subject: [PATCH 1/4] Use componentDidUpdate instead of getDerivedStateFromProps. --- .../sections/remote_cluster_list/remote_cluster_list.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js index e6e2c2e0a295f..eb22caf7fec49 100644 --- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js @@ -57,7 +57,7 @@ export const RemoteClusterList = injectI18n( isRemovingCluster: PropTypes.bool, } - static getDerivedStateFromProps(props) { + componentDidUpdate() { const { openDetailPanel, closeDetailPanel, @@ -67,7 +67,7 @@ export const RemoteClusterList = injectI18n( search, }, }, - } = props; + } = this.props; const { cluster: clusterName } = extractQueryParams(search); @@ -77,12 +77,8 @@ export const RemoteClusterList = injectI18n( } else if (isDetailPanelOpen) { closeDetailPanel(); } - - return null; } - state = {}; - componentDidMount() { this.props.loadClusters(); this.interval = setInterval(this.props.refreshClusters, REFRESH_RATE_MS); From de2331a1bbc9332227c0e53dd994fcf4429596af Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 20 Dec 2018 15:31:24 -0800 Subject: [PATCH 2/4] Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable. --- .../remote_cluster_form.test.js.snap | 183 +++++++++++++++++ .../remote_cluster_form.test.js | 50 +++++ .../remote_cluster_list.test.js.snap | 98 +++++++++ .../remote_cluster_list.test.js | 37 ++++ .../remote_cluster_table.test.js.snap | 187 ++++++++++++++++++ .../remote_cluster_table.test.js | 63 ++++++ 6 files changed, 618 insertions(+) create mode 100644 x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap create mode 100644 x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js create mode 100644 x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap create mode 100644 x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.test.js create mode 100644 x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap create mode 100644 x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap new file mode 100644 index 0000000000000..54793ad9e8506 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap @@ -0,0 +1,183 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RemoteClusterForm renders untouched state 1`] = ` +Array [ +
+
+
+ A unique name for the remote cluster. +
+
+
+
+ Name +
+
+
+
+ +
+
+
+
+ Name can only contain letters, numbers, underscores, and dashes. +
+
+
+
+
+
+

+ A list of remote cluster nodes to query for the cluster state. Specify multiple seed nodes so discovery doesn't fail if a node is unavailable. +

+
+
+
+
+ Seed nodes +
+
+ +
+ An IP address or host name, followed by the port. +
+
+
+
+
+
+

+ By default, a request fails if any of the queried remote clusters are unavailable. To continue sending a request to other remote clusters if this cluster is unavailable, enable + + Skip if unavailable + + . + + Learn more. + +

+
+
+
+
+
+
+
+
+
+
+
+
, +
, +
+
+ +
+
+ +
+
, +] +`; diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js new file mode 100644 index 0000000000000..fb1de629923c8 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { renderWithIntl } from 'test_utils/enzyme_helpers'; + +import { RemoteClusterForm } from './remote_cluster_form'; + +jest.mock('@elastic/eui', () => { + const eui = require.requireActual('@elastic/eui'); + return { + ...eui, + // Prevent non-deterministic aria IDs from breaking snapshots on each run. + EuiDescribedFormGroup: ({ description, children }) => ( +
+
{description}
+
{children}
+
+ ), + // Prevent non-deterministic aria IDs from breaking snapshots on each run. + EuiFormRow: ({ label, helpText, children }) => ( +
+
{label}
+
{children}
+
{helpText}
+
+ ), + // Prevent non-deterministic aria IDs from breaking snapshots on each run. + EuiSwitch: ({ labeln }) => ( +
{labeln}
+ ), + }; +}); + +describe('RemoteClusterForm', () => { + test(`renders untouched state`, () => { + const component = renderWithIntl( + {}} + cancel={() => {}} + isSaving={false} + saveError={undefined} + /> + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap new file mode 100644 index 0000000000000..ac66e0319d9fe --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap @@ -0,0 +1,98 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RemoteClusterList renders empty state when loading is complete and there are no clusters 1`] = ` +
+
+
+
+ + + + +
+ +

+ Add your first remote cluster +

+
+
+

+ Remote clusters create a uni-directional connection between your local cluster and other clusters. +

+
+ +
+
+ + + + + Add a remote cluster + + + +
+
+
+
+`; diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.test.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.test.js new file mode 100644 index 0000000000000..2ab49c27f541f --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.test.js @@ -0,0 +1,37 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { renderWithIntl } from 'test_utils/enzyme_helpers'; + +import { RemoteClusterList } from './remote_cluster_list'; + +jest.mock('../../services', () => { + const services = require.requireActual('../../services'); + return { + ...services, + getRouterLinkProps: (link) => ({ href: link }), + }; +}); + +describe('RemoteClusterList', () => { + test(`renders empty state when loading is complete and there are no clusters`, () => { + const component = renderWithIntl( + {}} + refreshClusters={() => {}} + openDetailPanel={() => {}} + closeDetailPanel={() => {}} + isDetailPanelOpen={false} + clusters={[]} + isLoading={false} + isCopyingCluster={false} + isRemovingCluster={false} + /> + ); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap new file mode 100644 index 0000000000000..15820a4af64d8 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap @@ -0,0 +1,187 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RemoteClusterTable renders a row for a default remote cluster 1`] = ` + + +
+
+ +
+
+
+ + +
+ +
+ + +
+ seed, seed2 +
+ + +
+
+
+ + + + + + +
+
+
+ Not connected +
+
+
+
+ + +
+ +
+ + +
+
+
+ +
+
+
+ +
+
+ + +`; diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js new file mode 100644 index 0000000000000..937a29e254171 --- /dev/null +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { Provider } from 'react-redux'; +import { renderWithIntl } from 'test_utils/enzyme_helpers'; + +import { remoteClustersStore } from '../../../store'; +import { RemoteClusterTable } from './remote_cluster_table'; + +jest.mock('@elastic/eui', () => { + const eui = require.requireActual('@elastic/eui'); + return { + ...eui, + // Prevent non-deterministic aria IDs from breaking snapshots on each run. + EuiToolTip: ({ children }) => ( +
{children}
+ ), + }; +}); + +describe('RemoteClusterTable', () => { + test(`renders a row for a default remote cluster`, () => { + const clusters = [{ + name: 'Default remote cluster', + seeds: ['seed', 'seed2'], + }]; + + const component = renderWithIntl( + + {}} + /> + + ); + + expect(component.find('tbody > tr').first()).toMatchSnapshot(); + }); + + // TODO: Re-enable this test once EUI supports stubbing its dynamically generated IDs (eui#1381) + // test(`renders a row for a remote cluster defined in elasticsearch.yml`, () => { + // const clusters = [{ + // name: 'Remote cluster in elasticsearch.yml', + // seeds: ['seed', 'seed2'], + // isConfiguredByNode: true, + // }]; + + // const component = renderWithIntl( + // + // {}} + // /> + // + // ); + + // expect(component.find('tbody > tr').first()).toMatchSnapshot(); + // }); +}); From 1baa2b5139b925e81ea9f014b41bc1c4a0455752 Mon Sep 17 00:00:00 2001 From: sebelga Date: Wed, 26 Dec 2018 12:25:31 +0100 Subject: [PATCH 3/4] Add jest mock for eui `makeId()` utility and get deterministic aria IDs for snapshots --- .../remote_cluster_form.test.js.snap | 256 ++++++++++++++---- .../remote_cluster_form.test.js | 29 +- .../remote_cluster_table.test.js.snap | 237 +++++++++++++++- .../remote_cluster_table.test.js | 51 ++-- 4 files changed, 468 insertions(+), 105 deletions(-) diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap index 54793ad9e8506..8f600cbdcae40 100644 --- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap @@ -5,16 +5,49 @@ Array [
-
-
- A unique name for the remote cluster. -
-
-
-
+
+
+
+

Name +

+
+
+ A unique name for the remote cluster. +
-
+
+
+
+
@@ -22,32 +55,71 @@ Array [ class="euiFormControlLayout__childrenWrapper" >
-
-
- Name can only contain letters, numbers, underscores, and dashes. +
+ Name can only contain letters, numbers, underscores, and dashes. +
-
-
-

- A list of remote cluster nodes to query for the cluster state. Specify multiple seed nodes so discovery doesn't fail if a node is unavailable. -

-
-
-
-
- Seed nodes +
+
+
+

+ Seed nodes for cluster discovery +

+
+
+

+ A list of remote cluster nodes to query for the cluster state. Specify multiple seed nodes so discovery doesn't fail if a node is unavailable. +

+
-
+
+
+
+
-
-
- An IP address or host name, followed by the port. +
+ An IP address or host name, followed by the port. +
-
-
-

- By default, a request fails if any of the queried remote clusters are unavailable. To continue sending a request to other remote clusters if this cluster is unavailable, enable - - Skip if unavailable - - . - +

+
+

- Learn more. - -

-

-
-
-
-
-
+ Make remote cluster optional + +
+
+

+ By default, a request fails if any of the queried remote clusters are unavailable. To continue sending a request to other remote clusters if this cluster is unavailable, enable + + Skip if unavailable + + . + + Learn more. + +

+
+
+
+
+
+
+ + + + + + + + + + + + + + + + +
-
diff --git a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js index fb1de629923c8..85e79d3c7a225 100644 --- a/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js +++ b/x-pack/plugins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js @@ -9,31 +9,10 @@ import { renderWithIntl } from 'test_utils/enzyme_helpers'; import { RemoteClusterForm } from './remote_cluster_form'; -jest.mock('@elastic/eui', () => { - const eui = require.requireActual('@elastic/eui'); - return { - ...eui, - // Prevent non-deterministic aria IDs from breaking snapshots on each run. - EuiDescribedFormGroup: ({ description, children }) => ( -
-
{description}
-
{children}
-
- ), - // Prevent non-deterministic aria IDs from breaking snapshots on each run. - EuiFormRow: ({ label, helpText, children }) => ( -
-
{label}
-
{children}
-
{helpText}
-
- ), - // Prevent non-deterministic aria IDs from breaking snapshots on each run. - EuiSwitch: ({ labeln }) => ( -
{labeln}
- ), - }; -}); +/** + * Make sure we have deterministic aria ID + */ +jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'my-id'); describe('RemoteClusterForm', () => { test(`renders untouched state`, () => { diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap index 15820a4af64d8..0713393e46b1d 100644 --- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/__snapshots__/remote_cluster_table.test.js.snap @@ -120,7 +120,9 @@ exports[`RemoteClusterTable renders a row for a default remote cluster 1`] = `
-
+ -
+
-
+ + +
+
+ + +`; + +exports[`RemoteClusterTable renders a row for a remote cluster defined in elasticsearch.yml 1`] = ` + + +
+
+ +
+
+
+ + +
+
+
+
+
+ + + + + +
+
+
+ + +
+ seed, seed2 +
+ + +
+
+
+ + + + + + +
+
+
+ Not connected +
+
+
+
+ + +
+ +
+ + +
+
+ + + +
+
+ + +
diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js index 937a29e254171..3931f8f7cd47e 100644 --- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.test.js @@ -11,16 +11,10 @@ import { renderWithIntl } from 'test_utils/enzyme_helpers'; import { remoteClustersStore } from '../../../store'; import { RemoteClusterTable } from './remote_cluster_table'; -jest.mock('@elastic/eui', () => { - const eui = require.requireActual('@elastic/eui'); - return { - ...eui, - // Prevent non-deterministic aria IDs from breaking snapshots on each run. - EuiToolTip: ({ children }) => ( -
{children}
- ), - }; -}); +/** + * Make sure we have deterministic aria ID + */ +jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'my-id'); describe('RemoteClusterTable', () => { test(`renders a row for a default remote cluster`, () => { @@ -41,23 +35,22 @@ describe('RemoteClusterTable', () => { expect(component.find('tbody > tr').first()).toMatchSnapshot(); }); - // TODO: Re-enable this test once EUI supports stubbing its dynamically generated IDs (eui#1381) - // test(`renders a row for a remote cluster defined in elasticsearch.yml`, () => { - // const clusters = [{ - // name: 'Remote cluster in elasticsearch.yml', - // seeds: ['seed', 'seed2'], - // isConfiguredByNode: true, - // }]; - - // const component = renderWithIntl( - // - // {}} - // /> - // - // ); - - // expect(component.find('tbody > tr').first()).toMatchSnapshot(); - // }); + test(`renders a row for a remote cluster defined in elasticsearch.yml`, () => { + const clusters = [{ + name: 'Remote cluster in elasticsearch.yml', + seeds: ['seed', 'seed2'], + isConfiguredByNode: true, + }]; + + const component = renderWithIntl( + + {}} + /> + + ); + + expect(component.find('tbody > tr').first()).toMatchSnapshot(); + }); }); From 031fd4417b26fbde1a7515408bdb65e76f4bd2c0 Mon Sep 17 00:00:00 2001 From: sebelga Date: Wed, 26 Dec 2018 12:30:19 +0100 Subject: [PATCH 4/4] Update snapshot for Remote Cluster list test --- .../__snapshots__/remote_cluster_list.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap index ac66e0319d9fe..65cd36de6ff75 100644 --- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap +++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap @@ -47,7 +47,7 @@ exports[`RemoteClusterList renders empty state when loading is complete and ther class="euiText euiText--medium" >

- Remote clusters create a uni-directional connection between your local cluster and other clusters. + Remote clusters create a uni-directional connection from your local cluster to other clusters.