[Security Solution] Replace EUI theme with mocks in jest suites

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 elastic#64092.
ecezalp · Feb 24, 2021 · e19c032 · e19c032
1 parent b131630
commit e19c032
Show file tree

Hide file tree

Showing 63 changed files with 1,664 additions and 2,585 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
@@ -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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <AndOrBadge includeAntennas type="and" />
       </ThemeProvider>
     );
@@ -27,7 +28,7 @@ describe('AndOrBadge', () => {
 
   test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <AndOrBadge type="or" />
       </ThemeProvider>
     );
@@ -39,7 +40,7 @@ describe('AndOrBadge', () => {
 
   test('it renders "and" when "type" is "and"', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <AndOrBadge type="and" />
       </ThemeProvider>
     );
@@ -49,7 +50,7 @@ describe('AndOrBadge', () => {
 
   test('it renders "or" when "type" is "or"', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <AndOrBadge type="or" />
       </ThemeProvider>
     );

diff --git a/...ck/plugins/security_solution/public/common/components/and_or_badge/rounded_badge.test.tsx b/...ck/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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <RoundedBadge type="and" />
-      </ThemeProvider>
-    );
+    const wrapper = mount(<RoundedBadge type="and" />);
 
     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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <RoundedBadge type="or" />
-      </ThemeProvider>
-    );
+    const wrapper = mount(<RoundedBadge type="or" />);
 
     expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
   });

diff --git a/...ns/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx b/...ns/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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <RoundedBadgeAntenna type="and" />
       </ThemeProvider>
     );
@@ -27,7 +28,7 @@ describe('RoundedBadgeAntenna', () => {
 
   test('it renders "and" when "type" is "and"', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <RoundedBadgeAntenna type="and" />
       </ThemeProvider>
     );
@@ -37,7 +38,7 @@ describe('RoundedBadgeAntenna', () => {
 
   test('it renders "or" when "type" is "or"', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
+      <ThemeProvider theme={mockTheme}>
         <RoundedBadgeAntenna type="or" />
       </ThemeProvider>
     );

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
@@ -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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <FieldComponent
-          placeholder="Placeholder text"
-          indexPattern={{
-            id: '1234',
-            title: 'logstash-*',
-            fields,
-          }}
-          selectedField={getField('machine.os.raw')}
-          isLoading={false}
-          isClearable={false}
-          isDisabled={true}
-          onChange={jest.fn()}
-        />
-      </ThemeProvider>
+      <FieldComponent
+        placeholder="Placeholder text"
+        indexPattern={{
+          id: '1234',
+          title: 'logstash-*',
+          fields,
+        }}
+        selectedField={getField('machine.os.raw')}
+        isLoading={false}
+        isClearable={false}
+        isDisabled={true}
+        onChange={jest.fn()}
+      />
     );
 
     expect(
@@ -44,21 +40,19 @@ describe('FieldComponent', () => {
 
   test('it renders loading if "isLoading" is true', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <FieldComponent
-          placeholder="Placeholder text"
-          indexPattern={{
-            id: '1234',
-            title: 'logstash-*',
-            fields,
-          }}
-          selectedField={getField('machine.os.raw')}
-          isLoading={true}
-          isClearable={false}
-          isDisabled={false}
-          onChange={jest.fn()}
-        />
-      </ThemeProvider>
+      <FieldComponent
+        placeholder="Placeholder text"
+        indexPattern={{
+          id: '1234',
+          title: 'logstash-*',
+          fields,
+        }}
+        selectedField={getField('machine.os.raw')}
+        isLoading={true}
+        isClearable={false}
+        isDisabled={false}
+        onChange={jest.fn()}
+      />
     );
     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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <FieldComponent
-          placeholder="Placeholder text"
-          indexPattern={{
-            id: '1234',
-            title: 'logstash-*',
-            fields,
-          }}
-          selectedField={getField('machine.os.raw')}
-          isLoading={false}
-          isClearable={true}
-          isDisabled={false}
-          onChange={jest.fn()}
-        />
-      </ThemeProvider>
+      <FieldComponent
+        placeholder="Placeholder text"
+        indexPattern={{
+          id: '1234',
+          title: 'logstash-*',
+          fields,
+        }}
+        selectedField={getField('machine.os.raw')}
+        isLoading={false}
+        isClearable={true}
+        isDisabled={false}
+        onChange={jest.fn()}
+      />
     );
 
     expect(
@@ -96,21 +88,19 @@ describe('FieldComponent', () => {
 
   test('it correctly displays selected field', () => {
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <FieldComponent
-          placeholder="Placeholder text"
-          indexPattern={{
-            id: '1234',
-            title: 'logstash-*',
-            fields,
-          }}
-          selectedField={getField('machine.os.raw')}
-          isLoading={false}
-          isClearable={false}
-          isDisabled={false}
-          onChange={jest.fn()}
-        />
-      </ThemeProvider>
+      <FieldComponent
+        placeholder="Placeholder text"
+        indexPattern={{
+          id: '1234',
+          title: 'logstash-*',
+          fields,
+        }}
+        selectedField={getField('machine.os.raw')}
+        isLoading={false}
+        isClearable={false}
+        isDisabled={false}
+        onChange={jest.fn()}
+      />
     );
 
     expect(
@@ -121,21 +111,19 @@ describe('FieldComponent', () => {
   test('it invokes "onChange" when option selected', () => {
     const mockOnChange = jest.fn();
     const wrapper = mount(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <FieldComponent
-          placeholder="Placeholder text"
-          indexPattern={{
-            id: '1234',
-            title: 'logstash-*',
-            fields,
-          }}
-          selectedField={getField('machine.os.raw')}
-          isLoading={false}
-          isClearable={false}
-          isDisabled={false}
-          onChange={mockOnChange}
-        />
-      </ThemeProvider>
+      <FieldComponent
+        placeholder="Placeholder text"
+        indexPattern={{
+          id: '1234',
+          title: 'logstash-*',
+          fields,
+        }}
+        selectedField={getField('machine.os.raw')}
+        isLoading={false}
+        isClearable={false}
+        isDisabled={false}
+        onChange={mockOnChange}
+      />
     );
 
     ((wrapper.find(EuiComboBox).props() as unknown) as {

diff --git a/...ugins/security_solution/public/common/components/autocomplete/field_value_exists.test.tsx b/...ugins/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(
-      <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
-        <AutocompleteFieldExistsComponent placeholder="Placeholder text" />
-      </ThemeProvider>
-    );
+    const wrapper = mount(<AutocompleteFieldExistsComponent placeholder="Placeholder text" />);
 
     expect(
       wrapper