From d8f5a6f06e581218fcc8760a61ba5b2630e92854 Mon Sep 17 00:00:00 2001 From: Eyo Okon Eyo Date: Thu, 21 Nov 2024 13:28:07 +0100 Subject: [PATCH] [React18] Migrated test suites to accommodate changes to testing library owned by kibana-visualizations --- .../src/debounced_value.test.ts | 2 +- .../active_cursor/use_active_cursor.test.ts | 2 +- .../public/services/theme/theme.test.tsx | 3 +- .../use_debounced_value.test.ts | 2 +- .../use_expression_renderer.test.ts | 4 +- .../use_shallow_memo.test.ts | 2 +- .../saved_query_management_list.test.tsx | 2 +- .../public/utils/use/use_pagination.test.ts | 2 +- .../public/utils/use/use_ui_state.test.ts | 26 ++++++------- .../utils/use/use_chrome_visibility.test.ts | 2 +- .../utils/use/use_editor_updates.test.ts | 2 +- .../use/use_linked_search_updates.test.ts | 2 +- .../utils/use/use_saved_vis_instance.test.ts | 22 +++++------ .../utils/use/use_visualize_app_state.test.ts | 10 ++--- .../helpers/use_workspace_loader.test.tsx | 37 ++++++++++--------- 15 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/kbn-visualization-utils/src/debounced_value.test.ts b/packages/kbn-visualization-utils/src/debounced_value.test.ts index 1f0d3af1d4f37..5ea0901067446 100644 --- a/packages/kbn-visualization-utils/src/debounced_value.test.ts +++ b/packages/kbn-visualization-utils/src/debounced_value.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { useDebouncedValue } from './debounced_value'; describe('useDebouncedValue', () => { diff --git a/src/plugins/charts/public/services/active_cursor/use_active_cursor.test.ts b/src/plugins/charts/public/services/active_cursor/use_active_cursor.test.ts index adc2d291483c5..1679ad16dae52 100644 --- a/src/plugins/charts/public/services/active_cursor/use_active_cursor.test.ts +++ b/src/plugins/charts/public/services/active_cursor/use_active_cursor.test.ts @@ -8,7 +8,7 @@ */ import { TestScheduler } from 'rxjs/testing'; -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import type { Chart, PointerEvent } from '@elastic/charts'; import type { Datatable } from '@kbn/expressions-plugin/public'; import type { RefObject } from 'react'; diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx index ef77405edf27e..da89ec475d577 100644 --- a/src/plugins/charts/public/services/theme/theme.test.tsx +++ b/src/plugins/charts/public/services/theme/theme.test.tsx @@ -10,8 +10,7 @@ import React from 'react'; import { from } from 'rxjs'; import { take } from 'rxjs'; -import { renderHook, act } from '@testing-library/react-hooks'; -import { render, act as renderAct } from '@testing-library/react'; +import { render, act as renderAct, renderHook, act } from '@testing-library/react'; import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; diff --git a/src/plugins/expressions/public/react_expression_renderer/use_debounced_value.test.ts b/src/plugins/expressions/public/react_expression_renderer/use_debounced_value.test.ts index ebbe6e4129019..8f32edaac50ab 100644 --- a/src/plugins/expressions/public/react_expression_renderer/use_debounced_value.test.ts +++ b/src/plugins/expressions/public/react_expression_renderer/use_debounced_value.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { useDebouncedValue } from './use_debounced_value'; describe('useDebouncedValue', () => { diff --git a/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.test.ts b/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.test.ts index ac9ff31730f0a..9dc3ab684ccb9 100644 --- a/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.test.ts +++ b/src/plugins/expressions/public/react_expression_renderer/use_expression_renderer.test.ts @@ -8,7 +8,7 @@ */ import type { RefObject } from 'react'; -import { act, renderHook, RenderHookResult } from '@testing-library/react-hooks'; +import { renderHook, act, RenderHookResult } from '@testing-library/react'; import { Subject } from 'rxjs'; import type { IInterpreterRenderHandlers } from '../../common'; import { ExpressionRendererParams, useExpressionRenderer } from './use_expression_renderer'; @@ -23,7 +23,7 @@ describe('useExpressionRenderer', () => { loading$: Subject; render$: Subject; }; - let hook: RenderHookResult>; + let hook: RenderHookResult, ExpressionRendererParams>; beforeEach(() => { nodeRef = { current: document.createElement('div') }; diff --git a/src/plugins/expressions/public/react_expression_renderer/use_shallow_memo.test.ts b/src/plugins/expressions/public/react_expression_renderer/use_shallow_memo.test.ts index acfa528c932b7..9e073c86dbeea 100644 --- a/src/plugins/expressions/public/react_expression_renderer/use_shallow_memo.test.ts +++ b/src/plugins/expressions/public/react_expression_renderer/use_shallow_memo.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { useShallowMemo } from './use_shallow_memo'; describe('useShallowMemo', () => { diff --git a/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx b/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx index ae51b96522c27..0abc6587b8726 100644 --- a/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx +++ b/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.test.tsx @@ -155,7 +155,7 @@ describe('Saved query management list component', () => { it('should render the saved queries on the selectable component', async () => { render(wrapSavedQueriesListComponentInContext(props)); - expect(await screen.findAllByRole('option')).toHaveLength(1); + await waitFor(() => expect(screen.queryAllByRole('option')).toHaveLength(1)); expect(screen.getByRole('option', { name: 'Test' })).toBeInTheDocument(); }); diff --git a/src/plugins/vis_types/table/public/utils/use/use_pagination.test.ts b/src/plugins/vis_types/table/public/utils/use/use_pagination.test.ts index be6ea0a4427c2..d6ac1fbebc5f7 100644 --- a/src/plugins/vis_types/table/public/utils/use/use_pagination.test.ts +++ b/src/plugins/vis_types/table/public/utils/use/use_pagination.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { AggTypes } from '../../../common'; import { usePagination } from './use_pagination'; diff --git a/src/plugins/vis_types/table/public/utils/use/use_ui_state.test.ts b/src/plugins/vis_types/table/public/utils/use/use_ui_state.test.ts index 37525bf12626b..a6a86426a2f4b 100644 --- a/src/plugins/vis_types/table/public/utils/use/use_ui_state.test.ts +++ b/src/plugins/vis_types/table/public/utils/use/use_ui_state.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { waitFor, renderHook, act } from '@testing-library/react'; import type { PersistedState } from '@kbn/visualizations-plugin/public'; import { TableVisUiState } from '../../types'; import { useUiState } from './use_ui_state'; @@ -39,7 +39,7 @@ describe('useUiState', () => { }); it('should subscribe on uiState changes and update local state', async () => { - const { result, unmount, waitForNextUpdate } = renderHook(() => useUiState(uiState)); + const { result, unmount } = renderHook(() => useUiState(uiState)); expect(uiState.on).toHaveBeenCalledWith('change', expect.any(Function)); // @ts-expect-error @@ -61,18 +61,18 @@ describe('useUiState', () => { updateOnChange(); }); - await waitForNextUpdate(); - // should update local state with new values - expect(result.current).toEqual({ - columnsWidth: [], - sort: { - columnIndex: 1, - direction: 'asc', - }, - setColumnsWidth: expect.any(Function), - setSort: expect.any(Function), - }); + await waitFor(() => + expect(result.current).toEqual({ + columnsWidth: [], + sort: { + columnIndex: 1, + direction: 'asc', + }, + setColumnsWidth: expect.any(Function), + setSort: expect.any(Function), + }) + ); act(() => { updateOnChange(); diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_chrome_visibility.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_chrome_visibility.test.ts index 08c2015913908..01d90ee2b2a2b 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/use_chrome_visibility.test.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_chrome_visibility.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { chromeServiceMock } from '@kbn/core/public/mocks'; import { useChromeVisibility } from './use_chrome_visibility'; diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_editor_updates.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_editor_updates.test.ts index c0f6719a403fe..b96185a0270a4 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/use_editor_updates.test.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_editor_updates.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook, act } from '@testing-library/react-hooks'; +import { renderHook, act } from '@testing-library/react'; import { EventEmitter } from 'events'; import { useEditorUpdates } from './use_editor_updates'; diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_linked_search_updates.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_linked_search_updates.test.ts index 8cf124ca243cb..d979021b74888 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/use_linked_search_updates.test.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_linked_search_updates.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react'; import { EventEmitter } from 'events'; import { useLinkedSearchUpdates } from './use_linked_search_updates'; diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.test.ts index 7c32fec754428..c5131460d76b7 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.test.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_saved_vis_instance.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { renderHook } from '@testing-library/react-hooks'; +import { waitFor, renderHook } from '@testing-library/react'; import { EventEmitter } from 'events'; import { setTypes } from '../../../services'; @@ -127,7 +127,7 @@ describe('useSavedVisInstance', () => { describe('edit saved visualization route', () => { test('should load instance and initiate an editor if chrome is set up', async () => { - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useSavedVisInstance(mockServices, eventEmitter, true, undefined, savedVisId) ); @@ -135,7 +135,7 @@ describe('useSavedVisInstance', () => { expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId); expect(mockGetVisualizationInstance.mock.calls.length).toBe(1); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); expect(mockServices.chrome.setBreadcrumbs).toHaveBeenCalledWith('Test Vis'); expect(mockServices.chrome.docTitle.change).toHaveBeenCalledWith('Test Vis'); expect(getEditBreadcrumbs).toHaveBeenCalledWith( @@ -156,7 +156,7 @@ describe('useSavedVisInstance', () => { }, id: 'panel1', }; - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useSavedVisInstance( mockServices, eventEmitter, @@ -171,7 +171,7 @@ describe('useSavedVisInstance', () => { expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId); expect(mockGetVisualizationInstance.mock.calls.length).toBe(1); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); expect(mockServices.chrome.setBreadcrumbs).toHaveBeenCalledWith('Test Vis'); expect(mockServices.chrome.docTitle.change).toHaveBeenCalledWith('Test Vis'); expect(getEditBreadcrumbs).toHaveBeenCalledWith( @@ -189,13 +189,13 @@ describe('useSavedVisInstance', () => { }); test('should destroy the editor and the savedVis on unmount if chrome exists', async () => { - const { result, unmount, waitForNextUpdate } = renderHook(() => + const { result, unmount } = renderHook(() => useSavedVisInstance(mockServices, eventEmitter, true, undefined, savedVisId) ); result.current.visEditorRef.current = document.createElement('div'); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); unmount(); expect(mockDefaultEditorControllerDestroy.mock.calls.length).toBe(1); @@ -215,7 +215,7 @@ describe('useSavedVisInstance', () => { }); test('should create new visualization based on search params', async () => { - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useSavedVisInstance(mockServices, eventEmitter, true, undefined, undefined) ); @@ -226,7 +226,7 @@ describe('useSavedVisInstance', () => { type: 'area', }); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); expect(getCreateBreadcrumbs).toHaveBeenCalled(); expect(mockEmbeddableHandlerRender).not.toHaveBeenCalled(); @@ -263,7 +263,7 @@ describe('useSavedVisInstance', () => { describe('embeded mode', () => { test('should create new visualization based on search params', async () => { - const { result, unmount, waitForNextUpdate } = renderHook(() => + const { result, unmount } = renderHook(() => useSavedVisInstance(mockServices, eventEmitter, false, undefined, savedVisId) ); @@ -273,7 +273,7 @@ describe('useSavedVisInstance', () => { expect(mockGetVisualizationInstance).toHaveBeenCalledWith(mockServices, savedVisId); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); expect(mockEmbeddableHandlerRender).toHaveBeenCalled(); expect(result.current.visEditorController).toBeUndefined(); diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.test.ts b/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.test.ts index f92bd7304a7e8..7add55761e2af 100644 --- a/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.test.ts +++ b/src/plugins/visualizations/public/visualize_app/utils/use/use_visualize_app_state.test.ts @@ -7,7 +7,7 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { act, renderHook } from '@testing-library/react-hooks'; +import { act, waitFor, renderHook } from '@testing-library/react'; import { EventEmitter } from 'events'; import { Observable } from 'rxjs'; @@ -159,11 +159,11 @@ describe('useVisualizeAppState', () => { it('should successfully update vis state and set up app state container', async () => { stateContainerGetStateMock.mockImplementation(() => state); - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useVisualizeAppState(mockServices, eventEmitter, savedVisInstance) ); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); const { aggs, ...visState } = stateContainer.getState().vis; const expectedNewVisState = { @@ -183,11 +183,11 @@ describe('useVisualizeAppState', () => { ...visualizeAppStateStub, query: { query: 'test', language: 'kuery' }, })); - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useVisualizeAppState(mockServices, eventEmitter, savedVisInstance) ); - await waitForNextUpdate(); + await waitFor(() => new Promise((resolve) => resolve(null))); const { aggs, ...visState } = stateContainer.getState().vis; const expectedNewVisState = { diff --git a/x-pack/plugins/graph/public/helpers/use_workspace_loader.test.tsx b/x-pack/plugins/graph/public/helpers/use_workspace_loader.test.tsx index 22790bc7f639b..28ee3bd0fd17e 100644 --- a/x-pack/plugins/graph/public/helpers/use_workspace_loader.test.tsx +++ b/x-pack/plugins/graph/public/helpers/use_workspace_loader.test.tsx @@ -10,7 +10,7 @@ import { spacesPluginMock } from '@kbn/spaces-plugin/public/mocks'; import { dataPluginMock } from '@kbn/data-plugin/public/mocks'; import { createMockGraphStore } from '../state_management/mocks'; import { Workspace } from '../types'; -import { renderHook, act, RenderHookOptions } from '@testing-library/react-hooks'; +import { renderHook, waitFor } from '@testing-library/react'; import { ContentClient } from '@kbn/content-management-plugin/public'; jest.mock('react-router-dom', () => { @@ -51,15 +51,16 @@ describe('use_workspace_loader', () => { }; it('should not redirect if outcome is exactMatch', async () => { - await act(async () => { - renderHook( - () => useWorkspaceLoader(defaultProps), - defaultProps as RenderHookOptions - ); + renderHook((props) => useWorkspaceLoader(props), { + initialProps: defaultProps, + }); + + await waitFor(() => { + expect(defaultProps.spaces?.ui.redirectLegacyUrl).not.toHaveBeenCalled(); + expect(defaultProps.store.dispatch).toHaveBeenCalled(); }); - expect(defaultProps.spaces?.ui.redirectLegacyUrl).not.toHaveBeenCalled(); - expect(defaultProps.store.dispatch).toHaveBeenCalled(); }); + it('should redirect if outcome is aliasMatch', async () => { const props = { ...defaultProps, @@ -77,16 +78,16 @@ describe('use_workspace_loader', () => { }, } as unknown as UseWorkspaceLoaderProps; - await act(async () => { - renderHook( - () => useWorkspaceLoader(props), - props as RenderHookOptions - ); - }); - expect(props.spaces?.ui.redirectLegacyUrl).toHaveBeenCalledWith({ - path: '#/workspace/aliasTargetId?query={}', - aliasPurpose: 'savedObjectConversion', - objectNoun: 'Graph', + renderHook((_props) => useWorkspaceLoader(_props), { + initialProps: props, }); + + await waitFor(() => + expect(props.spaces?.ui.redirectLegacyUrl).toHaveBeenCalledWith({ + path: '#/workspace/aliasTargetId?query={}', + aliasPurpose: 'savedObjectConversion', + objectNoun: 'Graph', + }) + ); }); });