[CCR] Improve remote clusters test coverage (#29487)

* Add Jest test for RemoteClusterForm validation state. * Extract validation functions out of RemoteClusterForm and add unit tests. - Return null instead of undefined from validators. * Add unit tests for different types of remote clusters in RemoteClusterTable. * Add unit test for RemoteClusterList empty prompt. * Add tests verifying behavior for row link, row delete button, and detail panel delete button. - Use getRouterLinkProps to assign onClick and href to edit buttons in row and detail panel.
elastic · Jan 30, 2019 · b6bc3e2 · b6bc3e2
1 parent 60d94bc
commit b6bc3e2
Show file tree

Hide file tree

Showing 22 changed files with 1,101 additions and 245 deletions.
diff --git a/...ic/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/...ic/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
diff --git a/...ins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js b/...ins/remote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.js
@@ -31,12 +31,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import {
-  isSeedNodeValid,
-  isSeedNodePortValid,
-} from '../../../services';
-
 import { skippingDisconnectedClustersUrl } from '../../../services/documentation_links';
+import { validateName, validateSeeds, validateSeed } from './validators';
 
 const defaultFields = {
   name: '',
@@ -78,39 +74,10 @@ export const RemoteClusterForm = injectI18n(
 
     getFieldsErrors(fields, seedInput = '') {
       const { name, seeds } = fields;
-      const errors = {};
-
-      if (!name || !name.trim()) {
-        errors.name = (
-          <FormattedMessage
-            id="xpack.remoteClusters.form.errors.nameMissing"
-            defaultMessage="Name is required."
-          />
-        );
-      } else if (name.match(/[^a-zA-Z\d\-_]/)) {
-        errors.name = (
-          <FormattedMessage
-            id="xpack.remoteClusters.form.errors.illegalCharacters"
-            defaultMessage="Name contains invalid characters."
-          />
-        );
-      }
-
-      if (!seeds.some(seed => Boolean(seed.trim()))) {
-        // If the user hasn't entered any seeds then we only want to prompt them for some if they
-        // aren't already in the process of entering one in. In this case, we'll just show the
-        // combobox-specific validation.
-        if (!seedInput) {
-          errors.seeds = (
-            <FormattedMessage
-              id="xpack.remoteClusters.form.errors.seedMissing"
-              defaultMessage="At least one seed node is required."
-            />
-          );
-        }
-      }
-
-      return errors;
+      return {
+        name: validateName(name),
+        seeds: validateSeeds(seeds, seedInput),
+      };
     }
 
     onFieldsChange = (changedFields) => {
@@ -156,44 +123,13 @@ export const RemoteClusterForm = injectI18n(
       save(cluster);
     };
 
-    getLocalSeedErrors = (seedNode) => {
-      const { intl } = this.props;
-
-      const errors = [];
-
-      if (!seedNode) {
-        return errors;
-      }
-
-      const isInvalid = !isSeedNodeValid(seedNode);
-
-      if (isInvalid) {
-        errors.push(intl.formatMessage({
-          id: 'xpack.remoteClusters.remoteClusterForm.localSeedError.invalidCharactersMessage',
-          defaultMessage: `Seed node must use host:port format. Example: 127.0.0.1:9400, localhost:9400.
-            Hosts can only consist of letters, numbers, and dashes.`,
-        }));
-      }
-
-      const isPortInvalid = !isSeedNodePortValid(seedNode);
-
-      if (isPortInvalid) {
-        errors.push(intl.formatMessage({
-          id: 'xpack.remoteClusters.remoteClusterForm.localSeedError.invalidPortMessage',
-          defaultMessage: 'A port is required.',
-        }));
-      }
-
-      return errors;
-    };
-
     onCreateSeed = (newSeed) => {
       // If the user just hit enter without typing anything, treat it as a no-op.
       if (!newSeed) {
         return;
       }
 
-      const localSeedErrors = this.getLocalSeedErrors(newSeed);
+      const localSeedErrors = validateSeed(newSeed);
 
       if (localSeedErrors.length !== 0) {
         this.setState({
@@ -228,7 +164,7 @@ export const RemoteClusterForm = injectI18n(
         const { seeds } = fields;
 
         // Allow typing to clear the errors, but not to add new ones.
-        const errors = (!seedInput || this.getLocalSeedErrors(seedInput).length === 0) ? [] : localSeedErrors;
+        const errors = (!seedInput || validateSeed(seedInput).length === 0) ? [] : localSeedErrors;
 
         // EuiComboBox internally checks for duplicates and prevents calling onCreateOption if the
         // input is a duplicate. So we need to surface this error here instead.
@@ -267,7 +203,7 @@ export const RemoteClusterForm = injectI18n(
     hasErrors = () => {
       const { fieldsErrors, localSeedErrors } = this.state;
       const errorValues = Object.values(fieldsErrors);
-      const hasErrors = errorValues.some(error => error !== undefined) || localSeedErrors.length;
+      const hasErrors = errorValues.some(error => error != null) || localSeedErrors.length;
       return hasErrors;
     };
 
@@ -318,6 +254,7 @@ export const RemoteClusterForm = injectI18n(
           fullWidth
         >
           <EuiFormRow
+            data-test-subj="remoteClusterFormSeedNodesFormRow"
             label={(
               <FormattedMessage
                 id="xpack.remoteClusters.remoteClusterForm.fieldSeedsLabel"
@@ -404,6 +341,7 @@ export const RemoteClusterForm = injectI18n(
           fullWidth
         >
           <EuiFormRow
+            data-test-subj="remoteClusterFormSkipUnavailableFormRow"
             className="remoteClusterSkipIfUnavailableSwitch"
             hasEmptyLabelSpace
             fullWidth
@@ -477,6 +415,7 @@ export const RemoteClusterForm = injectI18n(
         <EuiFlexGroup alignItems="center" gutterSize="m">
           <EuiFlexItem grow={false}>
             <EuiButton
+              data-test-subj="remoteClusterFormSaveButton"
               color="secondary"
               iconType="check"
               onClick={this.save}
@@ -559,6 +498,7 @@ export const RemoteClusterForm = injectI18n(
         <Fragment>
           <EuiSpacer size="m" />
           <EuiCallOut
+            data-test-subj="remoteClusterFormGlobalError"
             title={(
               <FormattedMessage
                 id="xpack.remoteClusters.remoteClusterForm.errorTitle"
@@ -614,6 +554,7 @@ export const RemoteClusterForm = injectI18n(
               fullWidth
             >
               <EuiFormRow
+                data-test-subj="remoteClusterFormNameFormRow"
                 label={(
                   <FormattedMessage
                     id="xpack.remoteClusters.remoteClusterForm.fieldNameLabel"

diff --git a/...emote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js b/...emote_clusters/public/sections/components/remote_cluster_form/remote_cluster_form.test.js
@@ -5,25 +5,42 @@
  */
 
 import React from 'react';
-import { renderWithIntl } from 'test_utils/enzyme_helpers';
-
+import { mountWithIntl, renderWithIntl } from 'test_utils/enzyme_helpers';
+import { findTestSubject, takeMountedSnapshot } from '@elastic/eui/lib/test';
 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');
+// Make sure we have deterministic aria IDs.
+jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'mockId');
 
 describe('RemoteClusterForm', () => {
   test(`renders untouched state`, () => {
     const component = renderWithIntl(
       <RemoteClusterForm
         save={() => {}}
-        cancel={() => {}}
-        isSaving={false}
-        saveError={undefined}
       />
     );
     expect(component).toMatchSnapshot();
   });
+
+  describe('validation', () => {
+    test('renders invalid state and a global form error when the user tries to submit an invalid form', () => {
+      const component = mountWithIntl(
+        <RemoteClusterForm save={() => {}}/>
+      );
+
+      findTestSubject(component, 'remoteClusterFormSaveButton').simulate('click');
+
+      const fieldsSnapshot = [
+        'remoteClusterFormNameFormRow',
+        'remoteClusterFormSeedNodesFormRow',
+        'remoteClusterFormSkipUnavailableFormRow',
+        'remoteClusterFormGlobalError',
+      ].map(testSubject => {
+        const mountedField = findTestSubject(component, testSubject);
+        return takeMountedSnapshot(mountedField);
+      });
+
+      expect(fieldsSnapshot).toMatchSnapshot();
+    });
+  });
 });
diff --git a/...ctions/components/remote_cluster_form/validators/__snapshots__/validate_name.test.js.snap b/...ctions/components/remote_cluster_form/validators/__snapshots__/validate_name.test.js.snap
@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validateName rejects empty input '   ' 1`] = `
+<FormattedMessage
+  defaultMessage="Name is required."
+  id="xpack.remoteClusters.form.errors.nameMissing"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects empty input 'null' 1`] = `
+<FormattedMessage
+  defaultMessage="Name is required."
+  id="xpack.remoteClusters.form.errors.nameMissing"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects empty input 'undefined' 1`] = `
+<FormattedMessage
+  defaultMessage="Name is required."
+  id="xpack.remoteClusters.form.errors.nameMissing"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters ' ' 1`] = `
+<FormattedMessage
+  defaultMessage="Name is required."
+  id="xpack.remoteClusters.form.errors.nameMissing"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '!' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '#' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '$' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '%' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '&' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '(' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters ')' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '*' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '+' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters ',' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '.' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '<' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '>' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '?' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '@' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
+
+exports[`validateName rejects invalid characters '^' 1`] = `
+<FormattedMessage
+  defaultMessage="Name contains invalid characters."
+  id="xpack.remoteClusters.form.errors.illegalCharacters"
+  values={Object {}}
+/>
+`;
diff --git a/...tions/components/remote_cluster_form/validators/__snapshots__/validate_seeds.test.js.snap b/...tions/components/remote_cluster_form/validators/__snapshots__/validate_seeds.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validateSeeds rejects empty seeds when there's no input 1`] = `
+<FormattedMessage
+  defaultMessage="At least one seed node is required."
+  id="xpack.remoteClusters.form.errors.seedMissing"
+  values={Object {}}
+/>
+`;
diff --git a/...lugins/remote_clusters/public/sections/components/remote_cluster_form/validators/index.js b/...lugins/remote_clusters/public/sections/components/remote_cluster_form/validators/index.js
@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { validateName } from './validate_name';
+export { validateSeed } from './validate_seed';
+export { validateSeeds } from './validate_seeds';