Fix snapshots (#32834)

* Made all existing snapshots into shallow calls
* Added any missing snapshots that looked like would be useful
* Re-enabled the snapshots by removing a line in `.gitattributes`
* Removed the i18n excludes since we upgraded babel we don't need them
* https://github.com/elastic/ingest-dev/issues/314
* https://github.com/elastic/ingest-dev/issues/309

.i18nrc.json

@@ -56,20 +56,6 @@
     "x-pack/plugins/infra/public/graphql/types.ts",
     "x-pack/plugins/infra/public/utils/loading_state/loading_result.ts",
     "x-pack/plugins/infra/server/graphql/types.ts",
-    "x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts",
-    "x-pack/plugins/secops/public/components/flyout/header/index.tsx",
-    "x-pack/plugins/secops/public/components/flyout/index.tsx",
-    "x-pack/plugins/secops/public/components/flyout/resize_handle.tsx",
-    "x-pack/plugins/secops/public/components/notes/helpers.tsx",
-    "x-pack/plugins/secops/public/components/resize_handle/index.tsx",
-    "x-pack/plugins/secops/public/components/timeline/body/renderers/column_renderer.ts",
-    "x-pack/plugins/secops/public/components/timeline/body/renderers/suricata_rules_ref.ts",
-    "x-pack/plugins/secops/public/components/timeline/events.ts",
-    "x-pack/plugins/secops/public/components/timeline/properties/helpers.tsx",
-    "x-pack/plugins/secops/public/components/timeline/properties/index.tsx",
-    "x-pack/plugins/secops/public/components/timeline/search_or_filter/search_or_filter.tsx",
-    "x-pack/plugins/secops/public/lib/clipboard/clipboard.tsx",
-    "x-pack/plugins/secops/server/graphql/types.ts",
-    "x-pack/plugins/secops/public/components/timeline/body/renderers/row_renderer.ts"
+    "x-pack/plugins/infra/server/lib/domains/log_entries_domain/log_entries_domain.ts"
   ]
 }

x-pack/plugins/secops/.gitattributes

@@ -3,4 +3,3 @@
 x-pack/plugins/secops/public/graphql/types.ts linguist-generated=true
 x-pack/plugins/secops/server/graphql/types.ts linguist-generated=true
 x-pack/plugins/secops/public/graphql/introspection.json linguist-generated=true
-*.test.tsx.snap linguist-generated=true

x-pack/plugins/secops/public/components/app_settings/__snapshots__/app_settings_popover.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppSettingsPopover rendering it renders against snapshot 1`] = `
+<Component
+  onClick={[Function]}
+  onClose={[Function]}
+  showPopover={false}
+/>
+`;

x-pack/plugins/secops/public/components/app_settings/app_settings_popover.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
 
@@ -12,6 +13,14 @@ import { AppSettingsPopover } from './app_settings_popover';
 
 describe('AppSettingsPopover', () => {
   describe('rendering', () => {
+    test('it renders against snapshot', () => {
+      const wrapper = shallow(
+        <AppSettingsPopover onClick={noop} onClose={noop} showPopover={false} />
+      );
+
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders a settings gear icon', () => {
       const wrapper = mount(
         <AppSettingsPopover onClick={noop} onClose={noop} showPopover={false} />

x-pack/plugins/secops/public/components/autocomplete_field/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Autocomplete rendering it renders against snapshot 1`] = `
+<EuiOutsideClickDetector
+  onOutsideClick={[Function]}
+>
+  <styled.div>
+    <EuiFieldSearch
+      compressed={false}
+      fullWidth={true}
+      incremental={false}
+      inputRef={[Function]}
+      isInvalid={true}
+      isLoading={false}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onSearch={[Function]}
+      placeholder="myPlaceholder"
+      value=""
+    />
+  </styled.div>
+</EuiOutsideClickDetector>
+`;

x-pack/plugins/secops/public/components/autocomplete_field/index.test.tsx

@@ -6,7 +6,8 @@
 
 import { EuiFieldSearch } from '@elastic/eui';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
