Skip to content

Commit d5bb7d6

Browse files
smithsmith
authored
Use EuiThemeProvider in lists plugin tests and stories (#96129)
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.
1 parent 0500289 commit d5bb7d6

9 files changed

Lines changed: 71 additions & 114 deletions

File tree

‎x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,17 @@
55
* 2.0.
66
*/
77

8-
import { Story, addDecorator } from '@storybook/react';
8+
import { Story } from '@storybook/react';
99
import React from 'react';
10-
import { ThemeProvider } from 'styled-components';
11-
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
1210
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
1311

14-
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
12+
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
1513

1614
import { AndOrBadge, AndOrBadgeProps } from '.';
1715

1816
const sampleText =
1917
'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.';
2018

21-
const mockTheme = getMockTheme({
22-
darkMode: false,
23-
eui: euiLightVars,
24-
});
25-
26-
addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
27-
2819
export default {
2920
argTypes: {
3021
includeAntennas: {
@@ -58,6 +49,13 @@ export default {
5849
},
5950
},
6051
component: AndOrBadge,
52+
decorators: [
53+
(DecoratorStory: React.ComponentClass): React.ReactNode => (
54+
<EuiThemeProvider>
55+
<DecoratorStory />
56+
</EuiThemeProvider>
57+
),
58+
],
6159
title: 'AndOrBadge',
6260
};
6361

‎x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,18 @@
66
*/
77

88
import React from 'react';
9-
import { ThemeProvider } from 'styled-components';
109
import { mount } from 'enzyme';
1110

12-
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
11+
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
1312

1413
import { AndOrBadge } from './';
1514

16-
const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
17-
1815
describe('AndOrBadge', () => {
1916
test('it renders top and bottom antenna bars when "includeAntennas" is true', () => {
2017
const wrapper = mount(
21-
<ThemeProvider theme={mockTheme}>
18+
<EuiThemeProvider>
2219
<AndOrBadge includeAntennas type="and" />
23-
</ThemeProvider>
20+
</EuiThemeProvider>
2421
);
2522

2623
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
@@ -30,9 +27,9 @@ describe('AndOrBadge', () => {
3027

3128
test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => {
3229
const wrapper = mount(
33-
<ThemeProvider theme={mockTheme}>
30+
<EuiThemeProvider>
3431
<AndOrBadge type="or" />
35-
</ThemeProvider>
32+
</EuiThemeProvider>
3633
);
3734

3835
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');
@@ -42,19 +39,19 @@ describe('AndOrBadge', () => {
4239

4340
test('it renders "and" when "type" is "and"', () => {
4441
const wrapper = mount(
45-
<ThemeProvider theme={mockTheme}>
42+
<EuiThemeProvider>
4643
<AndOrBadge type="and" />
47-
</ThemeProvider>
44+
</EuiThemeProvider>
4845
);
4946

5047
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
5148
});
5249

5350
test('it renders "or" when "type" is "or"', () => {
5451
const wrapper = mount(
55-
<ThemeProvider theme={mockTheme}>
52+
<EuiThemeProvider>
5653
<AndOrBadge type="or" />
57-
</ThemeProvider>
54+
</EuiThemeProvider>
5855
);
5956

6057
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');

‎x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,18 @@
66
*/
77

88
import React from 'react';
9-
import { ThemeProvider } from 'styled-components';
109
import { mount } from 'enzyme';
1110

12-
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
11+
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
1312

1413
import { RoundedBadgeAntenna } from './rounded_badge_antenna';
1514

16-
const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
17-
1815
describe('RoundedBadgeAntenna', () => {
1916
test('it renders top and bottom antenna bars', () => {
2017
const wrapper = mount(
21-
<ThemeProvider theme={mockTheme}>
18+
<EuiThemeProvider>
2219
<RoundedBadgeAntenna type="and" />
23-
</ThemeProvider>
20+
</EuiThemeProvider>
2421
);
2522

2623
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
@@ -30,19 +27,19 @@ describe('RoundedBadgeAntenna', () => {
3027

3128
test('it renders "and" when "type" is "and"', () => {
3229
const wrapper = mount(
33-
<ThemeProvider theme={mockTheme}>
30+
<EuiThemeProvider>
3431
<RoundedBadgeAntenna type="and" />
35-
</ThemeProvider>
32+
</EuiThemeProvider>
3633
);
3734

3835
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('AND');
3936
});
4037

4138
test('it renders "or" when "type" is "or"', () => {
4239
const wrapper = mount(
43-
<ThemeProvider theme={mockTheme}>
40+
<EuiThemeProvider>
4441
<RoundedBadgeAntenna type="or" />
45-
</ThemeProvider>
42+
</EuiThemeProvider>
4643
);
4744

4845
expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR');

‎x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,18 @@
66
*/
77

88
import React from 'react';
9-
import { ThemeProvider } from 'styled-components';
109
import { mount } from 'enzyme';
1110

12-
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
11+
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
1312

1413
import { BuilderAndBadgeComponent } from './and_badge';
1514

16-
const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });
17-
1815
describe('BuilderAndBadgeComponent', () => {
1916
test('it renders exceptionItemEntryFirstRowAndBadge for very first exception item in builder', () => {
2017
const wrapper = mount(
21-
<ThemeProvider theme={mockTheme}>
18+
<EuiThemeProvider>
2219
<BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={0} />
23-
</ThemeProvider>
20+
</EuiThemeProvider>
2421
);
2522

2623
expect(
@@ -30,9 +27,9 @@ describe('BuilderAndBadgeComponent', () => {
3027

3128
test('it renders exceptionItemEntryInvisibleAndBadge if "entriesLength" is 1 or less', () => {
3229
const wrapper = mount(
33-
<ThemeProvider theme={mockTheme}>
30+
<EuiThemeProvider>
3431
<BuilderAndBadgeComponent entriesLength={1} exceptionItemIndex={0} />
35-
</ThemeProvider>
32+
</EuiThemeProvider>
3633
);
3734

3835
expect(
@@ -42,9 +39,9 @@ describe('BuilderAndBadgeComponent', () => {
4239

4340
test('it renders regular "and" badge if exception item is not the first one and includes more than one entry', () => {
4441
const wrapper = mount(
45-
<ThemeProvider theme={mockTheme}>
42+
<EuiThemeProvider>
4643
<BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={1} />
47-
</ThemeProvider>
44+
</EuiThemeProvider>
4845
);
4946

5047
expect(wrapper.find('[data-test-subj="exceptionItemEntryAndBadge"]').exists()).toBeTruthy();

‎x-pack/plugins/lists/public/exceptions/components/builder/builder.stories.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,14 @@
1313

1414
import { Story, addDecorator } from '@storybook/react';
1515
import React from 'react';
16-
import { ThemeProvider } from 'styled-components';
17-
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
1816
import { HttpStart } from 'kibana/public';
1917

2018
import { AutocompleteStart } from '../../../../../../../src/plugins/data/public';
19+
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
2120
import {
2221
fields,
2322
getField,
2423
} from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
25-
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
2624
import { getEntryMatchAnyMock } from '../../../../common/schemas/types/entry_match_any.mock';
2725
import { getEntryMatchMock } from '../../../../common/schemas/types/entry_match.mock';
2826
import { getEntryExistsMock } from '../../../../common/schemas/types/entry_exists.mock';
@@ -35,10 +33,6 @@ import {
3533
OnChangeProps,
3634
} from './exception_items_renderer';
3735

38-
const mockTheme = getMockTheme({
39-
darkMode: false,
40-
eui: euiLightVars,
41-
});
4236
const mockHttpService: HttpStart = ({
4337
addLoadingCountSource: (): void => {},
4438
anonymousPaths: {
@@ -76,7 +70,7 @@ const mockAutocompleteService = ({
7670
}),
7771
} as unknown) as AutocompleteStart;
7872

79-
addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
73+
addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>);
8074

8175
export default {
8276
argTypes: {

‎x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,18 @@
55
* 2.0.
66
*/
77

8-
import { Story, addDecorator } from '@storybook/react';
8+
import { Story } from '@storybook/react';
99
import { action } from '@storybook/addon-actions';
1010
import React from 'react';
11-
import { ThemeProvider } from 'styled-components';
12-
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
1311
import { HttpStart } from 'kibana/public';
1412

1513
import { OperatorEnum, OperatorTypeEnum } from '../../../../common';
1614
import { AutocompleteStart } from '../../../../../../../src/plugins/data/public';
1715
import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
18-
import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
16+
import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
1917

2018
import { BuilderEntryItem, EntryItemProps } from './entry_renderer';
2119

22-
const mockTheme = getMockTheme({
23-
darkMode: false,
24-
eui: euiLightVars,
25-
});
2620
const mockAutocompleteService = ({
2721
getValueSuggestions: () =>
2822
new Promise((resolve) => {
@@ -59,8 +53,6 @@ const mockAutocompleteService = ({
5953
}),
6054
} as unknown) as AutocompleteStart;
6155

62-
addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
63-
6456
export default {
6557
argTypes: {
6658
allowLargeValueLists: {
@@ -163,6 +155,13 @@ export default {
163155
},
164156
},
165157
component: BuilderEntryItem,
158+
decorators: [
159+
(DecoratorStory: React.ComponentClass): React.ReactNode => (
160+
<EuiThemeProvider>
161+
<DecoratorStory />
162+
</EuiThemeProvider>
163+
),
164+
],
166165
title: 'BuilderEntryItem',
167166
};
168167

0 commit comments

Comments
 (0)