[Management] Index pattern step in React! (#15936) (#16063)

* Index pattern step in React! * Remove dead lines * Ensure this only shows up when applicable * PR feedback * Use pager * Add tests for lib/ * PR feedback * Tests and PR feedback * More tests and PR feedback * New jest functionality
elastic · Jan 16, 2018 · 0b36c0a · 0b36c0a
1 parent a8198cc
commit 0b36c0a
Show file tree

Hide file tree

Showing 46 changed files with 2,144 additions and 410 deletions.
diff --git a/...ard/components/step_index_pattern/__tests__/__snapshots__/step_index_pattern.test.js.snap b/...ard/components/step_index_pattern/__tests__/__snapshots__/step_index_pattern.test.js.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StepIndexPattern should render normally 1`] = `
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="l"
+>
+  <Header
+    characterList="\\\\, /, ?, \\", <, >, |"
+    errors={Array []}
+    goToNextStep={[Function]}
+    isInputInvalid={false}
+    isNextStepDisabled={true}
+    onQueryChanged={[Function]}
+    query="k"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <StatusMessage
+    matchedIndices={
+      Object {
+        "allIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+          Object {
+            "name": "es",
+          },
+        ],
+        "exactMatchedIndices": Array [],
+        "partialMatchedIndices": Array [],
+        "visibleIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+          Object {
+            "name": "es",
+          },
+        ],
+      }
+    }
+    query="k"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <IndicesList
+    indices={
+      Array [
+        Object {
+          "name": "kibana",
+        },
+        Object {
+          "name": "es",
+        },
+      ]
+    }
+  />
+</EuiPanel>
+`;
+
+exports[`StepIndexPattern should render some indices 1`] = `
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="l"
+>
+  <Header
+    characterList="\\\\, /, ?, \\", <, >, |"
+    errors={Array []}
+    goToNextStep={[Function]}
+    isInputInvalid={false}
+    isNextStepDisabled={false}
+    onQueryChanged={[Function]}
+    query="k*"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <StatusMessage
+    matchedIndices={
+      Object {
+        "allIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+          Object {
+            "name": "es",
+          },
+        ],
+        "exactMatchedIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+        ],
+        "partialMatchedIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+        ],
+        "visibleIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+        ],
+      }
+    }
+    query="k*"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <IndicesList
+    indices={
+      Array [
+        Object {
+          "name": "kibana",
+        },
+      ]
+    }
+  />
+</EuiPanel>
+`;
+
+exports[`StepIndexPattern should render the loading state 1`] = `
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="l"
+>
+  <Header
+    characterList="\\\\, /, ?, \\", <, >, |"
+    errors={Array []}
+    goToNextStep={[Function]}
+    isInputInvalid={false}
+    isNextStepDisabled={true}
+    onQueryChanged={[Function]}
+    query="k"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <LoadingIndices />
+  <EuiSpacer
+    size="s"
+  />
+</EuiPanel>
+`;
+
+exports[`StepIndexPattern should show errors 1`] = `
+<EuiPanel
+  grow={true}
+  hasShadow={false}
+  paddingSize="l"
+>
+  <Header
+    characterList="\\\\, /, ?, \\", <, >, |"
+    errors={
+      Array [
+        "Your input contains invalid characters or spaces. Please omit: \\\\, /, ?, \\", <, >, |",
+      ]
+    }
+    goToNextStep={[Function]}
+    isInputInvalid={true}
+    isNextStepDisabled={true}
+    onQueryChanged={[Function]}
+    query="?"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <StatusMessage
+    matchedIndices={
+      Object {
+        "allIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+          Object {
+            "name": "es",
+          },
+        ],
+        "exactMatchedIndices": Array [],
+        "partialMatchedIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+        ],
+        "visibleIndices": Array [
+          Object {
+            "name": "kibana",
+          },
+        ],
+      }
+    }
+    query="?"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <IndicesList
+    indices={
+      Array [
+        Object {
+          "name": "kibana",
+        },
+      ]
+    }
+  />
+</EuiPanel>
+`;
diff --git a/...indices/create_index_pattern_wizard/components/step_index_pattern/__tests__/index.test.js b/...indices/create_index_pattern_wizard/components/step_index_pattern/__tests__/index.test.js
@@ -0,0 +1,31 @@
+const render = jest.fn();
+const unmountComponentAtNode = jest.fn();
+
+jest.doMock('react-dom', () => ({ render, unmountComponentAtNode }));
+
+const { renderStepIndexPattern, destroyStepIndexPattern } = require('../index');
+
+describe('StepIndexPatternRender', () => {
+  beforeEach(() => {
+    render.mockClear();
+    unmountComponentAtNode.mockClear();
+  });
+
+  it('should call render', () => {
+    renderStepIndexPattern(
+      'reactDiv',
+      [],
+      '',
+      false,
+      {},
+      () => {}
+    );
+
+    expect(render.mock.calls.length).toBe(1);
+  });
+
+  it('should call unmountComponentAtNode', () => {
+    destroyStepIndexPattern('reactDiv');
+    expect(unmountComponentAtNode.mock.calls.length).toBe(1);
+  });
+});
diff --git a/...e_index_pattern_wizard/components/step_index_pattern/__tests__/step_index_pattern.test.js b/...e_index_pattern_wizard/components/step_index_pattern/__tests__/step_index_pattern.test.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { StepIndexPattern } from '../step_index_pattern';
+
+jest.mock('../components/indices_list', () => ({ IndicesList: 'IndicesList' }));
+jest.mock('../components/loading_indices', () => ({ LoadingIndices: 'LoadingIndices' }));
+jest.mock('../components/status_message', () => ({ StatusMessage: 'StatusMessage' }));
+jest.mock('../components/header', () => ({ Header: 'Header' }));
+jest.mock('../../../lib/create_reasonable_wait', () => ({ createReasonableWait: fn => fn() }));
+jest.mock('../../../lib/get_indices', () => ({
+  getIndices: () => {
+    return [
+      { name: 'kibana' },
+    ];
+  },
+}));
+
+const allIndices = [{ name: 'kibana' }, { name: 'es' }];
+const esService = {};
+const goToNextStep = () => {};
+
+describe('StepIndexPattern', () => {
+  it('should render normally', () => {
+    const component = shallow(
+      <StepIndexPattern
+        allIndices={allIndices}
+        isIncludingSystemIndices={false}
+        esService={esService}
+        goToNextStep={goToNextStep}
+        initialQuery={'k'}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render the loading state', () => {
+    const component = shallow(
+      <StepIndexPattern
+        allIndices={allIndices}
+        isIncludingSystemIndices={false}
+        esService={esService}
+        goToNextStep={goToNextStep}
+      />
+    );
+
+    component.setState({ query: 'k', isLoadingIndices: true });
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should render some indices', async () => {
+    const component = shallow(
+      <StepIndexPattern
+        allIndices={allIndices}
+        isIncludingSystemIndices={false}
+        esService={esService}
+        goToNextStep={goToNextStep}
+      />
+    );
+
+    const instance = component.instance();
+
+    await instance.onQueryChanged({
+      nativeEvent: { data: 'k' },
+      target: { value: 'k' }
+    });
+
+    component.update();
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should show errors', async () => {
+    const component = shallow(
+      <StepIndexPattern
+        allIndices={allIndices}
+        isIncludingSystemIndices={false}
+        esService={esService}
+        goToNextStep={goToNextStep}
+      />
+    );
+
+    const instance = component.instance();
+
+    await instance.onQueryChanged({
+      nativeEvent: { data: '?' },
+      target: { value: '?' }
+    });
+
+    component.update();
+
+    expect(component).toMatchSnapshot();
+  });
+});