From 5c5ec70bb8309f09a922f6214912692f65073680 Mon Sep 17 00:00:00 2001 From: logonoff Date: Tue, 20 Jan 2026 15:50:26 -0500 Subject: [PATCH] CONSOLE-5041: Replace testHook with renderHook from RTL Refactor all test files to use renderHook from @testing-library/react instead of the deprecated custom testHook utility. This change: - Updates 28 test files across multiple packages to use renderHook - Removes the deprecated hooks-utils.tsx file containing testHook - Fixes tests that had assertions inside hook callbacks to properly use result.current - Removes callback-based patterns (done()) in favor of synchronous assertions Co-Authored-By: Claude Opus 4.5 --- .../__tests__/namespace.spec.ts | 21 ++- .../tour/__tests__/tour-context.spec.ts | 59 +++---- .../utils/__tests__/useTranslationExt.spec.ts | 24 ++- .../__tests__/useCatalogExtensions.spec.ts | 20 +-- .../__tests__/useEditorType.spec.ts | 20 +-- .../toast/__tests__/useToast.spec.tsx | 14 +- .../hooks/__tests__/perspective-utils.spec.ts | 21 ++- .../src/hooks/__tests__/select-list.spec.ts | 40 ++--- .../useGetUserSettingConfigMap.spec.ts | 20 +-- .../__tests__/usePinnedResources.spec.ts | 22 +-- .../src/hooks/__tests__/useTelemetry.spec.ts | 24 +-- .../src/hooks/__tests__/useUser.spec.ts | 12 +- .../hooks/__tests__/useUserSettings.spec.ts | 43 +++-- .../src/test-utils/hooks-utils.tsx | 20 --- .../__tests__/isSubCatalogTypeEnabled.spec.ts | 87 ++++------ .../utils/__tests__/pod-ring-utils.spec.ts | 48 +++--- .../useAccessFilterExtensions.spec.ts | 30 ++-- .../useAddActionsAccessReviews.spec.ts | 11 +- .../__tests__/useDevfileSamples.spec.ts | 7 +- .../project-access/__tests__/hooks.spec.ts | 12 +- .../__tests__/useAddActionExtensions.spec.ts | 29 ++-- .../__tests__/usePerspectiveDetection.spec.ts | 20 +-- .../__tests__/helm-detection-provider.spec.ts | 21 ++- .../__tests__/useBootstrapServers.spec.ts | 8 +- .../filters/__tests__/useSearchFilter.spec.ts | 159 ++++++++++++------ .../__tests__/useActivityTick.spec.ts | 63 ++++--- .../__tests__/useCloudShellAvailable.spec.ts | 9 +- .../cluster-setup-alert-receiver-link.spec.ts | 17 +- ...uster-setup-identity-provider-link.spec.ts | 13 +- 29 files changed, 428 insertions(+), 466 deletions(-) delete mode 100644 frontend/packages/console-shared/src/test-utils/hooks-utils.tsx diff --git a/frontend/packages/console-app/src/components/detect-namespace/__tests__/namespace.spec.ts b/frontend/packages/console-app/src/components/detect-namespace/__tests__/namespace.spec.ts index 666a2a86659..1854559f405 100644 --- a/frontend/packages/console-app/src/components/detect-namespace/__tests__/namespace.spec.ts +++ b/frontend/packages/console-app/src/components/detect-namespace/__tests__/namespace.spec.ts @@ -1,11 +1,10 @@ import { useState } from 'react'; -import { act } from '@testing-library/react'; +import { act, renderHook } from '@testing-library/react'; import { useDispatch } from 'react-redux'; import { useLocation } from 'react-router-dom-v5-compat'; import { k8sGet } from '@console/dynamic-plugin-sdk/src/utils/k8s'; import { ALL_NAMESPACES_KEY } from '@console/shared/src/constants'; import { useFlag } from '@console/shared/src/hooks/flag'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { usePreferredNamespace } from '../../user-preferences/namespace/usePreferredNamespace'; import { useValuesForNamespaceContext } from '../namespace'; import { useLastNamespace } from '../useLastNamespace'; @@ -75,7 +74,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([preferredNamespace, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -93,7 +92,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([preferredNamespace, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -110,7 +109,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([preferredNamespace, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -127,7 +126,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([undefined, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -144,7 +143,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([undefined, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([undefined, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -161,7 +160,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([preferredNamespace, jest.fn(), false]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), false]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -178,7 +177,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([preferredNamespace, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -195,7 +194,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([undefined, jest.fn(), false]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), false]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); @@ -212,7 +211,7 @@ describe('useValuesForNamespaceContext', () => { usePreferredNamespaceMock.mockReturnValue([undefined, jest.fn(), true]); useLastNamespaceMock.mockReturnValue([lastNamespace, jest.fn(), true]); - const { result, rerender } = testHook(() => useValuesForNamespaceContext()); + const { result, rerender } = renderHook(() => useValuesForNamespaceContext()); await act(async () => { rerender(); }); diff --git a/frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts b/frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts index f2b16ea1e64..169d13e4980 100644 --- a/frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts +++ b/frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts @@ -1,7 +1,7 @@ +import { renderHook } from '@testing-library/react'; import { useSelector } from 'react-redux'; import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions'; import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { TourActions } from '../const'; import { tourReducer, useTourValuesForContext, useTourStateForPerspective } from '../tour-context'; import { TourDataType } from '../type'; @@ -104,20 +104,18 @@ describe('guided-tour-context', () => { () => null, true, ]); - testHook(() => { - const contextValue = useTourValuesForContext(); - const { tourState, tour, totalSteps } = contextValue; - expect(tourState).toEqual({ - startTour: true, - completedTour: false, - stepNumber: 0, - }); - expect(tour).toEqual({ - ...mockTour, - steps: [{ flags: ['A'], heading: 'g', content: 'h' }], - }); - expect(totalSteps).toEqual(1); + const { result } = renderHook(() => useTourValuesForContext()); + const { tourState, tour, totalSteps } = result.current; + expect(tourState).toEqual({ + startTour: true, + completedTour: false, + stepNumber: 0, + }); + expect(tour).toEqual({ + ...mockTour, + steps: [{ flags: ['A'], heading: 'g', content: 'h' }], }); + expect(totalSteps).toEqual(1); }); it('should return tour null from the hook', () => { @@ -130,13 +128,11 @@ describe('guided-tour-context', () => { () => null, true, ]); - testHook(() => { - const contextValue = useTourValuesForContext(); - const { tourState, tour, totalSteps } = contextValue; - expect(tourState).toEqual(undefined); - expect(tour).toEqual(null); - expect(totalSteps).toEqual(undefined); - }); + const { result } = renderHook(() => useTourValuesForContext()); + const { tourState, tour, totalSteps } = result.current; + expect(tourState).toEqual(undefined); + expect(tour).toEqual(null); + expect(totalSteps).toEqual(undefined); }); it('should return null from the hook if tour is available but data isnot loaded', () => { @@ -150,13 +146,11 @@ describe('guided-tour-context', () => { () => null, false, ]); - testHook(() => { - const contextValue = useTourValuesForContext(); - const { tourState, tour, totalSteps } = contextValue; - expect(tourState).toEqual(undefined); - expect(tour).toEqual(null); - expect(totalSteps).toEqual(undefined); - }); + const { result } = renderHook(() => useTourValuesForContext()); + const { tourState, tour, totalSteps } = result.current; + expect(tourState).toEqual(undefined); + expect(tour).toEqual(null); + expect(totalSteps).toEqual(undefined); }); }); @@ -167,11 +161,10 @@ describe('guided-tour-context', () => { () => null, true, ]); - testHook(() => { - const [state, , loaded] = useTourStateForPerspective('dev'); - expect(state).toEqual({ a: true }); - expect(loaded).toEqual(true); - }); + const { result } = renderHook(() => useTourStateForPerspective('dev')); + const [state, , loaded] = result.current; + expect(state).toEqual({ a: true }); + expect(loaded).toEqual(true); }); }); }); diff --git a/frontend/packages/console-plugin-sdk/src/utils/__tests__/useTranslationExt.spec.ts b/frontend/packages/console-plugin-sdk/src/utils/__tests__/useTranslationExt.spec.ts index 4a12f5ffc13..5ff1439fbc6 100644 --- a/frontend/packages/console-plugin-sdk/src/utils/__tests__/useTranslationExt.spec.ts +++ b/frontend/packages/console-plugin-sdk/src/utils/__tests__/useTranslationExt.spec.ts @@ -1,22 +1,20 @@ -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import { renderHook } from '@testing-library/react'; import useTranslationExt from '../useTranslationExt'; describe('useTranslationExt', () => { it('should return the input if key does not match translation pattern', () => { - testHook(() => { - const { t: translate } = useTranslationExt(); - expect(translate('%')).toBe('%'); - expect(translate('a%')).toBe('a%'); - expect(translate('%a')).toBe('%a'); - expect(translate('%%')).toBe('%%'); - expect(translate('foo')).toBe('foo'); - }); + const { result } = renderHook(() => useTranslationExt()); + const { t: translate } = result.current; + expect(translate('%')).toBe('%'); + expect(translate('a%')).toBe('a%'); + expect(translate('%a')).toBe('%a'); + expect(translate('%%')).toBe('%%'); + expect(translate('foo')).toBe('foo'); }); it('should parse as a translation key', () => { - testHook(() => { - const { t: translate } = useTranslationExt(); - expect(translate('%test~key%')).toBe('key'); - }); + const { result } = renderHook(() => useTranslationExt()); + const { t: translate } = result.current; + expect(translate('%test~key%')).toBe('key'); }); }); diff --git a/frontend/packages/console-shared/src/components/catalog/hooks/__tests__/useCatalogExtensions.spec.ts b/frontend/packages/console-shared/src/components/catalog/hooks/__tests__/useCatalogExtensions.spec.ts index fa95a92b76e..af5f5ee5d85 100644 --- a/frontend/packages/console-shared/src/components/catalog/hooks/__tests__/useCatalogExtensions.spec.ts +++ b/frontend/packages/console-shared/src/components/catalog/hooks/__tests__/useCatalogExtensions.spec.ts @@ -1,3 +1,4 @@ +import { renderHook } from '@testing-library/react'; import { CatalogItemType, CatalogItemTypeMetadata, @@ -5,7 +6,6 @@ import { CatalogItemFilter, CatalogItemMetadataProvider, } from '@console/dynamic-plugin-sdk/src/extensions'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import useCatalogExtensions from '../useCatalogExtensions'; let mockExtensions: ( @@ -38,9 +38,9 @@ describe('useCatalogExtensions', () => { }, }, ]; - const allExtensions = testHook(() => useCatalogExtensions('test-catalog')).result.current[0]; + const allExtensions = renderHook(() => useCatalogExtensions('test-catalog')).result.current[0]; expect(allExtensions).toEqual([mockExtensions[0], mockExtensions[1]]); - const extensions = testHook(() => useCatalogExtensions('test-catalog', 'type2')).result + const extensions = renderHook(() => useCatalogExtensions('test-catalog', 'type2')).result .current[0]; expect(extensions).toEqual([mockExtensions[1]]); }); @@ -105,7 +105,7 @@ describe('useCatalogExtensions', () => { }, }, ]; - const catalogTypeExtensions = testHook(() => useCatalogExtensions('test-catalog')).result + const catalogTypeExtensions = renderHook(() => useCatalogExtensions('test-catalog')).result .current[0]; expect(catalogTypeExtensions).toEqual([ mockExtensions[0], @@ -161,10 +161,10 @@ describe('useCatalogExtensions', () => { }, ]; - const allExtensions = testHook(() => useCatalogExtensions('test-catalog')).result.current[1]; + const allExtensions = renderHook(() => useCatalogExtensions('test-catalog')).result.current[1]; expect(allExtensions).toEqual([mockExtensions[0], mockExtensions[1]]); - const extensions = testHook(() => useCatalogExtensions('test-catalog', 'type2')).result + const extensions = renderHook(() => useCatalogExtensions('test-catalog', 'type2')).result .current[1]; expect(extensions).toEqual([mockExtensions[1]]); }); @@ -189,10 +189,10 @@ describe('useCatalogExtensions', () => { }, ]; - const allExtensions = testHook(() => useCatalogExtensions('test-catalog')).result.current[2]; + const allExtensions = renderHook(() => useCatalogExtensions('test-catalog')).result.current[2]; expect(allExtensions).toEqual([mockExtensions[0], mockExtensions[1]]); - const extensions = testHook(() => useCatalogExtensions('test-catalog', 'type2')).result + const extensions = renderHook(() => useCatalogExtensions('test-catalog', 'type2')).result .current[2]; expect(extensions).toEqual([mockExtensions[1]]); }); @@ -217,10 +217,10 @@ describe('useCatalogExtensions', () => { }, ]; - const allExtensions = testHook(() => useCatalogExtensions('test-catalog')).result.current[3]; + const allExtensions = renderHook(() => useCatalogExtensions('test-catalog')).result.current[3]; expect(allExtensions).toEqual([mockExtensions[0], mockExtensions[1]]); - const extensions = testHook(() => useCatalogExtensions('test-catalog', 'type2')).result + const extensions = renderHook(() => useCatalogExtensions('test-catalog', 'type2')).result .current[3]; expect(extensions).toEqual([mockExtensions[1]]); }); diff --git a/frontend/packages/console-shared/src/components/synced-editor/__tests__/useEditorType.spec.ts b/frontend/packages/console-shared/src/components/synced-editor/__tests__/useEditorType.spec.ts index 5f36da635fe..d6eb415dddf 100644 --- a/frontend/packages/console-shared/src/components/synced-editor/__tests__/useEditorType.spec.ts +++ b/frontend/packages/console-shared/src/components/synced-editor/__tests__/useEditorType.spec.ts @@ -1,9 +1,9 @@ import { useState } from 'react'; +import { renderHook } from '@testing-library/react'; import { PREFERRED_CREATE_EDIT_METHOD_USER_SETTING_VALUE_LATEST, usePreferredCreateEditMethod, } from '@console/app/src/components/user-preferences/synced-editor/usePreferredCreateEditMethod'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { useUserSettings } from '../../../hooks/useUserSettings'; import { EditorType } from '../editor-toggle'; import { useEditorType } from '../useEditorType'; @@ -44,7 +44,7 @@ describe('useEditorType', () => { it('should return editor type corresponding to preferred editor type if it is defined and enabled', () => { mockUserSettings.mockReturnValue([EditorType.Form, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([EditorType.YAML, true]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(EditorType.YAML); expect(loaded).toBe(true); @@ -56,7 +56,7 @@ describe('useEditorType', () => { PREFERRED_CREATE_EDIT_METHOD_USER_SETTING_VALUE_LATEST, true, ]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(EditorType.YAML); expect(loaded).toBe(true); @@ -65,7 +65,7 @@ describe('useEditorType', () => { it('should return editor type corresponding to last viewed editor type if it is defined and enabled preferred editor type is defined but disabled', () => { mockUserSettings.mockReturnValue([EditorType.YAML, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([EditorType.Form, true]); - const { result } = testHook(() => + const { result } = renderHook(() => useEditorType( lastViewUserSettingKey, defaultValue, @@ -80,7 +80,7 @@ describe('useEditorType', () => { it('should return editor type corresponding to last viewed editor type if it is defined and enabled and preferred editor type is not defined', () => { mockUserSettings.mockReturnValue([EditorType.YAML, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([undefined, true]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(EditorType.YAML); expect(loaded).toBe(true); @@ -89,7 +89,7 @@ describe('useEditorType', () => { it('should return editor type corresponding to default value if both preferred and last viewed editor type are not defined or disabled', () => { mockUserSettings.mockReturnValue([undefined, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([undefined, true]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(defaultValue); expect(loaded).toBe(true); @@ -98,7 +98,7 @@ describe('useEditorType', () => { it('should return false for loaded and null for editor type if preferred editor type has not loaded', () => { mockUserSettings.mockReturnValue([EditorType.YAML, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([undefined, false]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(null); expect(loaded).toBe(false); @@ -107,7 +107,7 @@ describe('useEditorType', () => { it('should return false for loaded and null for editor type if last viewed editor type has not loaded', () => { mockUserSettings.mockReturnValue([undefined, jest.fn(), false]); mockUsePreferredCreateEditMethod.mockReturnValue([EditorType.YAML, true]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(null); expect(loaded).toBe(false); @@ -117,7 +117,7 @@ describe('useEditorType', () => { mockUserSettings.mockReturnValue([undefined, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([EditorType.YAML, true]); mockUseState.mockReturnValue([null, jest.fn()]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, defaultValue)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(null); expect(loaded).toBe(false); @@ -127,7 +127,7 @@ describe('useEditorType', () => { mockUserSettings.mockReturnValue([undefined, jest.fn(), true]); mockUsePreferredCreateEditMethod.mockReturnValue([EditorType.YAML, true]); mockUseState.mockReturnValue([null, jest.fn()]); - const { result } = testHook(() => useEditorType(lastViewUserSettingKey, null)); + const { result } = renderHook(() => useEditorType(lastViewUserSettingKey, null)); const [editorType, , loaded] = result.current; expect(editorType).toEqual(null); expect(loaded).toBe(true); diff --git a/frontend/packages/console-shared/src/components/toast/__tests__/useToast.spec.tsx b/frontend/packages/console-shared/src/components/toast/__tests__/useToast.spec.tsx index 16cf4d4d8e9..4981d31482f 100644 --- a/frontend/packages/console-shared/src/components/toast/__tests__/useToast.spec.tsx +++ b/frontend/packages/console-shared/src/components/toast/__tests__/useToast.spec.tsx @@ -1,17 +1,11 @@ -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import { renderHook } from '@testing-library/react'; import ToastProvider from '../ToastProvider'; import useToast from '../useToast'; describe('useToast', () => { it('should provide a context', () => { - let toastContext; - testHook( - () => { - toastContext = useToast(); - }, - { wrapper: ToastProvider }, - ); - expect(typeof toastContext.addToast).toBe('function'); - expect(typeof toastContext.removeToast).toBe('function'); + const { result } = renderHook(() => useToast(), { wrapper: ToastProvider }); + expect(typeof result.current.addToast).toBe('function'); + expect(typeof result.current.removeToast).toBe('function'); }); }); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/perspective-utils.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/perspective-utils.spec.ts index aa607c993fb..bc268f72bdd 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/perspective-utils.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/perspective-utils.spec.ts @@ -1,7 +1,6 @@ -import { act } from '@testing-library/react'; +import { act, renderHook } from '@testing-library/react'; import { checkAccess } from '@console/dynamic-plugin-sdk/src/app/components/utils/rbac'; import { useExtensions } from '@console/plugin-sdk/src/api/useExtensions'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { usePerspectives } from '..'; import { Perspective, PerspectiveVisibilityState } from '../perspective-utils'; @@ -46,7 +45,7 @@ describe('usePerspectives', () => { it('should return all the available perspectives if perspectives are not set in the server flags', async () => { window.SERVER_FLAGS.perspectives = undefined; - const { result } = testHook(() => usePerspectives()); + const { result } = renderHook(() => usePerspectives()); expect(result.current).toEqual([ { @@ -78,7 +77,7 @@ describe('usePerspectives', () => { it('should return all the available perspectives if perspectives are not configured in the server flags', async () => { window.SERVER_FLAGS.perspectives = ''; - const { result } = testHook(() => usePerspectives()); + const { result } = renderHook(() => usePerspectives()); expect(result.current).toEqual([ { @@ -138,7 +137,7 @@ describe('usePerspectives', () => { ]; window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.resolve({ status: { allowed: true } })); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); @@ -187,7 +186,7 @@ describe('usePerspectives', () => { window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.resolve({ status: { allowed: true } })); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); @@ -235,7 +234,7 @@ describe('usePerspectives', () => { ]; window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.resolve({ status: { allowed: true } })); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); @@ -293,7 +292,7 @@ describe('usePerspectives', () => { ]; window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.resolve({ status: { allowed: true } })); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); @@ -342,7 +341,7 @@ describe('usePerspectives', () => { ]; window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.resolve({ status: { allowed: false } })); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); @@ -391,7 +390,7 @@ describe('usePerspectives', () => { ]; window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.reject(new Error('Unexpected error'))); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); @@ -428,7 +427,7 @@ describe('usePerspectives', () => { ]; window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives); (checkAccess as jest.Mock).mockReturnValue(Promise.resolve({ status: { allowed: true } })); - const { result, rerender } = testHook(() => usePerspectives()); + const { result, rerender } = renderHook(() => usePerspectives()); await act(async () => { rerender(); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/select-list.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/select-list.spec.ts index 603bc202f03..34b2d1ac23e 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/select-list.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/select-list.spec.ts @@ -1,43 +1,35 @@ -import { act } from '@testing-library/react'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import type { FormEvent } from 'react'; +import { act, renderHook } from '@testing-library/react'; import { data, visibleRows, onRowSelected } from '../__mocks__/select-list-data'; import { useSelectList } from '../select-list'; -describe('useSelectList', () => { - let onSelect; - let selectedRows; - let updateSelectedRows; - - beforeEach(() => { - testHook(() => { - ({ onSelect, selectedRows, updateSelectedRows } = useSelectList( - data, - visibleRows, - onRowSelected, - )); - }); - }); +const dummyFormEvent: FormEvent = ({} as unknown) as FormEvent; +describe('useSelectList', () => { it('onSelect should update selectedRows properly', () => { + const { result } = renderHook(() => useSelectList(data, visibleRows, onRowSelected)); + act(() => { - onSelect({}, true, -1); + result.current.onSelect(dummyFormEvent, true, -1, undefined, undefined); }); - expect(selectedRows).toEqual(visibleRows); + expect(result.current.selectedRows).toEqual(visibleRows); act(() => { - onSelect({}, false, 1, { props: { id: '2' } }); + result.current.onSelect(dummyFormEvent, false, 1, { props: { id: '2' } }, undefined); }); - expect(selectedRows).toEqual(new Set(['1', '3'])); + expect(result.current.selectedRows).toEqual(new Set(['1', '3'])); act(() => { - onSelect({}, false, -1); + result.current.onSelect(dummyFormEvent, false, -1, undefined, undefined); }); - expect(selectedRows).toEqual(new Set()); + expect(result.current.selectedRows).toEqual(new Set()); }); it('updateSelectedRows should update selectedRows properly and call onRowSelected', () => { + const { result } = renderHook(() => useSelectList(data, visibleRows, onRowSelected)); + act(() => { - updateSelectedRows(data); + result.current.updateSelectedRows(data); }); - expect(selectedRows).toEqual(visibleRows); + expect(result.current.selectedRows).toEqual(visibleRows); expect(onRowSelected).toHaveBeenCalled(); }); }); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/useGetUserSettingConfigMap.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/useGetUserSettingConfigMap.spec.ts index fbfea7dee7e..ef8c9b40d06 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/useGetUserSettingConfigMap.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/useGetUserSettingConfigMap.spec.ts @@ -1,8 +1,8 @@ +import { renderHook } from '@testing-library/react'; import { useSelector } from 'react-redux'; import { K8sResourceKind } from '@console/dynamic-plugin-sdk/src'; import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook'; import { ConfigMapModel } from '@console/internal/models'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { USER_SETTING_CONFIGMAP_NAMESPACE } from '../../utils/user-settings'; import { useGetUserSettingConfigMap } from '../useGetUserSettingConfigMap'; @@ -55,7 +55,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(impersonateUserInfo); useK8sWatchResourceMock.mockReturnValue([mockConfigMapData, true, null]); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); // Should use impersonate name directly and return config map data expect(result.current).toEqual([mockConfigMapData, true, null]); @@ -79,7 +79,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(userInfoWithUid); useK8sWatchResourceMock.mockReturnValue([mockConfigMapData, true, null]); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); // Should use uid directly and return config map data expect(result.current).toEqual([mockConfigMapData, true, null]); @@ -102,7 +102,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(emptyUserInfo); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); // Should return null config map resource when no user identifier expect(result.current).toEqual([null, true, null]); @@ -120,7 +120,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(userInfoWithUsername); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); // Initially, should return null since hashing is async expect(result.current[0]).toBeNull(); @@ -138,7 +138,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(userInfoWithUid); useK8sWatchResourceMock.mockReturnValue([null, false, null]); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); expect(result.current).toEqual([null, false, null]); }); @@ -154,7 +154,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(userInfoWithUid); useK8sWatchResourceMock.mockReturnValue([null, false, error]); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); expect(result.current).toEqual([null, false, error]); }); @@ -169,7 +169,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(userInfoWithUid); useK8sWatchResourceMock.mockReturnValue([mockConfigMapData, true, null]); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); expect(result.current).toEqual([mockConfigMapData, true, null]); }); @@ -184,7 +184,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(userInfo); useK8sWatchResourceMock.mockReturnValue([mockConfigMapData, true, null]); - testHook(() => useGetUserSettingConfigMap()); + renderHook(() => useGetUserSettingConfigMap()); // Verify useK8sWatchResource was called with correct resource spec expect(useK8sWatchResourceMock).toHaveBeenCalledWith({ @@ -205,7 +205,7 @@ describe('useGetUserSettingConfigMap', () => { useSelectorMock.mockReturnValue(emptyUserInfo); useK8sWatchResourceMock.mockReturnValue([null, true, null]); - const { result } = testHook(() => useGetUserSettingConfigMap()); + const { result } = renderHook(() => useGetUserSettingConfigMap()); // Should call useK8sWatchResource with null expect(useK8sWatchResourceMock).toHaveBeenCalledWith(null); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/usePinnedResources.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/usePinnedResources.spec.ts index 5e0c2798d2c..0d49961ed01 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/usePinnedResources.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/usePinnedResources.spec.ts @@ -1,9 +1,9 @@ +import { renderHook } from '@testing-library/react'; import useActivePerspective from '@console/dynamic-plugin-sdk/src/perspective/useActivePerspective'; import { DeploymentModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/__mocks__/k8s-data'; import { ConfigMapModel } from '@console/internal/models'; import { useModelFinder } from '@console/internal/module/k8s/k8s-models'; import { usePerspectives } from '@console/shared/src'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { usePinnedResources } from '../usePinnedResources'; import { useUserSettingsCompatibility } from '../useUserSettingsCompatibility'; @@ -69,7 +69,7 @@ describe('usePinnedResources', () => { true, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect default pins expect(result.current).toEqual([ @@ -88,7 +88,7 @@ describe('usePinnedResources', () => { // Mock user settings useUserSettingsCompatibilityMock.mockReturnValue([null, setPinnedResourcesMock, false]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect empty data and loaded=false expect(result.current).toEqual([[], expect.any(Function), false]); @@ -104,7 +104,7 @@ describe('usePinnedResources', () => { usePerspectivesMock.mockClear(); usePerspectivesMock.mockReturnValue([]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect empty array expect(result.current).toEqual([[], expect.any(Function), true]); @@ -128,7 +128,7 @@ describe('usePinnedResources', () => { }, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect empty array expect(result.current).toEqual([[], expect.any(Function), true]); @@ -148,7 +148,7 @@ describe('usePinnedResources', () => { true, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Do not expect pins expect(result.current).toEqual([[], expect.any(Function), true]); @@ -168,7 +168,7 @@ describe('usePinnedResources', () => { true, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Do not expect pins expect(result.current).toEqual([ @@ -191,7 +191,7 @@ describe('usePinnedResources', () => { true, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect default pins expect(result.current).toEqual([ @@ -215,7 +215,7 @@ describe('usePinnedResources', () => { true, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect pins customized by the admin expect(result.current).toEqual([['apps~v1~Deployment'], expect.any(Function), true]); @@ -235,7 +235,7 @@ describe('usePinnedResources', () => { true, ]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect pins from user settings expect(result.current).toEqual([ @@ -255,7 +255,7 @@ describe('usePinnedResources', () => { useActivePerspectiveMock.mockReturnValue(['dev']); useUserSettingsCompatibilityMock.mockReturnValue([{}, setPinnedResourcesMock, true]); - const { result } = testHook(() => usePinnedResources()); + const { result } = renderHook(() => usePinnedResources()); // Expect pins customized by the admin expect(result.current).toEqual([['core~~', 'core~v1~ConfigMap'], expect.any(Function), true]); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts index 80213600f12..f8dbe68de4c 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/useTelemetry.spec.ts @@ -1,3 +1,4 @@ +import { renderHook } from '@testing-library/react'; import { useResolvedExtensions, ResolvedExtension, @@ -8,7 +9,6 @@ import { USER_TELEMETRY_ANALYTICS, useUserSettings, } from '@console/shared'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { getClusterProperties, updateClusterPropertiesFromTests, @@ -159,7 +159,7 @@ describe('useTelemetry', () => { telemetry: { STATE: CLUSTER_TELEMETRY_ANALYTICS.ENFORCE }, }; updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 1'); expect(listener).toHaveBeenCalledTimes(1); @@ -177,7 +177,7 @@ describe('useTelemetry', () => { telemetry: { CLUSTER_TYPE: 'OSD', STATE: CLUSTER_TELEMETRY_ANALYTICS.ENFORCE }, }; updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 2'); expect(listener).toHaveBeenCalledTimes(1); @@ -195,7 +195,7 @@ describe('useTelemetry', () => { telemetry: { CLUSTER_TYPE: 'OSD', STATE: CLUSTER_TELEMETRY_ANALYTICS.ENFORCE }, }; updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 3', { 'a-string': 'works fine', 'a-boolean': true }); expect(listener).toHaveBeenCalledTimes(1); @@ -219,7 +219,7 @@ describe('useTelemetry', () => { }, }; updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 4'); expect(listener).toHaveBeenCalledTimes(1); @@ -241,7 +241,7 @@ describe('useTelemetry', () => { }, }; updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 5'); expect(listener).toHaveBeenCalledTimes(0); @@ -259,7 +259,7 @@ describe('useTelemetry', () => { }; mockUserSettings.mockReturnValue([USER_TELEMETRY_ANALYTICS.ALLOW, jest.fn(), true]); updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 6'); expect(listener).toHaveBeenCalledTimes(1); @@ -277,7 +277,7 @@ describe('useTelemetry', () => { }; mockUserSettings.mockReturnValue([USER_TELEMETRY_ANALYTICS.DENY, jest.fn(), true]); updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 7'); expect(listener).toHaveBeenCalledTimes(0); @@ -295,7 +295,7 @@ describe('useTelemetry', () => { }; mockUserSettings.mockReturnValue([USER_TELEMETRY_ANALYTICS.ALLOW, jest.fn(), true]); updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 8'); expect(listener).toHaveBeenCalledTimes(1); @@ -313,7 +313,7 @@ describe('useTelemetry', () => { }; mockUserSettings.mockReturnValue([USER_TELEMETRY_ANALYTICS.DENY, jest.fn(), true]); updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 9'); expect(listener).toHaveBeenCalledTimes(0); @@ -331,7 +331,7 @@ describe('useTelemetry', () => { }; mockUserSettings.mockReturnValue(['', jest.fn(), true]); updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 10'); expect(listener).toHaveBeenCalledTimes(0); @@ -348,7 +348,7 @@ describe('useTelemetry', () => { }, }; updateClusterPropertiesFromTests(); - const { result } = testHook(() => useTelemetry()); + const { result } = renderHook(() => useTelemetry()); const fireTelemetryEvent = result.current; fireTelemetryEvent('test 11'); expect(listener).toHaveBeenCalledTimes(1); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts index 2da3768db04..e13cfa43f69 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts @@ -1,6 +1,6 @@ +import { renderHook } from '@testing-library/react'; import { useSelector, useDispatch } from 'react-redux'; import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { useUser } from '../useUser'; jest.mock('react-i18next', () => ({ @@ -52,7 +52,7 @@ describe('useUser', () => { mockUseK8sGet.mockReturnValue([mockUserResource, true, null]); - const { result } = testHook(() => useUser()); + const { result } = renderHook(() => useUser()); expect(result.current.user).toEqual(mockUser); expect(result.current.userResource).toEqual(mockUserResource); @@ -69,7 +69,7 @@ describe('useUser', () => { mockUseK8sGet.mockReturnValue([mockUserResource, true, null]); - const { result } = testHook(() => useUser()); + const { result } = renderHook(() => useUser()); expect(result.current.displayName).toBe('testuser@example.com'); // Should fallback to username expect(result.current.fullName).toBeUndefined(); @@ -83,7 +83,7 @@ describe('useUser', () => { mockUseK8sGet.mockReturnValue([mockUserResource, true, null]); - testHook(() => useUser()); + renderHook(() => useUser()); expect(mockDispatch).toHaveBeenCalledWith({ type: 'setUserResource', @@ -99,7 +99,7 @@ describe('useUser', () => { mockUseK8sGet.mockReturnValue([mockUserResource, true, null]); - const { result } = testHook(() => useUser()); + const { result } = renderHook(() => useUser()); expect(result.current.displayName).toBe('Unknown user'); // Should fallback to translated "Unknown user" }); @@ -112,7 +112,7 @@ describe('useUser', () => { mockUseK8sGet.mockReturnValue([mockUserResource, true, null]); - const { result } = testHook(() => useUser()); + const { result } = renderHook(() => useUser()); expect(result.current.displayName).toBe('Test User'); // Should be trimmed }); diff --git a/frontend/packages/console-shared/src/hooks/__tests__/useUserSettings.spec.ts b/frontend/packages/console-shared/src/hooks/__tests__/useUserSettings.spec.ts index 21ada66cd69..d7e54db05fd 100644 --- a/frontend/packages/console-shared/src/hooks/__tests__/useUserSettings.spec.ts +++ b/frontend/packages/console-shared/src/hooks/__tests__/useUserSettings.spec.ts @@ -1,9 +1,8 @@ -import { act } from '@testing-library/react'; +import { act, renderHook } from '@testing-library/react'; import { useSelector } from 'react-redux'; import { useFavoritesOptions } from '@console/internal/components/useFavoritesOptions'; import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook'; import { ConfigMapKind } from '@console/internal/module/k8s'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { createConfigMap, updateConfigMap, @@ -84,7 +83,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([null, false, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -126,7 +125,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([null, false, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -168,7 +167,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([null, false, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -195,7 +194,7 @@ describe('useUserSettings', () => { // Mock loading useK8sWatchResourceMock.mockReturnValue([null, false, null]); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -223,7 +222,7 @@ describe('useUserSettings', () => { }; useK8sWatchResourceMock.mockReturnValue([savedDataWithEncodedCharConfigMap, true, null]); - const { result } = testHook(() => + const { result } = renderHook(() => useUserSettings('invalid-char-:-is-replaced-with-an-underline', 'default value'), ); @@ -239,7 +238,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([emptyConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result } = testHook(() => useUserSettings('console.key', 'default value')); + const { result } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect default value with loaded expect(result.current).toEqual(['default value', expect.any(Function), true]); @@ -257,7 +256,7 @@ describe('useUserSettings', () => { // Mock already loaded data useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); - const { result } = testHook(() => useUserSettings('console.key', 'default value')); + const { result } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect saved data expect(result.current).toEqual(['saved value', expect.any(Function), true]); @@ -270,7 +269,7 @@ describe('useUserSettings', () => { // Mock loading useK8sWatchResourceMock.mockReturnValue([null, false, null]); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -292,7 +291,7 @@ describe('useUserSettings', () => { // Mock already loaded data useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); - const { result } = testHook(() => useUserSettings('console.key', 'default value')); + const { result } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect saved data expect(result.current).toEqual(['saved value', expect.any(Function), true]); @@ -306,7 +305,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect saved data expect(result.current).toEqual(['saved value', expect.any(Function), true]); @@ -335,7 +334,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([emptyConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect saved data expect(result.current).toEqual(['default value', expect.any(Function), true]); @@ -367,7 +366,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([emptyConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value', true), ); @@ -411,7 +410,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect saved data expect(result.current).toEqual(['saved value', expect.any(Function), true]); @@ -443,7 +442,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value', true), ); @@ -487,7 +486,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect saved data expect(result.current).toEqual(['saved value', expect.any(Function), true]); @@ -535,7 +534,7 @@ describe('useUserSettings', () => { useK8sWatchResourceMock.mockReturnValue([savedDataConfigMap, true, null]); updateConfigMapMock.mockReturnValue(Promise.resolve({})); - const { result, rerender } = testHook(() => + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value', true), ); @@ -593,7 +592,7 @@ describe('useUserSettings', () => { // Mock loading useK8sWatchResourceMock.mockReturnValue([null, false, null]); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading data expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -628,7 +627,7 @@ describe('useUserSettings', () => { // Mock loading useK8sWatchResourceMock.mockReturnValue([null, false, null]); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading data expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -665,7 +664,7 @@ describe('useUserSettings', () => { // Mock loading useK8sWatchResourceMock.mockReturnValue([null, false, null]); - const { result, rerender } = testHook(() => useUserSettings('console.key', 'default value')); + const { result, rerender } = renderHook(() => useUserSettings('console.key', 'default value')); // Expect loading data expect(result.current).toEqual([undefined, expect.any(Function), false]); @@ -705,7 +704,7 @@ describe('useUserSettings', () => { }; window.addEventListener('storage', storageListener); - const { result } = testHook(() => useUserSettings('impersonate.key', 'impersonate.value')); + const { result } = renderHook(() => useUserSettings('impersonate.key', 'impersonate.value')); expect(result.current).toEqual(['impersonate.value', expect.any(Function), true]); diff --git a/frontend/packages/console-shared/src/test-utils/hooks-utils.tsx b/frontend/packages/console-shared/src/test-utils/hooks-utils.tsx deleted file mode 100644 index f99671dcb7e..00000000000 --- a/frontend/packages/console-shared/src/test-utils/hooks-utils.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { render, act, RenderOptions } from '@testing-library/react'; - -type ResultRef = { current: T }; -type RerenderFn = () => void; - -/** @deprecated use renderHook from '@testing-library/react' */ -export const testHook = (hook: () => T, options?: Pick) => { - const result: ResultRef = { current: (undefined as unknown) as T }; - let rerender: RerenderFn = () => {}; - - function Wrapper() { - result.current = hook(); - return null; - } - - const { rerender: rtlRerender } = render(, options); - rerender = () => act(() => rtlRerender()); - - return { result, rerender }; -}; diff --git a/frontend/packages/console-shared/src/utils/__tests__/isSubCatalogTypeEnabled.spec.ts b/frontend/packages/console-shared/src/utils/__tests__/isSubCatalogTypeEnabled.spec.ts index e6e9ddc2876..3674b900db4 100644 --- a/frontend/packages/console-shared/src/utils/__tests__/isSubCatalogTypeEnabled.spec.ts +++ b/frontend/packages/console-shared/src/utils/__tests__/isSubCatalogTypeEnabled.spec.ts @@ -1,3 +1,4 @@ +import { renderHook } from '@testing-library/react'; import { useResolvedExtensions } from '@console/dynamic-plugin-sdk'; import { HELM_CHART_CATALOG_TYPE_ID } from '@console/helm-plugin/src/const'; import { @@ -5,7 +6,6 @@ import { isCatalogTypeEnabled, useIsSoftwareCatalogEnabled, } from '@console/shared'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { mockExtensions } from './catalogTypeExtensions.data'; jest.mock('@console/dynamic-plugin-sdk/src/api/useResolvedExtensions', () => ({ @@ -75,89 +75,74 @@ describe('isSubCatalogTypeEnabled - get sub-catalog status', () => { describe('useIsSoftwareCatalogEnabled - check if software catalog is enabled or not', () => { it('should show software catalog as enabled when enabled list is empty', () => { - testHook(() => { - window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" , "enabled": [] }'; - const isEnabled = useIsSoftwareCatalogEnabled(); - expect(isEnabled).toBe(true); - }); + window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" , "enabled": [] }'; + const { result } = renderHook(() => useIsSoftwareCatalogEnabled()); + expect(result.current).toBe(true); }); it('should show software catalog as disabled when disabled list is empty', () => { - testHook(() => { - window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Disabled" , "disabled": [] }'; - const isEnabled = useIsSoftwareCatalogEnabled(); - expect(isEnabled).toBe(false); - }); + window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Disabled" , "disabled": [] }'; + const { result } = renderHook(() => useIsSoftwareCatalogEnabled()); + expect(result.current).toBe(false); }); it('should show software catalog as enabled when enabled list is not empty', () => { - testHook(() => { - window.SERVER_FLAGS.developerCatalogTypes = - '{"state" : "Enabled" , "enabled": ["HelmChart"] }'; - const isEnabled = useIsSoftwareCatalogEnabled(); - expect(isEnabled).toBe(true); - }); + window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" , "enabled": ["HelmChart"] }'; + const { result } = renderHook(() => useIsSoftwareCatalogEnabled()); + expect(result.current).toBe(true); }); it('should show software catalog as disabled when all sub-catalogs are disabled', () => { - testHook(() => { - window.SERVER_FLAGS.developerCatalogTypes = - '{"state" : "Disabled" , "disabled": ["HelmChart","Devfile","EventSource","EventSink","OperatorBackedService","Sample","Template","BuilderImage"]}'; - const isEnabled = useIsSoftwareCatalogEnabled(); - expect(isEnabled).toBe(false); - }); + window.SERVER_FLAGS.developerCatalogTypes = + '{"state" : "Disabled" , "disabled": ["HelmChart","Devfile","EventSource","EventSink","OperatorBackedService","Sample","Template","BuilderImage"]}'; + const { result } = renderHook(() => useIsSoftwareCatalogEnabled()); + expect(result.current).toBe(false); }); it('should show software catalog as enabled when enabled attribute is not added', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" }'; - const isEnabled = useIsSoftwareCatalogEnabled(); - expect(isEnabled).toBe(true); + const { result } = renderHook(() => useIsSoftwareCatalogEnabled()); + expect(result.current).toBe(true); }); it('should show software catalog as enabled when enabled attribute is not added', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Disabled" }'; - const isEnabled = useIsSoftwareCatalogEnabled(); - expect(isEnabled).toBe(false); + const { result } = renderHook(() => useIsSoftwareCatalogEnabled()); + expect(result.current).toBe(false); }); }); describe('useGetAllDisabledSubCatalogs - get all the disabled sub-catalogs', () => { it('should return no sub-catalog is disabled when dev catalog types are not configured', () => { - testHook(() => { - const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs(); - expect(disabledSubCatalogs.length).toBe(0); - }); + const { result } = renderHook(() => useGetAllDisabledSubCatalogs()); + const [disabledSubCatalogs] = result.current; + expect(disabledSubCatalogs.length).toBe(0); }); it('should return no sub-catalog is disabled when HelmChart is added in disabled list', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Disabled" , "disabled": ["HelmChart"] }'; - testHook(() => { - const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs(); - expect(disabledSubCatalogs.length).toBe(1); - }); + const { result } = renderHook(() => useGetAllDisabledSubCatalogs()); + const [disabledSubCatalogs] = result.current; + expect(disabledSubCatalogs.length).toBe(1); }); it('should return all sub-catalogs are disabled when disabled list is empty', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Disabled" , "disabled": [] }'; - testHook(() => { - const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs(); - expect(disabledSubCatalogs.length).toBe(8); - }); + const { result } = renderHook(() => useGetAllDisabledSubCatalogs()); + const [disabledSubCatalogs] = result.current; + expect(disabledSubCatalogs.length).toBe(8); }); it('should return no sub-catalogs are disabled when enabled list is empty', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" , "enabled": [] }'; - testHook(() => { - const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs(); - expect(disabledSubCatalogs.length).toBe(0); - }); + const { result } = renderHook(() => useGetAllDisabledSubCatalogs()); + const [disabledSubCatalogs] = result.current; + expect(disabledSubCatalogs.length).toBe(0); }); it('should return five sub-catalogs are disabled when enabled list is having three sub-catalogs', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" , "enabled": ["Devfile","HelmChart","Sample"] }'; - testHook(() => { - const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs(); - expect(disabledSubCatalogs.length).toBe(5); - }); + const { result } = renderHook(() => useGetAllDisabledSubCatalogs()); + const [disabledSubCatalogs] = result.current; + expect(disabledSubCatalogs.length).toBe(5); }); it('should return seven sub-catalogs are disabled when enabled list is having one sub-catalog', () => { window.SERVER_FLAGS.developerCatalogTypes = '{"state" : "Enabled" , "enabled": ["Devfile"] }'; - testHook(() => { - const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs(); - expect(disabledSubCatalogs.length).toBe(7); - }); + const { result } = renderHook(() => useGetAllDisabledSubCatalogs()); + const [disabledSubCatalogs] = result.current; + expect(disabledSubCatalogs.length).toBe(7); }); }); diff --git a/frontend/packages/console-shared/src/utils/__tests__/pod-ring-utils.spec.ts b/frontend/packages/console-shared/src/utils/__tests__/pod-ring-utils.spec.ts index 20ded70167d..79c644e7c2f 100644 --- a/frontend/packages/console-shared/src/utils/__tests__/pod-ring-utils.spec.ts +++ b/frontend/packages/console-shared/src/utils/__tests__/pod-ring-utils.spec.ts @@ -1,8 +1,8 @@ +import { renderHook } from '@testing-library/react'; import * as _ from 'lodash'; import { DeploymentConfigModel, PodModel } from '@console/internal/models'; import { K8sResourceKind } from '@console/internal/module/k8s'; import { RevisionModel } from '@console/knative-plugin'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { t } from '../../../../../__mocks__/i18next'; import { ExtPodKind } from '../../types'; import { @@ -191,44 +191,40 @@ describe('usePodScalingAccessStatus', () => { jest.clearAllMocks(); }); - it('should return false for scaling when enableScaling is false', (done) => { + it('should return false for scaling when enableScaling is false', () => { obj.kind = 'Deployment'; - testHook(() => { - expect(usePodScalingAccessStatus(obj, DeploymentConfigModel, [], false)).toBe(false); - done(); - }); + const { result } = renderHook(() => + usePodScalingAccessStatus(obj, DeploymentConfigModel, [], false), + ); + expect(result.current).toBe(false); }); - it('should return false for knative revisions', (done) => { + it('should return false for knative revisions', () => { obj.kind = 'Revision'; - testHook(() => { - expect(usePodScalingAccessStatus(obj, RevisionModel, [], true)).toBe(false); - done(); - }); + const { result } = renderHook(() => usePodScalingAccessStatus(obj, RevisionModel, [], true)); + expect(result.current).toBe(false); }); - it('should return false for pods', (done) => { + it('should return false for pods', () => { obj.kind = 'Pod'; - testHook(() => { - expect(usePodScalingAccessStatus(obj, PodModel, [], true)).toBe(false); - done(); - }); + const { result } = renderHook(() => usePodScalingAccessStatus(obj, PodModel, [], true)); + expect(result.current).toBe(false); }); - it('should return false when api call returns false for a resource', (done) => { + it('should return false when api call returns false for a resource', () => { obj.kind = 'DeploymentConfig'; - testHook(() => { - expect(usePodScalingAccessStatus(obj, DeploymentConfigModel, [], true)).toBe(false); - done(); - }); + const { result } = renderHook(() => + usePodScalingAccessStatus(obj, DeploymentConfigModel, [], true), + ); + expect(result.current).toBe(false); }); - it('should return false when API call results in an error', (done) => { + it('should return false when API call results in an error', () => { checkPodEditAccessMock.mockImplementation(() => Promise.reject(new Error('error'))); - testHook(() => { - expect(usePodScalingAccessStatus(obj, DeploymentConfigModel, [], true)).toBe(false); - done(); - }); + const { result } = renderHook(() => + usePodScalingAccessStatus(obj, DeploymentConfigModel, [], true), + ); + expect(result.current).toBe(false); }); }); diff --git a/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAccessFilterExtensions.spec.ts b/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAccessFilterExtensions.spec.ts index 5b8f503d386..eee9d68a72c 100644 --- a/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAccessFilterExtensions.spec.ts +++ b/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAccessFilterExtensions.spec.ts @@ -1,4 +1,4 @@ -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import { renderHook } from '@testing-library/react'; import { addActionExtensions } from '../../__tests__/add-page-test-data'; import { useAccessFilterExtensions } from '../useAccessFilterExtensions'; import * as hook from '../useAddActionsAccessReviews'; @@ -24,15 +24,11 @@ describe('useAccessFilterExtensions', () => { pipeline: AccessReviewStatus.ALLOWED, 'deploy-image': AccessReviewStatus.ALLOWED, }; - testHook(() => { - useAddActionsAccessReviewsSpy.mockReturnValue(mockAddAccessReviewResults); - const [filteredAddActionExtensions, loaded] = useAccessFilterExtensions( - namespace, - addActionExtensions, - ); - expect(filteredAddActionExtensions.length).toEqual(0); - expect(loaded).toBe(false); - }); + useAddActionsAccessReviewsSpy.mockReturnValue(mockAddAccessReviewResults); + const { result } = renderHook(() => useAccessFilterExtensions(namespace, addActionExtensions)); + const [filteredAddActionExtensions, loaded] = result.current; + expect(filteredAddActionExtensions.length).toEqual(0); + expect(loaded).toBe(false); }); it('should return filtered array of add actions for which access review status is allowed and loaded with value true', () => { @@ -45,14 +41,10 @@ describe('useAccessFilterExtensions', () => { const accessAllowedResults = Object.values(mockAccessReviewResults).filter( (result) => result === AccessReviewStatus.ALLOWED, ); - testHook(() => { - useAddActionsAccessReviewsSpy.mockReturnValue(mockAccessReviewResults); - const [filteredAddActionExtensions, loaded] = useAccessFilterExtensions( - namespace, - addActionExtensions, - ); - expect(filteredAddActionExtensions.length).toEqual(accessAllowedResults.length); - expect(loaded).toBe(true); - }); + useAddActionsAccessReviewsSpy.mockReturnValue(mockAccessReviewResults); + const { result } = renderHook(() => useAccessFilterExtensions(namespace, addActionExtensions)); + const [filteredAddActionExtensions, loaded] = result.current; + expect(filteredAddActionExtensions.length).toEqual(accessAllowedResults.length); + expect(loaded).toBe(true); }); }); diff --git a/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAddActionsAccessReviews.spec.ts b/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAddActionsAccessReviews.spec.ts index 9e63f62a2be..ef2cb8a053d 100644 --- a/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAddActionsAccessReviews.spec.ts +++ b/frontend/packages/dev-console/src/components/add/hooks/__tests__/useAddActionsAccessReviews.spec.ts @@ -1,10 +1,9 @@ -import { act } from '@testing-library/react'; +import { act, renderHook } from '@testing-library/react'; import { checkAccess } from '@console/internal/components/utils'; import { AccessReviewResourceAttributes, SelfSubjectAccessReviewKind, } from '@console/internal/module/k8s'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { addActionExtensions } from '../../__tests__/add-page-test-data'; import { useAddActionsAccessReviews, AccessReviewStatus } from '../useAddActionsAccessReviews'; @@ -30,7 +29,7 @@ describe('useAddActionsAccessReviews', () => { const extensionsWithAccessReview = addActionExtensions.filter( (action) => !!action.properties.accessReview, ); - const { result, rerender } = testHook(() => + const { result, rerender } = renderHook(() => useAddActionsAccessReviews(namespace, extensionsWithAccessReview), ); await act(async () => { @@ -45,7 +44,7 @@ describe('useAddActionsAccessReviews', () => { const extensionsWithoutAccessReview = addActionExtensions.filter( (action) => !action.properties.accessReview, ); - const { result } = testHook(() => + const { result } = renderHook(() => useAddActionsAccessReviews(namespace, extensionsWithoutAccessReview), ); const accessReviewResults = Object.values(result.current); @@ -58,7 +57,7 @@ describe('useAddActionsAccessReviews', () => { const extensionsWithAccessReview = addActionExtensions.filter( (action) => !!action.properties.accessReview, ); - const { result, rerender } = testHook(() => + const { result, rerender } = renderHook(() => useAddActionsAccessReviews(namespace, extensionsWithAccessReview), ); await act(async () => { @@ -84,7 +83,7 @@ describe('useAddActionsAccessReviews', () => { (resourceAttributes: AccessReviewResourceAttributes) => createCheckAccessPromise(resourceAttributes.group === mockAccessGroup), ); - const { result, rerender } = testHook(() => + const { result, rerender } = renderHook(() => useAddActionsAccessReviews(namespace, addActionExtensions), ); await act(async () => { diff --git a/frontend/packages/dev-console/src/components/catalog/providers/__tests__/useDevfileSamples.spec.ts b/frontend/packages/dev-console/src/components/catalog/providers/__tests__/useDevfileSamples.spec.ts index 40a6a7673a8..c4bb02dc202 100644 --- a/frontend/packages/dev-console/src/components/catalog/providers/__tests__/useDevfileSamples.spec.ts +++ b/frontend/packages/dev-console/src/components/catalog/providers/__tests__/useDevfileSamples.spec.ts @@ -1,7 +1,6 @@ -import { act } from '@testing-library/react'; +import { act, renderHook } from '@testing-library/react'; import { coFetchJSON } from '@console/internal/co-fetch'; import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { DevfileSample } from '../../../import/devfile/devfile-types'; import useDevfileSamples from '../useDevfileSamples'; import { devfileSamples, expectedCatalogItems } from './useDevfileSamples.data'; @@ -29,7 +28,7 @@ describe('useDevfileSamples:', () => { let resolver: (samples: DevfileSample[]) => void; getMock.mockReturnValue(new Promise((resolve) => (resolver = resolve))); - const { result } = testHook(() => useDevfileSamples({})); + const { result } = renderHook(() => useDevfileSamples({})); expect(getMock).toHaveBeenCalledTimes(1); expect(getMock).toHaveBeenLastCalledWith( @@ -47,7 +46,7 @@ describe('useDevfileSamples:', () => { let rejector: (error: Error) => void; getMock.mockReturnValue(new Promise((_, reject) => (rejector = reject))); - const { result } = testHook(() => useDevfileSamples({})); + const { result } = renderHook(() => useDevfileSamples({})); expect(getMock).toHaveBeenCalledTimes(1); expect(getMock).toHaveBeenLastCalledWith( diff --git a/frontend/packages/dev-console/src/components/project-access/__tests__/hooks.spec.ts b/frontend/packages/dev-console/src/components/project-access/__tests__/hooks.spec.ts index 6cb145de262..a9c833ae3ba 100644 --- a/frontend/packages/dev-console/src/components/project-access/__tests__/hooks.spec.ts +++ b/frontend/packages/dev-console/src/components/project-access/__tests__/hooks.spec.ts @@ -1,5 +1,5 @@ +import { renderHook } from '@testing-library/react'; import { useK8sWatchResources } from '@console/internal/components/utils/k8s-watch-hook'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { useProjectAccessRoles } from '../hooks'; import { defaultAccessRoles } from '../project-access-form-utils'; import { clusterRolesMock } from './cluster-role-mock'; @@ -18,7 +18,7 @@ describe('project-access hooks', () => { loaded: true, }; useK8sWatchResourcesMock.mockReturnValue({}); - const { result } = testHook(() => useProjectAccessRoles()); + const { result } = renderHook(() => useProjectAccessRoles()); expect(result.current).toEqual(expectedAccessRoles); }); it('should return available cluster roles', () => { @@ -32,7 +32,7 @@ describe('project-access hooks', () => { admin: { data: clusterRolesMock[0], loaded: true }, test1: { data: {}, loaded: false, loadError: { response: { status: 404 } } }, }); - const { result } = testHook(() => useProjectAccessRoles()); + const { result } = renderHook(() => useProjectAccessRoles()); expect(result.current).toEqual(expectedAccessRoles); }); it('should not retrun roles if available cluster rules are not present in cluster', () => { @@ -45,7 +45,7 @@ describe('project-access hooks', () => { data: {}, loaded: true, }; - const { result } = testHook(() => useProjectAccessRoles()); + const { result } = renderHook(() => useProjectAccessRoles()); expect(result.current).toEqual(expectedAccessRoles); }); it('should return access roles with name display-name', () => { @@ -58,7 +58,7 @@ describe('project-access hooks', () => { '3scale-kourier': { data: clusterRolesMock[4], loaded: true }, 'cluster-debugger': { data: clusterRolesMock[5], loaded: true }, }); - const { result } = testHook(() => useProjectAccessRoles()); + const { result } = renderHook(() => useProjectAccessRoles()); expect(result.current).toEqual(expectedAccessRoles); }); it('should return access role if loadError is other than 404', () => { @@ -71,7 +71,7 @@ describe('project-access hooks', () => { data: { 'custom-role': 'custom-role' }, loaded: true, }; - const { result } = testHook(() => useProjectAccessRoles()); + const { result } = renderHook(() => useProjectAccessRoles()); expect(result.current).toEqual(expectedAccessRoles); }); }); diff --git a/frontend/packages/dev-console/src/utils/__tests__/useAddActionExtensions.spec.ts b/frontend/packages/dev-console/src/utils/__tests__/useAddActionExtensions.spec.ts index d6344959108..53f3151ed49 100644 --- a/frontend/packages/dev-console/src/utils/__tests__/useAddActionExtensions.spec.ts +++ b/frontend/packages/dev-console/src/utils/__tests__/useAddActionExtensions.spec.ts @@ -1,5 +1,5 @@ +import { renderHook } from '@testing-library/react'; import { useResolvedExtensions, AddAction, ResolvedExtension } from '@console/dynamic-plugin-sdk'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { useAddActionExtensions } from '../useAddActionExtensions'; const useResolvedExtensionsMock = useResolvedExtensions as jest.Mock; @@ -72,11 +72,10 @@ describe('useAddActionExtensions', () => { ]); delete window.SERVER_FLAGS.addPage; - testHook(() => { - const [addActionExtensions, resolved] = useAddActionExtensions(); - expect(addActionExtensions).toEqual([addAction1, addAction2, addAction3, addAction4]); - expect(resolved).toEqual(true); - }); + const { result } = renderHook(() => useAddActionExtensions()); + const [addActionExtensions, resolved] = result.current; + expect(addActionExtensions).toEqual([addAction1, addAction2, addAction3, addAction4]); + expect(resolved).toEqual(true); }); it('return all actions if SERVER_FLAGS.addPage customization is empty', () => { @@ -86,11 +85,10 @@ describe('useAddActionExtensions', () => { ]); window.SERVER_FLAGS.addPage = '{}'; - testHook(() => { - const [addActionExtensions, resolved] = useAddActionExtensions(); - expect(addActionExtensions).toEqual([addAction1, addAction2, addAction3, addAction4]); - expect(resolved).toEqual(true); - }); + const { result } = renderHook(() => useAddActionExtensions()); + const [addActionExtensions, resolved] = result.current; + expect(addActionExtensions).toEqual([addAction1, addAction2, addAction3, addAction4]); + expect(resolved).toEqual(true); }); it('return filtered actions if SERVER_FLAGS.addPage contains some disabledActions', () => { @@ -100,10 +98,9 @@ describe('useAddActionExtensions', () => { ]); window.SERVER_FLAGS.addPage = '{"disabledActions":["action2"]}'; - testHook(() => { - const [addActionExtensions, resolved] = useAddActionExtensions(); - expect(addActionExtensions).toEqual([addAction1, addAction3, addAction4]); - expect(resolved).toEqual(true); - }); + const { result } = renderHook(() => useAddActionExtensions()); + const [addActionExtensions, resolved] = result.current; + expect(addActionExtensions).toEqual([addAction1, addAction3, addAction4]); + expect(resolved).toEqual(true); }); }); diff --git a/frontend/packages/dev-console/src/utils/__tests__/usePerspectiveDetection.spec.ts b/frontend/packages/dev-console/src/utils/__tests__/usePerspectiveDetection.spec.ts index 00f3412d488..c22ea748be2 100644 --- a/frontend/packages/dev-console/src/utils/__tests__/usePerspectiveDetection.spec.ts +++ b/frontend/packages/dev-console/src/utils/__tests__/usePerspectiveDetection.spec.ts @@ -1,5 +1,5 @@ +import { renderHook } from '@testing-library/react'; import { useSelector } from 'react-redux'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { usePerspectiveDetection } from '../perspective'; jest.mock('react-redux', () => ({ @@ -13,12 +13,11 @@ describe('usePerspectiveDetection', () => { CAN_GET_NS: undefined, })); - testHook(() => { - const [enablePerspective, loading] = usePerspectiveDetection(); + const { result } = renderHook(() => usePerspectiveDetection()); + const [enablePerspective, loading] = result.current; - expect(enablePerspective).toBe(true); - expect(loading).toBe(true); - }); + expect(enablePerspective).toBe(true); + expect(loading).toBe(true); }); it('should return loading as false if CAN_GET_NS flag is loaded', () => { @@ -26,11 +25,10 @@ describe('usePerspectiveDetection', () => { CAN_GET_NS: false, })); - testHook(() => { - const [enablePerspective, loading] = usePerspectiveDetection(); + const { result } = renderHook(() => usePerspectiveDetection()); + const [enablePerspective, loading] = result.current; - expect(enablePerspective).toBe(true); - expect(loading).toBe(false); - }); + expect(enablePerspective).toBe(true); + expect(loading).toBe(false); }); }); diff --git a/frontend/packages/helm-plugin/src/providers/__tests__/helm-detection-provider.spec.ts b/frontend/packages/helm-plugin/src/providers/__tests__/helm-detection-provider.spec.ts index 513326a5a8d..0921ca391f7 100644 --- a/frontend/packages/helm-plugin/src/providers/__tests__/helm-detection-provider.spec.ts +++ b/frontend/packages/helm-plugin/src/providers/__tests__/helm-detection-provider.spec.ts @@ -1,10 +1,9 @@ -import { act } from '@testing-library/react'; +import { act, renderHook } from '@testing-library/react'; import { HttpError } from '@console/dynamic-plugin-sdk/src/utils/error/http-error'; import { settleAllPromises } from '@console/dynamic-plugin-sdk/src/utils/promise'; import { fetchK8s } from '@console/internal/graphql/client'; import { K8sResourceKind } from '@console/internal/module/k8s'; import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { mockHelmChartRepositories } from '../../components/__tests__/helm-release-mock-data'; import { FLAG_OPENSHIFT_HELM } from '../../const'; import { HelmChartRepositoryModel, ProjectHelmChartRepositoryModel } from '../../models'; @@ -81,7 +80,7 @@ describe('useDetectHelmChartRepositories', () => { settleAllPromisesMock.mockReturnValue( Promise.resolve([[helmChartRepositoryList, helmChartRepositoryList], [], []]), ); - testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); expect(fetchK8sMock).toHaveBeenCalledTimes(2); expect(fetchK8sMock.mock.calls[0]).toEqual([HelmChartRepositoryModel]); expect(fetchK8sMock.mock.calls[1]).toEqual([ProjectHelmChartRepositoryModel, null, ns]); @@ -91,7 +90,7 @@ describe('useDetectHelmChartRepositories', () => { settleAllPromisesMock.mockReturnValue( Promise.resolve([[helmChartRepositoryList, { items: [] }], [], []]), ); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); @@ -103,7 +102,7 @@ describe('useDetectHelmChartRepositories', () => { settleAllPromisesMock.mockReturnValue( Promise.resolve([[{ items: [] }, helmChartRepositoryList], [], []]), ); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); @@ -115,7 +114,7 @@ describe('useDetectHelmChartRepositories', () => { settleAllPromisesMock.mockReturnValue( Promise.resolve([[helmChartRepositoryList, helmChartRepositoryList], [], []]), ); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); @@ -127,7 +126,7 @@ describe('useDetectHelmChartRepositories', () => { settleAllPromisesMock.mockReturnValue( Promise.resolve([[{ items: [] }, { items: [] }], [], []]), ); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); @@ -146,7 +145,7 @@ describe('useDetectHelmChartRepositories', () => { // settleAllPromises mock returns errors in rejectedReasons array settleAllPromisesMock.mockReturnValue(Promise.resolve([[], [error404, error200], []])); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); @@ -160,7 +159,7 @@ describe('useDetectHelmChartRepositories', () => { } as Response); // settleAllPromises mock returns errors in rejectedReasons array settleAllPromisesMock.mockReturnValue(Promise.resolve([[], [error200, error200], []])); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); @@ -172,7 +171,7 @@ describe('useDetectHelmChartRepositories', () => { settleAllPromisesMock.mockReturnValue( Promise.resolve([[helmChartRepositoryList, helmChartRepositoryList], [], []]), ); - testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); expect(fetchK8sMock).toHaveBeenCalledTimes(2); jest.advanceTimersByTime(20 * 1000); expect(fetchK8sMock).toHaveBeenCalledTimes(6); @@ -187,7 +186,7 @@ describe('useDetectHelmChartRepositories', () => { } as Response); // settleAllPromises mock returns errors in rejectedReasons array settleAllPromisesMock.mockReturnValue(Promise.resolve([[], [error404, error200], []])); - const { rerender } = testHook(() => useDetectHelmChartRepositories(setFeatureFlag)); + const { rerender } = renderHook(() => useDetectHelmChartRepositories(setFeatureFlag)); await act(async () => { rerender(); }); diff --git a/frontend/packages/knative-plugin/src/hooks/__tests__/useBootstrapServers.spec.ts b/frontend/packages/knative-plugin/src/hooks/__tests__/useBootstrapServers.spec.ts index e2653472be3..b86dab8d9fc 100644 --- a/frontend/packages/knative-plugin/src/hooks/__tests__/useBootstrapServers.spec.ts +++ b/frontend/packages/knative-plugin/src/hooks/__tests__/useBootstrapServers.spec.ts @@ -1,5 +1,5 @@ +import { renderHook } from '@testing-library/react'; import { useK8sWatchResources } from '@console/internal/components/utils/k8s-watch-hook'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; import { Kafkas } from '../../utils/__tests__/knative-serving-data'; import { useBootstrapServers } from '../useBootstrapServers'; @@ -14,7 +14,7 @@ describe('useBootstrapServers', () => { kafkaconnections: { data: [], loaded: false }, }); - const { result } = testHook(() => useBootstrapServers('app-test')); + const { result } = renderHook(() => useBootstrapServers('app-test')); expect(result.current).toEqual([ [{ disabled: true, value: 'Loading bootstrap servers...' }], '...', @@ -27,7 +27,7 @@ describe('useBootstrapServers', () => { kafkaconnections: { data: [], loaded: true, loadError: { message: 'loading error' } }, }); - const { result } = testHook(() => useBootstrapServers('app-test')); + const { result } = renderHook(() => useBootstrapServers('app-test')); expect(result.current).toEqual([ [], 'loading error, loading error. Try adding bootstrap servers manually.', @@ -40,7 +40,7 @@ describe('useBootstrapServers', () => { kafkaconnections: { data: [], loaded: true }, }); - const { result } = testHook(() => useBootstrapServers('app-test')); + const { result } = renderHook(() => useBootstrapServers('app-test')); expect(result.current[0]).toHaveLength(5); expect(result.current[1]).toEqual('Add bootstrap servers'); }); diff --git a/frontend/packages/topology/src/filters/__tests__/useSearchFilter.spec.ts b/frontend/packages/topology/src/filters/__tests__/useSearchFilter.spec.ts index 149ac38ad34..6e6bde21319 100644 --- a/frontend/packages/topology/src/filters/__tests__/useSearchFilter.spec.ts +++ b/frontend/packages/topology/src/filters/__tests__/useSearchFilter.spec.ts @@ -1,12 +1,12 @@ -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import { renderHook } from '@testing-library/react'; import { useSearchFilter } from '../useSearchFilter'; jest.mock('../filter-utils', () => ({ getTopologySearchQuery: jest.fn(), })); -let mockCurrentSearchQuery = ''; -let mockLabelsQuery = ''; +let mockCurrentSearchQuery: string | null | undefined = ''; +let mockLabelsQuery: string | null | undefined = ''; jest.mock('@console/shared', () => { const ActualShared = jest.requireActual('@console/shared'); @@ -17,78 +17,125 @@ jest.mock('@console/shared', () => { }; }); -const testUseSearchFilter = ( - text: string | null | undefined, - searchQuery: string | undefined, - labels?: { [key: string]: string }, - labelsQuery?: string, -): ReturnType => { - mockCurrentSearchQuery = searchQuery; - mockLabelsQuery = labelsQuery; - // eslint-disable-next-line react-hooks/rules-of-hooks - return useSearchFilter(text, labels); -}; - describe('useSearchFilter', () => { it('should handle null | undefined text', () => { - testHook(() => { - expect(testUseSearchFilter(null, 'test')[0]).toBe(false); - expect(testUseSearchFilter(null, '')[0]).toBe(false); - expect(testUseSearchFilter(null, undefined)[0]).toBe(false); - expect(testUseSearchFilter(undefined, 'test')[0]).toBe(false); - expect(testUseSearchFilter(undefined, '')[0]).toBe(false); - expect(testUseSearchFilter(undefined, undefined)[0]).toBe(false); - }); + mockCurrentSearchQuery = 'test'; + mockLabelsQuery = ''; + const { result: r1 } = renderHook(() => useSearchFilter(null)); + expect(r1.current[0]).toBe(false); + + mockCurrentSearchQuery = ''; + const { result: r2 } = renderHook(() => useSearchFilter(null)); + expect(r2.current[0]).toBe(false); + + mockCurrentSearchQuery = undefined; + const { result: r3 } = renderHook(() => useSearchFilter(null)); + expect(r3.current[0]).toBe(false); + + mockCurrentSearchQuery = 'test'; + const { result: r4 } = renderHook(() => useSearchFilter(undefined)); + expect(r4.current[0]).toBe(false); + + mockCurrentSearchQuery = ''; + const { result: r5 } = renderHook(() => useSearchFilter(undefined)); + expect(r5.current[0]).toBe(false); + + mockCurrentSearchQuery = undefined; + const { result: r6 } = renderHook(() => useSearchFilter(undefined)); + expect(r6.current[0]).toBe(false); }); it('should fuzzy match text to search query', () => { - testHook(() => { - expect(testUseSearchFilter('testing', 'testing')[0]).toBe(true); - expect(testUseSearchFilter('testing', 'ei')[0]).toBe(true); - expect(testUseSearchFilter('testing', 'foobar')[0]).toBe(false); - expect(testUseSearchFilter('testing', 'z')[0]).toBe(false); - expect(testUseSearchFilter('testing', undefined)[0]).toBe(false); - }); + mockLabelsQuery = ''; + mockCurrentSearchQuery = 'testing'; + const { result: r1 } = renderHook(() => useSearchFilter('testing')); + expect(r1.current[0]).toBe(true); + + mockCurrentSearchQuery = 'ei'; + const { result: r2 } = renderHook(() => useSearchFilter('testing')); + expect(r2.current[0]).toBe(true); + + mockCurrentSearchQuery = 'foobar'; + const { result: r3 } = renderHook(() => useSearchFilter('testing')); + expect(r3.current[0]).toBe(false); + + mockCurrentSearchQuery = 'z'; + const { result: r4 } = renderHook(() => useSearchFilter('testing')); + expect(r4.current[0]).toBe(false); + + mockCurrentSearchQuery = undefined; + const { result: r5 } = renderHook(() => useSearchFilter('testing')); + expect(r5.current[0]).toBe(false); }); it('should match case insensitive', () => { - testHook(() => { - expect(testUseSearchFilter('testing', 'TEST')[0]).toBe(true); - expect(testUseSearchFilter('testing', 'EI')[0]).toBe(true); - }); + mockLabelsQuery = ''; + mockCurrentSearchQuery = 'TEST'; + const { result: r1 } = renderHook(() => useSearchFilter('testing')); + expect(r1.current[0]).toBe(true); + + mockCurrentSearchQuery = 'EI'; + const { result: r2 } = renderHook(() => useSearchFilter('testing')); + expect(r2.current[0]).toBe(true); }); it('should match labels to labels query even if the name filter does not match', () => { - testHook(() => { - expect(testUseSearchFilter(null, 'test', { foo: 'bar' }, 'foo=bar')[0]).toBe(true); - expect( - testUseSearchFilter(null, 'test', { foo: 'bar', bar: 'baz' }, 'foo=bar,bar=baz')[0], - ).toBe(true); - }); + mockCurrentSearchQuery = 'test'; + mockLabelsQuery = 'foo=bar'; + const { result: r1 } = renderHook(() => useSearchFilter(null, { foo: 'bar' })); + expect(r1.current[0]).toBe(true); + + mockLabelsQuery = 'foo=bar,bar=baz'; + const { result: r2 } = renderHook(() => useSearchFilter(null, { foo: 'bar', bar: 'baz' })); + expect(r2.current[0]).toBe(true); }); it('should match text to search query even if the labels filter does not match', () => { - testHook(() => { - expect(testUseSearchFilter('test', 'test', { foo: 'bar' }, 'foo=')[0]).toBe(true); - expect(testUseSearchFilter('search', 'search', {}, 'foo=bar')[0]).toBe(true); - }); + mockCurrentSearchQuery = 'test'; + mockLabelsQuery = 'foo='; + const { result: r1 } = renderHook(() => useSearchFilter('test', { foo: 'bar' })); + expect(r1.current[0]).toBe(true); + + mockCurrentSearchQuery = 'search'; + mockLabelsQuery = 'foo=bar'; + const { result: r2 } = renderHook(() => useSearchFilter('search', {})); + expect(r2.current[0]).toBe(true); }); it('should not match labels to labels query', () => { - testHook(() => { - expect(testUseSearchFilter(null, null, { foo: 'test' }, 'foo=bar,bar=baz')[0]).toBe(false); - expect(testUseSearchFilter(null, null, { foo: 'bar' }, '')[0]).toBe(false); - expect(testUseSearchFilter(null, null, { foo: 'bar' }, null)[0]).toBe(false); - expect(testUseSearchFilter(null, null, {}, null)[0]).toBe(false); - expect(testUseSearchFilter(null, null, { foo: 'bar' }, 'foo=bar,bar=baz')[0]).toBe(false); - }); + mockCurrentSearchQuery = null; + mockLabelsQuery = 'foo=bar,bar=baz'; + const { result: r1 } = renderHook(() => useSearchFilter(null, { foo: 'test' })); + expect(r1.current[0]).toBe(false); + + mockLabelsQuery = ''; + const { result: r2 } = renderHook(() => useSearchFilter(null, { foo: 'bar' })); + expect(r2.current[0]).toBe(false); + + mockLabelsQuery = null; + const { result: r3 } = renderHook(() => useSearchFilter(null, { foo: 'bar' })); + expect(r3.current[0]).toBe(false); + + const { result: r4 } = renderHook(() => useSearchFilter(null, {})); + expect(r4.current[0]).toBe(false); + + mockLabelsQuery = 'foo=bar,bar=baz'; + const { result: r5 } = renderHook(() => useSearchFilter(null, { foo: 'bar' })); + expect(r5.current[0]).toBe(false); }); it('should return search query', () => { - testHook(() => { - expect(testUseSearchFilter(null, undefined)[1]).toBe(undefined); - expect(testUseSearchFilter(null, null)[1]).toBe(null); - expect(testUseSearchFilter(null, 'test')[1]).toBe('test'); - }); + mockLabelsQuery = ''; + mockCurrentSearchQuery = undefined; + const { result: r1 } = renderHook(() => useSearchFilter(null)); + expect(r1.current[1]).toBe(undefined); + + mockCurrentSearchQuery = null; + const { result: r2 } = renderHook(() => useSearchFilter(null)); + expect(r2.current[1]).toBe(null); + + mockCurrentSearchQuery = 'test'; + const { result: r3 } = renderHook(() => useSearchFilter(null)); + expect(r3.current[1]).toBe('test'); }); }); diff --git a/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useActivityTick.spec.ts b/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useActivityTick.spec.ts index 1447a94fee7..3eedbf61138 100644 --- a/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useActivityTick.spec.ts +++ b/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useActivityTick.spec.ts @@ -1,4 +1,4 @@ -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import { renderHook } from '@testing-library/react'; import * as cloudShellUtils from '../cloud-shell-utils'; import useActivityTick from '../useActivityTick'; @@ -21,36 +21,35 @@ describe('useActivityTick', () => { it('should notify if activity occurs after 1 min', () => { let mockNow = Date.now(); jest.spyOn(Date, 'now').mockImplementation(() => mockNow); - testHook(() => { - const tick = useActivityTick('testName', 'testNamespace'); - - // send initial tick - tick(); - expect(sendActivityTickMock).toHaveBeenCalledWith('testName', 'testNamespace'); - sendActivityTickMock.mockReset(); - - // elapsed time isn't long enough to trigger sending a new tick - mockNow += 59000; - tick(); - - // reset mock to test count - expect(sendActivityTickMock).toHaveBeenCalledTimes(0); - - // elapsed time is now long enough to trigger sending a tick - mockNow += 1000; - tick(); - expect(sendActivityTickMock).toHaveBeenCalledWith('testName', 'testNamespace'); - expect(sendActivityTickMock).toHaveBeenCalledTimes(1); - - // multiple ticks within the time interval does not result sending tick - tick(); - tick(); - expect(sendActivityTickMock).toHaveBeenCalledTimes(1); - - // advance time enough to send a tick - mockNow += 600000; - tick(); - expect(sendActivityTickMock).toHaveBeenCalledTimes(2); - }); + const { result } = renderHook(() => useActivityTick('testName', 'testNamespace')); + const tick = () => result.current(); + + // send initial tick + tick(); + expect(sendActivityTickMock).toHaveBeenCalledWith('testName', 'testNamespace'); + sendActivityTickMock.mockReset(); + + // elapsed time isn't long enough to trigger sending a new tick + mockNow += 59000; + tick(); + + // reset mock to test count + expect(sendActivityTickMock).toHaveBeenCalledTimes(0); + + // elapsed time is now long enough to trigger sending a tick + mockNow += 1000; + tick(); + expect(sendActivityTickMock).toHaveBeenCalledWith('testName', 'testNamespace'); + expect(sendActivityTickMock).toHaveBeenCalledTimes(1); + + // multiple ticks within the time interval does not result sending tick + tick(); + tick(); + expect(sendActivityTickMock).toHaveBeenCalledTimes(1); + + // advance time enough to send a tick + mockNow += 600000; + tick(); + expect(sendActivityTickMock).toHaveBeenCalledTimes(2); }); }); diff --git a/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useCloudShellAvailable.spec.ts b/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useCloudShellAvailable.spec.ts index 76f62c87084..c1aa09ff7b1 100644 --- a/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useCloudShellAvailable.spec.ts +++ b/frontend/packages/webterminal-plugin/src/components/cloud-shell/__tests__/useCloudShellAvailable.spec.ts @@ -1,5 +1,4 @@ -import { act } from '@testing-library/react'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; +import { act, renderHook } from '@testing-library/react'; import { checkTerminalAvailable } from '../cloud-shell-utils'; import { useCloudShellAvailable } from '../useCloudShellAvailable'; // Need to import useFlag after useCloudShellAvailable for the mock to work correctly. FInd out why? @@ -26,14 +25,14 @@ jest.mock('@console/shared/src/hooks/flag', () => { describe('useCloudShellAvailable', () => { it('should unavailable if flag is unavailable', () => { useFlagMock.mockReturnValue(false); - const { result } = testHook(() => useCloudShellAvailable()); + const { result } = renderHook(() => useCloudShellAvailable()); expect(result.current).toBe(false); }); it('should be unavailable if flag is set but service is unavailable', async () => { useFlagMock.mockReturnValue(true); checkTerminalAvailableMock.mockReturnValue(Promise.reject()); - const { result, rerender } = testHook(() => useCloudShellAvailable()); + const { result, rerender } = renderHook(() => useCloudShellAvailable()); await act(async () => { rerender(); }); @@ -43,7 +42,7 @@ describe('useCloudShellAvailable', () => { it('should be available if flag is set and service is available', async () => { useFlagMock.mockReturnValue(true); checkTerminalAvailableMock.mockReturnValue(Promise.resolve()); - const { result, rerender } = testHook(() => useCloudShellAvailable()); + const { result, rerender } = renderHook(() => useCloudShellAvailable()); await act(async () => { rerender(); diff --git a/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-alert-receiver-link.spec.ts b/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-alert-receiver-link.spec.ts index 46155a50262..9a1c75758f4 100644 --- a/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-alert-receiver-link.spec.ts +++ b/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-alert-receiver-link.spec.ts @@ -1,11 +1,10 @@ +import { renderHook } from '@testing-library/react'; import { Base64 } from 'js-base64'; import { SecretKind } from '@console/internal/module/k8s'; import { useAccessReview } from '@console/internal/components/utils/rbac'; import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; - import { useAlertReceiverLink } from '../cluster-setup-alert-receiver-link'; jest.mock('@console/internal/components/utils/rbac', () => ({ @@ -112,7 +111,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(false); useK8sWatchResourceMock.mockReturnValue([undefined, true, undefined]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toBe(null); expect(useK8sWatchResourceMock).toHaveBeenCalledTimes(1); @@ -123,7 +122,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([undefined, false, undefined]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toBe(null); expect(useK8sWatchResourceMock).toHaveBeenCalledTimes(1); @@ -140,7 +139,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([null, true, null]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toBe(null); }); @@ -150,7 +149,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([oauthSecret, true, null]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toBe(null); }); @@ -164,7 +163,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([oauthSecret, true, null]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toEqual({ id: 'alert-receivers', @@ -182,7 +181,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([oauthSecret, true, null]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toBe(null); }); @@ -191,7 +190,7 @@ describe('useAlertReceiverLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([null, true, new Error('Any error')]); - const { result } = testHook(() => useAlertReceiverLink()); + const { result } = renderHook(() => useAlertReceiverLink()); expect(result.current).toBe(null); }); diff --git a/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-identity-provider-link.spec.ts b/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-identity-provider-link.spec.ts index e86ba768354..3310fa8f0c6 100644 --- a/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-identity-provider-link.spec.ts +++ b/frontend/public/components/dashboard/dashboards-page/cluster-dashboard/getting-started/__tests__/cluster-setup-identity-provider-link.spec.ts @@ -1,9 +1,8 @@ +import { renderHook } from '@testing-library/react'; import { useAccessReview } from '@console/internal/components/utils/rbac'; import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook'; import { OAuthKind } from '@console/internal/module/k8s'; -import { testHook } from '@console/shared/src/test-utils/hooks-utils'; - import { useIdentityProviderLink } from '../cluster-setup-identity-provider-link'; jest.mock('@console/internal/components/utils/rbac', () => ({ @@ -26,7 +25,7 @@ describe('useIdentityProviderLink', () => { useAccessReviewMock.mockReturnValue(false); useK8sWatchResourceMock.mockReturnValue([undefined, true, undefined]); - const { result } = testHook(() => useIdentityProviderLink()); + const { result } = renderHook(() => useIdentityProviderLink()); expect(result.current).toBe(null); expect(useK8sWatchResourceMock).toHaveBeenCalledTimes(1); @@ -37,7 +36,7 @@ describe('useIdentityProviderLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([undefined, false, undefined]); - const { result } = testHook(() => useIdentityProviderLink()); + const { result } = renderHook(() => useIdentityProviderLink()); expect(result.current).toBe(null); expect(useK8sWatchResourceMock).toHaveBeenCalledTimes(1); @@ -58,7 +57,7 @@ describe('useIdentityProviderLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([oauthData, true, null]); - const { result } = testHook(() => useIdentityProviderLink()); + const { result } = renderHook(() => useIdentityProviderLink()); expect(result.current).toEqual({ id: 'identity-providers', @@ -85,7 +84,7 @@ describe('useIdentityProviderLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([oauthData, true, null]); - const { result } = testHook(() => useIdentityProviderLink()); + const { result } = renderHook(() => useIdentityProviderLink()); expect(result.current).toBe(null); }); @@ -94,7 +93,7 @@ describe('useIdentityProviderLink', () => { useAccessReviewMock.mockReturnValue(true); useK8sWatchResourceMock.mockReturnValue([null, true, new Error('Any error')]); - const { result } = testHook(() => useIdentityProviderLink()); + const { result } = renderHook(() => useIdentityProviderLink()); expect(result.current).toBe(null); });