From bdcad52cd8d1569590107a43e3bea7cf25164af9 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Thu, 16 Jan 2025 10:57:55 +0100 Subject: [PATCH] [React@18] Refactor overview.tsx test to rtl (#206805) ## Summary Extracted from https://github.com/elastic/kibana/pull/206411 [[job]](https://buildkite.com/elastic/kibana-pull-request/builds/267344#019469ff-7fb9-4c5d-8569-2e445aab27be) [[logs]](https://buildkite.com/organizations/elastic/pipelines/kibana-pull-request/builds/267344/jobs/019469ff-7fb9-4c5d-8569-2e445aab27be/artifacts/01946a1c-62fa-4d30-8863-1b40f8c0b924) Jest Tests #9 / Overview renders correctly when there is no user data view This simplifies overview.tsx by refactoring to rtl and removing the whole snapshot. The snapshot was not useful and the test is still making sure that the intended component is still rendered. By removing enzyme, the test now works properly for both react 17 and 18. --- .../__snapshots__/overview.test.tsx.snap | 1602 ----------------- .../overview/overview.test.mocks.ts | 18 +- .../components/overview/overview.test.tsx | 70 +- .../private/kibana_overview/tsconfig.json | 2 + 4 files changed, 34 insertions(+), 1658 deletions(-) delete mode 100644 src/platform/plugins/private/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap diff --git a/src/platform/plugins/private/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/platform/plugins/private/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap deleted file mode 100644 index be57e413da4c8..0000000000000 --- a/src/platform/plugins/private/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap +++ /dev/null @@ -1,1602 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Overview renders correctly 1`] = ` - - , - "rightSideItems": Array [], - } - } - panelled={false} - > - - - -`; - -exports[`Overview renders correctly when there is no user data view 1`] = ` - - - - - - } - > - - - - - - - - - -`; - -exports[`Overview renders correctly without features 1`] = ` - - , - "rightSideItems": Array [], - } - } - panelled={false} - > - - - -`; - -exports[`Overview renders correctly without solutions 1`] = ` - - , - "rightSideItems": Array [], - } - } - panelled={false} - > - - - -`; - -exports[`Overview show loading spinner during loading 1`] = ` -
-
- -
-
-`; diff --git a/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.mocks.ts b/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.mocks.ts index 151042c64b377..cb735d2683c0a 100644 --- a/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.mocks.ts +++ b/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.mocks.ts @@ -8,7 +8,9 @@ */ import React from 'react'; -import { Observable, of } from 'rxjs'; +import { of } from 'rxjs'; +import { applicationServiceMock } from '@kbn/core-application-browser-mocks'; +import { httpServiceMock } from '@kbn/core-http-browser-mocks'; import { indexPatternEditorPluginMock } from '@kbn/data-view-editor-plugin/public/mocks'; export const hasUserDataView = jest.fn(); @@ -17,18 +19,8 @@ export const hasESData = jest.fn(); jest.doMock('@kbn/kibana-react-plugin/public', () => ({ useKibana: jest.fn().mockReturnValue({ services: { - application: { - currentAppId$: new Observable(), - navigateToUrl: jest.fn(), - capabilities: { - navLinks: { - integrations: { - canAccessFleet: false, - }, - }, - }, - }, - http: { basePath: { prepend: jest.fn((path: string) => (path ? path : 'path')) } }, + application: applicationServiceMock.createStartContract(), + http: httpServiceMock.createStartContract(), dataViews: { hasUserDataView: jest.fn(), hasData: { diff --git a/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.tsx b/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.tsx index 44e7de1e6f447..410bb04715e79 100644 --- a/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.tsx +++ b/src/platform/plugins/private/kibana_overview/public/components/overview/overview.test.tsx @@ -8,20 +8,14 @@ */ import React from 'react'; -import { setTimeout as setTimeoutP } from 'timers/promises'; import moment from 'moment'; -import { act } from 'react-dom/test-utils'; -import { ReactWrapper } from 'enzyme'; -import { EuiLoadingSpinner } from '@elastic/eui'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; -import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; +import { render, waitFor } from '@testing-library/react'; import type { FeatureCatalogueCategory } from '@kbn/home-plugin/public'; -import { AnalyticsNoDataPageKibanaProvider } from '@kbn/shared-ux-page-analytics-no-data'; import { hasESData, hasUserDataView } from './overview.test.mocks'; import { Overview } from './overview'; jest.mock('@kbn/shared-ux-page-kibana-template', () => { - const MockedComponent: string = 'MockedKibanaPageTemplate'; + const MockedComponent = () => 'MockedKibanaPageTemplate'; const mockedModule = { ...jest.requireActual('@kbn/shared-ux-page-kibana-template'), KibanaPageTemplate: () => { @@ -32,7 +26,7 @@ jest.mock('@kbn/shared-ux-page-kibana-template', () => { }); jest.mock('@kbn/shared-ux-page-analytics-no-data', () => { - const MockedComponent: string = 'MockedAnalyticsNoDataPage'; + const MockedComponent = () => 'MockedAnalyticsNoDataPage'; return { ...jest.requireActual('@kbn/shared-ux-page-analytics-no-data'), AnalyticsNoDataPageKibanaProvider: () => { @@ -150,15 +144,6 @@ const mockFeatures = [ }, ]; -const flushPromises = async () => await setTimeoutP(10); - -const updateComponent = async (component: ReactWrapper) => { - await act(async () => { - await flushPromises(); - component.update(); - }); -}; - describe('Overview', () => { beforeEach(() => { hasESData.mockResolvedValue(true); @@ -168,7 +153,7 @@ describe('Overview', () => { afterAll(() => jest.clearAllMocks()); test('renders correctly', async () => { - const component = mountWithIntl( + const { getByText } = render( { /> ); - await updateComponent(component); - - expect(component).toMatchSnapshot(); - expect(component.find(KibanaPageTemplate).length).toBe(1); + await waitFor(() => { + expect(getByText('MockedKibanaPageTemplate')).toBeInTheDocument(); + }); }); test('renders correctly without solutions', async () => { - const component = mountWithIntl( + const { getByText } = render( ); - await updateComponent(component); - - expect(component).toMatchSnapshot(); + await waitFor(() => { + expect(getByText('MockedKibanaPageTemplate')).toBeInTheDocument(); + }); }); test('renders correctly without features', async () => { - const component = mountWithIntl( + const { getByText } = render( ); - await updateComponent(component); - - expect(component).toMatchSnapshot(); + await waitFor(() => { + expect(getByText('MockedKibanaPageTemplate')).toBeInTheDocument(); + }); }); test('renders correctly when there is no user data view', async () => { hasESData.mockResolvedValue(true); hasUserDataView.mockResolvedValue(false); - const component = mountWithIntl( + const { getByText, queryByText, queryByLabelText } = render( { /> ); - await updateComponent(component); + await waitFor(() => { + expect(getByText('MockedAnalyticsNoDataPage')).toBeInTheDocument(); + }); - expect(component).toMatchSnapshot(); - expect(component.find(AnalyticsNoDataPageKibanaProvider).length).toBe(1); - expect(component.find(KibanaPageTemplate).length).toBe(0); - expect(component.find(EuiLoadingSpinner).length).toBe(0); + expect(queryByText('MockedKibanaPageTemplate')).not.toBeInTheDocument(); + expect(queryByLabelText('Loading')).not.toBeInTheDocument(); }); test('show loading spinner during loading', async () => { hasESData.mockImplementation(() => new Promise(() => {})); hasUserDataView.mockImplementation(() => new Promise(() => {})); - const component = mountWithIntl( + const { getByLabelText, queryByText } = render( { /> ); - await updateComponent(component); + await waitFor(() => { + expect(getByLabelText('Loading')).toBeInTheDocument(); + }); - expect(component.render()).toMatchSnapshot(); - expect(component.find(AnalyticsNoDataPageKibanaProvider).length).toBe(0); - expect(component.find(KibanaPageTemplate).length).toBe(0); - expect(component.find(EuiLoadingSpinner).length).toBe(1); + expect(queryByText('MockedAnalyticsNoDataPage')).not.toBeInTheDocument(); + expect(queryByText('MockedKibanaPageTemplate')).not.toBeInTheDocument(); }); }); diff --git a/src/platform/plugins/private/kibana_overview/tsconfig.json b/src/platform/plugins/private/kibana_overview/tsconfig.json index f2fd70144e928..469f4bc2f580c 100644 --- a/src/platform/plugins/private/kibana_overview/tsconfig.json +++ b/src/platform/plugins/private/kibana_overview/tsconfig.json @@ -28,6 +28,8 @@ "@kbn/shared-ux-avatar-solution", "@kbn/shared-ux-utility", "@kbn/react-kibana-context-render", + "@kbn/core-application-browser-mocks", + "@kbn/core-http-browser-mocks", ], "exclude": [ "target/**/*",