fix test to match new theme expectation within Kibana

elastic · Nov 20, 2024 · 1ae5116 · 1ae5116
1 parent 3697e5a
commit 1ae5116
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 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
@@ -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>): EuiTheme =>
-  partialTheme as EuiTheme;
+export const getMockTheme = (partialTheme: RecursivePartial<UseEuiTheme>): 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
@@ -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(<p>{getEmptyString()}</p>);

diff --git 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
@@ -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 (
-    <ThemeProvider
-      theme={() => ({ eui: { ...euiDarkVars, euiColorLightShade: '#ece' }, darkMode: true })}
-    >
+    <ThemeProvider>
       <IntlProvider locale="en">
         <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
       </IntlProvider>

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
@@ -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('<ExpandablePanel />', () => {
   describe('panel is not expandable by default', () => {
     it('should render non-expandable panel by default', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...defaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -54,7 +52,7 @@ describe('<ExpandablePanel />', () => {
         },
       };
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...props}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -70,7 +68,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should only render left section of panel header when headerContent is not passed', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...defaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -88,7 +86,7 @@ describe('<ExpandablePanel />', () => {
         header: { ...defaultProps.header, headerContent: <>{'test header content'}</> },
       };
       const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...props}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -105,7 +103,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should not render content when content is null', () => {
       const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...defaultProps} />
         </ThemeProvider>
       );
@@ -123,7 +121,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should render panel with toggle and collapsed by default', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandableDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -135,7 +133,7 @@ describe('<ExpandablePanel />', () => {
 
     it('click toggle button should expand the panel', () => {
       const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandableDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -152,7 +150,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should not render toggle or content when content is null', () => {
       const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandableDefaultProps} />
         </ThemeProvider>
       );
@@ -169,7 +167,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should render header and content', () => {
       const { getByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandedDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -184,7 +182,7 @@ describe('<ExpandablePanel />', () => {
 
     it('click toggle button should collapse the panel', () => {
       const { getByTestId, queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandedDefaultProps}>{children}</ExpandablePanel>
         </ThemeProvider>
       );
@@ -200,7 +198,7 @@ describe('<ExpandablePanel />', () => {
 
     it('should not render content when content is null', () => {
       const { queryByTestId } = render(
-        <ThemeProvider theme={mockTheme}>
+        <ThemeProvider>
           <ExpandablePanel {...expandedDefaultProps} />
         </ThemeProvider>
       );