@@ -99,6 +100,24 @@ const mockAutoCompleteData: AutocompleteSuggestion[] = [
 
 describe('Autocomplete', () => {
   describe('rendering', () => {
+    test('it renders against snapshot', () => {
+      const placeholder = 'myPlaceholder';
+
+      const wrapper = shallow(
+        <AutocompleteField
+          isLoadingSuggestions={false}
+          isValid={false}
+          loadSuggestions={noop}
+          onChange={noop}
+          onSubmit={noop}
+          placeholder={placeholder}
+          suggestions={[]}
+          value={''}
+        />
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it is rendering with placeholder', () => {
       const placeholder = 'myPlaceholder';
 

x-pack/plugins/secops/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DragDropContextWrapper rendering it renders against the snapshot 1`] = `
+<Connect(pure(Component))>
+  Drag drop context wrapper children
+</Connect(pure(Component))>
+`;

x-pack/plugins/secops/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DraggableWrapper rendering it renders against the snapshot 1`] = `
+<ThemeProvider
+  theme={[Function]}
+>
+  <Connect(pure(Component))>
+    <Connect(DraggableWrapperComponent)
+      dataProvider={
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 1",
+          },
+        }
+      }
+      render={[Function]}
+    />
+  </Connect(pure(Component))>
+</ThemeProvider>
+`;

x-pack/plugins/secops/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DroppableWrapper rendering it renders against the snapshot 1`] = `
+<ThemeProvider
+  theme={[Function]}
+>
+  <Connect(pure(Component))>
+    <pure(Component)
+      droppableId="testing"
+    >
+      draggable wrapper content
+    </pure(Component)>
+  </Connect(pure(Component))>
+</ThemeProvider>
+`;

x-pack/plugins/secops/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 
@@ -14,6 +15,18 @@ import { DragDropContextWrapper } from './drag_drop_context_wrapper';
 
 describe('DragDropContextWrapper', () => {
   describe('rendering', () => {
+    test('it renders against the snapshot', () => {
+      const message = 'Drag drop context wrapper children';
+
+      const store = createStore();
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <DragDropContextWrapper>{message}</DragDropContextWrapper>
+        </ReduxStoreProvider>
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the children', () => {
       const message = 'Drag drop context wrapper children';
 

x-pack/plugins/secops/public/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -5,7 +5,8 @@
  */
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
@@ -28,6 +29,20 @@ describe('DraggableWrapper', () => {
   });
 
   describe('rendering', () => {
+    test('it renders against the snapshot', () => {
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+            <DragDropContextWrapper>
+              <DraggableWrapper dataProvider={dataProvider} render={() => message} />
+            </DragDropContextWrapper>
+          </ThemeProvider>
+        </ReduxStoreProvider>
+      );
+
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the children passed to the render prop', () => {
       const wrapper = mount(
         <ReduxStoreProvider store={store}>

x-pack/plugins/secops/public/components/drag_and_drop/droppable_wrapper.test.tsx

@@ -5,7 +5,8 @@
  */
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
@@ -17,6 +18,23 @@ import { DroppableWrapper } from './droppable_wrapper';
 
 describe('DroppableWrapper', () => {
   describe('rendering', () => {
+    test('it renders against the snapshot', () => {
+      const message = 'draggable wrapper content';
+      const store = createStore();
+
+      const wrapper = shallow(
+        <ReduxStoreProvider store={store}>
+          <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
+            <DragDropContextWrapper>
+              <DroppableWrapper droppableId="testing">{message}</DroppableWrapper>
+            </DragDropContextWrapper>
+          </ThemeProvider>
+        </ReduxStoreProvider>
+      );
+
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the children', () => {
       const message = 'draggable wrapper content';
       const store = createStore();

x-pack/plugins/secops/public/components/empty_value/__snapshots__/empty_value.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyValue it renders against snapshot 1`] = `
+<p>
+  (Empty String)
+</p>
+`;

x-pack/plugins/secops/public/components/empty_value/empty_value.test.tsx

@@ -6,9 +6,10 @@
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import {
   defaultToEmptyTag,
@@ -22,6 +23,15 @@ import {
 describe('EmptyValue', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
 
+  test('it renders against snapshot', () => {
+    const wrapper = shallowWithIntl(
+      <ThemeProvider theme={theme}>
+        <p>{getEmptyString()}</p>
+      </ThemeProvider>
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   describe('#getEmptyValue', () =>
     test('should return an empty value', () => expect(getEmptyValue()).toBe('--')));
 

x-pack/plugins/secops/public/components/event_details/__snapshots__/event_details.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EventDetails rendering should match snapshot 1`] = `
+<Component>
+  <pure(Component)
+    data={
+      Object {
+        "_id": "1",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "action": "Action",
+          "category": "Access",
+          "id": 1,
+          "module": "nginx",
+          "severity": 3,
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "apache",
+        },
+        "source": Object {
+          "ip": "192.168.0.1",
+          "port": 80,
+        },
+        "timestamp": "2018-11-05T19:03:25.937Z",
+        "user": Object {
+          "id": 1,
+          "name": "john.dee",
+        },
+      }
+    }
+    onViewSelected={[MockFunction]}
+    view="table-view"
+  />
+</Component>
+`;

x-pack/plugins/secops/public/components/event_details/event_details.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { mockEcsData, TestProviders } from '../../mock';
@@ -12,6 +13,17 @@ import { mockEcsData, TestProviders } from '../../mock';
 import { EventDetails } from './event_details';
 
 describe('EventDetails', () => {
+  describe('rendering', () => {
+    test('should match snapshot', () => {
+      const wrapper = shallow(
+        <TestProviders>
+          <EventDetails data={mockEcsData[0]} view="table-view" onViewSelected={jest.fn()} />
+        </TestProviders>
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+  });
+
   describe('tabs', () => {
     ['Table', 'JSON View'].forEach(tab => {
       test(`it renders the ${tab} tab`, () => {

x-pack/plugins/secops/public/components/flyout/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flyout rendering it renders correctly against snapshot 1`] = `
+<Component>
+  <Connect(pure(Component))
+    flyoutHeight={980}
+    headerHeight={48}
+    timelineId="test"
+    usersViewing={
+      Array [
+        "elastic",
+      ]
+    }
+  />
+</Component>
+`;

x-pack/plugins/secops/public/components/flyout/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { set } from 'lodash/fp';
 import * as React from 'react';
 import { ActionCreator } from 'typescript-fsa';
@@ -23,6 +24,20 @@ describe('Flyout', () => {
   const state: State = mockGlobalState;
 
   describe('rendering', () => {
+    test('it renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <TestProviders>
+          <Flyout
+            flyoutHeight={testFlyoutHeight}
+            headerHeight={flyoutHeaderHeight}
+            timelineId="test"
+            usersViewing={usersViewing}
+          />
+        </TestProviders>
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the default flyout state as a button', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/flyout/pane/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pane renders correctly against snapshot 1`] = `
+<Component>
+  <Connect(FlyoutPaneComponent)
+    flyoutHeight={980}
+    headerHeight={48}
+    onClose={[MockFunction]}
+    timelineId="test"
+    usersViewing={
+      Array [
+        "elastic",
+      ]
+    }
+    width={640}
+  >
+    <span>
+      I am a child of flyout
+    </span>
+    ,
+  </Connect(FlyoutPaneComponent)>
+</Component>
+`;

x-pack/plugins/secops/public/components/flyout/pane/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
 
@@ -18,6 +19,24 @@ const testWidth = 640;
 const usersViewing = ['elastic'];
 
 describe('Pane', () => {
+  test('renders correctly against snapshot', () => {
+    const EmptyComponent = shallow(
+      <TestProviders>
+        <Pane
+          flyoutHeight={testFlyoutHeight}
+          headerHeight={flyoutHeaderHeight}
+          onClose={jest.fn()}
+          timelineId={'test'}
+          usersViewing={usersViewing}
+          width={testWidth}
+        >
+          <span>I am a child of flyout</span>,
+        </Pane>
+      </TestProviders>
+    );
+    expect(toJson(EmptyComponent)).toMatchSnapshot();
+  });
+
   test('it should NOT let the flyout expand to take up the full width of the element that contains it', () => {
     const wrapper = mount(
       <TestProviders>

x-pack/plugins/secops/public/components/formatted_date/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreferenceFormattedDate rendering renders correctly against snapshot 1`] = `
+<Component
+  value="2019-02-25T22:27:05.000Z"
+/>
+`;

x-pack/plugins/secops/public/components/formatted_date/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import moment from 'moment-timezone';
 import * as React from 'react';
 
@@ -27,6 +28,11 @@ describe('PreferenceFormattedDate', () => {
         )
         .format(config.dateFormat);
 
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(<PreferenceFormattedDate value={isoDateString} />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the UTC ISO8601 date string supplied when no configuration exists', () => {
       const wrapper = mount(
         <KibanaConfigContext.Provider value={{}}>

x-pack/plugins/secops/public/components/markdown/__snapshots__/index.test.tsx.snap

@@ -1,620 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Markdown markdown tables it renders the expected table content 1`] = `
-<pure(Component)
+<Component
   raw="| we | support | markdown | tables |
 |---------|---------|------------|--------|
 | because | tables  | are        | pretty |
 | useful  | for     | formatting | data   |"
->
-  <Component
-    raw="| we | support | markdown | tables |
-|---------|---------|------------|--------|
-| because | tables  | are        | pretty |
-| useful  | for     | formatting | data   |"
-  >
-    <ReactMarkdown
-      astPlugins={Array []}
-      data-test-subj="markdown"
-      escapeHtml={true}
-      linkTarget="_blank"
-      plugins={Array []}
-      rawSourcePos={false}
-      renderers={
-        Object {
-          "root": [Function],
-          "table": [Function],
-          "tableCell": [Function],
-          "tableHead": [Function],
-          "tableRow": [Function],
-        }
-      }
-      skipHtml={false}
-      source="| we | support | markdown | tables |
-|---------|---------|------------|--------|
-| because | tables  | are        | pretty |
-| useful  | for     | formatting | data   |"
-      sourcePos={false}
-      transformLinkUri={[Function]}
-    >
-      <root
-        key="root-1-1"
-      >
-        <EuiText
-          data-test-subj="markdown-root"
-          grow={false}
-          size="m"
-        >
-          <div
-            className="euiText euiText--medium euiText--constrainedWidth"
-            data-test-subj="markdown-root"
-          >
-            <table
-              columnAlignment={
-                Array [
-                  null,
-                  null,
-                  null,
-                  null,
-                ]
-              }
-              key="table-1-1"
-            >
-              <table
-                className="euiTable euiTable--responsive"
-                data-test-subj="markdown-table"
-              >
-                <tableHead
-                  columnAlignment={
-                    Array [
-                      null,
-                      null,
-                      null,
-                      null,
-                    ]
-                  }
-                  key="tableHead-1-1"
-                >
-                  <styled.thead
-                    data-test-subj="markdown-table-header"
-                  >
-                    <thead
-                      className="sc-bdVaJa koclZm"
-                      data-test-subj="markdown-table-header"
-                    >
-                      <tableRow
-                        columnAlignment={
-                          Array [
-                            null,
-                            null,
-                            null,
-                            null,
-                          ]
-                        }
-                        isHeader={true}
-                        key="tableRow-1-1"
-                      >
-                        <EuiTableRow
-                          data-test-subj="markdown-table-row"
-                        >
-                          <tr
-                            className="euiTableRow"
-                            data-test-subj="markdown-table-row"
-                          >
-                            <tableCell
-                              align={null}
-                              isHeader={true}
-                              key="tableCell-1-3"
-                            >
-                              <EuiTableRowCell
-                                align="left"
-                                data-test-subj="markdown-table-cell"
-                                mobileOptions={
-                                  Object {
-                                    "show": true,
-                                  }
-                                }
-                                textOnly={true}
-                              >
-                                <td
-                                  className="euiTableRowCell"
-                                  data-test-subj="markdown-table-cell"
-                                >
-                                  <div
-                                    className="euiTableCellContent"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <TextRenderer
-                                        key="text-1-3"
-                                        nodeKey="text-1-3"
-                                        value="we"
-                                      >
-                                        we
-                                      </TextRenderer>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tableCell>
-                            <tableCell
-                              align={null}
-                              isHeader={true}
-                              key="tableCell-1-8"
-                            >
-                              <EuiTableRowCell
-                                align="left"
-                                data-test-subj="markdown-table-cell"
-                                mobileOptions={
-                                  Object {
-                                    "show": true,
-                                  }
-                                }
-                                textOnly={true}
-                              >
-                                <td
-                                  className="euiTableRowCell"
-                                  data-test-subj="markdown-table-cell"
-                                >
-                                  <div
-                                    className="euiTableCellContent"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <TextRenderer
-                                        key="text-1-8"
-                                        nodeKey="text-1-8"
-                                        value="support"
-                                      >
-                                        support
-                                      </TextRenderer>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tableCell>
-                            <tableCell
-                              align={null}
-                              isHeader={true}
-                              key="tableCell-1-18"
-                            >
-                              <EuiTableRowCell
-                                align="left"
-                                data-test-subj="markdown-table-cell"
-                                mobileOptions={
-                                  Object {
-                                    "show": true,
-                                  }
-                                }
-                                textOnly={true}
-                              >
-                                <td
-                                  className="euiTableRowCell"
-                                  data-test-subj="markdown-table-cell"
-                                >
-                                  <div
-                                    className="euiTableCellContent"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <TextRenderer
-                                        key="text-1-18"
-                                        nodeKey="text-1-18"
-                                        value="markdown"
-                                      >
-                                        markdown
-                                      </TextRenderer>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tableCell>
-                            <tableCell
-                              align={null}
-                              isHeader={true}
-                              key="tableCell-1-29"
-                            >
-                              <EuiTableRowCell
-                                align="left"
-                                data-test-subj="markdown-table-cell"
-                                mobileOptions={
-                                  Object {
-                                    "show": true,
-                                  }
-                                }
-                                textOnly={true}
-                              >
-                                <td
-                                  className="euiTableRowCell"
-                                  data-test-subj="markdown-table-cell"
-                                >
-                                  <div
-                                    className="euiTableCellContent"
-                                  >
-                                    <span
-                                      className="euiTableCellContent__text"
-                                    >
-                                      <TextRenderer
-                                        key="text-1-29"
-                                        nodeKey="text-1-29"
-                                        value="tables"
-                                      >
-                                        tables
-                                      </TextRenderer>
-                                    </span>
-                                  </div>
-                                </td>
-                              </EuiTableRowCell>
-                            </tableCell>
-                          </tr>
-                        </EuiTableRow>
-                      </tableRow>
-                    </thead>
-                  </styled.thead>
-                </tableHead>
-                <bound SimpleRenderer
-                  columnAlignment={
-                    Array [
-                      null,
-                      null,
-                      null,
-                      null,
-                    ]
-                  }
-                  key="tableBody-3-1"
-                >
-                  <tbody>
-                    <tableRow
-                      columnAlignment={
-                        Array [
-                          null,
-                          null,
-                          null,
-                          null,
-                        ]
-                      }
-                      isHeader={false}
-                      key="tableRow-3-1"
-                    >
-                      <EuiTableRow
-                        data-test-subj="markdown-table-row"
-                      >
-                        <tr
-                          className="euiTableRow"
-                          data-test-subj="markdown-table-row"
-                        >
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-3-3"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-3-3"
-                                      nodeKey="text-3-3"
-                                      value="because"
-                                    >
-                                      because
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-3-13"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-3-13"
-                                      nodeKey="text-3-13"
-                                      value="tables"
-                                    >
-                                      tables
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-3-23"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-3-23"
-                                      nodeKey="text-3-23"
-                                      value="are"
-                                    >
-                                      are
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-3-36"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-3-36"
-                                      nodeKey="text-3-36"
-                                      value="pretty"
-                                    >
-                                      pretty
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                        </tr>
-                      </EuiTableRow>
-                    </tableRow>
-                    <tableRow
-                      columnAlignment={
-                        Array [
-                          null,
-                          null,
-                          null,
-                          null,
-                        ]
-                      }
-                      isHeader={false}
-                      key="tableRow-4-1"
-                    >
-                      <EuiTableRow
-                        data-test-subj="markdown-table-row"
-                      >
-                        <tr
-                          className="euiTableRow"
-                          data-test-subj="markdown-table-row"
-                        >
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-4-3"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-4-3"
-                                      nodeKey="text-4-3"
-                                      value="useful"
-                                    >
-                                      useful
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-4-13"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-4-13"
-                                      nodeKey="text-4-13"
-                                      value="for"
-                                    >
-                                      for
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-4-23"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-4-23"
-                                      nodeKey="text-4-23"
-                                      value="formatting"
-                                    >
-                                      formatting
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                          <tableCell
-                            align={null}
-                            isHeader={false}
-                            key="tableCell-4-36"
-                          >
-                            <EuiTableRowCell
-                              align="left"
-                              data-test-subj="markdown-table-cell"
-                              mobileOptions={
-                                Object {
-                                  "show": true,
-                                }
-                              }
-                              textOnly={true}
-                            >
-                              <td
-                                className="euiTableRowCell"
-                                data-test-subj="markdown-table-cell"
-                              >
-                                <div
-                                  className="euiTableCellContent"
-                                >
-                                  <span
-                                    className="euiTableCellContent__text"
-                                  >
-                                    <TextRenderer
-                                      key="text-4-36"
-                                      nodeKey="text-4-36"
-                                      value="data"
-                                    >
-                                      data
-                                    </TextRenderer>
-                                  </span>
-                                </div>
-                              </td>
-                            </EuiTableRowCell>
-                          </tableCell>
-                        </tr>
-                      </EuiTableRow>
-                    </tableRow>
-                  </tbody>
-                </bound SimpleRenderer>
-              </table>
-            </table>
-          </div>
-        </EuiText>
-      </root>
-    </ReactMarkdown>
-  </Component>
-</pure(Component)>
+/>
 `;

x-pack/plugins/secops/public/components/markdown/__snapshots__/markdown_hint.test.tsx.snap

@@ -1,155 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MarkdownHint rendering it renders the expected hints 1`] = `
-.c1 {
-  font-weight: bold;
-  margin-right: 5px;
-}
-
-.c0 {
-  visibility: inline;
-}
-
-.c6 {
-  margin-left: 5px;
-}
-
-.c2 {
-  font-style: italic;
-  margin-right: 5px;
-}
-
-.c5 {
-  -webkit-text-decoration: line-through;
-  text-decoration: line-through;
-}
-
-.c3 {
-  font-family: monospace;
-  margin-right: 5px;
-}
-
-.c4 {
-  margin-right: 5px;
-}
-
-<pure(Component)
+<Component
   show={true}
->
-  <Component
-    show={true}
-  >
-    <Styled(EuiText)
-      color="subdued"
-      data-test-subj="markdown-hint"
-      size="xs"
-      visibility="inline"
-    >
-      <EuiText
-        className="c0"
-        color="subdued"
-        data-test-subj="markdown-hint"
-        grow={true}
-        size="xs"
-        visibility="inline"
-      >
-        <div
-          className="euiText euiText--extraSmall c0"
-          data-test-subj="markdown-hint"
-          visibility="inline"
-        >
-          <EuiTextColor
-            color="subdued"
-            component="div"
-          >
-            <div
-              className="euiTextColor euiTextColor--subdued"
-            >
-              <styled.span
-                data-test-subj="bold-hint"
-              >
-                <span
-                  className="c1"
-                  data-test-subj="bold-hint"
-                >
-                  **bold**
-                </span>
-              </styled.span>
-              <styled.span
-                data-test-subj="italic-hint"
-              >
-                <span
-                  className="c2"
-                  data-test-subj="italic-hint"
-                >
-                  _italics_
-                </span>
-              </styled.span>
-              <styled.span
-                data-test-subj="code-hint"
-              >
-                <span
-                  className="c3"
-                  data-test-subj="code-hint"
-                >
-                  \`code\`
-                </span>
-              </styled.span>
-              <styled.span>
-                <span
-                  className="c4"
-                >
-                  [link](url)
-                </span>
-              </styled.span>
-              <styled.span>
-                <span
-                  className="c4"
-                >
-                  * bullet
-                </span>
-              </styled.span>
-              <styled.span
-                data-test-subj="preformatted-hint"
-              >
-                <span
-                  className="c3"
-                  data-test-subj="preformatted-hint"
-                >
-                  \`\`\`preformatted\`\`\`
-                </span>
-              </styled.span>
-              <styled.span>
-                <span
-                  className="c4"
-                >
-                  &gt;quote
-                </span>
-              </styled.span>
-              ~~
-              <styled.span
-                data-test-subj="strikethrough-hint"
-              >
-                <span
-                  className="c5"
-                  data-test-subj="strikethrough-hint"
-                >
-                  strikethrough
-                </span>
-              </styled.span>
-              ~~
-              <styled.span>
-                <span
-                  className="c6"
-                >
-                  ![image](url)
-                </span>
-              </styled.span>
-            </div>
-          </EuiTextColor>
-        </div>
-      </EuiText>
-    </Styled(EuiText)>
-  </Component>
-</pure(Component)>
+/>
 `;

x-pack/plugins/secops/public/components/markdown/index.test.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
@@ -98,7 +98,7 @@ describe('Markdown', () => {
     });
 
     test('it renders the expected table content', () => {
-      const wrapper = mount(<Markdown raw={rawTable} />);
+      const wrapper = shallow(<Markdown raw={rawTable} />);
 
       expect(toJson(wrapper)).toMatchSnapshot();
     });

x-pack/plugins/secops/public/components/markdown/markdown_hint.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
@@ -77,7 +77,7 @@ describe('MarkdownHint', () => {
 
   describe('rendering', () => {
     test('it renders the expected hints', () => {
-      const wrapper = mount(<MarkdownHint show={true} />);
+      const wrapper = shallow(<MarkdownHint show={true} />);
 
       expect(toJson(wrapper)).toMatchSnapshot();
     });

x-pack/plugins/secops/public/components/notes/add_note/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddNote renders correctly 1`] = `
+<Component
+  associateNote={[MockFunction]}
+  getNewNoteId={[MockFunction]}
+  newNote="The contents of a new note"
+  onCancelAddNote={[MockFunction]}
+  updateNewNote={[MockFunction]}
+  updateNote={[MockFunction]}
+/>
+`;

x-pack/plugins/secops/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewNote renders correctly 1`] = `
+<Component
+  note="The contents of a new note"
+  noteInputHeight={200}
+  updateNewNote={[MockFunction]}
+/>
+`;

x-pack/plugins/secops/public/components/notes/add_note/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
 
@@ -13,6 +14,20 @@ import { AddNote } from '.';
 describe('AddNote', () => {
   const note = 'The contents of a new note';
 
+  test('renders correctly', () => {
+    const wrapper = shallow(
+      <AddNote
+        associateNote={jest.fn()}
+        getNewNoteId={jest.fn()}
+        newNote={note}
+        onCancelAddNote={jest.fn()}
+        updateNewNote={jest.fn()}
+        updateNote={jest.fn()}
+      />
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it renders the Cancel button when onCancelAddNote is provided', () => {
     const wrapper = mount(
       <AddNote

x-pack/plugins/secops/public/components/notes/add_note/new_note.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import * as i18n from '../translations';
@@ -14,6 +15,13 @@ import { NewNote } from './new_note';
 describe('NewNote', () => {
   const note = 'The contents of a new note';
 
+  test('renders correctly', () => {
+    const wrapper = shallow(
+      <NewNote noteInputHeight={200} note={note} updateNewNote={jest.fn()} />
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it renders a tab labeled "Note"', () => {
     const wrapper = mount(<NewNote noteInputHeight={200} note={note} updateNewNote={jest.fn()} />);
 

x-pack/plugins/secops/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoteCardBody renders correctly against snapshot 1`] = `
+<Component
+  rawNote="#  This is a note"
+/>
+`;

x-pack/plugins/secops/public/components/notes/note_card/note_card_body.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { NoteCardBody } from './note_card_body';
@@ -14,6 +15,11 @@ describe('NoteCardBody', () => {
   const noteText = 'This is a note';
   const rawNote = `${markdownHeaderPrefix} ${noteText}`;
 
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(<NoteCardBody rawNote={rawNote} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it renders the text of the note in an h1', () => {
     const wrapper = mount(<NoteCardBody rawNote={rawNote} />);
 

x-pack/plugins/secops/public/components/resize_handle/__snapshots__/index.test.tsx.snap

@@ -1,110 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Resizeable it renders 1`] = `
-.c0 {
-  cursor: col-resize;
-  height: 100%;
-}
-
-.c2 {
-  cursor: col-resize;
-  height: 100%;
-  min-height: 20px;
-  width: 0;
-}
-
-.c1 {
-  border: 1px solid #1b1b1b;
-}
-
-<pure(Component)>
-  <Component>
-    <Provider
-      store={
-        Object {
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-          Symbol(observable): [Function],
-        }
-      }
-    >
-      <ThemeProvider
-        theme={[Function]}
-      >
-        <DragDropContext
-          onDragEnd={[MockFunction]}
-        >
-          <Resizeable
-            handle={
-              <Styled(styled.div)
-                data-test-subj="test-resize-handle"
-              />
-            }
-            height="100%"
-            id="test"
-            onResize={[MockFunction]}
-            render={[Function]}
-          >
-            <styled.div
-              data-test-subj="resize-handle-container"
-              height="100%"
-              innerRef={
-                Object {
-                  "current": .c0 {
-  cursor: col-resize;
-  height: 100%;
-}
-
-.c2 {
-  cursor: col-resize;
-  height: 100%;
-  min-height: 20px;
-  width: 0;
-}
-
-.c1 {
-  border: 1px solid #1b1b1b;
-}
-
-<div
-                    class="c0"
-                    data-test-subj="resize-handle-container"
-                    height="100%"
-                  >
-                    <div
-                      class="c1 c2"
-                      data-test-subj="test-resize-handle"
-                    />
-                  </div>,
-                }
-              }
-            >
-              <div
-                className="c0"
-                data-test-subj="resize-handle-container"
-                height="100%"
-              >
-                <Styled(styled.div)
-                  data-test-subj="test-resize-handle"
-                >
-                  <styled.div
-                    className="c1"
-                    data-test-subj="test-resize-handle"
-                  >
-                    <div
-                      className="c1 c2"
-                      data-test-subj="test-resize-handle"
-                    />
-                  </styled.div>
-                </Styled(styled.div)>
-              </div>
-            </styled.div>
-          </Resizeable>
-        </DragDropContext>
-      </ThemeProvider>
-    </Provider>
-  </Component>
-</pure(Component)>
+<Component>
+  <Resizeable
+    handle={
+      <Styled(styled.div)
+        data-test-subj="test-resize-handle"
+      />
+    }
+    height="100%"
+    id="test"
+    onResize={[MockFunction]}
+    render={[Function]}
+  />
+</Component>
 `;

x-pack/plugins/secops/public/components/resize_handle/index.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
@@ -45,7 +45,7 @@ describe('Resizeable', () => {
   });
 
   test('it renders', () => {
-    const wrapper = mount(
+    const wrapper = shallow(
       <TestProviders>
         <Resizeable
           handle={<CellResizeHandle data-test-subj="test-resize-handle" />}

x-pack/plugins/secops/public/components/selectable_text/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectableText renders correctly against snapshot 1`] = `
+.c0 {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+<span
+  className="c0"
+>
+  You may select this text
+</span>
+`;

x-pack/plugins/secops/public/components/selectable_text/index.test.tsx

@@ -4,13 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
 
 import { SelectableText } from '.';
 
 describe('SelectableText', () => {
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(<SelectableText>You may select this text</SelectableText>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it applies the user-select: text style', () => {
     const wrapper = mount(<SelectableText>You may select this text</SelectableText>);
 

x-pack/plugins/secops/public/components/timeline/__snapshots__/timeline.test.tsx.snap

@@ -0,0 +1,409 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timeline rendering renders correctly against snapshot 1`] = `
+<Component
+  addNoteToEvent={[MockFunction]}
+  columnHeaders={
+    Array [
+      Object {
+        "category": "base",
+        "columnHeaderType": "not-filtered",
+        "description": "Date/time when the event originated.
+For log events this is the date/time when the event was generated, and not when it was read.
+Required field for all events.",
+        "example": "2016-05-23T08:05:34.853Z",
+        "id": "@timestamp",
+        "type": "date",
+        "width": 240,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
+        "example": "7",
+        "id": "event.severity",
+        "type": "long",
+        "width": 180,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Event category.
+This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
+        "example": "user-management",
+        "id": "event.category",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "The action captured by the event.
+This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
+        "example": "user-password-change",
+        "id": "event.action",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "host",
+        "columnHeaderType": "not-filtered",
+        "description": "Name of the host.
+It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
+        "example": "",
+        "id": "host.name",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "source",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the source.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "example": "",
+        "id": "source.ip",
+        "type": "ip",
+        "width": 180,
+      },
+      Object {
+        "category": "destination",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the destination.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "example": "",
+        "id": "destination.ip",
+        "type": "ip",
+        "width": 180,
+      },
+      Object {
+        "category": "user",
+        "columnHeaderType": "not-filtered",
+        "description": "Short name or login of the user.",
+        "example": "albert",
+        "id": "user.name",
+        "type": "keyword",
+        "width": 180,
+      },
+    ]
+  }
+  columnRenderers={
+    Array [
+      Object {
+        "isInstance": [Function],
+        "renderColumn": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderColumn": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderColumn": [Function],
+      },
+    ]
+  }
+  dataProviders={
+    Array [
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 1",
+        "kqlQuery": "",
+        "name": "Provider 1",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 1",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 2",
+        "kqlQuery": "",
+        "name": "Provider 2",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 2",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 3",
+        "kqlQuery": "",
+        "name": "Provider 3",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 3",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 4",
+        "kqlQuery": "",
+        "name": "Provider 4",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 4",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 5",
+        "kqlQuery": "",
+        "name": "Provider 5",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 5",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 6",
+        "kqlQuery": "",
+        "name": "Provider 6",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 6",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 7",
+        "kqlQuery": "",
+        "name": "Provider 7",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 7",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 8",
+        "kqlQuery": "",
+        "name": "Provider 8",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 8",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 9",
+        "kqlQuery": "",
+        "name": "Provider 9",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 9",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 10",
+        "kqlQuery": "",
+        "name": "Provider 10",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 10",
+        },
+      },
+    ]
+  }
+  eventIdToNoteIds={Object {}}
+  flyoutHeaderHeight={48}
+  flyoutHeight={980}
+  getNotesByIds={[Function]}
+  id="foo"
+  indexPattern={
+    Object {
+      "fields": Array [
+        Object {
+          "aggregatable": true,
+          "name": "@timestamp",
+          "searchable": true,
+          "type": "date",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "@version",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.ephemeral_id",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.hostname",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.id",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test1",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test2",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test3",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test4",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test5",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test6",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test7",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test8",
+          "searchable": true,
+          "type": "string",
+        },
+      ],
+      "title": "filebeat-*,auditbeat-*,packetbeat-*",
+    }
+  }
+  itemsPerPage={5}
+  itemsPerPageOptions={
+    Array [
+      5,
+      10,
+      20,
+    ]
+  }
+  kqlMode="search"
+  kqlQuery=""
+  onChangeDataProviderKqlQuery={[MockFunction]}
+  onChangeDroppableAndProvider={[MockFunction]}
+  onChangeItemsPerPage={[MockFunction]}
+  onColumnRemoved={[MockFunction]}
+  onColumnResized={[MockFunction]}
+  onColumnSorted={[MockFunction]}
+  onDataProviderRemoved={[MockFunction]}
+  onFilterChange={[MockFunction]}
+  onPinEvent={[MockFunction]}
+  onRangeSelected={[MockFunction]}
+  onToggleDataProviderEnabled={[MockFunction]}
+  onToggleDataProviderExcluded={[MockFunction]}
+  onUnPinEvent={[MockFunction]}
+  pinnedEventIds={Object {}}
+  range="1 Day"
+  rowRenderers={
+    Array [
+      Object {
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+    ]
+  }
+  show={true}
+  sort={
+    Object {
+      "columnId": "@timestamp",
+      "sortDirection": "descending",
+    }
+  }
+  updateNote={[MockFunction]}
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,943 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Body rendering renders correctly against snapshot 1`] = `
+<Component
+  addNoteToEvent={[MockFunction]}
+  columnHeaders={
+    Array [
+      Object {
+        "category": "base",
+        "columnHeaderType": "not-filtered",
+        "description": "Date/time when the event originated.
+For log events this is the date/time when the event was generated, and not when it was read.
+Required field for all events.",
+        "example": "2016-05-23T08:05:34.853Z",
+        "id": "@timestamp",
+        "type": "date",
+        "width": 240,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
+        "example": "7",
+        "id": "event.severity",
+        "type": "long",
+        "width": 180,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Event category.
+This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
+        "example": "user-management",
+        "id": "event.category",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "The action captured by the event.
+This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
+        "example": "user-password-change",
+        "id": "event.action",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "host",
+        "columnHeaderType": "not-filtered",
+        "description": "Name of the host.
+It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
+        "example": "",
+        "id": "host.name",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "source",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the source.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "example": "",
+        "id": "source.ip",
+        "type": "ip",
+        "width": 180,
+      },
+      Object {
+        "category": "destination",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the destination.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "example": "",
+        "id": "destination.ip",
+        "type": "ip",
+        "width": 180,
+      },
+      Object {
+        "category": "user",
+        "columnHeaderType": "not-filtered",
+        "description": "Short name or login of the user.",
+        "example": "albert",
+        "id": "user.name",
+        "type": "keyword",
+        "width": 180,
+      },
+    ]
+  }
+  columnRenderers={
+    Array [
+      Object {
+        "isInstance": [Function],
+        "renderColumn": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderColumn": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderColumn": [Function],
+      },
+    ]
+  }
+  data={
+    Array [
+      Object {
+        "_id": "1",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "action": "Action",
+          "category": "Access",
+          "id": 1,
+          "module": "nginx",
+          "severity": 3,
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "apache",
+        },
+        "source": Object {
+          "ip": "192.168.0.1",
+          "port": 80,
+        },
+        "timestamp": "2018-11-05T19:03:25.937Z",
+        "user": Object {
+          "id": 1,
+          "name": "john.dee",
+        },
+      },
+      Object {
+        "_id": "3",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 3,
+          "module": "nginx",
+          "severity": 1,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "nginx",
+        },
+        "source": Object {
+          "ip": "192.168.0.3",
+          "port": 443,
+        },
+        "timestamp": "2018-11-07T19:03:25.937Z",
+        "user": Object {
+          "id": 3,
+          "name": "evan.davis",
+        },
+      },
+      Object {
+        "_id": "4",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Attempted Administrator Privilege Gain",
+          "id": 4,
+          "module": "suricata",
+          "severity": 1,
+          "type": "Alert",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "suricata",
+        },
+        "source": Object {
+          "ip": "192.168.0.3",
+          "port": 53,
+        },
+        "suricata": Object {
+          "eve": Object {
+            "alert": Object {
+              "signature": "ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)",
+              "signature_id": 4,
+            },
+            "flow_id": 4,
+            "proto": "",
+          },
+        },
+        "timestamp": "2018-11-08T19:03:25.937Z",
+        "user": Object {
+          "id": 4,
+          "name": "jenny.jones",
+        },
+      },
+      Object {
+        "_id": "5",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 5,
+          "module": "nginx",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.3",
+          "port": 80,
+        },
+        "timestamp": "2018-11-09T19:03:25.937Z",
+        "user": Object {
+          "id": 5,
+          "name": "becky.davis",
+        },
+      },
+      Object {
+        "_id": "6",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 6,
+          "module": "nginx",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "braden.davis",
+        },
+        "source": Object {
+          "ip": "192.168.0.6",
+          "port": 80,
+        },
+        "timestamp": "2018-11-10T19:03:25.937Z",
+      },
+      Object {
+        "_id": "8",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Web Application Attack",
+          "id": 8,
+          "module": "suricata",
+          "severity": 2,
+          "type": "Alert",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.8",
+          "port": 80,
+        },
+        "suricata": Object {
+          "eve": Object {
+            "alert": Object {
+              "signature": "ET WEB_SERVER Possible CVE-2014-6271 Attempt in HTTP Cookie",
+              "signature_id": 8,
+            },
+            "flow_id": 8,
+            "proto": "",
+          },
+        },
+        "timestamp": "2018-11-12T19:03:25.937Z",
+        "user": Object {
+          "id": 8,
+          "name": "jone.doe",
+        },
+      },
+      Object {
+        "_id": "7",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 7,
+          "module": "apache",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.7",
+          "port": 80,
+        },
+        "timestamp": "2018-11-11T19:03:25.937Z",
+        "user": Object {
+          "id": 7,
+          "name": "jone.doe",
+        },
+      },
+      Object {
+        "_id": "9",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 9,
+          "module": "nginx",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.9",
+          "port": 80,
+        },
+        "timestamp": "2018-11-13T19:03:25.937Z",
+        "user": Object {
+          "id": 9,
+          "name": "jone.doe",
+        },
+      },
+      Object {
+        "_id": "10",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 10,
+          "module": "nginx",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.10",
+          "port": 80,
+        },
+        "timestamp": "2018-11-14T19:03:25.937Z",
+        "user": Object {
+          "id": 10,
+          "name": "jone.doe",
+        },
+      },
+      Object {
+        "_id": "11",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 11,
+          "module": "nginx",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.11",
+          "port": 80,
+        },
+        "timestamp": "2018-11-15T19:03:25.937Z",
+        "user": Object {
+          "id": 11,
+          "name": "jone.doe",
+        },
+      },
+      Object {
+        "_id": "12",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Access",
+          "id": 12,
+          "module": "nginx",
+          "severity": 3,
+          "type": "HTTP Request",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.12",
+          "port": 80,
+        },
+        "timestamp": "2018-11-16T19:03:25.937Z",
+        "user": Object {
+          "id": 12,
+          "name": "jone.doe",
+        },
+      },
+      Object {
+        "_id": "2",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Authentication",
+          "id": 2,
+          "module": "authlog",
+          "severity": 3,
+          "type": "Authentication Success",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.2",
+          "port": 80,
+        },
+        "timestamp": "2018-11-06T19:03:25.937Z",
+        "user": Object {
+          "id": 1,
+          "name": "joe.bob",
+        },
+      },
+      Object {
+        "_id": "13",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Web Application Attack",
+          "id": 13,
+          "module": "suricata",
+          "severity": 1,
+          "type": "Alert",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "joe.computer",
+        },
+        "source": Object {
+          "ip": "192.168.0.8",
+          "port": 80,
+        },
+        "suricata": Object {
+          "eve": Object {
+            "alert": Object {
+              "signature": "ET WEB_SERVER Possible Attempt in HTTP Cookie",
+              "signature_id": 13,
+            },
+            "flow_id": 13,
+            "proto": "",
+          },
+        },
+        "timestamp": "2018-13-12T19:03:25.937Z",
+      },
+      Object {
+        "_id": "14",
+        "destination": Object {
+          "ip": "207.154.238.205",
+          "port": 11568,
+        },
+        "event": Object {
+          "action": null,
+          "category": null,
+          "dataset": "zeek.connection",
+          "id": null,
+          "module": "zeek",
+          "severity": null,
+        },
+        "geo": Object {
+          "country_iso_code": "US",
+          "region_name": "New York",
+        },
+        "host": Object {
+          "id": "37c81253e0fc4c46839c19b981be5177",
+          "ip": Array [
+            "207.154.238.205",
+            "10.19.0.5",
+            "fe80::d82b:9aff:fe0d:1e12",
+          ],
+          "name": "zeek-franfurt",
+        },
+        "http": null,
+        "network": Object {
+          "transport": "tcp",
+        },
+        "source": Object {
+          "ip": "185.176.26.101",
+          "port": 44059,
+        },
+        "suricata": null,
+        "timestamp": "2019-03-07T05:06:51.000Z",
+        "url": null,
+        "zeek": Object {
+          "connection": Object {
+            "history": "Sr",
+            "local_orig": "false",
+            "local_resp": "false",
+            "missed_bytes": 0,
+            "state": "REJ",
+          },
+          "dns": null,
+          "files": null,
+          "http": null,
+          "notice": null,
+          "session_id": "C8DRTq362Fios6hw16",
+          "ssl": null,
+        },
+      },
+      Object {
+        "_id": "15",
+        "destination": Object {
+          "ip": "67.207.67.3",
+          "port": 53,
+        },
+        "event": Object {
+          "action": null,
+          "category": null,
+          "dataset": "zeek.dns",
+          "id": null,
+          "module": "zeek",
+          "severity": null,
+        },
+        "geo": Object {
+          "country_iso_code": "US",
+          "region_name": "New York",
+        },
+        "host": Object {
+          "id": "af3fddf15f1d47979ce817ba0df10c6e",
+          "ip": Array [
+            "206.189.35.240",
+            "10.15.0.5",
+            "fe80::98c7:eff:fe29:4455",
+          ],
+          "name": "suricata-zeek-singapore",
+        },
+        "http": null,
+        "network": Object {
+          "transport": "udp",
+        },
+        "source": Object {
+          "ip": "206.189.35.240",
+          "port": 57475,
+        },
+        "suricata": null,
+        "timestamp": "2019-03-07T00:51:28.000Z",
+        "url": null,
+        "zeek": Object {
+          "connection": null,
+          "dns": Object {
+            "AA": false,
+            "RA": false,
+            "RD": false,
+            "TC": false,
+            "qclass": null,
+            "qclass_name": null,
+            "qtype": null,
+            "qtype_name": null,
+            "query": null,
+            "rejected": null,
+            "trans_id": 65252,
+          },
+          "files": null,
+          "http": null,
+          "notice": null,
+          "session_id": "CyIrMA1L1JtLqdIuol",
+          "ssl": null,
+        },
+      },
+      Object {
+        "_id": "16",
+        "_index": "filebeat-8.0.0-2019.02.19-000001",
+        "destination": Object {
+          "ip": "192.241.164.26",
+          "port": 80,
+        },
+        "event": Object {
+          "action": null,
+          "category": null,
+          "dataset": "zeek.http",
+          "id": null,
+          "module": "zeek",
+          "severity": null,
+        },
+        "geo": Object {
+          "country_iso_code": "US",
+          "region_name": "New York",
+        },
+        "host": Object {
+          "id": "af3fddf15f1d47979ce817ba0df10c6e",
+          "ip": Array [
+            "206.189.35.240",
+            "10.15.0.5",
+            "fe80::98c7:eff:fe29:4455",
+          ],
+          "name": "suricata-zeek-singapore",
+        },
+        "http": Object {
+          "request": Object {
+            "body": Object {
+              "bytes": 0,
+              "content": null,
+            },
+            "method": null,
+            "referrer": null,
+          },
+          "response": Object {
+            "body": Object {
+              "bytes": 154,
+              "content": null,
+            },
+            "status_code": 302,
+          },
+          "version": "1.1",
+        },
+        "network": null,
+        "source": Object {
+          "ip": "206.189.35.240",
+          "port": 36220,
+        },
+        "suricata": null,
+        "timestamp": "2019-03-05T07:00:20.000Z",
+        "url": null,
+        "zeek": Object {
+          "connection": null,
+          "dns": null,
+          "files": null,
+          "http": Object {
+            "resp_fuids": Array [
+              "FzeujEPP7GTHmYPsc",
+            ],
+            "resp_mime_types": Array [
+              "text/html",
+            ],
+            "status_msg": "Moved Temporarily",
+            "tags": Array [],
+            "trans_depth": "3",
+          },
+          "notice": null,
+          "session_id": "CZLkpC22NquQJOpkwe",
+          "ssl": null,
+        },
+      },
+      Object {
+        "_id": "17",
+        "destination": null,
+        "event": Object {
+          "action": null,
+          "category": null,
+          "dataset": "zeek.notice",
+          "id": null,
+          "module": "zeek",
+          "severity": null,
+        },
+        "geo": null,
+        "host": Object {
+          "id": "37c81253e0fc4c46839c19b981be5177",
+          "ip": Array [
+            "207.154.238.205",
+            "10.19.0.5",
+            "fe80::d82b:9aff:fe0d:1e12",
+          ],
+          "name": "zeek-franfurt",
+        },
+        "http": null,
+        "network": null,
+        "source": Object {
+          "ip": "8.42.77.171",
+          "port": null,
+        },
+        "suricata": null,
+        "timestamp": "2019-02-28T22:36:28.000Z",
+        "url": null,
+        "zeek": Object {
+          "connection": null,
+          "dns": null,
+          "files": null,
+          "http": null,
+          "notice": Object {
+            "dropped": false,
+            "dst": "207.154.238.205",
+            "msg": "8.42.77.171 scanned at least 15 unique ports of host 207.154.238.205 in 0m0s",
+            "note": "Scan::Port_Scan",
+            "peer_descr": "bro",
+            "sub": "remote",
+            "suppress_for": 3600,
+          },
+          "session_id": null,
+          "ssl": null,
+        },
+      },
+      Object {
+        "_id": "18",
+        "destination": Object {
+          "ip": "91.189.95.15",
+          "port": 443,
+        },
+        "event": Object {
+          "action": null,
+          "category": null,
+          "dataset": "zeek.ssl",
+          "id": null,
+          "module": "zeek",
+          "severity": null,
+        },
+        "geo": Object {
+          "country_iso_code": "GB",
+          "region_name": "England",
+        },
+        "host": Object {
+          "id": "2ce8b1e7d69e4a1d9c6bcddc473da9d9",
+          "ip": null,
+          "name": "zeek-sensor-amsterdam",
+        },
+        "http": null,
+        "network": null,
+        "source": Object {
+          "ip": "188.166.66.184",
+          "port": 34514,
+        },
+        "suricata": null,
+        "timestamp": "2019-02-22T21:12:13.000Z",
+        "url": null,
+        "zeek": Object {
+          "connection": null,
+          "dns": null,
+          "files": null,
+          "http": null,
+          "notice": null,
+          "session_id": "CmTxzt2OVXZLkGDaRe",
+          "ssl": Object {
+            "cipher": "TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256",
+            "established": false,
+            "resumed": false,
+            "version": "TLSv12",
+          },
+        },
+      },
+      Object {
+        "_id": "19",
+        "destination": null,
+        "event": Object {
+          "action": null,
+          "category": null,
+          "dataset": "zeek.files",
+          "id": null,
+          "module": "zeek",
+          "severity": null,
+        },
+        "geo": null,
+        "host": Object {
+          "id": "af3fddf15f1d47979ce817ba0df10c6e",
+          "ip": Array [
+            "206.189.35.240",
+            "10.15.0.5",
+            "fe80::98c7:eff:fe29:4455",
+          ],
+          "name": "suricata-zeek-singapore",
+        },
+        "http": null,
+        "network": null,
+        "source": null,
+        "suricata": null,
+        "timestamp": "2019-03-03T04:26:38.000Z",
+        "url": null,
+        "zeek": Object {
+          "connection": null,
+          "dns": null,
+          "files": Object {
+            "analyzers": Array [
+              "MD5",
+              "SHA1",
+            ],
+            "depth": 0,
+            "duration": 0,
+            "fuid": "FePz1uVEVCZ3I0FQi",
+            "is_orig": false,
+            "local_orig": false,
+            "md5": "f7653f1951693021daa9e6be61226e32",
+            "mime_type": "text/plain",
+            "missing_bytes": 0,
+            "overflow_bytes": 0,
+            "rx_host": "206.189.35.240",
+            "seen_bytes": 1198,
+            "session_ids": Array [
+              "Cu0n232QMyvNtzb75j",
+            ],
+            "sha1": "fa5195a5dfacc9d1c68d43600f0e0262cad14dde",
+            "source": "HTTP",
+            "timedout": false,
+            "total_bytes": 88722,
+            "tx_host": "5.101.111.50",
+          },
+          "http": null,
+          "notice": null,
+          "session_id": "Cu0n232QMyvNtzb75j",
+          "ssl": null,
+        },
+      },
+    ]
+  }
+  eventIdToNoteIds={Object {}}
+  getNotesByIds={[Function]}
+  height={700}
+  id="timeline-test"
+  isLoading={false}
+  onColumnRemoved={[MockFunction]}
+  onColumnResized={[MockFunction]}
+  onColumnSorted={[MockFunction]}
+  onFilterChange={[MockFunction]}
+  onPinEvent={[MockFunction]}
+  onRangeSelected={[MockFunction]}
+  onUnPinEvent={[MockFunction]}
+  pinnedEventIds={Object {}}
+  range="1 Day"
+  rowRenderers={
+    Array [
+      Object {
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+    ]
+  }
+  sort={
+    Object {
+      "columnId": "@timestamp",
+      "sortDirection": "descending",
+    }
+  }
+  updateNote={[MockFunction]}
+  width={100}
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColumnHeaders rendering renders correctly against snapshot 1`] = `
+<Component
+  actionsColumnWidth={150}
+  columnHeaders={
+    Array [
+      Object {
+        "category": "base",
+        "columnHeaderType": "not-filtered",
+        "description": "Date/time when the event originated.
+For log events this is the date/time when the event was generated, and not when it was read.
+Required field for all events.",
+        "example": "2016-05-23T08:05:34.853Z",
+        "id": "@timestamp",
+        "type": "date",
+        "width": 240,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
+        "example": "7",
+        "id": "event.severity",
+        "type": "long",
+        "width": 180,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Event category.
+This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
+        "example": "user-management",
+        "id": "event.category",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "The action captured by the event.
+This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
+        "example": "user-password-change",
+        "id": "event.action",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "host",
+        "columnHeaderType": "not-filtered",
+        "description": "Name of the host.
+It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
+        "example": "",
+        "id": "host.name",
+        "type": "keyword",
+        "width": 180,
+      },
+      Object {
+        "category": "source",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the source.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "example": "",
+        "id": "source.ip",
+        "type": "ip",
+        "width": 180,
+      },
+      Object {
+        "category": "destination",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the destination.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "example": "",
+        "id": "destination.ip",
+        "type": "ip",
+        "width": 180,
+      },
+      Object {
+        "category": "user",
+        "columnHeaderType": "not-filtered",
+        "description": "Short name or login of the user.",
+        "example": "albert",
+        "id": "user.name",
+        "type": "keyword",
+        "width": 180,
+      },
+    ]
+  }
+  isLoading={false}
+  minWidth={1000}
+  onColumnRemoved={[MockFunction]}
+  onColumnResized={[MockFunction]}
+  onColumnSorted={[MockFunction]}
+  sort={
+    Object {
+      "columnId": "fooColumn",
+      "sortDirection": "descending",
+    }
+  }
+  timelineId="test"
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter renders correctly against snapshot 1`] = `
+<Component
+  header={
+    Object {
+      "category": "base",
+      "columnHeaderType": "text-filter",
+      "description": "Date/time when the event originated.
+For log events this is the date/time when the event was generated, and not when it was read.
+Required field for all events.",
+      "example": "2016-05-23T08:05:34.853Z",
+      "id": "@timestamp",
+      "type": "date",
+      "width": 240,
+    }
+  }
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/column_headers/filter/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { ColumnHeaderType } from '../column_header';
@@ -16,6 +17,16 @@ const textFilter: ColumnHeaderType = 'text-filter';
 const notFiltered: ColumnHeaderType = 'not-filtered';
 
 describe('Filter', () => {
+  test('renders correctly against snapshot', () => {
+    const textFilterColumnHeader = {
+      ...defaultHeaders[0],
+      columnHeaderType: textFilter,
+    };
+
+    const wrapper = shallow(<Filter header={textFilterColumnHeader} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   describe('rendering', () => {
     test('it renders a text filter when the columnHeaderType is "text-filter"', () => {
       const textFilterColumnHeader = {

x-pack/plugins/secops/public/components/timeline/body/column_headers/header/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header renders correctly against snapshot 1`] = `
+<Styled(EuiFlexGroup)
+  data-test-subj="header-container"
+  gutterSize="none"
+  key="@timestamp"
+  width="240px"
+>
+  <Resizeable
+    handle={
+      <Styled(EuiFlexItem)
+        grow={false}
+      >
+        <Styled(Styled(styled.div)) />
+      </Styled(EuiFlexItem)>
+    }
+    height="100%"
+    id="@timestamp"
+    onResize={[Function]}
+    render={[Function]}
+  />
+</Styled(EuiFlexGroup)>
+`;

x-pack/plugins/secops/public/components/timeline/body/column_headers/header/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
 import { TestProviders } from 'x-pack/plugins/secops/public/mock/test_providers';
@@ -28,6 +29,21 @@ describe('Header', () => {
   };
   const timelineId = 'fakeId';
 
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(
+      <Header
+        header={columnHeader}
+        isLoading={false}
+        onColumnRemoved={jest.fn()}
+        onColumnResized={jest.fn()}
+        onColumnSorted={jest.fn()}
+        sort={sort}
+        timelineId={timelineId}
+      />
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   describe('rendering', () => {
     test('it renders the header text', () => {
       const wrapper = mount(

x-pack/plugins/secops/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderToolTipContent it renders the expected table content 1`] = `
-<pure(Component)
+<Component
   header={
     Object {
       "category": "base",
@@ -15,170 +15,5 @@ Required field for all events.",
       "width": 240,
     }
   }
->
-  <Component
-    header={
-      Object {
-        "category": "base",
-        "columnHeaderType": "not-filtered",
-        "description": "Date/time when the event originated.
-For log events this is the date/time when the event was generated, and not when it was read.
-Required field for all events.",
-        "example": "2016-05-23T08:05:34.853Z",
-        "id": "@timestamp",
-        "type": "date",
-        "width": 240,
-      }
-    }
-  >
-    <styled.p>
-      <p
-        className="sc-bAeIUo dmkGho"
-      >
-        <styled.span
-          data-test-subj="category"
-        >
-          <span
-            className="sc-iujRgT kSRRWK"
-            data-test-subj="category"
-          >
-            Category
-            :
-          </span>
-        </styled.span>
-        <styled.span
-          data-test-subj="category-value"
-        >
-          <span
-            className="sc-GMQeP ftODab"
-            data-test-subj="category-value"
-          >
-            base
-          </span>
-        </styled.span>
-      </p>
-    </styled.p>
-    <styled.p>
-      <p
-        className="sc-bAeIUo dmkGho"
-      >
-        <styled.span
-          data-test-subj="field"
-        >
-          <span
-            className="sc-iujRgT kSRRWK"
-            data-test-subj="field"
-          >
-            Field
-            :
-          </span>
-        </styled.span>
-        <styled.span
-          data-test-subj="field-value"
-        >
-          <span
-            className="sc-GMQeP ftODab"
-            data-test-subj="field-value"
-          >
-            @timestamp
-          </span>
-        </styled.span>
-      </p>
-    </styled.p>
-    <styled.p>
-      <p
-        className="sc-bAeIUo dmkGho"
-      >
-        <styled.span
-          data-test-subj="type"
-        >
-          <span
-            className="sc-iujRgT kSRRWK"
-            data-test-subj="type"
-          >
-            Type
-            :
-          </span>
-        </styled.span>
-        <styled.span>
-          <span
-            className="sc-GMQeP ftODab"
-          >
-            <Styled(EuiIcon)
-              data-test-subj="type-icon"
-              type="clock"
-            >
-              <EuiIcon
-                className="sc-bMVAic iCyJsw"
-                data-test-subj="type-icon"
-                type="clock"
-              >
-                <clock
-                  className="euiIcon euiIcon--medium sc-bMVAic iCyJsw"
-                  data-test-subj="type-icon"
-                  focusable="false"
-                  height="16"
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    className="euiIcon euiIcon--medium sc-bMVAic iCyJsw"
-                    data-test-subj="type-icon"
-                    focusable="false"
-                    height="16"
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M7.5 13A5.506 5.506 0 0 1 2 7.5C2 4.467 4.467 2 7.5 2S13 4.467 13 7.5 10.533 13 7.5 13m0-12a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13m3 6H8V3.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1"
-                      fillRule="evenodd"
-                    />
-                  </svg>
-                </clock>
-              </EuiIcon>
-            </Styled(EuiIcon)>
-            <span
-              data-test-subj="type-value"
-            >
-              date
-            </span>
-          </span>
-        </styled.span>
-      </p>
-    </styled.p>
-    <styled.p>
-      <p
-        className="sc-bAeIUo dmkGho"
-      >
-        <styled.span
-          data-test-subj="description"
-        >
-          <span
-            className="sc-iujRgT kSRRWK"
-            data-test-subj="description"
-          >
-            Description
-            :
-          </span>
-        </styled.span>
-        <styled.span
-          data-test-subj="description-value"
-        >
-          <span
-            className="sc-GMQeP ftODab"
-            data-test-subj="description-value"
-          >
-            Date/time when the event originated.
-For log events this is the date/time when the event was generated, and not when it was read.
-Required field for all events.
-          </span>
-        </styled.span>
-      </p>
-    </styled.p>
-  </Component>
-</pure(Component)>
+/>
 `;

x-pack/plugins/secops/public/components/timeline/body/column_headers/header_tooltip_content/index.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import * as React from 'react';
@@ -87,7 +87,7 @@ describe('HeaderToolTipContent', () => {
   });
 
   test('it renders the expected table content', () => {
-    const wrapper = mount(<HeaderToolTipContent header={header} />);
+    const wrapper = shallow(<HeaderToolTipContent header={header} />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });

x-pack/plugins/secops/public/components/timeline/body/column_headers/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { TestProviders } from 'x-pack/plugins/secops/public/mock/test_providers';
 
@@ -22,6 +23,23 @@ describe('ColumnHeaders', () => {
       sortDirection: Direction.descending,
     };
 
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <ColumnHeaders
+          actionsColumnWidth={ACTIONS_COLUMN_WIDTH}
+          columnHeaders={defaultHeaders}
+          isLoading={false}
+          minWidth={1000}
+          onColumnSorted={jest.fn()}
+          onColumnRemoved={jest.fn()}
+          onColumnResized={jest.fn()}
+          sort={sort}
+          timelineId={'test'}
+        />
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the field browser', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextFilter rendering renders correctly against snapshot 1`] = `
+<Component
+  columnId="foo"
+  minWidth={100}
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/column_headers/text_filter/index.test.tsx

@@ -4,13 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { DEFAULT_PLACEHOLDER, TextFilter } from '.';
 
 describe('TextFilter', () => {
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(<TextFilter columnId="foo" minWidth={100} />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     describe('placeholder', () => {
       test('it renders the default placeholder when no filter is specified, and a placeholder is NOT provided', () => {
         const wrapper = mount(<TextFilter columnId="foo" minWidth={100} />);

x-pack/plugins/secops/public/components/timeline/body/data_driven_columns/index.test.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
 import * as React from 'react';
@@ -18,7 +18,7 @@ describe('Columns', () => {
   const headersSansTimestamp = defaultHeaders.filter(h => h.id !== '@timestamp');
 
   test('it renders the expected columns', () => {
-    const wrapper = mount(
+    const wrapper = shallow(
       <TestProviders>
         <DataDrivenColumns
           columnHeaders={headersSansTimestamp}

x-pack/plugins/secops/public/components/timeline/body/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
 
@@ -21,6 +22,39 @@ const mockGetNotesByIds = (eventId: string[]) => [];
 
 describe('Body', () => {
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <Body
+          addNoteToEvent={jest.fn()}
+          id={'timeline-test'}
+          columnHeaders={defaultHeaders}
+          columnRenderers={columnRenderers}
+          data={mockEcsData}
+          eventIdToNoteIds={{}}
+          height={testBodyHeight}
+          isLoading={false}
+          getNotesByIds={mockGetNotesByIds}
+          onColumnRemoved={jest.fn()}
+          onColumnResized={jest.fn()}
+          onColumnSorted={jest.fn()}
+          onFilterChange={jest.fn()}
+          onPinEvent={jest.fn()}
+          onRangeSelected={jest.fn()}
+          onUnPinEvent={jest.fn()}
+          pinnedEventIds={{}}
+          range={'1 Day'}
+          rowRenderers={rowRenderers}
+          sort={{
+            columnId: '@timestamp',
+            sortDirection: Direction.descending,
+          }}
+          updateNote={jest.fn()}
+          width={100}
+        />
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the column headers', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`empty_column_renderer renders correctly against snapshot 1`] = `
+<span>
+  --
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Events renders correctly against snapshot 1`] = `
+<Component
+  data={
+    Object {
+      "_id": "1",
+      "destination": Object {
+        "ip": "192.168.0.3",
+        "port": 6343,
+      },
+      "event": Object {
+        "action": "Action",
+        "category": "Access",
+        "id": 1,
+        "module": "nginx",
+        "severity": 3,
+      },
+      "geo": Object {
+        "country_iso_code": "xx",
+        "region_name": "xx",
+      },
+      "host": Object {
+        "ip": Array [
+          "192.168.0.1",
+        ],
+        "name": "apache",
+      },
+      "source": Object {
+        "ip": "192.168.0.1",
+        "port": 80,
+      },
+      "timestamp": "2018-11-05T19:03:25.937Z",
+      "user": Object {
+        "id": 1,
+        "name": "john.dee",
+      },
+    }
+  }
+  fieldName="timestamp"
+  fieldType="date"
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`get_column_renderer renders correctly against snapshot 1`] = `
+<span>
+  <Connect(DraggableWrapperComponent)
+    dataProvider={
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-timeline-column-event_id-for-event-1",
+        "kqlQuery": "",
+        "name": "event.id: 1",
+        "queryMatch": Object {
+          "field": "event.id",
+          "value": 1,
+        },
+      }
+    }
+    key="timeline-draggable-column-event.id-for-event-1"
+    render={[Function]}
+  />
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/get_row_renderer.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`get_column_renderer renders correctly against snapshot 1`] = `
+<span>
+  <styled.div>
+    <span>
+      some child
+    </span>
+  </styled.div>
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plain_column_renderer renders correctly against snapshot 1`] = `
+<span>
+  <Connect(DraggableWrapperComponent)
+    dataProvider={
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-timeline-column-event_category-for-event-1",
+        "kqlQuery": "",
+        "name": "event.category: Access",
+        "queryMatch": Object {
+          "field": "event.category",
+          "value": "Access",
+        },
+      }
+    }
+    key="timeline-draggable-column-event.category-for-event-1"
+    render={[Function]}
+  />
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/plain_row_renderer.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plain_row_renderer renders correctly against snapshot 1`] = `
+<span>
+  <styled.div>
+    <span>
+      some children
+    </span>
+  </styled.div>
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/suricata_row_renderer.test.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`suricata_row_renderer renders correctly against snapshot 1`] = `
+<span>
+  <styled.div>
+    <span>
+      some children
+    </span>
+    <styled.div
+      width={100}
+    >
+      <pure(Component)
+        data={
+          Object {
+            "_id": "1",
+            "destination": Object {
+              "ip": "192.168.0.3",
+              "port": 6343,
+            },
+            "event": Object {
+              "action": "Action",
+              "category": "Access",
+              "id": 1,
+              "module": "nginx",
+              "severity": 3,
+            },
+            "geo": Object {
+              "country_iso_code": "xx",
+              "region_name": "xx",
+            },
+            "host": Object {
+              "ip": Array [
+                "192.168.0.1",
+              ],
+              "name": "apache",
+            },
+            "source": Object {
+              "ip": "192.168.0.1",
+              "port": 80,
+            },
+            "timestamp": "2018-11-05T19:03:25.937Z",
+            "user": Object {
+              "id": 1,
+              "name": "john.dee",
+            },
+          }
+        }
+      />
+    </styled.div>
+  </styled.div>
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/suricata_signature.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SuricataSignature rendering it renders the default SuricataSignature 1`] = `
-<pure(Component)
+<Component
   intl={
     Object {
       "defaultFormats": Object {},
@@ -105,734 +105,10 @@ exports[`SuricataSignature rendering it renders the default SuricataSignature 1`
     }
   }
 >
-  <Component
-    intl={
-      Object {
-        "defaultFormats": Object {},
-        "defaultLocale": "en",
-        "formatDate": [Function],
-        "formatHTMLMessage": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatPlural": [Function],
-        "formatRelative": [Function],
-        "formatTime": [Function],
-        "formats": Object {
-          "date": Object {
-            "full": Object {
-              "day": "numeric",
-              "month": "long",
-              "weekday": "long",
-              "year": "numeric",
-            },
-            "long": Object {
-              "day": "numeric",
-              "month": "long",
-              "year": "numeric",
-            },
-            "medium": Object {
-              "day": "numeric",
-              "month": "short",
-              "year": "numeric",
-            },
-            "short": Object {
-              "day": "numeric",
-              "month": "numeric",
-              "year": "2-digit",
-            },
-          },
-          "number": Object {
-            "currency": Object {
-              "style": "currency",
-            },
-            "percent": Object {
-              "style": "percent",
-            },
-          },
-          "relative": Object {
-            "days": Object {
-              "units": "day",
-            },
-            "hours": Object {
-              "units": "hour",
-            },
-            "minutes": Object {
-              "units": "minute",
-            },
-            "months": Object {
-              "units": "month",
-            },
-            "seconds": Object {
-              "units": "second",
-            },
-            "years": Object {
-              "units": "year",
-            },
-          },
-          "time": Object {
-            "full": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "long": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "medium": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-            },
-            "short": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-            },
-          },
-        },
-        "formatters": Object {
-          "getDateTimeFormat": [Function],
-          "getMessageFormat": [Function],
-          "getNumberFormat": [Function],
-          "getPluralFormat": [Function],
-          "getRelativeFormat": [Function],
-        },
-        "locale": "en",
-        "messages": Object {},
-        "now": [Function],
-        "onError": [Function],
-        "textComponent": Symbol(react.fragment),
-        "timeZone": null,
-      }
-    }
-  >
-    <Provider
-      store={
-        Object {
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-          Symbol(observable): [Function],
-        }
-      }
-    >
-      <ThemeProvider
-        theme={[Function]}
-      >
-        <DragDropContext
-          onDragEnd={[MockFunction]}
-        >
-          <pure(Component)
-            id="doc-id-123"
-            signature="ET SCAN ATTACK Hello"
-            signatureId="id-123"
-          >
-            <Component
-              id="doc-id-123"
-              signature="ET SCAN ATTACK Hello"
-              signatureId="id-123"
-            >
-              <EuiFlexGroup
-                alignItems="stretch"
-                component="div"
-                direction="row"
-                gutterSize="none"
-                justifyContent="center"
-                responsive={true}
-                wrap={false}
-              >
-                <div
-                  className="euiFlexGroup euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                >
-                  <pure(Component)
-                    id="doc-id-123"
-                    signatureId="id-123"
-                  >
-                    <Component
-                      id="doc-id-123"
-                      signatureId="id-123"
-                    >
-                      <Styled(EuiFlexItem)
-                        grow={false}
-                      >
-                        <EuiFlexItem
-                          className="sc-lhVmIH hjCqQV"
-                          component="div"
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero sc-lhVmIH hjCqQV"
-                          >
-                            <Connect(DraggableWrapperComponent)
-                              dataProvider={
-                                Object {
-                                  "and": Array [],
-                                  "enabled": true,
-                                  "excluded": false,
-                                  "id": "suricata-doc-id-123-sig-id-123",
-                                  "kqlQuery": "",
-                                  "name": "id-123",
-                                  "queryMatch": Object {
-                                    "field": "suricata.eve.alert.signature_id",
-                                    "value": "id-123",
-                                  },
-                                }
-                              }
-                              render={[Function]}
-                            >
-                              <DraggableWrapperComponent
-                                dataProvider={
-                                  Object {
-                                    "and": Array [],
-                                    "enabled": true,
-                                    "excluded": false,
-                                    "id": "suricata-doc-id-123-sig-id-123",
-                                    "kqlQuery": "",
-                                    "name": "id-123",
-                                    "queryMatch": Object {
-                                      "field": "suricata.eve.alert.signature_id",
-                                      "value": "id-123",
-                                    },
-                                  }
-                                }
-                                registerProvider={[Function]}
-                                render={[Function]}
-                                suricata-doc-id-123-sig-id-123={
-                                  Object {
-                                    "and": Array [],
-                                    "enabled": true,
-                                    "excluded": false,
-                                    "id": "suricata-doc-id-123-sig-id-123",
-                                    "kqlQuery": "",
-                                    "name": "id-123",
-                                    "queryMatch": Object {
-                                      "field": "suricata.eve.alert.signature_id",
-                                      "value": "id-123",
-                                    },
-                                  }
-                                }
-                                unRegisterProvider={[Function]}
-                              >
-                                <div
-                                  data-test-subj="draggableWrapperDiv"
-                                >
-                                  <Connect(Droppable)
-                                    direction="vertical"
-                                    droppableId="droppableId.content.suricata-doc-id-123-sig-id-123"
-                                    ignoreContainerClipping={false}
-                                    isDropDisabled={true}
-                                    type="DEFAULT"
-                                  >
-                                    <Droppable
-                                      direction="vertical"
-                                      dispatch={[Function]}
-                                      draggingOverWith={null}
-                                      droppableId="droppableId.content.suricata-doc-id-123-sig-id-123"
-                                      ignoreContainerClipping={false}
-                                      isDraggingOver={false}
-                                      isDropDisabled={true}
-                                      placeholder={null}
-                                      type="DEFAULT"
-                                    >
-                                      <DroppableDimensionPublisher
-                                        direction="vertical"
-                                        droppableId="droppableId.content.suricata-doc-id-123-sig-id-123"
-                                        getDroppableRef={[Function]}
-                                        ignoreContainerClipping={false}
-                                        isDropDisabled={true}
-                                        type="DEFAULT"
-                                      >
-                                        <div
-                                          data-react-beautiful-dnd-droppable="0"
-                                        >
-                                          <Connect(Draggable)
-                                            disableInteractiveElementBlocking={false}
-                                            draggableId="draggableId.content.suricata-doc-id-123-sig-id-123"
-                                            index={0}
-                                            isDragDisabled={false}
-                                            key="suricata-doc-id-123-sig-id-123"
-                                          >
-                                            <Draggable
-                                              dimension={null}
-                                              disableInteractiveElementBlocking={false}
-                                              draggableId="draggableId.content.suricata-doc-id-123-sig-id-123"
-                                              draggingOver={null}
-                                              drop={[Function]}
-                                              dropAnimationFinished={[Function]}
-                                              index={0}
-                                              isDragDisabled={false}
-                                              isDragging={false}
-                                              isDropAnimating={false}
-                                              lift={[Function]}
-                                              move={[Function]}
-                                              moveByWindowScroll={[Function]}
-                                              moveDown={[Function]}
-                                              moveLeft={[Function]}
-                                              moveRight={[Function]}
-                                              moveUp={[Function]}
-                                              offset={
-                                                Object {
-                                                  "x": 0,
-                                                  "y": 0,
-                                                }
-                                              }
-                                              shouldAnimateDisplacement={true}
-                                              shouldAnimateDragMovement={false}
-                                            >
-                                              <DraggableDimensionPublisher
-                                                draggableId="draggableId.content.suricata-doc-id-123-sig-id-123"
-                                                droppableId="droppableId.content.suricata-doc-id-123-sig-id-123"
-                                                getDraggableRef={[Function]}
-                                                index={0}
-                                                key="draggableId.content.suricata-doc-id-123-sig-id-123"
-                                                type="DEFAULT"
-                                              >
-                                                <Moveable
-                                                  destination={
-                                                    Object {
-                                                      "x": 0,
-                                                      "y": 0,
-                                                    }
-                                                  }
-                                                  onMoveEnd={[Function]}
-                                                  speed="INSTANT"
-                                                >
-                                                  <Motion
-                                                    defaultStyle={
-                                                      Object {
-                                                        "x": 0,
-                                                        "y": 0,
-                                                      }
-                                                    }
-                                                    onRest={[Function]}
-                                                    style={
-                                                      Object {
-                                                        "x": 0,
-                                                        "y": 0,
-                                                      }
-                                                    }
-                                                  >
-                                                    <DoubleRenderBlocker
-                                                      change={
-                                                        Object {
-                                                          "x": 0,
-                                                          "y": 0,
-                                                        }
-                                                      }
-                                                    >
-                                                      <DragHandle
-                                                        callbacks={
-                                                          Object {
-                                                            "onCancel": [Function],
-                                                            "onDrop": [Function],
-                                                            "onLift": [Function],
-                                                            "onMove": [Function],
-                                                            "onMoveDown": [Function],
-                                                            "onMoveLeft": [Function],
-                                                            "onMoveRight": [Function],
-                                                            "onMoveUp": [Function],
-                                                            "onWindowScroll": [Function],
-                                                          }
-                                                        }
-                                                        canDragInteractiveElements={false}
-                                                        draggableId="draggableId.content.suricata-doc-id-123-sig-id-123"
-                                                        getDraggableRef={[Function]}
-                                                        isDragging={false}
-                                                        isDropAnimating={false}
-                                                        isEnabled={true}
-                                                      >
-                                                        <styled.div
-                                                          aria-roledescription="Draggable item. Press space bar to lift"
-                                                          data-react-beautiful-dnd-drag-handle="0"
-                                                          data-react-beautiful-dnd-draggable="0"
-                                                          data-test-subj="providerContainer"
-                                                          draggable={false}
-                                                          innerRef={[Function]}
-                                                          onBlur={[Function]}
-                                                          onDragStart={[Function]}
-                                                          onFocus={[Function]}
-                                                          onKeyDown={[Function]}
-                                                          onMouseDown={[Function]}
-                                                          onTouchStart={[Function]}
-                                                          style={
-                                                            Object {
-                                                              "transform": null,
-                                                              "transition": null,
-                                                              "zIndex": 9000,
-                                                            }
-                                                          }
-                                                          tabIndex={0}
-                                                        >
-                                                          <div
-                                                            aria-roledescription="Draggable item. Press space bar to lift"
-                                                            className="sc-kEYyzF dkUeNK"
-                                                            data-react-beautiful-dnd-drag-handle="0"
-                                                            data-react-beautiful-dnd-draggable="0"
-                                                            data-test-subj="providerContainer"
-                                                            draggable={false}
-                                                            onBlur={[Function]}
-                                                            onDragStart={[Function]}
-                                                            onFocus={[Function]}
-                                                            onKeyDown={[Function]}
-                                                            onMouseDown={[Function]}
-                                                            onTouchStart={[Function]}
-                                                            style={
-                                                              Object {
-                                                                "transform": null,
-                                                                "transition": null,
-                                                                "zIndex": 9000,
-                                                              }
-                                                            }
-                                                            tabIndex={0}
-                                                          >
-                                                            <EuiText
-                                                              data-test-subj="draggable-content"
-                                                              grow={true}
-                                                              size="s"
-                                                            >
-                                                              <div
-                                                                className="euiText euiText--small"
-                                                                data-test-subj="draggable-content"
-                                                              >
-                                                                <Styled(EuiBadge)
-                                                                  color="hollow"
-                                                                  iconType="number"
-                                                                >
-                                                                  <EuiBadge
-                                                                    className="sc-bYSBpT epevwQ"
-                                                                    color="hollow"
-                                                                    iconSide="left"
-                                                                    iconType="number"
-                                                                  >
-                                                                    <span
-                                                                      className="euiBadge euiBadge--hollow sc-bYSBpT epevwQ"
-                                                                      style={null}
-                                                                    >
-                                                                      <span
-                                                                        className="euiBadge__content"
-                                                                      >
-                                                                        <EuiIcon
-                                                                          className="euiBadge__icon"
-                                                                          size="s"
-                                                                          type="number"
-                                                                        >
-                                                                          <number
-                                                                            className="euiIcon euiIcon--small euiBadge__icon"
-                                                                            focusable="false"
-                                                                            height="16"
-                                                                            style={null}
-                                                                            viewBox="0 0 16 16"
-                                                                            width="16"
-                                                                            xmlns="http://www.w3.org/2000/svg"
-                                                                          >
-                                                                            <svg
-                                                                              className="euiIcon euiIcon--small euiBadge__icon"
-                                                                              focusable="false"
-                                                                              height="16"
-                                                                              style={null}
-                                                                              viewBox="0 0 16 16"
-                                                                              width="16"
-                                                                              xmlns="http://www.w3.org/2000/svg"
-                                                                            >
-                                                                              <path
-                                                                                d="M7.808 10.197H6.796L5.859 13H4.485l.937-2.803H3.966l.219-1.25h1.647l.608-1.805H4.991l.226-1.251h1.64l.95-2.844h1.368l-.95 2.844h1.018l.95-2.844h1.374l-.95 2.844h1.51l-.218 1.25h-1.702l-.608 1.805h1.497l-.219 1.251H9.182L8.252 13H6.878l.93-2.803zm-.602-1.25h1.012l.615-1.805H7.814l-.608 1.804z"
-                                                                                fillRule="evenodd"
-                                                                              />
-                                                                            </svg>
-                                                                          </number>
-                                                                        </EuiIcon>
-                                                                        <span
-                                                                          className="euiBadge__text"
-                                                                        >
-                                                                          id-123
-                                                                        </span>
-                                                                      </span>
-                                                                    </span>
-                                                                  </EuiBadge>
-                                                                </Styled(EuiBadge)>
-                                                              </div>
-                                                            </EuiText>
-                                                          </div>
-                                                        </styled.div>
-                                                      </DragHandle>
-                                                    </DoubleRenderBlocker>
-                                                  </Motion>
-                                                </Moveable>
-                                              </DraggableDimensionPublisher>
-                                            </Draggable>
-                                          </Connect(Draggable)>
-                                        </div>
-                                      </DroppableDimensionPublisher>
-                                    </Droppable>
-                                  </Connect(Droppable)>
-                                </div>
-                              </DraggableWrapperComponent>
-                            </Connect(DraggableWrapperComponent)>
-                          </div>
-                        </EuiFlexItem>
-                      </Styled(EuiFlexItem)>
-                    </Component>
-                  </pure(Component)>
-                  <pure(Component)
-                    tokens={
-                      Array [
-                        "ET",
-                        "SCAN",
-                        "ATTACK",
-                      ]
-                    }
-                  >
-                    <Component
-                      tokens={
-                        Array [
-                          "ET",
-                          "SCAN",
-                          "ATTACK",
-                        ]
-                      }
-                    >
-                      <Styled(EuiFlexItem)
-                        grow={false}
-                        key="ET"
-                      >
-                        <EuiFlexItem
-                          className="sc-elJkPf loYSor"
-                          component="div"
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero sc-elJkPf loYSor"
-                          >
-                            <EuiBadge
-                              color="hollow"
-                              iconSide="left"
-                              iconType="tag"
-                            >
-                              <span
-                                className="euiBadge euiBadge--hollow"
-                                style={null}
-                              >
-                                <span
-                                  className="euiBadge__content"
-                                >
-                                  <EuiIcon
-                                    className="euiBadge__icon"
-                                    size="s"
-                                    type="tag"
-                                  >
-                                    <tag
-                                      className="euiIcon euiIcon--small euiBadge__icon"
-                                      focusable="false"
-                                      height="16"
-                                      style={null}
-                                      viewBox="0 0 16 16"
-                                      width="16"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        className="euiIcon euiIcon--small euiBadge__icon"
-                                        focusable="false"
-                                        height="16"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M6.254 14.97L.996 9.712c-.315-.316-.397-.463-.45-.64a.909.909 0 0 1 0-.534c.053-.177.135-.324.45-.64L7.43 1.466c.182-.183.252-.24.338-.293a.87.87 0 0 1 .273-.113c.099-.023.188-.032.446-.032h5.173c.445 0 .607.046.77.133.162.087.29.214.377.377.088.162.134.324.136.769l.015 5.15c0 .259-.009.348-.032.448a.87.87 0 0 1-.112.273c-.054.087-.111.157-.294.34L8.067 14.97c-.315.315-.462.396-.639.45a.909.909 0 0 1-.535 0c-.176-.054-.324-.135-.639-.45zm1.106-.707l6.453-6.453c.092-.092.126-.128.141-.147.003-.025.004-.074.004-.204l-.015-5.15c0-.181-.003-.245-.009-.275a2.247 2.247 0 0 0-.274-.007H8.487c-.13 0-.179.001-.203.004-.02.015-.055.05-.147.141L1.703 8.606a2.248 2.248 0 0 0-.189.2c.017.024.061.07.19.198l5.257 5.259c.128.128.175.171.2.188.024-.017.071-.06.2-.188zm4.972-10.607a2 2 0 1 1-2.828 2.828 2 2 0 0 1 2.828-2.828zm-.707.707a1 1 0 1 0-1.414 1.414 1 1 0 0 0 1.414-1.414zM6.807 11.28L4.686 9.159a.5.5 0 1 1 .707-.707l2.121 2.12a.5.5 0 1 1-.707.708zm1.414-1.414l-2.12-2.122a.5.5 0 1 1 .706-.707L8.928 9.16a.5.5 0 1 1-.707.707z"
-                                        />
-                                      </svg>
-                                    </tag>
-                                  </EuiIcon>
-                                  <span
-                                    className="euiBadge__text"
-                                  >
-                                    ET
-                                  </span>
-                                </span>
-                              </span>
-                            </EuiBadge>
-                          </div>
-                        </EuiFlexItem>
-                      </Styled(EuiFlexItem)>
-                      <Styled(EuiFlexItem)
-                        grow={false}
-                        key="SCAN"
-                      >
-                        <EuiFlexItem
-                          className="sc-elJkPf loYSor"
-                          component="div"
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero sc-elJkPf loYSor"
-                          >
-                            <EuiBadge
-                              color="hollow"
-                              iconSide="left"
-                              iconType="tag"
-                            >
-                              <span
-                                className="euiBadge euiBadge--hollow"
-                                style={null}
-                              >
-                                <span
-                                  className="euiBadge__content"
-                                >
-                                  <EuiIcon
-                                    className="euiBadge__icon"
-                                    size="s"
-                                    type="tag"
-                                  >
-                                    <tag
-                                      className="euiIcon euiIcon--small euiBadge__icon"
-                                      focusable="false"
-                                      height="16"
-                                      style={null}
-                                      viewBox="0 0 16 16"
-                                      width="16"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        className="euiIcon euiIcon--small euiBadge__icon"
-                                        focusable="false"
-                                        height="16"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M6.254 14.97L.996 9.712c-.315-.316-.397-.463-.45-.64a.909.909 0 0 1 0-.534c.053-.177.135-.324.45-.64L7.43 1.466c.182-.183.252-.24.338-.293a.87.87 0 0 1 .273-.113c.099-.023.188-.032.446-.032h5.173c.445 0 .607.046.77.133.162.087.29.214.377.377.088.162.134.324.136.769l.015 5.15c0 .259-.009.348-.032.448a.87.87 0 0 1-.112.273c-.054.087-.111.157-.294.34L8.067 14.97c-.315.315-.462.396-.639.45a.909.909 0 0 1-.535 0c-.176-.054-.324-.135-.639-.45zm1.106-.707l6.453-6.453c.092-.092.126-.128.141-.147.003-.025.004-.074.004-.204l-.015-5.15c0-.181-.003-.245-.009-.275a2.247 2.247 0 0 0-.274-.007H8.487c-.13 0-.179.001-.203.004-.02.015-.055.05-.147.141L1.703 8.606a2.248 2.248 0 0 0-.189.2c.017.024.061.07.19.198l5.257 5.259c.128.128.175.171.2.188.024-.017.071-.06.2-.188zm4.972-10.607a2 2 0 1 1-2.828 2.828 2 2 0 0 1 2.828-2.828zm-.707.707a1 1 0 1 0-1.414 1.414 1 1 0 0 0 1.414-1.414zM6.807 11.28L4.686 9.159a.5.5 0 1 1 .707-.707l2.121 2.12a.5.5 0 1 1-.707.708zm1.414-1.414l-2.12-2.122a.5.5 0 1 1 .706-.707L8.928 9.16a.5.5 0 1 1-.707.707z"
-                                        />
-                                      </svg>
-                                    </tag>
-                                  </EuiIcon>
-                                  <span
-                                    className="euiBadge__text"
-                                  >
-                                    SCAN
-                                  </span>
-                                </span>
-                              </span>
-                            </EuiBadge>
-                          </div>
-                        </EuiFlexItem>
-                      </Styled(EuiFlexItem)>
-                      <Styled(EuiFlexItem)
-                        grow={false}
-                        key="ATTACK"
-                      >
-                        <EuiFlexItem
-                          className="sc-elJkPf loYSor"
-                          component="div"
-                          grow={false}
-                        >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero sc-elJkPf loYSor"
-                          >
-                            <EuiBadge
-                              color="hollow"
-                              iconSide="left"
-                              iconType="tag"
-                            >
-                              <span
-                                className="euiBadge euiBadge--hollow"
-                                style={null}
-                              >
-                                <span
-                                  className="euiBadge__content"
-                                >
-                                  <EuiIcon
-                                    className="euiBadge__icon"
-                                    size="s"
-                                    type="tag"
-                                  >
-                                    <tag
-                                      className="euiIcon euiIcon--small euiBadge__icon"
-                                      focusable="false"
-                                      height="16"
-                                      style={null}
-                                      viewBox="0 0 16 16"
-                                      width="16"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        className="euiIcon euiIcon--small euiBadge__icon"
-                                        focusable="false"
-                                        height="16"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M6.254 14.97L.996 9.712c-.315-.316-.397-.463-.45-.64a.909.909 0 0 1 0-.534c.053-.177.135-.324.45-.64L7.43 1.466c.182-.183.252-.24.338-.293a.87.87 0 0 1 .273-.113c.099-.023.188-.032.446-.032h5.173c.445 0 .607.046.77.133.162.087.29.214.377.377.088.162.134.324.136.769l.015 5.15c0 .259-.009.348-.032.448a.87.87 0 0 1-.112.273c-.054.087-.111.157-.294.34L8.067 14.97c-.315.315-.462.396-.639.45a.909.909 0 0 1-.535 0c-.176-.054-.324-.135-.639-.45zm1.106-.707l6.453-6.453c.092-.092.126-.128.141-.147.003-.025.004-.074.004-.204l-.015-5.15c0-.181-.003-.245-.009-.275a2.247 2.247 0 0 0-.274-.007H8.487c-.13 0-.179.001-.203.004-.02.015-.055.05-.147.141L1.703 8.606a2.248 2.248 0 0 0-.189.2c.017.024.061.07.19.198l5.257 5.259c.128.128.175.171.2.188.024-.017.071-.06.2-.188zm4.972-10.607a2 2 0 1 1-2.828 2.828 2 2 0 0 1 2.828-2.828zm-.707.707a1 1 0 1 0-1.414 1.414 1 1 0 0 0 1.414-1.414zM6.807 11.28L4.686 9.159a.5.5 0 1 1 .707-.707l2.121 2.12a.5.5 0 1 1-.707.708zm1.414-1.414l-2.12-2.122a.5.5 0 1 1 .706-.707L8.928 9.16a.5.5 0 1 1-.707.707z"
-                                        />
-                                      </svg>
-                                    </tag>
-                                  </EuiIcon>
-                                  <span
-                                    className="euiBadge__text"
-                                  >
-                                    ATTACK
-                                  </span>
-                                </span>
-                              </span>
-                            </EuiBadge>
-                          </div>
-                        </EuiFlexItem>
-                      </Styled(EuiFlexItem)>
-                    </Component>
-                  </pure(Component)>
-                  <Styled(EuiFlexItem)
-                    grow={false}
-                  >
-                    <EuiFlexItem
-                      className="sc-jtRfpW CwDOZ"
-                      component="div"
-                      grow={false}
-                    >
-                      <div
-                        className="euiFlexItem euiFlexItem--flexGrowZero sc-jtRfpW CwDOZ"
-                      >
-                        <pure(Component)
-                          link="ET SCAN ATTACK Hello"
-                        >
-                          <Component
-                            link="ET SCAN ATTACK Hello"
-                          >
-                            <EuiLink
-                              color="primary"
-                              href="https://www.google.com/search?q=ET%20SCAN%20ATTACK%20Hello"
-                              target="_blank"
-                              type="button"
-                            >
-                              <a
-                                className="euiLink euiLink--primary"
-                                href="https://www.google.com/search?q=ET%20SCAN%20ATTACK%20Hello"
-                                rel="noopener noreferrer"
-                                target="_blank"
-                              >
-                                Hello
-                              </a>
-                            </EuiLink>
-                          </Component>
-                        </pure(Component)>
-                      </div>
-                    </EuiFlexItem>
-                  </Styled(EuiFlexItem)>
-                </div>
-              </EuiFlexGroup>
-            </Component>
-          </pure(Component)>
-        </DragDropContext>
-      </ThemeProvider>
-    </Provider>
-  </Component>
-</pure(Component)>
+  <pure(Component)
+    id="doc-id-123"
+    signature="ET SCAN ATTACK Hello"
+    signatureId="id-123"
+  />
+</Component>
 `;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/unknown_column_renderer.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`unknown_column_renderer renders correctly against snapshot 1`] = `
+<span>
+  --
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/zeek_details.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ZeekDetails rendering it renders the default ZeekDetails 1`] = `
-<pure(Component)
+<Component
   intl={
     Object {
       "defaultFormats": Object {},
@@ -105,225 +105,52 @@ exports[`ZeekDetails rendering it renders the default ZeekDetails 1`] = `
     }
   }
 >
-  <Component
-    intl={
+  <pure(Component)
+    data={
       Object {
-        "defaultFormats": Object {},
-        "defaultLocale": "en",
-        "formatDate": [Function],
-        "formatHTMLMessage": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatPlural": [Function],
-        "formatRelative": [Function],
-        "formatTime": [Function],
-        "formats": Object {
-          "date": Object {
-            "full": Object {
-              "day": "numeric",
-              "month": "long",
-              "weekday": "long",
-              "year": "numeric",
-            },
-            "long": Object {
-              "day": "numeric",
-              "month": "long",
-              "year": "numeric",
-            },
-            "medium": Object {
-              "day": "numeric",
-              "month": "short",
-              "year": "numeric",
-            },
-            "short": Object {
-              "day": "numeric",
-              "month": "numeric",
-              "year": "2-digit",
-            },
-          },
-          "number": Object {
-            "currency": Object {
-              "style": "currency",
-            },
-            "percent": Object {
-              "style": "percent",
-            },
-          },
-          "relative": Object {
-            "days": Object {
-              "units": "day",
-            },
-            "hours": Object {
-              "units": "hour",
-            },
-            "minutes": Object {
-              "units": "minute",
-            },
-            "months": Object {
-              "units": "month",
-            },
-            "seconds": Object {
-              "units": "second",
-            },
-            "years": Object {
-              "units": "year",
-            },
-          },
-          "time": Object {
-            "full": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "long": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "medium": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-            },
-            "short": Object {
-              "hour": "numeric",
-              "minute": "numeric",
+        "_id": "4",
+        "destination": Object {
+          "ip": "192.168.0.3",
+          "port": 6343,
+        },
+        "event": Object {
+          "category": "Attempted Administrator Privilege Gain",
+          "id": 4,
+          "module": "suricata",
+          "severity": 1,
+          "type": "Alert",
+        },
+        "geo": Object {
+          "country_iso_code": "xx",
+          "region_name": "xx",
+        },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": "suricata",
+        },
+        "source": Object {
+          "ip": "192.168.0.3",
+          "port": 53,
+        },
+        "suricata": Object {
+          "eve": Object {
+            "alert": Object {
+              "signature": "ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)",
+              "signature_id": 4,
             },
+            "flow_id": 4,
+            "proto": "",
           },
         },
-        "formatters": Object {
-          "getDateTimeFormat": [Function],
-          "getMessageFormat": [Function],
-          "getNumberFormat": [Function],
-          "getPluralFormat": [Function],
-          "getRelativeFormat": [Function],
+        "timestamp": "2018-11-08T19:03:25.937Z",
+        "user": Object {
+          "id": 4,
+          "name": "jenny.jones",
         },
-        "locale": "en",
-        "messages": Object {},
-        "now": [Function],
-        "onError": [Function],
-        "textComponent": Symbol(react.fragment),
-        "timeZone": null,
       }
     }
-  >
-    <Provider
-      store={
-        Object {
-          "dispatch": [Function],
-          "getState": [Function],
-          "replaceReducer": [Function],
-          "subscribe": [Function],
-          Symbol(observable): [Function],
-        }
-      }
-    >
-      <ThemeProvider
-        theme={[Function]}
-      >
-        <DragDropContext
-          onDragEnd={[MockFunction]}
-        >
-          <pure(Component)
-            data={
-              Object {
-                "_id": "4",
-                "destination": Object {
-                  "ip": "192.168.0.3",
-                  "port": 6343,
-                },
-                "event": Object {
-                  "category": "Attempted Administrator Privilege Gain",
-                  "id": 4,
-                  "module": "suricata",
-                  "severity": 1,
-                  "type": "Alert",
-                },
-                "geo": Object {
-                  "country_iso_code": "xx",
-                  "region_name": "xx",
-                },
-                "host": Object {
-                  "ip": Array [
-                    "192.168.0.1",
-                  ],
-                  "name": "suricata",
-                },
-                "source": Object {
-                  "ip": "192.168.0.3",
-                  "port": 53,
-                },
-                "suricata": Object {
-                  "eve": Object {
-                    "alert": Object {
-                      "signature": "ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)",
-                      "signature_id": 4,
-                    },
-                    "flow_id": 4,
-                    "proto": "",
-                  },
-                },
-                "timestamp": "2018-11-08T19:03:25.937Z",
-                "user": Object {
-                  "id": 4,
-                  "name": "jenny.jones",
-                },
-              }
-            }
-          >
-            <Component
-              data={
-                Object {
-                  "_id": "4",
-                  "destination": Object {
-                    "ip": "192.168.0.3",
-                    "port": 6343,
-                  },
-                  "event": Object {
-                    "category": "Attempted Administrator Privilege Gain",
-                    "id": 4,
-                    "module": "suricata",
-                    "severity": 1,
-                    "type": "Alert",
-                  },
-                  "geo": Object {
-                    "country_iso_code": "xx",
-                    "region_name": "xx",
-                  },
-                  "host": Object {
-                    "ip": Array [
-                      "192.168.0.1",
-                    ],
-                    "name": "suricata",
-                  },
-                  "source": Object {
-                    "ip": "192.168.0.3",
-                    "port": 53,
-                  },
-                  "suricata": Object {
-                    "eve": Object {
-                      "alert": Object {
-                        "signature": "ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)",
-                        "signature_id": 4,
-                      },
-                      "flow_id": 4,
-                      "proto": "",
-                    },
-                  },
-                  "timestamp": "2018-11-08T19:03:25.937Z",
-                  "user": Object {
-                    "id": 4,
-                    "name": "jenny.jones",
-                  },
-                }
-              }
-            />
-          </pure(Component)>
-        </DragDropContext>
-      </ThemeProvider>
-    </Provider>
-  </Component>
-</pure(Component)>
+  />
+</Component>
 `;

x-pack/plugins/secops/public/components/timeline/body/renderers/__snapshots__/zeek_row_renderer.test.tsx.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`zeek_row_renderer renders correctly against snapshot 1`] = `
+<span>
+  <styled.div>
+    <span>
+      some children
+    </span>
+    <styled.div
+      width={100}
+    >
+      <pure(Component)
+        data={
+          Object {
+            "_id": "1",
+            "destination": Object {
+              "ip": "192.168.0.3",
+              "port": 6343,
+            },
+            "event": Object {
+              "action": "Action",
+              "category": "Access",
+              "id": 1,
+              "module": "nginx",
+              "severity": 3,
+            },
+            "geo": Object {
+              "country_iso_code": "xx",
+              "region_name": "xx",
+            },
+            "host": Object {
+              "ip": Array [
+                "192.168.0.1",
+              ],
+              "name": "apache",
+            },
+            "source": Object {
+              "ip": "192.168.0.1",
+              "port": 80,
+            },
+            "timestamp": "2018-11-05T19:03:25.937Z",
+            "user": Object {
+              "id": 1,
+              "name": "john.dee",
+            },
+          }
+        }
+      />
+    </styled.div>
+  </styled.div>
+</span>
+`;

x-pack/plugins/secops/public/components/timeline/body/renderers/empty_column_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import React from 'react';
 
@@ -23,6 +24,17 @@ describe('empty_column_renderer', () => {
     mockDatum = cloneDeep(mockEcsData[0]);
   });
 
+  test('renders correctly against snapshot', () => {
+    delete mockDatum.source;
+    const emptyColumn = emptyColumnRenderer.renderColumn({
+      columnName: 'source',
+      data: mockDatum,
+      field: allFieldsInSchemaByName.source,
+    });
+    const wrapper = shallow(<span>{emptyColumn}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should return isInstance true if source is empty', () => {
     delete mockDatum.source;
     expect(emptyColumnRenderer.isInstance('source', mockDatum)).toBe(true);

x-pack/plugins/secops/public/components/timeline/body/renderers/formatted_field.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { mockEcsData } from '../../../../mock';
@@ -13,6 +14,13 @@ import { getEmptyValue } from '../../../empty_value';
 import { FormattedField } from './formatted_field';
 
 describe('Events', () => {
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(
+      <FormattedField data={mockEcsData[0]} fieldName="timestamp" fieldType="date" />
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it renders a localized date tooltip for a field type of date that has a valid timestamp', () => {
     const wrapper = mount(
       <FormattedField data={mockEcsData[0]} fieldName="timestamp" fieldType="date" />

x-pack/plugins/secops/public/components/timeline/body/renderers/get_column_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import * as React from 'react';
 
@@ -26,6 +27,19 @@ describe('get_column_renderer', () => {
     nonSuricata = cloneDeep(mockEcsData[0]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const columnName = 'event.id';
+    const columnRenderer = getColumnRenderer(columnName, columnRenderers, nonSuricata);
+    const column = columnRenderer.renderColumn({
+      columnName,
+      data: nonSuricata,
+      field: allFieldsInSchemaByName[columnName],
+    });
+
+    const wrapper = shallow(<span>{column}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should render event id when dealing with data that is not suricata', () => {
     const columnName = 'event.id';
     const columnRenderer = getColumnRenderer(columnName, columnRenderers, nonSuricata);

x-pack/plugins/secops/public/components/timeline/body/renderers/get_row_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash';
 import * as React from 'react';
 
@@ -24,6 +25,18 @@ describe('get_column_renderer', () => {
     suricata = cloneDeep(mockEcsData[2]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const rowRenderer = getRowRenderer(nonSuricata, rowRenderers);
+    const row = rowRenderer.renderRow({
+      data: nonSuricata,
+      width: 100,
+      children: <span>some child</span>,
+    });
+
+    const wrapper = shallow(<span>{row}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should render plain row data when it is a non suricata row', () => {
     const rowRenderer = getRowRenderer(nonSuricata, rowRenderers);
     const row = rowRenderer.renderRow({

x-pack/plugins/secops/public/components/timeline/body/renderers/plain_column_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import moment from 'moment-timezone';
 import * as React from 'react';
@@ -27,6 +28,16 @@ describe('plain_column_renderer', () => {
     mockDatum = cloneDeep(mockEcsData[0]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const column = plainColumnRenderer.renderColumn({
+      columnName: 'event.category',
+      data: mockDatum,
+      field: allFieldsInSchemaByName['event.category'],
+    });
+    const wrapper = shallow(<span>{column}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should return isInstance false if source is empty', () => {
     delete mockDatum.source;
     expect(plainColumnRenderer.isInstance('source', mockDatum)).toBe(false);

x-pack/plugins/secops/public/components/timeline/body/renderers/plain_row_renderer.test.tsx

@@ -5,7 +5,8 @@
  */
 
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
@@ -21,6 +22,16 @@ describe('plain_row_renderer', () => {
     mockDatum = cloneDeep(mockEcsData[0]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const children = plainRowRenderer.renderRow({
+      data: mockDatum,
+      width: 100,
+      children: <span>some children</span>,
+    });
+    const wrapper = shallow(<span>{children}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should always return isInstance true', () => {
     expect(plainRowRenderer.isInstance(mockDatum)).toBe(true);
   });

x-pack/plugins/secops/public/components/timeline/body/renderers/source_dest_ip.test.tsx

@@ -6,7 +6,7 @@
 
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { TestProviders } from 'x-pack/plugins/secops/public/mock/test_providers';
 
 import { mockEcsData } from '../../../../mock';
@@ -16,7 +16,7 @@ import { SourceDest } from './source_dest_ip';
 describe('SuricataDestIp', () => {
   describe('rendering', () => {
     test('it renders the default SuricataDestIp', () => {
-      const wrapper = mountWithIntl(
+      const wrapper = shallowWithIntl(
         <TestProviders>
           <SourceDest data={mockEcsData[2]} />
         </TestProviders>

x-pack/plugins/secops/public/components/timeline/body/renderers/suricata_details.test.tsx

@@ -6,7 +6,7 @@
 
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { mockEcsData } from '../../../../mock';
 import { TestProviders } from '../../../../mock/test_providers';
@@ -16,7 +16,7 @@ import { SuricataDetails } from './suricata_details';
 describe('SuricataDetails', () => {
   describe('rendering', () => {
     test('it renders the default SuricataDetails', () => {
-      const wrapper = mountWithIntl(
+      const wrapper = shallowWithIntl(
         <TestProviders>
           <SuricataDetails data={mockEcsData[2]} />
         </TestProviders>

x-pack/plugins/secops/public/components/timeline/body/renderers/suricata_row_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import * as React from 'react';
 
@@ -23,6 +24,17 @@ describe('suricata_row_renderer', () => {
     suricata = cloneDeep(mockEcsData[2]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const children = suricataRowRenderer.renderRow({
+      data: nonSuricata,
+      width: 100,
+      children: <span>some children</span>,
+    });
+
+    const wrapper = shallow(<span>{children}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should return false if not a suricata datum', () => {
     expect(suricataRowRenderer.isInstance(nonSuricata)).toBe(false);
   });

x-pack/plugins/secops/public/components/timeline/body/renderers/suricata_signature.test.tsx

@@ -6,7 +6,7 @@
 
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { TestProviders } from 'x-pack/plugins/secops/public/mock/test_providers';
 
 import { DraggableSignatureId, SuricataSignature, Tokens } from './suricata_signature';
@@ -14,7 +14,7 @@ import { DraggableSignatureId, SuricataSignature, Tokens } from './suricata_sign
 describe('SuricataSignature', () => {
   describe('rendering', () => {
     test('it renders the default SuricataSignature', () => {
-      const wrapper = mountWithIntl(
+      const wrapper = shallowWithIntl(
         <TestProviders>
           <SuricataSignature
             id="doc-id-123"

x-pack/plugins/secops/public/components/timeline/body/renderers/unknown_column_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash';
 import React from 'react';
 
@@ -23,6 +24,16 @@ describe('unknown_column_renderer', () => {
     mockDatum = cloneDeep(mockEcsData[0]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const emptyColumn = unknownColumnRenderer.renderColumn({
+      columnName: '_id',
+      data: mockDatum,
+      field: allFieldsInSchemaByName._id,
+    });
+    const wrapper = shallow(<span>{emptyColumn}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should return isInstance true with a made up column name', () => {
     expect(unknownColumnRenderer.isInstance('a made up column name', mockDatum)).toBe(true);
   });

x-pack/plugins/secops/public/components/timeline/body/renderers/zeek_details.test.tsx

@@ -6,7 +6,7 @@
 
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { mockEcsData, TestProviders } from '../../../../mock';
 
@@ -15,7 +15,7 @@ import { ZeekDetails } from './zeek_details';
 describe('ZeekDetails', () => {
   describe('rendering', () => {
     test('it renders the default ZeekDetails', () => {
-      const wrapper = mountWithIntl(
+      const wrapper = shallowWithIntl(
         <TestProviders>
           <ZeekDetails data={mockEcsData[2]} />
         </TestProviders>

x-pack/plugins/secops/public/components/timeline/body/renderers/zeek_row_renderer.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import * as React from 'react';
 
@@ -22,6 +23,17 @@ describe('zeek_row_renderer', () => {
     zeek = cloneDeep(mockEcsData[13]);
   });
 
+  test('renders correctly against snapshot', () => {
+    const children = zeekRowRenderer.renderRow({
+      data: nonZeek,
+      width: 100,
+      children: <span>some children</span>,
+    });
+
+    const wrapper = shallow(<span>{children}</span>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('should return false if not a zeek datum', () => {
     expect(zeekRowRenderer.isInstance(nonZeek)).toBe(false);
   });

x-pack/plugins/secops/public/components/timeline/body/renderers/zeek_signature.test.tsx

@@ -7,7 +7,7 @@
 import toJson from 'enzyme-to-json';
 import { cloneDeep } from 'lodash/fp';
 import * as React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 
 import { Ecs } from '../../../../graphql/types';
 import { TestProviders } from '../../../../mock';
@@ -36,7 +36,7 @@ describe('ZeekSignature', () => {
 
   describe('rendering', () => {
     test('it renders the default Zeek', () => {
-      const wrapper = mountWithIntl(
+      const wrapper = shallowWithIntl(
         <TestProviders>
           <ZeekSignature data={zeek} />
         </TestProviders>

x-pack/plugins/secops/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SortIndicator rendering renders correctly against snapshot 1`] = `
+<Component
+  sortDirection="descending"
+/>
+`;

x-pack/plugins/secops/public/components/timeline/body/sort/sort_indicator.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { Direction } from '../../../../graphql/types';
@@ -13,6 +14,11 @@ import { getDirection, SortIndicator } from './sort_indicator';
 
 describe('SortIndicator', () => {
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(<SortIndicator sortDirection={Direction.descending} />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the sort indicator', () => {
       const wrapper = mount(<SortIndicator sortDirection={Direction.descending} />);
 

x-pack/plugins/secops/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataProviders rendering renders correctly against snapshot 1`] = `
+<Component
+  dataProviders={
+    Array [
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 1",
+        "kqlQuery": "",
+        "name": "Provider 1",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 1",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 2",
+        "kqlQuery": "",
+        "name": "Provider 2",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 2",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 3",
+        "kqlQuery": "",
+        "name": "Provider 3",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 3",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 4",
+        "kqlQuery": "",
+        "name": "Provider 4",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 4",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 5",
+        "kqlQuery": "",
+        "name": "Provider 5",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 5",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 6",
+        "kqlQuery": "",
+        "name": "Provider 6",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 6",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 7",
+        "kqlQuery": "",
+        "name": "Provider 7",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 7",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 8",
+        "kqlQuery": "",
+        "name": "Provider 8",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 8",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 9",
+        "kqlQuery": "",
+        "name": "Provider 9",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 9",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 10",
+        "kqlQuery": "",
+        "name": "Provider 10",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 10",
+        },
+      },
+    ]
+  }
+  id="foo"
+  onChangeDataProviderKqlQuery={[MockFunction]}
+  onChangeDroppableAndProvider={[MockFunction]}
+  onDataProviderRemoved={[MockFunction]}
+  onToggleDataProviderEnabled={[MockFunction]}
+  onToggleDataProviderExcluded={[MockFunction]}
+  show={true}
+/>
+`;

x-pack/plugins/secops/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty rendering renders correctly against snapshot 1`] = `<Component />`;

x-pack/plugins/secops/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Provider rendering renders correctly against snapshot 1`] = `
+<Component
+  dataProvider={
+    Object {
+      "and": Array [],
+      "enabled": true,
+      "excluded": false,
+      "id": "id-Provider 1",
+      "kqlQuery": "",
+      "name": "Provider 1",
+      "queryDate": Object {
+        "from": 1521830963132,
+        "to": 1521862432253,
+      },
+      "queryMatch": Object {
+        "field": "name",
+        "value": "Provider 1",
+      },
+    }
+  }
+/>
+`;

x-pack/plugins/secops/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap

@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Providers rendering renders correctly against snapshot 1`] = `
+<Component
+  droppableId="unitTest"
+>
+  <pure(Component)
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryDate": Object {
+            "from": 1521830963132,
+            "to": 1521862432253,
+          },
+          "queryMatch": Object {
+            "field": "name",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    id="foo"
+    onChangeDataProviderKqlQuery={[MockFunction]}
+    onChangeDroppableAndProvider={[MockFunction]}
+    onDataProviderRemoved={[MockFunction]}
+    onToggleDataProviderEnabled={[MockFunction]}
+    onToggleDataProviderExcluded={[MockFunction]}
+  />
+</Component>
+`;

x-pack/plugins/secops/public/components/timeline/data_providers/data_providers.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { TestProviders } from '../../../mock/test_providers';
@@ -17,6 +18,22 @@ describe('DataProviders', () => {
   describe('rendering', () => {
     const dropMessage = ['Drop', 'anything', 'highlighted', 'here'];
 
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <DataProviders
+          id="foo"
+          dataProviders={mockDataProviders}
+          onChangeDataProviderKqlQuery={jest.fn()}
+          onChangeDroppableAndProvider={jest.fn()}
+          onDataProviderRemoved={jest.fn()}
+          onToggleDataProviderEnabled={jest.fn()}
+          onToggleDataProviderExcluded={jest.fn()}
+          show={true}
+        />
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it should render a placeholder when there are zero data providers', () => {
       const dataProviders: DataProvider[] = [];
 

x-pack/plugins/secops/public/components/timeline/data_providers/empty.test.tsx

@@ -4,13 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { Empty } from './empty';
 
 describe('Empty', () => {
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(<Empty />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     const dropMessage = ['Drop', 'anything', 'highlighted', 'here'];
 
     test('it renders the expected message', () => {

x-pack/plugins/secops/public/components/timeline/data_providers/provider.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { TestProviders } from '../../../mock/test_providers';
@@ -14,6 +15,11 @@ import { Provider } from './provider';
 
 describe('Provider', () => {
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(<Provider dataProvider={mockDataProviders[0]} />);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the data provider', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/timeline/data_providers/providers.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { TestProviders } from '../../../mock/test_providers';
@@ -15,6 +16,23 @@ import { getDraggableId, Providers } from './providers';
 
 describe('Providers', () => {
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <DroppableWrapper droppableId="unitTest">
+          <Providers
+            id="foo"
+            dataProviders={mockDataProviders}
+            onChangeDataProviderKqlQuery={jest.fn()}
+            onChangeDroppableAndProvider={jest.fn()}
+            onDataProviderRemoved={jest.fn()}
+            onToggleDataProviderEnabled={jest.fn()}
+            onToggleDataProviderExcluded={jest.fn()}
+          />
+        </DroppableWrapper>
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the data providers', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/timeline/header/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,268 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header rendering renders correctly against snapshot 1`] = `
+<Component
+  dataProviders={
+    Array [
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 1",
+        "kqlQuery": "",
+        "name": "Provider 1",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 1",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 2",
+        "kqlQuery": "",
+        "name": "Provider 2",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 2",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 3",
+        "kqlQuery": "",
+        "name": "Provider 3",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 3",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 4",
+        "kqlQuery": "",
+        "name": "Provider 4",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 4",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 5",
+        "kqlQuery": "",
+        "name": "Provider 5",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 5",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 6",
+        "kqlQuery": "",
+        "name": "Provider 6",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 6",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 7",
+        "kqlQuery": "",
+        "name": "Provider 7",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 7",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 8",
+        "kqlQuery": "",
+        "name": "Provider 8",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 8",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 9",
+        "kqlQuery": "",
+        "name": "Provider 9",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 9",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 10",
+        "kqlQuery": "",
+        "name": "Provider 10",
+        "queryDate": Object {
+          "from": 1521830963132,
+          "to": 1521862432253,
+        },
+        "queryMatch": Object {
+          "field": "name",
+          "value": "Provider 10",
+        },
+      },
+    ]
+  }
+  id="foo"
+  indexPattern={
+    Object {
+      "fields": Array [
+        Object {
+          "aggregatable": true,
+          "name": "@timestamp",
+          "searchable": true,
+          "type": "date",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "@version",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.ephemeral_id",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.hostname",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.id",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test1",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test2",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test3",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test4",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test5",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test6",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test7",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test8",
+          "searchable": true,
+          "type": "string",
+        },
+      ],
+      "title": "filebeat-*,auditbeat-*,packetbeat-*",
+    }
+  }
+  onChangeDataProviderKqlQuery={[MockFunction]}
+  onChangeDroppableAndProvider={[MockFunction]}
+  onDataProviderRemoved={[MockFunction]}
+  onToggleDataProviderEnabled={[MockFunction]}
+  onToggleDataProviderExcluded={[MockFunction]}
+  show={true}
+  sort={
+    Object {
+      "columnId": "@timestamp",
+      "sortDirection": "descending",
+    }
+  }
+/>
+`;

x-pack/plugins/secops/public/components/timeline/header/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import { Direction } from '../../../graphql/types';
@@ -18,6 +19,27 @@ describe('Header', () => {
   const indexPattern = mockIndexPattern;
 
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <TimelineHeader
+          id="foo"
+          indexPattern={indexPattern}
+          dataProviders={mockDataProviders}
+          onChangeDataProviderKqlQuery={jest.fn()}
+          onChangeDroppableAndProvider={jest.fn()}
+          onDataProviderRemoved={jest.fn()}
+          onToggleDataProviderEnabled={jest.fn()}
+          onToggleDataProviderExcluded={jest.fn()}
+          show={true}
+          sort={{
+            columnId: '@timestamp',
+            sortDirection: Direction.descending,
+          }}
+        />
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the data providers', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/timeline/properties/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Properties renders correctly against snapshot 1`] = `
+<styled.div
+  data-test-subj="timeline-properties"
+>
+  <styled.div
+    data-test-subj="properties-left"
+  >
+    <pure(Component)
+      isFavorite={false}
+      timelineId="abc"
+      updateIsFavorite={[MockFunction]}
+    />
+    <pure(Component)
+      timelineId="abc"
+      title=""
+      updateTitle={[MockFunction]}
+    />
+    <pure(Component)
+      description=""
+      timelineId="abc"
+      updateDescription={[MockFunction]}
+    />
+  </styled.div>
+  <Styled(EuiFlexGroup)
+    alignItems="center"
+    data-test-subj="properties-right"
+    gutterSize="s"
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <pure(Component)
+        animate={true}
+        associateNote={[MockFunction]}
+        getNotesByIds={[MockFunction]}
+        noteIds={Array []}
+        showNotes={false}
+        size="l"
+        text="Notes"
+        toggleShowNotes={[Function]}
+        toolTip="Add and review notes about this Timeline. Notes may also be added to events."
+        updateNote={[MockFunction]}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <pure(Component)
+        history={Array []}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiPopover
+        anchorPosition="downRight"
+        button={
+          <EuiIcon
+            data-test-subj="settings-gear"
+            onClick={[Function]}
+            size="l"
+            type="gear"
+          />
+        }
+        closePopover={[Function]}
+        hasArrow={true}
+        id="timelineSettingsPopover"
+        isOpen={false}
+        ownFocus={false}
+        panelPaddingSize="m"
+      >
+        <EuiForm>
+          <EuiFormRow
+            describedByIds={Array []}
+            fullWidth={false}
+            hasEmptyLabelSpace={false}
+            labelType="label"
+          >
+            <pure(Component)
+              createTimeline={[MockFunction]}
+              onClosePopover={[Function]}
+              timelineId="abc"
+            />
+          </EuiFormRow>
+          <EuiFormRow
+            describedByIds={Array []}
+            fullWidth={false}
+            hasEmptyLabelSpace={false}
+            labelType="label"
+          >
+            <pure(Component)
+              isLive={false}
+              timelineId="abc"
+              updateIsLive={[MockFunction]}
+            />
+          </EuiFormRow>
+        </EuiForm>
+      </EuiPopover>
+    </EuiFlexItem>
+  </Styled(EuiFlexGroup)>
+</styled.div>
+`;

x-pack/plugins/secops/public/components/timeline/properties/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
 import {
@@ -18,6 +19,31 @@ import {
 describe('Properties', () => {
   const usersViewing = ['elastic'];
 
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(
+      <Properties
+        associateNote={jest.fn()}
+        createTimeline={jest.fn()}
+        isFavorite={false}
+        isLive={false}
+        title=""
+        description=""
+        getNotesByIds={jest.fn()}
+        noteIds={[]}
+        history={[]}
+        timelineId="abc"
+        updateDescription={jest.fn()}
+        updateIsFavorite={jest.fn()}
+        updateIsLive={jest.fn()}
+        updateTitle={jest.fn()}
+        updateNote={jest.fn()}
+        usersViewing={usersViewing}
+        width={1000}
+      />
+    );
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it renders an empty star icon when it is NOT a favorite', () => {
     const wrapper = mount(
       <Properties

x-pack/plugins/secops/public/components/timeline/timeline.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 
@@ -45,6 +46,47 @@ describe('Timeline', () => {
   ];
 
   describe('rendering', () => {
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <Timeline
+          addNoteToEvent={jest.fn()}
+          id="foo"
+          columnHeaders={defaultHeaders}
+          columnRenderers={columnRenderers}
+          dataProviders={mockDataProviders}
+          eventIdToNoteIds={{}}
+          flyoutHeight={testFlyoutHeight}
+          flyoutHeaderHeight={flyoutHeaderHeight}
+          getNotesByIds={mockGetNotesByIds}
+          indexPattern={indexPattern}
+          itemsPerPage={5}
+          itemsPerPageOptions={[5, 10, 20]}
+          kqlMode="search"
+          kqlQuery=""
+          onChangeDataProviderKqlQuery={jest.fn()}
+          onChangeDroppableAndProvider={jest.fn()}
+          onChangeItemsPerPage={jest.fn()}
+          onColumnResized={jest.fn()}
+          onColumnRemoved={jest.fn()}
+          onColumnSorted={jest.fn()}
+          onDataProviderRemoved={jest.fn()}
+          onFilterChange={jest.fn()}
+          onPinEvent={jest.fn()}
+          onRangeSelected={jest.fn()}
+          onToggleDataProviderEnabled={jest.fn()}
+          onToggleDataProviderExcluded={jest.fn()}
+          onUnPinEvent={jest.fn()}
+          pinnedEventIds={{}}
+          range={'1 Day'}
+          rowRenderers={rowRenderers}
+          show={true}
+          sort={sort}
+          updateNote={jest.fn()}
+        />
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
     test('it renders the timeline header', () => {
       const wrapper = mount(
         <TestProviders>

x-pack/plugins/secops/public/components/truncatable_text/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TruncatableText renders correctly against snapshot 1`] = `
+.c0 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 50px;
+}
+
+<EuiText
+  className="c0"
+  grow={true}
+  size="m"
+  width="50px"
+>
+  Hiding in plain sight
+</EuiText>
+`;

x-pack/plugins/secops/public/components/truncatable_text/index.test.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import 'jest-styled-components';
 import * as React from 'react';
 
@@ -13,6 +14,11 @@ import { TruncatableText } from '.';
 describe('TruncatableText', () => {
   const width = '50px';
 
+  test('renders correctly against snapshot', () => {
+    const wrapper = shallow(<TruncatableText width={width}>Hiding in plain sight</TruncatableText>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
   test('it adds the hidden overflow style', () => {
     const wrapper = mount(<TruncatableText width={width}>Hiding in plain sight</TruncatableText>);