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.
elastic · Apr 13, 2021 · d5bb7d6 · d5bb7d6
1 parent 0500289
commit d5bb7d6
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 114 deletions.
diff --git a/x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts b/x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts
diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx
@@ -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',
 };
 

diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.test.tsx
@@ -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,19 +39,19 @@ 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');
   });
 
   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');

diff --git a/...ck/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx b/...ck/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx
@@ -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,19 +27,19 @@ 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');
   });
 
   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');

diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/and_badge.test.tsx
@@ -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();

diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/builder.stories.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/builder.stories.tsx
@@ -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: {

diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx
@@ -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',
 };