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 deleted file mode 100644 index 1516ca9128893b..00000000000000 --- a/x-pack/plugins/lists/public/common/test_utils/kibana_react.mock.ts +++ /dev/null @@ -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 => - partialTheme as EuiTheme; 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 index 8272ca9683a4f0..74ec0759b057ef 100644 --- 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) => {storyFn()}); - export default { argTypes: { includeAntennas: { @@ -58,6 +49,13 @@ export default { }, }, component: AndOrBadge, + decorators: [ + (DecoratorStory: React.ComponentClass): React.ReactNode => ( + + + + ), + ], 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 index 47282d061a65de..26aa41549e61b3 100644 --- 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( - + - + ); 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( - + - + ); 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( - + - + ); 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( - + - + ); expect(wrapper.find('[data-test-subj="and-or-badge"]').at(0).text()).toEqual('OR'); diff --git a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx b/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx index 472345b9c9f191..dd5ed999dadcd3 100644 --- a/x-pack/plugins/lists/public/exceptions/components/and_or_badge/rounded_badge_antenna.test.tsx +++ b/x-pack/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( - + - + ); 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( - + - + ); 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( - + - + ); 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 index dc773e222776b9..4a1471d9a3e5d1 100644 --- 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( - + - + ); expect( @@ -30,9 +27,9 @@ describe('BuilderAndBadgeComponent', () => { test('it renders exceptionItemEntryInvisibleAndBadge if "entriesLength" is 1 or less', () => { const wrapper = mount( - + - + ); 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( - + - + ); 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 index 5199ead78ca0a0..8eaba9e82d7247 100644 --- 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) => {storyFn()}); +addDecorator((storyFn) => {storyFn()}); 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 index 8408fb7a6a4f1b..5b3730a6deb933 100644 --- 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) => {storyFn()}); - export default { argTypes: { allowLargeValueLists: { @@ -163,6 +155,13 @@ export default { }, }, component: BuilderEntryItem, + decorators: [ + (DecoratorStory: React.ComponentClass): React.ReactNode => ( + + + + ), + ], title: 'BuilderEntryItem', }; diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx index 0fd886bdc742a4..b896f2a44f67b3 100644 --- a/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/exception_item_renderer.test.tsx @@ -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( - + { onDeleteExceptionItem={jest.fn()} setErrorsExist={jest.fn()} /> - + ); expect( @@ -72,7 +66,7 @@ describe('BuilderExceptionListItemComponent', () => { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.entries = [getEntryMatchMock(), getEntryMatchMock()]; const wrapper = mount( - + { onDeleteExceptionItem={jest.fn()} setErrorsExist={jest.fn()} /> - + ); expect(wrapper.find('[data-test-subj="exceptionItemEntryAndBadge"]').exists()).toBeTruthy(); @@ -101,7 +95,7 @@ describe('BuilderExceptionListItemComponent', () => { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.entries = [getEntryMatchMock()]; const wrapper = mount( - + { onDeleteExceptionItem={jest.fn()} setErrorsExist={jest.fn()} /> - + ); expect( @@ -132,7 +126,7 @@ describe('BuilderExceptionListItemComponent', () => { const exceptionItem = getExceptionListItemSchemaMock(); exceptionItem.entries = [getEntryMatchMock()]; const wrapper = mount( - + { onDeleteExceptionItem={jest.fn()} setErrorsExist={jest.fn()} /> - + ); expect( diff --git a/x-pack/plugins/lists/public/exceptions/components/builder/exception_items_renderer.test.tsx b/x-pack/plugins/lists/public/exceptions/components/builder/exception_items_renderer.test.tsx index b8ec8dc354bf84..a236b102eabf7b 100644 --- a/x-pack/plugins/lists/public/exceptions/components/builder/exception_items_renderer.test.tsx +++ b/x-pack/plugins/lists/public/exceptions/components/builder/exception_items_renderer.test.tsx @@ -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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); expect( @@ -165,7 +159,7 @@ describe('ExceptionBuilderComponent', () => { test('it adds an entry when "and" clicked', async () => { wrapper = mount( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); 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( - + { ruleName="Test rule" onChange={jest.fn()} /> - + ); wrapper.find('[data-test-subj="exceptionsNestedButton"] button').simulate('click');