Skip to content

[CCR] Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable #27647

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
loixlab merged 6 commits into from
Dec 26, 2018
Merged

[CCR] Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable #27647

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
209e416
Use componentDidUpdate instead of getDerivedStateFromProps.
cjcenizal Dec 17, 2018
de2331a
Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteCl…
cjcenizal Dec 20, 2018
4911c94
Merge branch 'feature/ccr' into ccr/remote-cluster-unit-tests
loixlab Dec 26, 2018
fc8e5de
Merge branch 'feature/ccr' into ccr/remote-cluster-unit-tests
loixlab Dec 26, 2018
1baa2b5
Add jest mock for eui `makeId()` utility and get deterministic aria I…
loixlab Dec 26, 2018
031fd44
Update snapshot for Remote Cluster list test
loixlab Dec 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 183 additions & 0 deletions ...ic/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`RemoteClusterForm renders untouched state 1`] = `
Array [
<div
class="euiForm"
>
<div>
<div>
A unique name for the remote cluster.
</div>
<div>
<div>
<div>
Name
</div>
<div>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
class="euiFieldText euiFieldText--fullWidth"
type="text"
value=""
/>
</div>
</div>
</div>
<div>
Name can only contain letters, numbers, underscores, and dashes.
</div>
</div>
</div>
</div>
<div>
<div>
<p>
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.
</p>
</div>
<div>
<div>
<div>
Seed nodes
</div>
<div>
<div
aria-expanded="false"
aria-haspopup="listbox"
class="euiComboBox euiComboBox--fullWidth"
role="combobox"
>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap-isClearable"
data-test-subj="comboBoxInput"
tabindex="-1"
>
<p
class="euiComboBoxPlaceholder"
>
host:port
</p>
<div
class="euiComboBox__input"
style="font-size:14px;display:inline-block"
>
<input
data-test-subj="comboBoxSearchInput"
role="textbox"
style="box-sizing:content-box;width:1px"
value=""
/>
<div
style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
An IP address or host name, followed by the port.
</div>
</div>
</div>
</div>
<div>
<div>
<p>
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
<strong>
Skip if unavailable
</strong>
.
<a
class="euiLink euiLink--primary"
href="undefinedguide/en/elasticsearch/reference/undefined/modules-cross-cluster-search.html#_skipping_disconnected_clusters"
rel="noopener noreferrer"
target="_blank"
>
Learn more.
</a>
</p>
</div>
<div>
<div>
<div />
<div>
<div />
</div>
<div />
</div>
</div>
</div>
</div>,
<div
class="euiSpacer euiSpacer--l"
/>,
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--secondary euiButton--fill"
type="button"
>
<span
class="euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiButton__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
/>
</svg>
<span
class="euiButton__text"
>
Save
</span>
</span>
</button>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
>
Cancel
</span>
</span>
</button>
</div>
</div>,
]
`;
50 changes: 50 additions & 0 deletions ...emote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) => (

@loixlab loixlab Dec 26, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated this test to mock the make_id function from eUI and avoid mocking the components.

<div>
<div>{description}</div>
<div>{children}</div>
</div>
),
// Prevent non-deterministic aria IDs from breaking snapshots on each run.
EuiFormRow: ({ label, helpText, children }) => (
<div>
<div>{label}</div>
<div>{children}</div>
<div>{helpText}</div>
</div>
),
// Prevent non-deterministic aria IDs from breaking snapshots on each run.
EuiSwitch: ({ labeln }) => (
<div>{labeln}</div>
),
};
});

describe('RemoteClusterForm', () => {
test(`renders untouched state`, () => {
const component = renderWithIntl(
<RemoteClusterForm
save={() => {}}
cancel={() => {}}
isSaving={false}
saveError={undefined}
/>
);
expect(component).toMatchSnapshot();
});
});
98 changes: 98 additions & 0 deletions ...usters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`] = `
<div
class="euiPage"
>
<div
class="euiPageBody"
>
<div
class="euiPanel euiPanel--paddingLarge euiPageContent"
>
<div
class="euiEmptyPrompt"
>
<svg
class="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon--app"
focusable="false"
height="32"
viewBox="0 0 32 32"
width="32"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="euiIcon__fillSecondary"
d="M16 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"
/>
<path
d="M20 32h-8v-4.06a1 1 0 0 0-1.61-.67l-2.88 2.87-5.65-5.65 2.87-2.87a.92.92 0 0 0 .2-1 .93.93 0 0 0-.86-.6H0V12h4.06a.92.92 0 0 0 .85-.58.94.94 0 0 0-.19-1L1.86 7.51l5.65-5.65 2.87 2.87A1 1 0 0 0 12 4.06V0h8v4.06a1 1 0 0 0 1.61.67l2.87-2.87 5.66 5.66-2.87 2.87a.92.92 0 0 0-.2 1 .93.93 0 0 0 .86.6H32v8h-4.06a.92.92 0 0 0-.85.58.94.94 0 0 0 .19 1l2.87 2.87-5.66 5.66-2.87-2.87a1 1 0 0 0-1.61.67L20 32zm-6-2h4v-2.06a3 3 0 0 1 5-2.08l1.46 1.46 2.83-2.83L25.86 23a3 3 0 0 1 2.08-5H30v-4h-2.06a3 3 0 0 1-2.08-5l1.46-1.46-2.83-2.85L23 6.14a3 3 0 0 1-5-2.08V2h-4v2.06a3 3 0 0 1-5 2.08L7.51 4.69 4.69 7.51 6.14 9a3 3 0 0 1-2.08 5H2v4h2.06a3 3 0 0 1 2.08 5l-1.45 1.49 2.83 2.83L9 25.86a3 3 0 0 1 5 2.08V30z"
/>
</svg>
<div
class="euiSpacer euiSpacer--s"
/>
<span
class="euiTextColor euiTextColor--subdued"
>
<h1
class="euiTitle euiTitle--medium"
>
Add your first remote cluster
</h1>
<div
class="euiSpacer euiSpacer--m"
/>
<div
class="euiText euiText--medium"
>
<p>
Remote clusters create a uni-directional connection between your local cluster and other clusters.
</p>
</div>
</span>
<div
class="euiSpacer euiSpacer--l"
/>
<div
class="euiSpacer euiSpacer--s"
/>
<a
class="euiButton euiButton--primary euiButton--fill"
href="/management/elasticsearch/remote_clusters/add"
>
<span
class="euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiButton__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M7 8v3h1V8h3V7H8V4H7v3H4v1h3zm.5-8C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z"
id="plus_in_circle-a"
/>
</defs>
<use
href="#plus_in_circle-a"
/>
</svg>
<span
class="euiButton__text"
>
Add a remote cluster
</span>
</span>
</a>
</div>
</div>
</div>
</div>
`;
8 changes: 2 additions & 6 deletions x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const RemoteClusterList = injectI18n(
isRemovingCluster: PropTypes.bool,
}

static getDerivedStateFromProps(props) {
componentDidUpdate() {
const {
openDetailPanel,
closeDetailPanel,
Expand All @@ -67,7 +67,7 @@ export const RemoteClusterList = injectI18n(
search,
},
},
} = props;
} = this.props;

const { cluster: clusterName } = extractQueryParams(search);

Expand All @@ -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);
Expand Down
Loading