Skip to content

Commit

Permalink
[Security Solution] Replace EUI theme with mocks in jest suites (elas…
Browse files Browse the repository at this point in the history
…tic#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 elastic#64092.
  • Loading branch information
ecezalp committed Mar 2, 2021
1 parent 0be2f15 commit 77549f5
Show file tree
Hide file tree
Showing 63 changed files with 1,664 additions and 2,585 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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>
);
Expand All @@ -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>
);
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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>
);
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit 77549f5

Please sign in to comment.