Skip to content

Commit

Permalink
[CCR] Add unit tests for RemoteClusterForm, RemoteClusterList, and Re…
Browse files Browse the repository at this point in the history 
…moteClusterTable (#27647)

* Use componentDidUpdate instead of getDerivedStateFromProps.

* Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable.

* Add jest mock for eui `makeId()` utility and get deterministic aria IDs for snapshots

* Update snapshot for Remote Cluster list test
  • Loading branch information
@cjcenizal @sebelga
cjcenizal authored and sebelga committed Dec 26, 2018
1 parent e316cc0 commit 1ebd9ac
Show file tree
Hide file tree
Showing 7 changed files with 983 additions and 6 deletions.
343 changes: 343 additions & 0 deletions ...ic/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,343 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`RemoteClusterForm renders untouched state 1`] = `
Array [
<div
class="euiForm"
>
<div
aria-describedby="my-id"
aria-labelledby="my-id-title"
class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
role="group"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
id="my-id-title"
>
Name
</h4>
<div
class="euiText euiText--small euiDescribedFormGroup__description"
id="my-id"
>
<div
class="euiTextColor euiTextColor--subdued"
>
A unique name for the remote cluster.
</div>
</div>
</div>
<div
class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
>
<div
class="euiFormRow euiFormRow--fullWidth"
id="my-id-row"
>
<label
aria-invalid="false"
class="euiFormLabel"
for="my-id"
>
Name
</label>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-describedby="my-id-help"
class="euiFieldText euiFieldText--fullWidth"
id="my-id"
type="text"
value=""
/>
</div>
</div>
<div
class="euiFormHelpText euiFormRow__text"
id="my-id-help"
>
Name can only contain letters, numbers, underscores, and dashes.
</div>
</div>
</div>
</div>
</div>
<div
aria-describedby="my-id"
aria-labelledby="my-id-title"
class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
role="group"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
id="my-id-title"
>
Seed nodes for cluster discovery
</h4>
<div
class="euiText euiText--small euiDescribedFormGroup__description"
id="my-id"
>
<div
class="euiTextColor euiTextColor--subdued"
>
<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
class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
>
<div
class="euiFormRow euiFormRow--fullWidth"
id="my-id-row"
>
<label
aria-invalid="false"
class="euiFormLabel"
for="my-id"
>
Seed nodes
</label>
<div
aria-describedby="my-id-help"
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"
id="my-id"
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
class="euiFormHelpText euiFormRow__text"
id="my-id-help"
>
An IP address or host name, followed by the port.
</div>
</div>
</div>
</div>
</div>
<div
aria-describedby="my-id"
aria-labelledby="my-id-title"
class="euiDescribedFormGroup euiDescribedFormGroup--fullWidth"
role="group"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<h4
class="euiTitle euiTitle--small euiTitle euiTitle--xsmall euiDescribedFormGroup__title"
id="my-id-title"
>
Make remote cluster optional
</h4>
<div
class="euiText euiText--small euiDescribedFormGroup__description"
id="my-id"
>
<div
class="euiTextColor euiTextColor--subdued"
>
<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
class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
>
<div
class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--fullWidth remoteClusterSkipIfUnavailableSwitch"
id="my-id-row"
>
<div
class="euiSwitch"
>
<input
class="euiSwitch__input"
id="my-id"
type="checkbox"
/>
<span
class="euiSwitch__body"
>
<span
class="euiSwitch__thumb"
/>
<span
class="euiSwitch__track"
>
<svg
class="euiIcon euiIcon--medium euiSwitch__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.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
id="cross-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#cross-a"
/>
</svg>
<svg
class="euiIcon euiIcon--medium euiSwitch__icon euiSwitch__icon--checked"
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>
</span>
<label
class="euiSwitch__label"
for="my-id"
>
Skip if unavailable
</label>
</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>,
]
`;
29 changes: 29 additions & 0 deletions ...emote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
* 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';

/**
* 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`, () => {
const component = renderWithIntl(
<RemoteClusterForm
save={() => {}}
cancel={() => {}}
isSaving={false}
saveError={undefined}
/>
);
expect(component).toMatchSnapshot();
});
});
Loading

0 comments on commit 1ebd9ac

Please sign in to comment.