From 77549f5aec7fe223158c3729b319c4f734baa4ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ece=20=C3=96zalp?= Date: Thu, 25 Feb 2021 11:00:42 -0500 Subject: [PATCH] [Security Solution] Replace EUI theme with mocks in jest suites (#92462) Previously there were a large number of jest specs that utilized the ThemeProvider (from styled-components package) to inject EUI themes into the mounted components. The full EUI theme is almost never necessary for unit tests as each tested component usually consumes no more than a single field or two from the EUI theme. In certain cases, the theme was not used at all. This change is intended to remove all unnecessary ThemeProviders from the suites, and replaces the imported EUI theme json files with mock themes customized for each tested component. With this change, snapshots are now significantly smaller, and tests are lighter. Closes #64092. --- .../components/and_or_badge/index.test.tsx | 11 +- .../and_or_badge/rounded_badge.test.tsx | 14 +- .../rounded_badge_antenna.test.tsx | 9 +- .../components/autocomplete/field.test.tsx | 142 ++- .../autocomplete/field_value_exists.test.tsx | 8 +- .../autocomplete/field_value_lists.test.tsx | 142 +-- .../autocomplete/field_value_match.test.tsx | 418 ++++--- .../field_value_match_any.test.tsx | 238 ++-- .../components/autocomplete/operator.test.tsx | 206 ++-- .../components/charts/barchart.test.tsx | 20 +- .../charts/draggable_legend.test.tsx | 28 +- .../charts/draggable_legend_item.test.tsx | 28 +- .../empty_value/empty_value.test.tsx | 21 +- .../add_exception_modal/index.test.tsx | 26 +- .../exceptions/builder/and_badge.test.tsx | 9 +- .../builder/exception_item.test.tsx | 15 +- .../exceptions/builder/index.test.tsx | 25 +- .../edit_exception_modal/index.test.tsx | 26 +- .../exceptions/error_callout.test.tsx | 142 ++- .../exception_item/exception_details.test.tsx | 29 +- .../exception_item/exception_entries.test.tsx | 19 +- .../viewer/exception_item/index.test.tsx | 20 +- .../viewer/exceptions_pagination.test.tsx | 122 +- .../viewer/exceptions_utility.test.tsx | 25 +- .../viewer/exceptions_viewer_header.test.tsx | 200 ++-- .../viewer/exceptions_viewer_items.test.tsx | 43 +- .../exceptions/viewer/index.test.tsx | 21 +- .../common/components/inspect/modal.test.tsx | 20 +- .../__snapshots__/index.test.tsx.snap | 1010 +++-------------- .../components/paginated_table/index.test.tsx | 81 +- .../components/stat_items/index.test.tsx | 7 +- .../threat_match/and_badge.test.tsx | 13 +- .../components/threat_match/index.test.tsx | 23 +- .../threat_match/list_item.test.tsx | 15 +- .../query_preview/custom_histogram.test.tsx | 82 +- .../query_preview/eql_histogram.test.tsx | 114 +- .../rules/query_preview/histogram.test.tsx | 92 +- .../rules/query_preview/index.test.tsx | 33 +- .../threshold_histogram.test.tsx | 72 +- .../rules/rule_switch/index.test.tsx | 67 +- .../rules/step_about_rule/index.test.tsx | 19 +- .../step_about_rule_details/index.test.tsx | 11 +- .../rules/all/utility_bar.test.tsx | 15 +- .../__snapshots__/index.test.tsx.snap | 3 - .../trusted_apps_grid/index.test.tsx | 11 +- .../__snapshots__/index.test.tsx.snap | 9 +- .../trusted_apps_list/index.test.tsx | 11 +- .../alerts_by_category/index.test.tsx | 19 +- .../fields_browser/categories_pane.test.tsx | 35 +- .../fields_browser/category_columns.test.tsx | 83 +- .../note_previews/index.test.tsx | 33 +- .../open_timeline/open_timeline.test.tsx | 66 +- .../open_timeline_modal_body.test.tsx | 24 +- .../open_timeline_modal_button.test.tsx | 16 +- .../open_timeline/search_row/index.test.tsx | 21 +- .../timelines_table/actions_columns.test.tsx | 34 +- .../timelines_table/common_columns.test.tsx | 94 +- .../timelines_table/extended_columns.test.tsx | 10 +- .../icon_header_columns.test.tsx | 25 +- .../timelines_table/index.test.tsx | 36 +- .../open_timeline/title_row/index.test.tsx | 18 +- .../renderers/plain_row_renderer.test.tsx | 8 +- .../unknown_column_renderer.test.tsx | 12 +- 63 files changed, 1664 insertions(+), 2585 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx index 11f424d83c530f..a6dd64737f5eee 100644 --- a/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx @@ -8,14 +8,15 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { AndOrBadge } from './'; +const mockTheme = { eui: { euiColorLightShade: '#ece' } }; + describe('AndOrBadge', () => { test('it renders top and bottom antenna bars when "includeAntennas" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -27,7 +28,7 @@ describe('AndOrBadge', () => { test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -39,7 +40,7 @@ describe('AndOrBadge', () => { test('it renders "and" when "type" is "and"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -49,7 +50,7 @@ describe('AndOrBadge', () => { test('it renders "or" when "type" is "or"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); diff --git a/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.test.tsx b/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.test.tsx index 5bc89baa3d4159..489d02990b1f42 100644 --- a/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.test.tsx @@ -6,29 +6,19 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { RoundedBadge } from './rounded_badge'; describe('RoundedBadge', () => { test('it renders "and" when "type" is "and"', () => { - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); + const wrapper = mount(); expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND'); }); test('it renders "or" when "type" is "or"', () => { - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); + const wrapper = mount(); expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); }); diff --git a/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx b/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx index 61cf44293005f7..c6536a05be45db 100644 --- a/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx @@ -8,14 +8,15 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { RoundedBadgeAntenna } from './rounded_badge_antenna'; +const mockTheme = { eui: { euiColorLightShade: '#ece' } }; + describe('RoundedBadgeAntenna', () => { test('it renders top and bottom antenna bars', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -27,7 +28,7 @@ describe('RoundedBadgeAntenna', () => { test('it renders "and" when "type" is "and"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -37,7 +38,7 @@ describe('RoundedBadgeAntenna', () => { test('it renders "or" when "type" is "or"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/field.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/field.test.tsx index 6a3d82d47045a3..79e6fe5506b84a 100644 --- a/x-pack/plugins/security_solution/public/common/components/autocomplete/field.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/field.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { @@ -20,21 +18,19 @@ import { FieldComponent } from './field'; describe('FieldComponent', () => { test('it renders disabled if "isDisabled" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -44,21 +40,19 @@ describe('FieldComponent', () => { test('it renders loading if "isLoading" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find(`[data-test-subj="fieldAutocompleteComboBox"] button`).at(0).simulate('click'); expect( @@ -70,21 +64,19 @@ describe('FieldComponent', () => { test('it allows user to clear values if "isClearable" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -96,21 +88,19 @@ describe('FieldComponent', () => { test('it correctly displays selected field', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -121,21 +111,19 @@ describe('FieldComponent', () => { test('it invokes "onChange" when option selected', () => { const mockOnChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_exists.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_exists.test.tsx index f577799827b89b..b6300581f12dd8 100644 --- a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_exists.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_exists.test.tsx @@ -6,19 +6,13 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { AutocompleteFieldExistsComponent } from './field_value_exists'; describe('AutocompleteFieldExistsComponent', () => { test('it renders field disabled', () => { - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); + const wrapper = mount(); expect( wrapper diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx index e01cc5ff1e0423..c605a71c50e336 100644 --- a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { waitFor } from '@testing-library/react'; @@ -47,17 +45,15 @@ jest.mock('../../../lists_plugin_deps', () => { describe('AutocompleteFieldListsComponent', () => { test('it renders disabled if "isDisabled" is true', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -69,17 +65,15 @@ describe('AutocompleteFieldListsComponent', () => { test('it renders loading if "isLoading" is true', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper @@ -97,17 +91,15 @@ describe('AutocompleteFieldListsComponent', () => { test('it allows user to clear values if "isClearable" is true', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( wrapper @@ -118,17 +110,15 @@ describe('AutocompleteFieldListsComponent', () => { test('it correctly displays lists that match the selected "keyword" field esType', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="comboBoxToggleListButton"] button').simulate('click'); @@ -142,17 +132,15 @@ describe('AutocompleteFieldListsComponent', () => { test('it correctly displays lists that match the selected "ip" field esType', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="comboBoxToggleListButton"] button').simulate('click'); @@ -166,17 +154,15 @@ describe('AutocompleteFieldListsComponent', () => { test('it correctly displays selected list', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -190,17 +176,15 @@ describe('AutocompleteFieldListsComponent', () => { test('it invokes "onChange" when option selected', async () => { const mockOnChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match.test.tsx index d4712092867e93..38d103fe651301 100644 --- a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount, ReactWrapper } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { EuiSuperSelect, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { act } from '@testing-library/react'; @@ -44,23 +42,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it renders row label if one passed in', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -70,23 +66,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it renders disabled if "isDisabled" is true', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -96,23 +90,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it renders loading if "isLoading" is true', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="valuesAutocompleteMatch"] button').at(0).simulate('click'); expect( @@ -124,23 +116,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it allows user to clear values if "isClearable" is true', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -152,23 +142,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it correctly displays selected value', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -179,23 +167,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it invokes "onChange" when new value created', async () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { @@ -208,23 +194,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it invokes "onChange" when new value selected', async () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { @@ -236,23 +220,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it refreshes autocomplete with search query when new value searched', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); act(() => { ((wrapper.find(EuiComboBox).props() as unknown) as { @@ -287,23 +269,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it displays only two options - "true" or "false"', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -326,23 +306,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it invokes "onChange" with "true" when selected', () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiSuperSelect).props() as unknown) as { @@ -355,23 +333,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it invokes "onChange" with "false" when selected', () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiSuperSelect).props() as unknown) as { @@ -396,23 +372,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it number input when field type is number', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -423,23 +397,21 @@ describe('AutocompleteFieldMatchComponent', () => { test('it invokes "onChange" with numeric value when inputted', () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match_any.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match_any.test.tsx index aa2038262f40cb..6b479c5ab8c4c9 100644 --- a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match_any.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_match_any.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount, ReactWrapper } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { act } from '@testing-library/react'; @@ -43,24 +41,22 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it renders disabled if "isDisabled" is true', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -70,24 +66,22 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it renders loading if "isLoading" is true', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find(`[data-test-subj="valuesAutocompleteMatchAny"] button`).at(0).simulate('click'); expect( @@ -99,24 +93,22 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it allows user to clear values if "isClearable" is true', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -128,24 +120,22 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it correctly displays selected value', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -156,24 +146,22 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it invokes "onChange" when new value created', async () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { @@ -186,24 +174,22 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it invokes "onChange" when new value selected', async () => { const mockOnChange = jest.fn(); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { @@ -215,23 +201,21 @@ describe('AutocompleteFieldMatchAnyComponent', () => { test('it refreshes autocomplete with search query when new value searched', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); act(() => { ((wrapper.find(EuiComboBox).props() as unknown) as { diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/operator.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/operator.test.tsx index 56ae6d762e7ee9..db16cbde2acb44 100644 --- a/x-pack/plugins/security_solution/public/common/components/autocomplete/operator.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/operator.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui'; import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; @@ -18,17 +16,15 @@ import { isOperator, isNotOperator } from './operators'; describe('OperatorComponent', () => { test('it renders disabled if "isDisabled" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -38,17 +34,15 @@ describe('OperatorComponent', () => { test('it renders loading if "isLoading" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find(`[data-test-subj="operatorAutocompleteComboBox"] button`).at(0).simulate('click'); expect( @@ -60,17 +54,15 @@ describe('OperatorComponent', () => { test('it allows user to clear values if "isClearable" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find(`button[data-test-subj="comboBoxClearButton"]`).exists()).toBeTruthy(); @@ -78,18 +70,16 @@ describe('OperatorComponent', () => { test('it displays "operatorOptions" if param is passed in with items', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -99,18 +89,16 @@ describe('OperatorComponent', () => { test('it does not display "operatorOptions" if param is passed in with no items', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -145,17 +133,15 @@ describe('OperatorComponent', () => { test('it correctly displays selected operator', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -165,27 +151,25 @@ describe('OperatorComponent', () => { test('it only displays subset of operators if field type is nested', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -195,17 +179,15 @@ describe('OperatorComponent', () => { test('it only displays subset of operators if field type is boolean', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -221,17 +203,15 @@ describe('OperatorComponent', () => { test('it invokes "onChange" when option selected', () => { const mockOnChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); ((wrapper.find(EuiComboBox).props() as unknown) as { diff --git a/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx index 096bea37566b32..6d87b5d3a68b90 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx @@ -6,10 +6,8 @@ */ import { Chart, BarSeries, Axis, ScaleType } from '@elastic/charts'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { escapeDataProviderId } from '../drag_and_drop/helpers'; import { TestProviders } from '../../mock'; @@ -37,8 +35,6 @@ jest.mock('uuid', () => { }; }); -const theme = () => ({ eui: euiDarkVars, darkMode: true }); - const customHeight = '100px'; const customWidth = '120px'; const chartDataSets = [ @@ -323,11 +319,9 @@ describe.each(chartDataSets)('BarChart with stackByField', () => { beforeAll(() => { wrapper = mount( - - - - - + + + ); }); @@ -407,11 +401,9 @@ describe.each(chartDataSets)('BarChart with custom color', () => { beforeAll(() => { wrapper = mount( - - - - - + + + ); }); diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx index fb91a4a3ce92b3..544f9b1abf8f2b 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx @@ -5,10 +5,8 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, ReactWrapper } from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; import '../../mock/match_media'; import '../../mock/react_beautiful_dnd'; @@ -26,8 +24,6 @@ jest.mock('@elastic/eui', () => { }; }); -const theme = () => ({ eui: euiDarkVars, darkMode: true }); - const allOthersDataProviderId = 'draggable-legend-item-527adabe-8e1c-4a1f-965c-2f3d65dda9e1-event_dataset-All others'; @@ -74,11 +70,9 @@ describe('DraggableLegend', () => { beforeEach(() => { wrapper = mount( - - - - - + + + ); }); @@ -120,11 +114,9 @@ describe('DraggableLegend', () => { it('does NOT render the legend when an empty collection of legendItems is provided', () => { const wrapper = mount( - - - - - + + + ); expect(wrapper.find('[data-test-subj="draggable-legend"]').exists()).toBe(false); @@ -132,11 +124,9 @@ describe('DraggableLegend', () => { it(`renders a legend with the minimum height when 'height' is zero`, () => { const wrapper = mount( - - - - - + + + ); expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule( diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx index 15c164e59557de..4958f6bae4a307 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx @@ -5,10 +5,8 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, ReactWrapper } from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; import '../../mock/match_media'; import '../../mock/react_beautiful_dnd'; @@ -25,8 +23,6 @@ jest.mock('@elastic/eui', () => { }; }); -const theme = () => ({ eui: euiDarkVars, darkMode: true }); - describe('DraggableLegendItem', () => { describe('rendering a regular (non "All others") legend item', () => { const legendItem: LegendItem = { @@ -41,11 +37,9 @@ describe('DraggableLegendItem', () => { beforeEach(() => { wrapper = mount( - - - - - + + + ); }); @@ -79,11 +73,9 @@ describe('DraggableLegendItem', () => { beforeEach(() => { wrapper = mount( - - - - - + + + ); }); @@ -118,11 +110,9 @@ describe('DraggableLegendItem', () => { }; const wrapper = mount( - - - - - + + + ); expect(wrapper.find('[data-test-subj="legend-color"]').exists()).toBe(false); diff --git a/x-pack/plugins/security_solution/public/common/components/empty_value/empty_value.test.tsx b/x-pack/plugins/security_solution/public/common/components/empty_value/empty_value.test.tsx index 764d9109816b58..e3c74bf4256288 100644 --- a/x-pack/plugins/security_solution/public/common/components/empty_value/empty_value.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/empty_value/empty_value.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, shallow } from 'enzyme'; import React from 'react'; import { ThemeProvider } from 'styled-components'; @@ -21,7 +20,7 @@ import { } from '.'; describe('EmptyValue', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); + const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; test('it renders against snapshot', () => { const wrapper = shallow(

{getEmptyString()}

); @@ -35,7 +34,7 @@ describe('EmptyValue', () => { describe('#getEmptyString', () => { test('should turn into an empty string place holder', () => { const wrapper = mountWithIntl( - +

{getEmptyString()}

 ); @@ -45,7 +44,7 @@ describe('EmptyValue', () => { describe('#getEmptyTagValue', () => { const wrapper = mount( - +

{getEmptyTagValue()}

 ); @@ -55,7 +54,7 @@ describe('EmptyValue', () => { describe('#getEmptyStringTag', () => { test('should turn into an span that has length of 1', () => { const wrapper = mountWithIntl( - +

{getEmptyStringTag()}

 ); @@ -64,7 +63,7 @@ describe('EmptyValue', () => { test('should turn into an empty string tag place holder', () => { const wrapper = mountWithIntl( - +

{getEmptyStringTag()}

 ); @@ -75,7 +74,7 @@ describe('EmptyValue', () => { describe('#defaultToEmptyTag', () => { test('should default to an empty value when a value is null', () => { const wrapper = mount( - +

{defaultToEmptyTag(null)}

 ); @@ -84,7 +83,7 @@ describe('EmptyValue', () => { test('should default to an empty value when a value is undefined', () => { const wrapper = mount( - +

{defaultToEmptyTag(undefined)}

 ); @@ -114,7 +113,7 @@ describe('EmptyValue', () => { }, }; const wrapper = mount( - +

{getOrEmptyTag('a.b.c', test)}

 ); @@ -130,7 +129,7 @@ describe('EmptyValue', () => { }, }; const wrapper = mount( - +

{getOrEmptyTag('a.b.c', test)}

 ); @@ -144,7 +143,7 @@ describe('EmptyValue', () => { }, }; const wrapper = mount( - +

{getOrEmptyTag('a.b.c', test)}

 ); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx index af76a79f0e330a..9ba6fe104be45a 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount, ReactWrapper } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { waitFor } from '@testing-library/react'; import { AddExceptionModal } from './'; @@ -32,6 +31,17 @@ import { import { useRuleAsync } from '../../../../detections/containers/detection_engine/rules/use_rule_async'; import { AlertData } from '../types'; +const mockTheme = { + eui: { + euiBreakpoints: { + l: '1200px', + }, + paddingSizes: { + m: '10px', + }, + }, +}; + jest.mock('../../../../detections/containers/detection_engine/alerts/use_signal_index'); jest.mock('../../../../common/lib/kibana'); jest.mock('../../../containers/source'); @@ -101,7 +111,7 @@ describe('When the add exception modal is opened', () => { }, ]); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { let wrapper: ReactWrapper; beforeEach(async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { file: { path: 'test/path' }, }; wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { file: { path: 'test/path' }, }; wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { file: { path: 'test/path' }, }; wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { file: { path: 'test/path' }, }; wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('when there are exception builder errors submit button is disabled', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders exceptionItemEntryFirstRowAndBadge for very first exception item in builder', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -27,7 +28,7 @@ describe('BuilderAndBadgeComponent', () => { test('it renders exceptionItemEntryInvisibleAndBadge if "entriesLength" is 1 or less', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -39,7 +40,7 @@ describe('BuilderAndBadgeComponent', () => { test('it renders regular "and" badge if exception item is not the first one and includes more than one entry', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx index 6505c5eb2b3104..1ea54473032cc3 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/exception_item.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { useKibana } from '../../../../common/lib/kibana'; import { fields } from '../../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; @@ -18,6 +17,12 @@ import { getEntryMatchAnyMock } from '../../../../../../lists/common/schemas/typ import { BuilderExceptionListItemComponent } from './exception_item'; +const mockTheme = { + eui: { + euiColorLightShade: '#ece', + }, +}; + jest.mock('../../../../common/lib/kibana'); describe('BuilderExceptionListItemComponent', () => { @@ -46,7 +51,7 @@ describe('BuilderExceptionListItemComponent', () => { entries: [getEntryMatchMock(), getEntryMatchMock()], }; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.entries = [getEntryMatchMock(), getEntryMatchMock()]; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.entries = [getEntryMatchMock()]; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.entries = [getEntryMatchMock()]; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { @@ -50,7 +55,7 @@ describe('ExceptionBuilderComponent', () => { test('it displays empty entry if no "exceptionListItems" are passed in', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays "exceptionListItems" that are passed in', async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays "or", "and" and "add nested button" enabled', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it adds an entry when "and" clicked', async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it adds an exception item when "or" clicked', async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays empty entry if user deletes last remaining entry', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays "and" badge if at least one exception item includes more than one entry', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it does not display "and" badge if none of the exception items include more than one entry', () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { describe('nested entry', () => { test('it adds a nested entry when "add nested entry" clicked', async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { }, ]); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { ] as EntriesArray, }; wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { let wrapper: ReactWrapper; beforeEach(async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { }, })); wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { let wrapper: ReactWrapper; beforeEach(async () => { wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { beforeEach(async () => { const exceptionItemMock = { ...getExceptionListItemSchemaMock(), entries: [] }; wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('when there are exception builder errors has the add exception button disabled', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders error details', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -57,21 +53,19 @@ describe('ErrorCallout', () => { it('it invokes "onCancel" when cancel button clicked', () => { const mockOnCancel = jest.fn(); const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="errorCalloutCancelButton"]').at(0).simulate('click'); @@ -81,21 +75,19 @@ describe('ErrorCallout', () => { it('it does not render status code if not available', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -109,21 +101,19 @@ describe('ErrorCallout', () => { it('it renders specific missing exceptions list error', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -137,21 +127,19 @@ describe('ErrorCallout', () => { it('it dissasociates list from rule when remove exception list clicked ', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="errorCalloutDissasociateButton"]').at(0).simulate('click'); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx index c7d7d2d39393cc..b96ae5c06dd22c 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_details.test.tsx @@ -8,13 +8,18 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import moment from 'moment-timezone'; import { ExceptionDetails } from './exception_details'; import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock'; import { getCommentsArrayMock } from '../../../../../../../lists/common/schemas/types/comment.mock'; +const mockTheme = { + eui: { + euiColorLightestShade: '#ece', + }, +}; + describe('ExceptionDetails', () => { beforeEach(() => { moment.tz.setDefault('UTC'); @@ -29,7 +34,7 @@ describe('ExceptionDetails', () => { exceptionItem.comments = []; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = [getCommentsArrayMock()[0]]; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders the operating system if one is specified in the exception item', () => { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders the exception item creator', () => { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders the exception item creation timestamp', () => { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders the description if one is included on the exception item', () => { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it does NOT render the and badge if only one exception item entry exists', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders the and badge if more than one exception item exists', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it invokes "onEdit" when edit button clicked', () => { const mockOnEdit = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it invokes "onDelete" when delete button clicked', () => { const mockOnDelete = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders edit button disabled if "disableDelete" is "true"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders delete button in loading state if "disableDelete" is "true"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { parentEntry.value = undefined; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders non-nested entries', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders ExceptionDetails and ExceptionEntries', () => { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.comments = getCommentsArrayMock(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders passed in "pageSize" as selected option', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="exceptionsPerPageBtn"]').at(0).text()).toEqual( @@ -35,17 +31,15 @@ describe('ExceptionsViewerPagination', () => { it('it renders all passed in page size options when per page button clicked', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="exceptionsPerPageBtn"] button').simulate('click'); @@ -64,17 +58,15 @@ describe('ExceptionsViewerPagination', () => { it('it invokes "onPaginationChange" when per page item is clicked', () => { const mockOnPaginationChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="exceptionsPerPageBtn"] button').simulate('click'); @@ -87,17 +79,15 @@ describe('ExceptionsViewerPagination', () => { it('it renders correct total page count', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="exceptionsPagination"]').at(0).prop('pageCount')).toEqual( @@ -111,17 +101,15 @@ describe('ExceptionsViewerPagination', () => { it('it invokes "onPaginationChange" when next clicked', () => { const mockOnPaginationChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="pagination-button-next"]').at(1).simulate('click'); @@ -134,17 +122,15 @@ describe('ExceptionsViewerPagination', () => { it('it invokes "onPaginationChange" when page clicked', () => { const mockOnPaginationChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('button[data-test-subj="pagination-button-3"]').simulate('click'); diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx index 6167a29a4a17d3..42ce0c792dfa3a 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_utility.test.tsx @@ -8,14 +8,25 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mountWithIntl } from '@kbn/test/jest'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { ExceptionsViewerUtility } from './exceptions_utility'; +const mockTheme = { + eui: { + euiBreakpoints: { + l: '1200px', + }, + paddingSizes: { + m: '10px', + }, + euiBorderThin: '1px solid #ece', + }, +}; + describe('ExceptionsViewerUtility', () => { it('it renders correct pluralized text when more than one exception exists', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders correct singular text when less than two exceptions exists', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> + { it('it invokes "onRefreshClick" when refresh button clicked', () => { const mockOnRefreshClick = jest.fn(); const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> + { it('it does not render any messages when "showEndpointList" and "showDetectionsList" are "false"', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> + { it('it does render detections messages when "showDetectionsList" is "true"', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> + { it('it does render endpoint messages when "showEndpointList" is "true"', () => { const wrapper = mountWithIntl( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders all disabled if "isInitLoading" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -47,16 +43,14 @@ describe('ExceptionsViewerHeader', () => { it('it displays toggles and add exception popover when more than one list type available', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="exceptionsFilterGroupBtns"]').exists()).toBeTruthy(); @@ -67,16 +61,14 @@ describe('ExceptionsViewerHeader', () => { it('it does not display toggles and add exception popover if only one list type is available', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="exceptionsFilterGroupBtns"]')).toHaveLength(0); @@ -87,16 +79,14 @@ describe('ExceptionsViewerHeader', () => { it('it displays add exception button without popover if only one list type is available', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect( @@ -107,16 +97,14 @@ describe('ExceptionsViewerHeader', () => { it('it renders detections filter toggle selected when clicked', () => { const mockOnFilterChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="exceptionsDetectionFilterBtn"] button').simulate('click'); @@ -149,16 +137,14 @@ describe('ExceptionsViewerHeader', () => { it('it renders endpoint filter toggle selected and invokes "onFilterChange" when clicked', () => { const mockOnFilterChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="exceptionsEndpointFilterBtn"] button').simulate('click'); @@ -191,16 +177,14 @@ describe('ExceptionsViewerHeader', () => { it('it invokes "onAddExceptionClick" when user selects to add an exception item and only endpoint exception lists are available', () => { const mockOnAddExceptionClick = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="exceptionsHeaderAddExceptionBtn"] button').simulate('click'); @@ -211,16 +195,14 @@ describe('ExceptionsViewerHeader', () => { it('it invokes "onAddDetectionsExceptionClick" when user selects to add an exception item and only endpoint detections lists are available', () => { const mockOnAddExceptionClick = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="exceptionsHeaderAddExceptionBtn"] button').simulate('click'); @@ -231,16 +213,14 @@ describe('ExceptionsViewerHeader', () => { it('it invokes "onAddEndpointExceptionClick" when user selects to add an exception item to endpoint list from popover', () => { const mockOnAddExceptionClick = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper @@ -254,16 +234,14 @@ describe('ExceptionsViewerHeader', () => { it('it invokes "onAddDetectionsExceptionClick" when user selects to add an exception item to endpoint list from popover', () => { const mockOnAddExceptionClick = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper @@ -277,16 +255,14 @@ describe('ExceptionsViewerHeader', () => { it('it invokes "onFilterChange" when search used and "Enter" pressed', () => { const mockOnFilterChange = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('EuiFieldSearch').at(0).simulate('keyup', { diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.test.tsx index 3171735d905dee..167b95995212bd 100644 --- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_items.test.tsx @@ -8,27 +8,32 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import * as i18n from '../translations'; import { getExceptionListItemSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_item_schema.mock'; import { ExceptionsViewerItems } from './exceptions_viewer_items'; +const mockTheme = { + eui: { + euiSize: '10px', + euiColorPrimary: '#ece', + euiColorDanger: '#ece', + }, +}; + describe('ExceptionsViewerItems', () => { it('it renders empty prompt if "showEmpty" is "true"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="exceptionsEmptyPrompt"]').exists()).toBeTruthy(); @@ -43,7 +48,7 @@ describe('ExceptionsViewerItems', () => { it('it renders no search results found prompt if "showNoResults" is "true"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders exceptions if "showEmpty" and "isInitLoading" is "false", and exceptions exist', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { it('it does not render exceptions if "isInitLoading" is "true"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { exception2.id = 'newId'; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { exception2.id = 'newId'; const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { const mockOnDeleteException = jest.fn(); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { jest.fn(), ]); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { it('it renders empty prompt if no "exceptionListMeta" passed in', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { ]); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); const closeModal = jest.fn(); describe('rendering', () => { test('when isShowing is positive and request and response are not null', () => { const wrapper = mount( - + { describe('functionality from tab statistics/request/response', () => { test('Click on statistic Tab', () => { const wrapper = mount( - + { test('Click on request Tab', () => { const wrapper = mount( - + { test('Click on response Tab', () => { const wrapper = mount( - + { describe('events', () => { test('Make sure that toggle function has been called when you click on the close button', () => { const wrapper = mount( - + - +

My test supplement.

- } - headerTitle="Hosts" - headerTooltip="My test tooltip" - headerUnit="Test Unit" - itemsPerRow={ - Array [ - Object { - "numberOfRow": 2, - "text": "2 rows", - }, - Object { - "numberOfRow": 5, - "text": "5 rows", - }, - Object { - "numberOfRow": 10, - "text": "10 rows", - }, - Object { - "numberOfRow": 20, - "text": "20 rows", - }, - Object { - "numberOfRow": 50, - "text": "50 rows", - }, - ] - } - limit={1} - loadPage={[MockFunction]} - loading={false} - pageOfItems={ - Array [ - Object { - "cursor": Object { - "value": "98966fa2013c396155c460d35c0902be", - }, - "host": Object { - "_id": "cPsuhGcB0WOhS6qyTKC0", - "firstSeen": "2018-12-06T15:40:53.319Z", - "name": "elrond.elstc.co", - "os": "Ubuntu", - "version": "18.04.1 LTS (Bionic Beaver)", - }, - }, - Object { - "cursor": Object { - "value": "aa7ca589f1b8220002f2fc61c64cfbf1", - }, - "host": Object { - "_id": "KwQDiWcB0WOhS6qyXmrW", - "firstSeen": "2018-12-07T14:12:38.560Z", - "name": "siem-kibana", - "os": "Debian GNU/Linux", - "version": "9 (stretch)", - }, - }, - ] - } - showMorePagesIndicator={true} - totalCount={10} - updateActivePage={[MockFunction]} - updateLimitPagination={[Function]} - /> - + + + + + + Rows per page: 1 + + } + closePopover={[Function]} + data-test-subj="loadingMoreSizeRowPopover" + display="inlineBlock" + hasArrow={true} + id="customizablePagination" + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + repositionOnScroll={true} + > + + 2 rows + , + + 5 rows + , + + 10 rows + , + + 20 rows + , + + 50 rows + , + ] + } + /> + + + + + + + + `; diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/paginated_table/index.test.tsx index 57d4c8451de245..c20f1ae66c7974 100644 --- a/x-pack/plugins/security_solution/public/common/components/paginated_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/index.test.tsx @@ -14,7 +14,6 @@ import { Direction } from '../../../graphql/types'; import { BasicTableProps, PaginatedTable } from './index'; import { getHostsColumns, mockData, rowItems, sortedHosts } from './index.mock'; import { ThemeProvider } from 'styled-components'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; jest.mock('react', () => { const r = jest.requireActual('react'); @@ -22,8 +21,20 @@ jest.mock('react', () => { return { ...r, memo: (x: any) => x }; }); +const mockTheme = { + eui: { + euiColorEmptyShade: '#ece', + euiSizeL: '10px', + euiBreakpoints: { + s: '450px', + }, + paddingSizes: { + m: '10px', + }, + }, +}; + describe('Paginated Table Component', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let loadPage: jest.Mock; let updateLimitPagination: jest.Mock; let updateActivePage: jest.Mock; @@ -36,26 +47,24 @@ describe('Paginated Table Component', () => { describe('rendering', () => { test('it renders the default load more table', () => { const wrapper = shallow( - - {'My test supplement.'}

} - headerTitle="Hosts" - headerTooltip="My test tooltip" - headerUnit="Test Unit" - itemsPerRow={rowItems} - limit={1} - loading={false} - loadPage={loadPage} - pageOfItems={mockData.Hosts.edges} - showMorePagesIndicator={true} - totalCount={10} - updateActivePage={updateActivePage} - updateLimitPagination={(limit) => updateLimitPagination({ limit })} - /> - + {'My test supplement.'}

} + headerTitle="Hosts" + headerTooltip="My test tooltip" + headerUnit="Test Unit" + itemsPerRow={rowItems} + limit={1} + loading={false} + loadPage={loadPage} + pageOfItems={mockData.Hosts.edges} + showMorePagesIndicator={true} + totalCount={10} + updateActivePage={updateActivePage} + updateLimitPagination={(limit) => updateLimitPagination({ limit })} + /> ); expect(wrapper).toMatchSnapshot(); @@ -63,7 +72,7 @@ describe('Paginated Table Component', () => { test('it renders the loading panel at the beginning ', () => { const wrapper = mount( - + { test('it renders the over loading panel after data has been in the table ', () => { const wrapper = mount( - + { test('it renders the correct amount of pages and starts at activePage: 0', () => { const wrapper = mount( - + { test('it render popover to select new limit in table', () => { const wrapper = mount( - + { test('it will NOT render popover to select new limit in table if props itemsPerRow is empty', () => { const wrapper = mount( - + { test('It should render a sort icon if sorting is defined', () => { const mockOnChange = jest.fn(); const wrapper = mount( - + { test('Should display toast when user reaches end of results max', () => { const wrapper = mount( - + { test('Should show items per row if totalCount is greater than items', () => { const wrapper = mount( - + { test('Should hide items per row if totalCount is less than items', () => { const wrapper = mount( - + { describe('Events', () => { test('should call updateActivePage with 1 when clicking to the first page', () => { const wrapper = mount( - + { test('Should call updateActivePage with 0 when you pick a new limit', () => { const wrapper = mount( - + { // eslint-disable-next-line @typescript-eslint/no-explicit-any const ComponentWithContext = (props: BasicTableProps) => { return ( - + ); @@ -424,7 +433,7 @@ describe('Paginated Table Component', () => { test('Should call updateLimitPagination when you pick a new limit', () => { const wrapper = mount( - + { test('Should call onChange when you choose a new sort in the table', () => { const mockOnChange = jest.fn(); const wrapper = mount( - + { }); describe('Stat Items Component', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); + const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; const state: State = mockGlobalState; const { storage } = createSecuritySolutionStorageMock(); const store = createStore( @@ -71,7 +70,7 @@ describe('Stat Items Component', () => { describe.each([ [ mount( - + { ], [ mount( - + { test('it renders entryItemIndexItemEntryFirstRowAndBadge for very first item', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -25,7 +30,7 @@ describe('AndBadgeComponent', () => { test('it renders entryItemEntryInvisibleAndBadge if "entriesLength" is 1 or less', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); @@ -37,7 +42,7 @@ describe('AndBadgeComponent', () => { test('it renders regular "and" badge if item is not the first one and includes more than one entry', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ); diff --git a/x-pack/plugins/security_solution/public/common/components/threat_match/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/threat_match/index.test.tsx index 73174bc5fc113e..6aa33c3bcf4ca2 100644 --- a/x-pack/plugins/security_solution/public/common/components/threat_match/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/threat_match/index.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { waitFor } from '@testing-library/react'; import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks'; @@ -19,6 +18,12 @@ import { ThreatMatchComponent } from './'; import { ThreatMapEntries } from './types'; import { IndexPattern } from 'src/plugins/data/public'; +const mockTheme = { + eui: { + euiColorLightShade: '#ece', + }, +}; + jest.mock('../../../common/lib/kibana'); const getPayLoad = (): ThreatMapEntries[] => [ @@ -51,7 +56,7 @@ describe('ThreatMatchComponent', () => { test('it displays empty entry if no "listItems" are passed in', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays "Search" for "listItems" that are passed in', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays "or", "and" enabled', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it adds an entry when "and" clicked', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it adds an item when "or" clicked', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it removes one row if user deletes a row', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it displays "and" badge if at least one item includes more than one entry', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it does not display "and" badge if none of the items include more than one entry', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + ({ @@ -66,7 +71,7 @@ describe('ListItemComponent', () => { describe('and badge logic', () => { test('it renders "and" badge with extra top padding for the first item when "andLogicIncluded" is "true"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders "and" badge when more than one item entry exists and it is not the first item', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders indented "and" badge when "andLogicIncluded" is "true" and only one entry exists', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders no "and" badge when "andLogicIncluded" is "false"', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders loader when isLoading is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeTruthy(); @@ -58,23 +54,21 @@ describe('PreviewCustomQueryHistogram', () => { test('it configures data and subtitle', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeFalsy(); @@ -111,19 +105,17 @@ describe('PreviewCustomQueryHistogram', () => { const mockRefetch = jest.fn(); mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(mockSetQuery).toHaveBeenCalledWith({ diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/eql_histogram.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/eql_histogram.test.tsx index 65bb029e2e32f5..df6a8975a5b974 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/eql_histogram.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/eql_histogram.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import * as i18n from './translations'; import { useGlobalTime } from '../../../../common/containers/use_global_time'; @@ -35,19 +33,17 @@ describe('PreviewEqlQueryHistogram', () => { test('it renders loader when isLoading is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeTruthy(); @@ -58,23 +54,21 @@ describe('PreviewEqlQueryHistogram', () => { test('it configures data and subtitle', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeFalsy(); @@ -109,19 +103,17 @@ describe('PreviewEqlQueryHistogram', () => { const mockRefetch = jest.fn(); mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(mockSetQuery).toHaveBeenCalledWith({ @@ -134,23 +126,21 @@ describe('PreviewEqlQueryHistogram', () => { test('it displays histogram', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeFalsy(); diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/histogram.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/histogram.test.tsx index d9bd32ce082caf..85e31e7ed36e56 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/histogram.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/histogram.test.tsx @@ -6,9 +6,7 @@ */ import React from 'react'; -import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { TestProviders } from '../../../../common/mock'; import { PreviewHistogram } from './histogram'; @@ -17,19 +15,17 @@ import { getHistogramConfig } from './helpers'; describe('PreviewHistogram', () => { test('it renders loading icon if "isLoading" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeTruthy(); @@ -38,40 +34,38 @@ describe('PreviewHistogram', () => { test('it renders chart if "isLoading" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeFalsy(); diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx index 03692457eca5e8..4d43040880ae15 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/query_preview/index.test.tsx @@ -9,7 +9,6 @@ import React from 'react'; import { of } from 'rxjs'; import { ThemeProvider } from 'styled-components'; import { mount } from 'enzyme'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { TestProviders } from '../../../../common/mock'; import { useKibana } from '../../../../common/lib/kibana'; @@ -18,6 +17,12 @@ import { getMockEqlResponse } from '../../../../common/hooks/eql/eql_search_resp import { useMatrixHistogram } from '../../../../common/containers/matrix_histogram'; import { useEqlPreview } from '../../../../common/hooks/eql/'; +const mockTheme = { + eui: { + euiSuperDatePickerWidth: '180px', + }, +}; + jest.mock('../../../../common/lib/kibana'); jest.mock('../../../../common/containers/matrix_histogram'); jest.mock('../../../../common/hooks/eql/'); @@ -63,7 +68,7 @@ describe('PreviewQuery', () => { test('it renders timeframe select and preview button on render', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders preview button disabled if "isDisabled" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders preview button disabled if "query" is undefined', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders query histogram when rule type is query and preview button clicked', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders noise warning when rule type is query, timeframe is last hour and hit average is greater than 1/hour', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders query histogram when rule type is saved_query and preview button clicked', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders eql histogram when preview button clicked and rule type is eql', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders noise warning when rule type is eql, timeframe is last hour and hit average is greater than 1/hour', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders threshold histogram when preview button clicked, rule type is threshold, and threshold field is defined', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders noise warning when rule type is threshold, and threshold field is defined, timeframe is last hour and hit average is greater than 1/hour', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders query histogram when preview button clicked, rule type is threshold, and threshold field is not defined', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders query histogram when preview button clicked, rule type is threshold, and threshold field is empty string', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it hides histogram when timeframe changes', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> + { test('it renders loader when isLoading is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeTruthy(); @@ -51,20 +47,18 @@ describe('PreviewThresholdQueryHistogram', () => { test('it configures buckets data', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(wrapper.find('[data-test-subj="queryPreviewLoading"]').exists()).toBeFalsy(); @@ -86,20 +80,18 @@ describe('PreviewThresholdQueryHistogram', () => { const mockRefetch = jest.fn(); mount( - ({ eui: euiLightVars, darkMode: false })}> - - - - + + + ); expect(mockSetQuery).toHaveBeenCalledWith({ diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_switch/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_switch/index.test.tsx index 71670658c88a98..fc91c26148c172 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_switch/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_switch/index.test.tsx @@ -7,8 +7,6 @@ import { mount } from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; -import euiLightVars from '@elastic/eui/dist/eui_theme_light.json'; import { waitFor } from '@testing-library/react'; import { enableRules } from '../../../containers/detection_engine/rules'; @@ -34,9 +32,7 @@ describe('RuleSwitch', () => { test('it renders loader if "isLoading" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="ruleSwitchLoader"]').exists()).toBeTruthy(); @@ -45,42 +41,27 @@ describe('RuleSwitch', () => { test('it renders switch disabled if "isDisabled" is true', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props().disabled).toBeTruthy(); }); test('it renders switch enabled if "enabled" is true', () => { - const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - - ); + const wrapper = mount(); expect(wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props().checked).toBeTruthy(); }); test('it renders switch disabled if "enabled" is false', () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); expect(wrapper.find('[data-test-subj="ruleSwitch"]').at(0).props().checked).toBeFalsy(); }); test('it renders an off switch enabled on click', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="ruleSwitch"]').at(2).simulate('click'); @@ -96,9 +77,7 @@ describe('RuleSwitch', () => { (enableRules as jest.Mock).mockResolvedValue([rule]); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="ruleSwitch"]').at(2).simulate('click'); @@ -113,14 +92,7 @@ describe('RuleSwitch', () => { (enableRules as jest.Mock).mockRejectedValue(mockError); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="ruleSwitch"]').at(2).simulate('click'); @@ -138,14 +110,7 @@ describe('RuleSwitch', () => { ]); const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="ruleSwitch"]').at(2).simulate('click'); @@ -157,15 +122,13 @@ describe('RuleSwitch', () => { test('it invokes "enableRulesAction" if dispatch is passed through', async () => { const wrapper = mount( - ({ eui: euiLightVars, darkMode: false })}> - - + ); wrapper.find('[data-test-subj="ruleSwitch"]').at(2).simulate('click'); diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx index edd5c0d4e6e4cc..c1773b2fffbab6 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx @@ -8,7 +8,6 @@ import React from 'react'; import { mount, shallow } from 'enzyme'; import { ThemeProvider } from 'styled-components'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_light.json'; import { act } from '@testing-library/react'; import { stubIndexPattern } from 'src/plugins/data/common/index_patterns/index_pattern.stub'; @@ -24,8 +23,13 @@ import { } from '../../../pages/detection_engine/rules/types'; import { fillEmptySeverityMappings } from '../../../pages/detection_engine/rules/helpers'; +const mockTheme = { + eui: { + euiColorLightestShade: '#ece', + }, +}; + jest.mock('../../../../common/containers/source'); -const theme = () => ({ eui: euiDarkVars, darkMode: true }); jest.mock('@elastic/eui', () => { const original = jest.requireActual('@elastic/eui'); return { @@ -37,6 +41,7 @@ jest.mock('@elastic/eui', () => { }, }; }); + describe('StepAboutRuleComponent', () => { let formHook: RuleStepsFormHooks[RuleStep.aboutRule] | null = null; const setFormHook = ( @@ -72,7 +77,7 @@ describe('StepAboutRuleComponent', () => { it('is invalid if description is not present', async () => { const wrapper = mount( - + { it('is invalid if no "name" is present', async () => { const wrapper = mount( - + { it('is valid if both "name" and "description" are present', async () => { const wrapper = mount( - + { it('it allows user to set the risk score as a number (and not a string)', async () => { const wrapper = mount( - + { it('does not modify the provided risk score until the user changes the severity', async () => { const wrapper = mount( - + ({ eui: euiDarkVars, darkMode: true }); +const mockTheme = { + eui: { euiSizeL: '10px', euiBreakpoints: { s: '450px' }, paddingSizes: { m: '10px' } }, +}; describe('StepAboutRuleToggleDetails', () => { let mockRule: AboutStepRule; @@ -93,7 +94,7 @@ describe('StepAboutRuleToggleDetails', () => { describe('note value does exist', () => { test('it renders toggle buttons, defaulted to "details"', () => { const wrapper = mount( - + { test('it allows users to toggle between "details" and "note"', () => { const wrapper = mount( - + { test('it displays notes markdown when user toggles to "notes"', () => { const wrapper = mount( - + ({ eui: euiDarkVars, darkMode: true }); +const mockTheme = { eui: { euiBreakpoints: { l: '1200px' }, paddingSizes: { m: '10px' } } }; describe('AllRules', () => { it('renders AllRulesUtilityBar total rules and selected rules', () => { const wrapper = mount( - + { it('does not render total selected and bulk actions when "showBulkActions" is false', () => { const wrapper = mount( - + { it('renders utility actions if user has permissions', () => { const wrapper = mount( - + { it('renders no utility actions if user has no permissions', () => { const wrapper = mount( - + { it('invokes refresh on refresh action click', () => { const mockRefresh = jest.fn(); const wrapper = mount( - + { it('invokes onRefreshSwitch when auto refresh switch is clicked', async () => { const mockSwitch = jest.fn(); const wrapper = mount( - + ({ htmlIdGenerator: () => () => 'mockId', })); @@ -32,9 +37,7 @@ const now = 111111; const renderList = (store: ReturnType) => { const Wrapper: React.FC = ({ children }) => ( - ({ eui: euiLightVars, darkMode: false })}> - {children} - + {children} ); diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap index 8f70c61ba4afc3..5a176018f0e3fe 100644 --- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap @@ -486,12 +486,7 @@ exports[`TrustedAppsList renders correctly when failed loading data for the seco exports[`TrustedAppsList renders correctly when item details expanded 1`] = ` .c0 { - background-color: #f5f7fa; - padding: 16px; -} - -.c3 { - padding: 16px; + background-color: #ece; } .c1.c1.c1 { @@ -864,7 +859,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
({ @@ -32,9 +37,7 @@ const now = 111111; const renderList = (store: ReturnType) => { const Wrapper: React.FC = ({ children }) => ( - ({ eui: euiLightVars, darkMode: false })}> - {children} - + {children} ); diff --git a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx index 4b62139a8679f5..0ec12a00d578bd 100644 --- a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx +++ b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx @@ -5,10 +5,8 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, ReactWrapper } from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; import '../../../common/mock/match_media'; import '../../../common/mock/react_beautiful_dnd'; @@ -24,7 +22,6 @@ jest.mock('../../../common/containers/matrix_histogram', () => ({ useMatrixHistogram: jest.fn(), })); -const theme = () => ({ eui: { ...euiDarkVars, euiSizeL: '24px' }, darkMode: true }); const from = '2020-03-31T06:00:00.000Z'; const to = '2019-03-31T06:00:00.000Z'; @@ -55,11 +52,9 @@ describe('Alerts by category', () => { ]); wrapper = mount( - - - - - + + + ); await waitFor(() => { @@ -123,11 +118,9 @@ describe('Alerts by category', () => { ]); wrapper = mount( - - - - - + + + ); wrapper.update(); diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/categories_pane.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/categories_pane.test.tsx index 278e01bcd89230..0f7a2070b8ef42 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/categories_pane.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/categories_pane.test.tsx @@ -7,8 +7,6 @@ import { mount } from 'enzyme'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mockBrowserFields } from '../../../common/containers/source/mock'; @@ -19,18 +17,15 @@ import * as i18n from './translations'; const timelineId = 'test'; describe('CategoriesPane', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); test('it renders the expected title', () => { const wrapper = mount( - - - + ); expect(wrapper.find('[data-test-subj="categories-pane-title"]').first().text()).toEqual( @@ -40,15 +35,13 @@ describe('CategoriesPane', () => { test('it renders a "No fields match" message when filteredBrowserFields is empty', () => { const wrapper = mount( - - - + ); expect(wrapper.find('[data-test-subj="categories-container"] tbody').first().text()).toEqual( diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category_columns.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category_columns.test.tsx index 44b65185627ff8..7b00b768b56a0a 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category_columns.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category_columns.test.tsx @@ -12,25 +12,20 @@ import { mockBrowserFields } from '../../../common/containers/source/mock'; import { CATEGORY_PANE_WIDTH, getFieldCount } from './helpers'; import { CategoriesPane } from './categories_pane'; -import { ThemeProvider } from 'styled-components'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; const timelineId = 'test'; -const theme = () => ({ eui: euiDarkVars, darkMode: true }); describe('getCategoryColumns', () => { Object.keys(mockBrowserFields).forEach((categoryId) => { test(`it renders the ${categoryId} category name (from filteredBrowserFields)`, () => { const wrapper = mount( - - - + ); const fieldCount = Object.keys(mockBrowserFields[categoryId].fields ?? {}).length; @@ -44,15 +39,13 @@ describe('getCategoryColumns', () => { Object.keys(mockBrowserFields).forEach((categoryId) => { test(`it renders the correct field count for the ${categoryId} category (from filteredBrowserFields)`, () => { const wrapper = mount( - - - + ); expect( @@ -65,15 +58,13 @@ describe('getCategoryColumns', () => { const selectedCategoryId = 'auditd'; const wrapper = mount( - - - + ); expect( @@ -89,15 +80,13 @@ describe('getCategoryColumns', () => { const notTheSelectedCategoryId = 'base'; const wrapper = mount( - - - + ); expect( @@ -115,15 +104,13 @@ describe('getCategoryColumns', () => { const onCategorySelected = jest.fn(); const wrapper = mount( - - - + ); wrapper diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx index 8e754b3d04654c..0c611ca5106e86 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx @@ -5,12 +5,10 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep } from 'lodash/fp'; import moment from 'moment'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; -import { ThemeProvider } from 'styled-components'; import '../../../../common/mock/formatted_relative'; import { mockTimelineResults } from '../../../../common/mock/timeline_results'; @@ -18,7 +16,6 @@ import { OpenTimelineResult, TimelineResultNote } from '../types'; import { NotePreviews } from '.'; describe('NotePreviews', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockResults: OpenTimelineResult[]; let note1updated: number; let note2updated: number; @@ -34,11 +31,7 @@ describe('NotePreviews', () => { test('it renders a note preview for each note when isModal is false', () => { const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }]; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); hasNotes[0].notes!.forEach(({ savedObjectId }) => { expect(wrapper.find(`[data-test-subj="note-preview-${savedObjectId}"]`).exists()).toBe(true); @@ -48,11 +41,7 @@ describe('NotePreviews', () => { test('it renders a note preview for each note when isModal is true', () => { const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }]; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); hasNotes[0].notes!.forEach(({ savedObjectId }) => { expect(wrapper.find(`[data-test-subj="note-preview-${savedObjectId}"]`).exists()).toBe(true); @@ -99,11 +88,7 @@ describe('NotePreviews', () => { }, ]; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('.euiCommentEvent__headerUsername').at(1).text()).toEqual('bob'); }); @@ -130,11 +115,7 @@ describe('NotePreviews', () => { }, ]; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find(`.euiCommentEvent__headerUsername`).at(2).text()).toEqual('bob'); }); @@ -160,11 +141,7 @@ describe('NotePreviews', () => { }, ]; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find(`.euiCommentEvent__headerUsername`).at(2).text()).toEqual('bob'); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx index 1aac1f21f2d504..0cf7f2891dfbfd 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep } from 'lodash/fp'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; @@ -32,8 +31,19 @@ jest.mock('react-router-dom', () => { }; }); +const mockTheme = { + eui: { + euiSizeL: '10px', + paddingSizes: { + s: '10px', + }, + euiBreakpoints: { + l: '1200px', + }, + }, +}; + describe('OpenTimeline', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); const title = 'All Timelines / Open Timelines'; let mockResults: OpenTimelineResult[]; @@ -73,7 +83,7 @@ describe('OpenTimeline', () => { test('it renders the search row', () => { const defaultProps = getDefaultTestProps(mockResults); const wrapper = mountWithIntl( - + ); @@ -84,7 +94,7 @@ describe('OpenTimeline', () => { test('it renders the timelines table', () => { const defaultProps = getDefaultTestProps(mockResults); const wrapper = mountWithIntl( - + ); @@ -95,7 +105,7 @@ describe('OpenTimeline', () => { test('it shows the delete action columns when onDeleteSelected and deleteTimelines are specified', () => { const defaultProps = getDefaultTestProps(mockResults); const wrapper = mountWithIntl( - + ); @@ -115,7 +125,7 @@ describe('OpenTimeline', () => { deleteTimelines: undefined, }; const wrapper = mountWithIntl( - + ); @@ -135,7 +145,7 @@ describe('OpenTimeline', () => { deleteTimelines: undefined, }; const wrapper = mountWithIntl( - + ); @@ -155,7 +165,7 @@ describe('OpenTimeline', () => { deleteTimelines: undefined, }; const wrapper = mountWithIntl( - + ); @@ -174,7 +184,7 @@ describe('OpenTimeline', () => { query: '', }; const wrapper = mountWithIntl( - + ); @@ -188,7 +198,7 @@ describe('OpenTimeline', () => { query: ' ', }; const wrapper = mountWithIntl( - + ); @@ -202,7 +212,7 @@ describe('OpenTimeline', () => { query: 'Would you like to go to Denver?', }; const wrapper = mountWithIntl( - + ); @@ -218,7 +228,7 @@ describe('OpenTimeline', () => { query: ' Is it starting to feel cramped in here? ', }; const wrapper = mountWithIntl( - + ); @@ -234,7 +244,7 @@ describe('OpenTimeline', () => { query: '', }; const wrapper = mountWithIntl( - + ); @@ -250,7 +260,7 @@ describe('OpenTimeline', () => { query: ' ', }; const wrapper = mountWithIntl( - + ); @@ -266,7 +276,7 @@ describe('OpenTimeline', () => { query: 'How was your day?', }; const wrapper = mountWithIntl( - + ); @@ -282,7 +292,7 @@ describe('OpenTimeline', () => { timelineStatus: TimelineStatus.active, }; const wrapper = mountWithIntl( - + ); @@ -297,7 +307,7 @@ describe('OpenTimeline', () => { selectedItems: [], }; const wrapper = mountWithIntl( - + ); @@ -317,7 +327,7 @@ describe('OpenTimeline', () => { selectedItems: [], }; const wrapper = mountWithIntl( - + ); @@ -337,7 +347,7 @@ describe('OpenTimeline', () => { selectedItems: [{}], }; const wrapper = mountWithIntl( - + ); @@ -357,7 +367,7 @@ describe('OpenTimeline', () => { selectedItems: [{}], }; const wrapper = mountWithIntl( - + ); @@ -376,7 +386,7 @@ describe('OpenTimeline', () => { timelineStatus: TimelineStatus.active, }; const wrapper = mountWithIntl( - + ); @@ -392,7 +402,7 @@ describe('OpenTimeline', () => { timelineStatus: TimelineStatus.active, }; const wrapper = mountWithIntl( - + ); @@ -406,7 +416,7 @@ describe('OpenTimeline', () => { timelineStatus: TimelineStatus.immutable, }; const wrapper = mountWithIntl( - + ); @@ -420,7 +430,7 @@ describe('OpenTimeline', () => { timelineStatus: TimelineStatus.immutable, }; const wrapper = mountWithIntl( - + ); @@ -436,7 +446,7 @@ describe('OpenTimeline', () => { timelineStatus: TimelineStatus.immutable, }; const wrapper = mountWithIntl( - + ); @@ -450,7 +460,7 @@ describe('OpenTimeline', () => { timelineStatus: null, }; const wrapper = mountWithIntl( - + ); @@ -464,7 +474,7 @@ describe('OpenTimeline', () => { timelineStatus: null, }; const wrapper = mountWithIntl( - + ); @@ -480,7 +490,7 @@ describe('OpenTimeline', () => { timelineStatus: null, }; const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx index 5babecb3acb699..38186d35d2d2da 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep } from 'lodash/fp'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; @@ -23,7 +22,14 @@ import { TimelineType, TimelineStatus } from '../../../../../common/types/timeli jest.mock('../../../../common/lib/kibana'); describe('OpenTimelineModal', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); + const mockTheme = { + eui: { + euiColorMediumShade: '#ece', + euiBreakpoints: { + s: '500px', + }, + }, + }; const title = 'All Timelines / Open Timelines'; let mockResults: OpenTimelineResult[]; @@ -62,7 +68,7 @@ describe('OpenTimelineModal', () => { test('it renders the title row', () => { const defaultProps = getDefaultTestProps(mockResults); const wrapper = mountWithIntl( - + ); @@ -73,7 +79,7 @@ describe('OpenTimelineModal', () => { test('it renders the search row', () => { const defaultProps = getDefaultTestProps(mockResults); const wrapper = mountWithIntl( - + ); @@ -84,7 +90,7 @@ describe('OpenTimelineModal', () => { test('it renders the timelines table', () => { const defaultProps = getDefaultTestProps(mockResults); const wrapper = mountWithIntl( - + ); @@ -99,7 +105,7 @@ describe('OpenTimelineModal', () => { deleteTimelines: jest.fn(), }; const wrapper = mountWithIntl( - + ); @@ -119,7 +125,7 @@ describe('OpenTimelineModal', () => { deleteTimelines: undefined, }; const wrapper = mountWithIntl( - + ); @@ -139,7 +145,7 @@ describe('OpenTimelineModal', () => { deleteTimelines: undefined, }; const wrapper = mountWithIntl( - + ); @@ -159,7 +165,7 @@ describe('OpenTimelineModal', () => { deleteTimelines: undefined, }; const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx index 837dcbe1d6bfd2..62cdda6070b322 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx @@ -5,11 +5,9 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount } from 'enzyme'; import React from 'react'; import { MockedProvider } from 'react-apollo/test-utils'; -import { ThemeProvider } from 'styled-components'; import { waitFor } from '@testing-library/react'; import { TestProviders } from '../../../../common/mock/test_providers'; @@ -19,8 +17,6 @@ import * as i18n from '../translations'; import { OpenTimelineModalButton } from './open_timeline_modal_button'; describe('OpenTimelineModalButton', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); - test('it renders the expected button text', async () => { const wrapper = mount( @@ -43,13 +39,11 @@ describe('OpenTimelineModalButton', () => { test('it invokes onClick function provided as a prop when the button is clicked', async () => { const onClick = jest.fn(); const wrapper = mount( - - - - - - - + + + + + ); await waitFor(() => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx index e0b252e112fc6f..d75823b7716812 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/search_row/index.test.tsx @@ -6,7 +6,6 @@ */ import { EuiFilterButtonProps } from '@elastic/eui'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; import { ThemeProvider } from 'styled-components'; @@ -17,12 +16,16 @@ import { SearchRow } from '.'; import * as i18n from '../translations'; -describe('SearchRow', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); +const mockTheme = { + eui: { + euiSizeL: '10px', + }, +}; +describe('SearchRow', () => { test('it renders a search input with the expected placeholder when the query is empty', () => { const wrapper = mountWithIntl( - + { describe('Only Favorites Button', () => { test('it renders the expected button text', () => { const wrapper = mountWithIntl( - + { const onToggleOnlyFavorites = jest.fn(); const wrapper = mountWithIntl( - + { test('it sets the button to the toggled state when onlyFavorites is true', () => { const wrapper = mountWithIntl( - + { test('it sets the button to the NON-toggled state when onlyFavorites is false', () => { const wrapper = mountWithIntl( - + { test('it invokes onQueryChange when the user enters a query', () => { const wrapper = mountWithIntl( - + { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockResults: OpenTimelineResult[]; beforeEach(() => { @@ -37,7 +37,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['delete'], }; const wrapper = mountWithIntl( - + ); @@ -51,7 +51,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: [], }; const wrapper = mountWithIntl( - + ); @@ -65,7 +65,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['duplicate'], }; const wrapper = mountWithIntl( - + ); @@ -79,7 +79,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['duplicate'], }; const wrapper = mountWithIntl( - + ); @@ -93,7 +93,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: [], }; const wrapper = mountWithIntl( - + ); @@ -107,7 +107,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['delete'], }; const wrapper = mountWithIntl( - + ); @@ -124,7 +124,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(missingSavedObjectId), }; const wrapper = mountWithIntl( - + ); @@ -141,7 +141,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(mockResults), }; const wrapper = mountWithIntl( - + ); @@ -161,7 +161,7 @@ describe('#getActionsColumns', () => { onOpenTimeline, }; const wrapper = mountWithIntl( - + ); @@ -177,7 +177,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['export'], }; const wrapper = mountWithIntl( - + ); @@ -189,7 +189,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(mockResults), }; const wrapper = mountWithIntl( - + ); @@ -206,7 +206,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['export'], }; const wrapper = mountWithIntl( - + ); @@ -226,7 +226,7 @@ describe('#getActionsColumns', () => { enableExportTimelineDownloader, }; const wrapper = mountWithIntl( - + ); @@ -242,7 +242,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['createFrom', 'duplicate'], }; const wrapper = mountWithIntl( - + ); @@ -256,7 +256,7 @@ describe('#getActionsColumns', () => { actionTimelineToShow: ['createFrom', 'duplicate'], }; const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx index 3108dd09ea6873..3c70cc70a66de9 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx @@ -6,7 +6,6 @@ */ import { EuiButtonIconProps } from '@elastic/eui'; -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep, omit } from 'lodash/fp'; import React from 'react'; import { ThemeProvider } from 'styled-components'; @@ -23,10 +22,11 @@ import { TimelinesTable, TimelinesTableProps } from '.'; import * as i18n from '../translations'; import { getMockTimelinesTableProps } from './mocks'; +const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; + jest.mock('../../../../common/lib/kibana'); describe('#getCommonColumns', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockResults: OpenTimelineResult[]; beforeEach(() => { @@ -40,11 +40,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(hasNotes), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('[data-test-subj="expand-notes"]').exists()).toBe(true); }); @@ -55,11 +51,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(missingNotes), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('[data-test-subj="expand-notes"]').exists()).toBe(false); }); @@ -70,11 +62,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(nullNotes), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('[data-test-subj="expand-notes"]').exists()).toBe(false); }); @@ -85,11 +73,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(emptylNotes), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('[data-test-subj="expand-notes"]').exists()).toBe(false); }); @@ -101,11 +85,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(missingSavedObjectId), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('[data-test-subj="expand-notes"]').exists()).toBe(false); }); @@ -116,11 +96,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(nullSavedObjectId), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); expect(wrapper.find('[data-test-subj="expand-notes"]').exists()).toBe(false); }); @@ -131,11 +107,7 @@ describe('#getCommonColumns', () => { const testProps: TimelinesTableProps = { ...getMockTimelinesTableProps(hasNotes), }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); const props = wrapper .find('[data-test-subj="expand-notes"]') @@ -156,11 +128,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(hasNotes), itemIdToExpandedNotesRowMap, }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); const props = wrapper .find('[data-test-subj="expand-notes"]') @@ -184,11 +152,7 @@ describe('#getCommonColumns', () => { itemIdToExpandedNotesRowMap, onToggleShowNotes, }; - const wrapper = mountWithIntl( - - - - ); + const wrapper = mountWithIntl(); wrapper.find('[data-test-subj="expand-notes"]').first().simulate('click'); @@ -214,7 +178,7 @@ describe('#getCommonColumns', () => { onToggleShowNotes, }; const wrapper = mountWithIntl( - + ); @@ -233,7 +197,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(mockResults), }; const wrapper = mountWithIntl( - + ); @@ -246,7 +210,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(mockResults), }; const wrapper = mountWithIntl( - + ); @@ -265,7 +229,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(missingSavedObjectId), }; const wrapper = mountWithIntl( - + ); @@ -285,7 +249,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(missingTitle), }; const wrapper = mountWithIntl( - + ); @@ -304,7 +268,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(withMissingSavedObjectIdAndTitle), }; const wrapper = mountWithIntl( - + ); @@ -323,7 +287,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(withJustWhitespaceTitle), }; const wrapper = mountWithIntl( - + ); @@ -345,7 +309,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(withMissingSavedObjectId), }; const wrapper = mountWithIntl( - + ); @@ -360,7 +324,7 @@ describe('#getCommonColumns', () => { test('it renders a hyperlink when the timeline has a saved object id', () => { const wrapper = mountWithIntl( - + ); @@ -379,7 +343,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(missingSavedObjectId), }; const wrapper = mountWithIntl( - + ); @@ -397,7 +361,7 @@ describe('#getCommonColumns', () => { onOpenTimeline, }; const wrapper = mountWithIntl( - + ); @@ -417,7 +381,7 @@ describe('#getCommonColumns', () => { describe('Description column', () => { test('it renders the expected column name', () => { const wrapper = mountWithIntl( - + ); @@ -427,7 +391,7 @@ describe('#getCommonColumns', () => { test('it renders the description when the timeline has a description', () => { const wrapper = mountWithIntl( - + ); @@ -441,7 +405,7 @@ describe('#getCommonColumns', () => { const missingDescription: OpenTimelineResult[] = [omit('description', { ...mockResults[0] })]; const wrapper = mountWithIntl( - + ); @@ -459,7 +423,7 @@ describe('#getCommonColumns', () => { ...getMockTimelinesTableProps(justWhitespaceDescription), }; const wrapper = mountWithIntl( - + ); @@ -472,7 +436,7 @@ describe('#getCommonColumns', () => { describe('Last Modified column', () => { test('it renders the expected column name', () => { const wrapper = mountWithIntl( - + ); @@ -482,7 +446,7 @@ describe('#getCommonColumns', () => { test('it renders the last modified (updated) date when the timeline has an updated property', () => { const wrapper = mountWithIntl( - + ); @@ -497,7 +461,7 @@ describe('#getCommonColumns', () => { const missingUpdated: OpenTimelineResult[] = [omit('updated', { ...mockResults[0] })]; const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx index 66556296c42ac8..83e21267bce287 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/extended_columns.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep, omit } from 'lodash/fp'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; @@ -21,10 +20,11 @@ import { TimelinesTable, TimelinesTableProps } from '.'; import * as i18n from '../translations'; import { getMockTimelinesTableProps } from './mocks'; +const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; + jest.mock('../../../../common/lib/kibana'); describe('#getExtendedColumns', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockResults: OpenTimelineResult[]; beforeEach(() => { @@ -37,7 +37,7 @@ describe('#getExtendedColumns', () => { ...getMockTimelinesTableProps(mockResults), }; const wrapper = mountWithIntl( - + ); @@ -50,7 +50,7 @@ describe('#getExtendedColumns', () => { ...getMockTimelinesTableProps(mockResults), }; const wrapper = mountWithIntl( - + ); @@ -66,7 +66,7 @@ describe('#getExtendedColumns', () => { ...getMockTimelinesTableProps(missingUpdatedBy), }; const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx index c3681753c7732b..a8ed5f02fa3ef4 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/icon_header_columns.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep, omit } from 'lodash/fp'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; @@ -16,10 +15,12 @@ import { mockTimelineResults } from '../../../../common/mock/timeline_results'; import { TimelinesTable, TimelinesTableProps } from '.'; import { OpenTimelineResult } from '../types'; import { getMockTimelinesTableProps } from './mocks'; + +const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; + jest.mock('../../../../common/lib/kibana'); describe('#getActionsColumns', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockResults: OpenTimelineResult[]; beforeEach(() => { @@ -28,7 +29,7 @@ describe('#getActionsColumns', () => { test('it renders the pinned events header icon', () => { const wrapper = mountWithIntl( - + ); @@ -42,7 +43,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(with6Events), }; const wrapper = mountWithIntl( - + ); @@ -52,7 +53,7 @@ describe('#getActionsColumns', () => { test('it renders the notes count header icon', () => { const wrapper = mountWithIntl( - + ); @@ -66,7 +67,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(with4Notes), }; const wrapper = mountWithIntl( - + ); @@ -76,7 +77,7 @@ describe('#getActionsColumns', () => { test('it renders the favorites header icon', () => { const wrapper = mountWithIntl( - + ); @@ -90,7 +91,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(undefinedFavorite), }; const wrapper = mountWithIntl( - + ); @@ -104,7 +105,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(nullFavorite), }; const wrapper = mountWithIntl( - + ); @@ -118,7 +119,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(emptyFavorite), }; const wrapper = mountWithIntl( - + ); @@ -143,7 +144,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(favorite), }; const wrapper = mountWithIntl( - + ); @@ -172,7 +173,7 @@ describe('#getActionsColumns', () => { ...getMockTimelinesTableProps(favorite), }; const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.test.tsx index 2d5949ae41125d..01a855524ac0d8 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/index.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { cloneDeep } from 'lodash/fp'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; @@ -19,10 +18,11 @@ import { getMockTimelinesTableProps } from './mocks'; import * as i18n from '../translations'; +const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; + jest.mock('../../../../common/lib/kibana'); describe('TimelinesTable', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockResults: OpenTimelineResult[]; beforeEach(() => { @@ -31,7 +31,7 @@ describe('TimelinesTable', () => { test('it renders the select all timelines header checkbox when actionTimelineToShow has the action selectable', () => { const wrapper = mountWithIntl( - + ); @@ -45,7 +45,7 @@ describe('TimelinesTable', () => { actionTimelineToShow: ['delete', 'duplicate'], }; const wrapper = mountWithIntl( - + ); @@ -59,7 +59,7 @@ describe('TimelinesTable', () => { showExtendedColumns: true, }; const wrapper = mountWithIntl( - + ); @@ -73,7 +73,7 @@ describe('TimelinesTable', () => { showExtendedColumns: false, }; const wrapper = mountWithIntl( - + ); @@ -90,7 +90,7 @@ describe('TimelinesTable', () => { test('it renders the delete timeline (trash icon) when actionTimelineToShow has the delete action', () => { const wrapper = mountWithIntl( - + ); @@ -104,7 +104,7 @@ describe('TimelinesTable', () => { actionTimelineToShow: ['duplicate', 'selectable'], }; const wrapper = mountWithIntl( - + ); @@ -114,7 +114,7 @@ describe('TimelinesTable', () => { test('it renders the rows per page selector when showExtendedColumns is true', () => { const wrapper = mountWithIntl( - + ); @@ -128,7 +128,7 @@ describe('TimelinesTable', () => { showExtendedColumns: false, }; const wrapper = mountWithIntl( - + ); @@ -144,7 +144,7 @@ describe('TimelinesTable', () => { pageSize: defaultPageSize, }; const wrapper = mountWithIntl( - + ); @@ -156,7 +156,7 @@ describe('TimelinesTable', () => { test('it sorts the Last Modified column in descending order when showExtendedColumns is true ', () => { const wrapper = mountWithIntl( - + ); @@ -170,7 +170,7 @@ describe('TimelinesTable', () => { showExtendedColumns: false, }; const wrapper = mountWithIntl( - + ); @@ -184,7 +184,7 @@ describe('TimelinesTable', () => { searchResults: [], }; const wrapper = mountWithIntl( - + ); @@ -199,7 +199,7 @@ describe('TimelinesTable', () => { onTableChange, }; const wrapper = mountWithIntl( - + ); @@ -221,7 +221,7 @@ describe('TimelinesTable', () => { onSelectionChange, }; const wrapper = mountWithIntl( - + ); @@ -242,7 +242,7 @@ describe('TimelinesTable', () => { loading: true, }; const wrapper = mountWithIntl( - + ); @@ -257,7 +257,7 @@ describe('TimelinesTable', () => { test('it disables the table loading animation when isLoading is false', () => { const wrapper = mountWithIntl( - + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/title_row/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/title_row/index.test.tsx index 5621a2287f3a21..4661f72901eb6e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/title_row/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/title_row/index.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { EuiButtonProps } from '@elastic/eui'; import { mountWithIntl } from '@kbn/test/jest'; import React from 'react'; @@ -13,13 +12,16 @@ import { ThemeProvider } from 'styled-components'; import { TitleRow } from '.'; +const mockTheme = { + eui: { euiSizeS: '10px', euiLineHeight: '20px', euiBreakpoints: { s: '10px' }, euiSize: '10px' }, +}; + describe('TitleRow', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); const title = 'All Timelines / Open Timelines'; test('it renders the title', () => { const wrapper = mountWithIntl( - + ); @@ -30,7 +32,7 @@ describe('TitleRow', () => { describe('Favorite Selected button', () => { test('it renders the Favorite Selected button when onAddTimelinesToFavorites is provided', () => { const wrapper = mountWithIntl( - + { test('it does NOT render the Favorite Selected button when onAddTimelinesToFavorites is NOT provided', () => { const wrapper = mountWithIntl( - + ); @@ -54,7 +56,7 @@ describe('TitleRow', () => { test('it disables the Favorite Selected button when the selectedTimelinesCount is 0', () => { const wrapper = mountWithIntl( - + { test('it enables the Favorite Selected button when the selectedTimelinesCount is greater than 0', () => { const wrapper = mountWithIntl( - + { const onAddTimelinesToFavorites = jest.fn(); const wrapper = mountWithIntl( - + { data: mockDatum, timelineId: 'test', }); - const wrapper = mount( - ({ eui: euiDarkVars, darkMode: true })}> - {children} - - ); + const wrapper = mount({children}); expect(wrapper.text()).toEqual(''); }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx index d98a724ebf9cb5..6d7a9e5aecfd97 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/unknown_column_renderer.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json'; import { mount, shallow } from 'enzyme'; import { cloneDeep } from 'lodash'; import React from 'react'; @@ -17,8 +16,13 @@ import { getEmptyValue } from '../../../../../common/components/empty_value'; import { unknownColumnRenderer } from './unknown_column_renderer'; import { getValues } from './helpers'; +const mockTheme = { + eui: { + euiColorMediumShade: '#ece', + }, +}; + describe('unknown_column_renderer', () => { - const theme = () => ({ eui: euiDarkVars, darkMode: true }); let mockDatum: TimelineNonEcsData[]; const _id = mockTimelineData[0]._id; beforeEach(() => { @@ -50,7 +54,7 @@ describe('unknown_column_renderer', () => { timelineId: 'test', }); const wrapper = mount( - + {emptyColumn} ); @@ -66,7 +70,7 @@ describe('unknown_column_renderer', () => { timelineId: 'test', }); const wrapper = mount( - + {emptyColumn} );