From 1ae51167e70a72b0028813aad75dea48ecfffa22 Mon Sep 17 00:00:00 2001 From: Eyo Okon Eyo Date: Wed, 20 Nov 2024 19:43:20 +0100 Subject: [PATCH] fix test to match new theme expectation within Kibana --- .../common/lib/kibana/kibana_react.mock.tsx | 6 ++--- .../empty_value/empty_value.test.tsx | 2 +- .../public/components/empty_value/index.tsx | 7 ++--- .../public/pages/alerts/alerts.test.tsx | 7 ++--- .../components/expandable_panel.test.tsx | 26 +++++++++---------- 5 files changed, 20 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx b/x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx index 48ef98c8dffa8..e644c9604d495 100644 --- a/x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx +++ b/x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.tsx @@ -15,7 +15,7 @@ import { coreMock } from '@kbn/core/public/mocks'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import type { ILicense } from '@kbn/licensing-plugin/public'; import type { StartServices } from '../../../types'; -import type { EuiTheme } from '@kbn/kibana-react-plugin/common'; +import type { UseEuiTheme } from '@elastic/eui'; import { securityMock } from '@kbn/security-plugin/public/mocks'; import { spacesPluginMock } from '@kbn/spaces-plugin/public/mocks'; import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks'; @@ -118,5 +118,5 @@ export const createKibanaContextProviderMock = () => { React.createElement(KibanaContextProvider, { services }, children); }; -export const getMockTheme = (partialTheme: RecursivePartial): EuiTheme => - partialTheme as EuiTheme; +export const getMockTheme = (partialTheme: RecursivePartial): UseEuiTheme => + partialTheme as UseEuiTheme; diff --git a/x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx b/x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx index d49dd2c17bfb5..049a8e0d56635 100644 --- a/x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx +++ b/x-pack/plugins/cases/public/components/empty_value/empty_value.test.tsx @@ -21,7 +21,7 @@ import { import { getMockTheme } from '../../common/lib/kibana/kibana_react.mock'; describe('EmptyValue', () => { - const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } }); + const mockTheme = getMockTheme({ euiTheme: { colors: { mediumShade: '#ece' } } }); test('it renders against snapshot', () => { const wrapper = shallow(

{getEmptyString()}

); diff --git a/x-pack/plugins/cases/public/components/empty_value/index.tsx b/x-pack/plugins/cases/public/components/empty_value/index.tsx index c89cd8fae91e6..8773174558de3 100644 --- a/x-pack/plugins/cases/public/components/empty_value/index.tsx +++ b/x-pack/plugins/cases/public/components/empty_value/index.tsx @@ -7,14 +7,11 @@ import { get, isString } from 'lodash/fp'; import React from 'react'; -import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; +import type { UseEuiTheme } from '@elastic/eui'; import * as i18n from './translations'; -const emptyWrapperCss = css` - color: ${euiThemeVars.euiColorMediumShade}; -`; +const emptyWrapperCss = ({ euiTheme }: UseEuiTheme) => ({ color: euiTheme.colors.mediumShade }); export const getEmptyValue = () => '—'; export const getEmptyString = () => `(${i18n.EMPTY_STRING})`; diff --git a/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx b/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx index a5067c2968bb5..33dc64f35ee31 100644 --- a/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx +++ b/x-pack/plugins/observability_solution/observability/public/pages/alerts/alerts.test.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { ThemeProvider } from '@emotion/react'; +import { EuiThemeProvider as ThemeProvider } from '@elastic/eui'; import { MAINTENANCE_WINDOW_FEATURE_ID } from '@kbn/alerting-plugin/common/maintenance_window'; import { fetchActiveMaintenanceWindows } from '@kbn/alerts-ui-shared/src/maintenance_window_callout/api'; import { RUNNING_MAINTENANCE_WINDOW_1 } from '@kbn/alerts-ui-shared/src/maintenance_window_callout/mock'; @@ -14,7 +14,6 @@ import { TimeBuckets } from '@kbn/data-plugin/common'; import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { observabilityAIAssistantPluginMock } from '@kbn/observability-ai-assistant-plugin/public/mock'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; -import { euiDarkVars } from '@kbn/ui-theme'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { render, waitFor } from '@testing-library/react'; import React from 'react'; @@ -121,9 +120,7 @@ const queryClient = new QueryClient({ }); function AllTheProviders({ children }: { children: any }) { return ( - ({ eui: { ...euiDarkVars, euiColorLightShade: '#ece' }, darkMode: true })} - > + {children} diff --git a/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx b/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx index 87592b608613f..2be968669057c 100644 --- a/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx +++ b/x-pack/plugins/security_solution/public/flyout/shared/components/expandable_panel.test.tsx @@ -14,11 +14,9 @@ import { EXPANDABLE_PANEL_HEADER_TITLE_ICON_TEST_ID, EXPANDABLE_PANEL_TOGGLE_ICON_TEST_ID, } from './test_ids'; -import { ThemeProvider } from '@emotion/react'; +import { EuiThemeProvider as ThemeProvider } from '@elastic/eui'; import { ExpandablePanel } from './expandable_panel'; -const mockTheme = { eui: { euiColorMediumShade: '#ece' } }; - const TEST_ID = 'test-id'; const defaultProps = { header: { @@ -33,7 +31,7 @@ describe('', () => { describe('panel is not expandable by default', () => { it('should render non-expandable panel by default', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -54,7 +52,7 @@ describe('', () => { }, }; const { getByTestId, queryByTestId } = render( - + {children} ); @@ -70,7 +68,7 @@ describe('', () => { it('should only render left section of panel header when headerContent is not passed', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -88,7 +86,7 @@ describe('', () => { header: { ...defaultProps.header, headerContent: <>{'test header content'} }, }; const { getByTestId } = render( - + {children} ); @@ -105,7 +103,7 @@ describe('', () => { it('should not render content when content is null', () => { const { queryByTestId } = render( - + ); @@ -123,7 +121,7 @@ describe('', () => { it('should render panel with toggle and collapsed by default', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -135,7 +133,7 @@ describe('', () => { it('click toggle button should expand the panel', () => { const { getByTestId } = render( - + {children} ); @@ -152,7 +150,7 @@ describe('', () => { it('should not render toggle or content when content is null', () => { const { queryByTestId } = render( - + ); @@ -169,7 +167,7 @@ describe('', () => { it('should render header and content', () => { const { getByTestId } = render( - + {children} ); @@ -184,7 +182,7 @@ describe('', () => { it('click toggle button should collapse the panel', () => { const { getByTestId, queryByTestId } = render( - + {children} ); @@ -200,7 +198,7 @@ describe('', () => { it('should not render content when content is null', () => { const { queryByTestId } = render( - + );