github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Use EuiThemeProvider in lists plugin tests and stories (#96129)

Browse source 
Remove `getMockTheme` and use `EuiThemeProvider` from the kibana_react plugin.

Use the CSF-style decorators with `EuiThemeProvider` in the stories.

No functional changes, but should be less code to maintain.
This commit is contained in:
Nathan L Smith 2021-04-13 13:49:25 -05:00 • committed by GitHub
parent 0500289699
commit d5bb7d6645
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 71 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

13
x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts
View file

@ -1,13 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { RecursivePartial } from '@elastic/eui/src/components/common';
import { EuiTheme } from '../../../../../../src/plugins/kibana_react/common';
export const getMockTheme = (partialTheme: RecursivePartial<EuiTheme>): EuiTheme =>
partialTheme as EuiTheme;

20
x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx
View file

@ -5,26 +5,17 @@
* 2.0.
*/
import { Story, addDecorator } from '@storybook/react';
import { Story } from '@storybook/react';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { AndOrBadge, AndOrBadgeProps } from '.';
const sampleText =
'Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys. You are doing me the shock smol borking doggo with a long snoot for pats wow very biscit, length boy. Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem. Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys.';
const mockTheme = getMockTheme({
darkMode: false,
eui: euiLightVars,
});
addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
export default {
argTypes: {
includeAntennas: {
@ -58,6 +49,13 @@ export default {
},
},
component: AndOrBadge,
decorators: [
(DecoratorStory: React.ComponentClass): React.ReactNode => (
<EuiThemeProvider>
<DecoratorStory />
</EuiThemeProvider>
),
],
title: 'AndOrBadge',
};

21
x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx
View file

@ -6,21 +6,18 @@
*/
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { AndOrBadge } from './';
const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
describe('AndOrBadge', () => {
test('it renders top and bottom antenna bars when "includeAntennas" is true', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<AndOrBadge includeAntennas type="and" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
@ -30,9 +27,9 @@ describe('AndOrBadge', () => {
test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<AndOrBadge type="or" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
@ -42,9 +39,9 @@ describe('AndOrBadge', () => {
test('it renders "and" when "type" is "and"', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<AndOrBadge type="and" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
@ -52,9 +49,9 @@ describe('AndOrBadge', () => {
test('it renders "or" when "type" is "or"', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<AndOrBadge type="or" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');

17
x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx
View file

@ -6,21 +6,18 @@
*/
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { RoundedBadgeAntenna } from './rounded_badge_antenna';
const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
describe('RoundedBadgeAntenna', () => {
test('it renders top and bottom antenna bars', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<RoundedBadgeAntenna type="and" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
@ -30,9 +27,9 @@ describe('RoundedBadgeAntenna', () => {
test('it renders "and" when "type" is "and"', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<RoundedBadgeAntenna type="and" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
@ -40,9 +37,9 @@ describe('RoundedBadgeAntenna', () => {
test('it renders "or" when "type" is "or"', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<RoundedBadgeAntenna type="or" />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');

17
x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx
View file

@ -6,21 +6,18 @@
*/
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { BuilderAndBadgeComponent } from './and_badge';
const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
describe('BuilderAndBadgeComponent', () => {
test('it renders exceptionItemEntryFirstRowAndBadge for very first exception item in builder', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={0} />
</ThemeProvider>
</EuiThemeProvider>
);
expect(
@ -30,9 +27,9 @@ describe('BuilderAndBadgeComponent', () => {
test('it renders exceptionItemEntryInvisibleAndBadge if "entriesLength" is 1 or less', () => {
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderAndBadgeComponent entriesLength={1} exceptionItemIndex={0} />
</ThemeProvider>
</EuiThemeProvider>
);
expect(
@ -42,9 +39,9 @@ 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(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={1} />
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="exceptionItemEntryAndBadge"]').exists()).toBeTruthy();

10
x-pack/plugins/lists/public/exceptions/components/builder/builder.stories.tsx
View file

@ -13,16 +13,14 @@
import { Story, addDecorator } from '@storybook/react';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { HttpStart } from 'kibana/public';
import { AutocompleteStart } from '../../../../../../../src/plugins/data/public';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import {
fields,
getField,
} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { getEntryMatchAnyMock } from '../../../../common/schemas/types/entry_match_any.mock';
import { getEntryMatchMock } from '../../../../common/schemas/types/entry_match.mock';
import { getEntryExistsMock } from '../../../../common/schemas/types/entry_exists.mock';
@ -35,10 +33,6 @@ import {
OnChangeProps,
} from './exception_items_renderer';
const mockTheme = getMockTheme({
darkMode: false,
eui: euiLightVars,
});
const mockHttpService: HttpStart = ({
addLoadingCountSource: (): void => {},
anonymousPaths: {
@ -76,7 +70,7 @@ const mockAutocompleteService = ({
}),
} as unknown) as AutocompleteStart;
addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>);
export default {
argTypes: {

19
x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx
View file

@ -5,24 +5,18 @@
* 2.0.
*/
import { Story, addDecorator } from '@storybook/react';
import { Story } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { HttpStart } from 'kibana/public';
import { OperatorEnum, OperatorTypeEnum } from '../../../../common';
import { AutocompleteStart } from '../../../../../../../src/plugins/data/public';
import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { BuilderEntryItem, EntryItemProps } from './entry_renderer';
const mockTheme = getMockTheme({
darkMode: false,
eui: euiLightVars,
});
const mockAutocompleteService = ({
getValueSuggestions: () =>
new Promise((resolve) => {
@ -59,8 +53,6 @@ const mockAutocompleteService = ({
}),
} as unknown) as AutocompleteStart;
addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
export default {
argTypes: {
allowLargeValueLists: {
@ -163,6 +155,13 @@ export default {
},
},
component: BuilderEntryItem,
decorators: [
(DecoratorStory: React.ComponentClass): React.ReactNode => (
<EuiThemeProvider>
<DecoratorStory />
</EuiThemeProvider>
),
],
title: 'BuilderEntryItem',
};

24
x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx
View file

@ -6,24 +6,18 @@
*/
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import { dataPluginMock } from 'src/plugins/data/public/mocks';
import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import { getExceptionListItemSchemaMock } from '../../../../common/schemas/response/exception_list_item_schema.mock';
import { getEntryMatchMock } from '../../../../common/schemas/types/entry_match.mock';
import { getEntryMatchAnyMock } from '../../../../common/schemas/types/entry_match_any.mock';
import { coreMock } from '../../../../../../../src/core/public/mocks';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { BuilderExceptionListItemComponent } from './exception_item_renderer';
const mockTheme = getMockTheme({
eui: {
euiColorLightShade: '#ece',
},
});
const mockKibanaHttpService = coreMock.createStart().http;
const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract();
@ -41,7 +35,7 @@ describe('BuilderExceptionListItemComponent', () => {
entries: [getEntryMatchMock(), getEntryMatchMock()],
};
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderExceptionListItemComponent
allowLargeValueLists={true}
andLogicIncluded={true}
@ -60,7 +54,7 @@ describe('BuilderExceptionListItemComponent', () => {
onDeleteExceptionItem={jest.fn()}
setErrorsExist={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(
@ -72,7 +66,7 @@ describe('BuilderExceptionListItemComponent', () => {
const exceptionItem = getExceptionListItemSchemaMock();
exceptionItem.entries = [getEntryMatchMock(), getEntryMatchMock()];
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderExceptionListItemComponent
allowLargeValueLists={true}
andLogicIncluded={true}
@ -91,7 +85,7 @@ describe('BuilderExceptionListItemComponent', () => {
onDeleteExceptionItem={jest.fn()}
setErrorsExist={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="exceptionItemEntryAndBadge"]').exists()).toBeTruthy();
@ -101,7 +95,7 @@ describe('BuilderExceptionListItemComponent', () => {
const exceptionItem = getExceptionListItemSchemaMock();
exceptionItem.entries = [getEntryMatchMock()];
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderExceptionListItemComponent
allowLargeValueLists={true}
andLogicIncluded={true}
@ -120,7 +114,7 @@ describe('BuilderExceptionListItemComponent', () => {
onDeleteExceptionItem={jest.fn()}
setErrorsExist={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(
@ -132,7 +126,7 @@ describe('BuilderExceptionListItemComponent', () => {
const exceptionItem = getExceptionListItemSchemaMock();
exceptionItem.entries = [getEntryMatchMock()];
const wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<BuilderExceptionListItemComponent
allowLargeValueLists={true}
andLogicIncluded={false}
@ -151,7 +145,7 @@ describe('BuilderExceptionListItemComponent', () => {
onDeleteExceptionItem={jest.fn()}
setErrorsExist={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(

44
x-pack/plugins/lists/public/exceptions/components/builder/exception_items_renderer.test.tsx
View file

@ -6,28 +6,22 @@
*/
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { ReactWrapper, mount } from 'enzyme';
import { waitFor } from '@testing-library/react';
import { coreMock } from 'src/core/public/mocks';
import { dataPluginMock } from 'src/plugins/data/public/mocks';
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
import {
fields,
getField,
} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
import { getExceptionListItemSchemaMock } from '../../../../common/schemas/response/exception_list_item_schema.mock';
import { getEntryMatchAnyMock } from '../../../../common/schemas/types/entry_match_any.mock';
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
import { getEmptyValue } from '../../../common/empty_value';
import { ExceptionBuilderComponent } from './exception_items_renderer';
const mockTheme = getMockTheme({
eui: {
euiColorLightShade: '#ece',
},
});
const mockKibanaHttpService = coreMock.createStart().http;
const { autocomplete: autocompleteStartMock } = dataPluginMock.createStartContract();
@ -44,7 +38,7 @@ describe('ExceptionBuilderComponent', () => {
test('it displays empty entry if no "exceptionListItems" are passed in', () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -64,7 +58,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('EuiFlexGroup[data-test-subj="exceptionItemEntryContainer"]')).toHaveLength(
@ -83,7 +77,7 @@ describe('ExceptionBuilderComponent', () => {
test('it displays "exceptionListItems" that are passed in', async () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -110,7 +104,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('EuiFlexGroup[data-test-subj="exceptionItemEntryContainer"]')).toHaveLength(
1
@ -128,7 +122,7 @@ describe('ExceptionBuilderComponent', () => {
test('it displays "or", "and" and "add nested button" enabled', () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -149,7 +143,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(
@ -165,7 +159,7 @@ describe('ExceptionBuilderComponent', () => {
test('it adds an entry when "and" clicked', async () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -185,7 +179,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('EuiFlexGroup[data-test-subj="exceptionItemEntryContainer"]')).toHaveLength(
@ -222,7 +216,7 @@ describe('ExceptionBuilderComponent', () => {
test('it adds an exception item when "or" clicked', async () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -242,7 +236,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('EuiFlexGroup[data-test-subj="exceptionEntriesContainer"]')).toHaveLength(
@ -283,7 +277,7 @@ describe('ExceptionBuilderComponent', () => {
test('it displays empty entry if user deletes last remaining entry', () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -310,7 +304,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(wrapper.find('[data-test-subj="exceptionBuilderEntryField"]').at(0).text()).toEqual(
@ -338,7 +332,7 @@ describe('ExceptionBuilderComponent', () => {
test('it displays "and" badge if at least one exception item includes more than one entry', () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -358,7 +352,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
expect(
@ -374,7 +368,7 @@ describe('ExceptionBuilderComponent', () => {
test('it does not display "and" badge if none of the exception items include more than one entry', () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -394,7 +388,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
wrapper.find('[data-test-subj="exceptionsOrButton"] button').simulate('click');
@ -413,7 +407,7 @@ describe('ExceptionBuilderComponent', () => {
describe('nested entry', () => {
test('it adds a nested entry when "add nested entry" clicked', async () => {
wrapper = mount(
<ThemeProvider theme={mockTheme}>
<EuiThemeProvider>
<ExceptionBuilderComponent
allowLargeValueLists={true}
autocompleteService={autocompleteStartMock}
@ -433,7 +427,7 @@ describe('ExceptionBuilderComponent', () => {
ruleName="Test rule"
onChange={jest.fn()}
/>
</ThemeProvider>
</EuiThemeProvider>
);
wrapper.find('[data-test-subj="exceptionsNestedButton"] button').simulate('click');