CONSOLE-5073: Fix redux related types

Author: logonoff

frontend/packages/console-app/src/components/detect-namespace/__tests__/namespace.spec.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { act, renderHook } from '@testing-library/react';
 import { useDispatch } from 'react-redux';
+import type { Location } from 'react-router-dom-v5-compat';
 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';
@@ -41,19 +42,22 @@ jest.mock('../../user-preferences/namespace/usePreferredNamespace', () => ({
   usePreferredNamespace: jest.fn(),
 }));
 
-const useDispatchMock = useDispatch as jest.Mock;
-const useFlagMock = useFlag as jest.Mock;
-const useLocationMock = useLocation as jest.Mock;
-const useLastNamespaceMock = useLastNamespace as jest.Mock;
-const usePreferredNamespaceMock = usePreferredNamespace as jest.Mock;
-const k8sGetMock = k8sGet as jest.Mock;
-const useStateMock = useState as jest.Mock;
+const useDispatchMock = useDispatch as jest.MockedFunction<typeof useDispatch>;
+const useFlagMock = useFlag as jest.MockedFunction<typeof useFlag>;
+const useLocationMock = useLocation as jest.MockedFunction<typeof useLocation>;
+const useLastNamespaceMock = useLastNamespace as jest.MockedFunction<typeof useLastNamespace>;
+const usePreferredNamespaceMock = usePreferredNamespace as jest.MockedFunction<
+  typeof usePreferredNamespace
+>;
+const k8sGetMock = k8sGet as jest.MockedFunction<typeof k8sGet>;
+const useStateMock = useState as jest.MockedFunction<typeof useState>;
 
 const activeNamespace = 'active-ns';
 const urlNamespace: string = 'url-ns';
-const getLocationData = (valid = true) => ({
-  pathname: valid ? `home/ns/${urlNamespace}` : 'home/invalid',
-});
+const getLocationData = (valid = true) =>
+  ({
+    pathname: valid ? `home/ns/${urlNamespace}` : 'home/invalid',
+  } as Location);
 const lastNamespace: string = 'last-ns';
 const preferredNamespace: string = 'preferred-ns';
 

frontend/packages/console-app/src/components/tour/__tests__/tour-context.spec.ts

@@ -23,7 +23,7 @@ jest.mock('@console/dynamic-plugin-sdk/src/perspective/useActivePerspective', ()
   default: () => ['dev', jest.fn()],
 }));
 
-const useSelectorMock = useSelector as jest.Mock;
+const useSelectorMock = useSelector as jest.MockedFunction<typeof useSelector>;
 const useResolvedExtensionsMock = useResolvedExtensions as jest.Mock;
 const useUserPreferenceCompatibilityMock = useUserPreferenceCompatibility as jest.Mock;
 

frontend/packages/console-shared/src/components/editor/__tests__/CodeEditorToolbar.spec.tsx

@@ -17,13 +17,17 @@ jest.mock('../../../hooks/ols-hook', () => ({
   useOLSConfig: jest.fn(),
 }));
 
+const useDispatchMock = useDispatch as jest.MockedFunction<typeof useDispatch>;
+const useOLSConfigMock = useOLSConfig as jest.MockedFunction<typeof useOLSConfig>;
+const useTranslationMock = useTranslation as jest.Mock;
+
 describe('CodeEditorToolbar', () => {
   const mockDispatch = jest.fn();
 
   beforeEach(() => {
     jest.clearAllMocks();
-    (useTranslation as jest.Mock).mockReturnValue({ t: (key: string) => key });
-    (useDispatch as jest.Mock).mockReturnValue(mockDispatch);
+    useTranslationMock.mockReturnValue({ t: (key: string) => key });
+    useDispatchMock.mockReturnValue(mockDispatch);
   });
 
   it('should render null when showShortcuts is false and toolbarLinks is empty', () => {
@@ -37,19 +41,19 @@ describe('CodeEditorToolbar', () => {
   });
 
   it('should render "Ask OpenShift Lightspeed" button when showLightspeedButton is true', () => {
-    (useOLSConfig as jest.Mock).mockReturnValue(true);
+    useOLSConfigMock.mockReturnValue(true);
     render(<AskOpenShiftLightspeedButton />);
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('should not render "Ask OpenShift Lightspeed" button when showLightspeedButton is false', () => {
-    (useOLSConfig as jest.Mock).mockReturnValue(false);
+    useOLSConfigMock.mockReturnValue(false);
     render(<AskOpenShiftLightspeedButton />);
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
 
   it('should dispatch OpenOLS action when "Ask OpenShift Lightspeed" button is clicked', () => {
-    (useOLSConfig as jest.Mock).mockReturnValue(true);
+    useOLSConfigMock.mockReturnValue(true);
     render(<AskOpenShiftLightspeedButton />);
     const button = screen.getByRole('button');
     fireEvent.click(button);

frontend/packages/console-shared/src/hooks/__tests__/useGetUserSettingConfigMap.spec.ts

@@ -8,7 +8,7 @@ import { useGetUserSettingConfigMap } from '../useGetUserSettingConfigMap';
 
 // Mock dependencies
 const useK8sWatchResourceMock = useK8sWatchResource as jest.Mock;
-const useSelectorMock = useSelector as jest.Mock;
+const useSelectorMock = useSelector as jest.MockedFunction<typeof useSelector>;
 
 jest.mock('@console/internal/components/utils/k8s-watch-hook', () => ({
   useK8sWatchResource: jest.fn(),

frontend/packages/console-shared/src/hooks/__tests__/useUser.spec.ts

@@ -1,5 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { useSelector, useDispatch } from 'react-redux';
+import type { K8sResourceKind } from '@console/dynamic-plugin-sdk/src';
 import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
 import { useUser } from '../useUser';
 
@@ -19,6 +20,11 @@ jest.mock('@console/internal/components/utils/k8s-get-hook', () => ({
   useK8sGet: jest.fn(),
 }));
 
+const baseUserResource: K8sResourceKind = {
+  apiVersion: 'user.openshift.io/v1',
+  kind: 'User',
+};
+
 const mockSetUserResource = jest.fn((userResource) => ({
   type: 'setUserResource',
   payload: { userResource },
@@ -31,26 +37,30 @@ jest.mock('@console/dynamic-plugin-sdk', () => ({
   setUserResource: (userResource: unknown) => mockSetUserResource(userResource),
 }));
 
-const mockDispatch = jest.fn();
-const mockUseSelector = useSelector as jest.Mock;
-const mockUseK8sGet = useK8sGet as jest.Mock;
-const mockUseDispatch = useDispatch as jest.Mock;
+const dispatchMock = jest.fn();
+const useSelectorMock = useSelector as jest.MockedFunction<typeof useSelector>;
+const useDispatchMock = useDispatch as jest.MockedFunction<typeof useDispatch>;
+const useK8sGetMock = useK8sGet as jest.MockedFunction<typeof useK8sGet>;
 
 describe('useUser', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseDispatch.mockReturnValue(mockDispatch);
+    useDispatchMock.mockReturnValue(dispatchMock);
   });
 
   it('should return user data with displayName from fullName when available', () => {
     const mockUser = { username: 'testuser@example.com', uid: '123' };
-    const mockUserResource = { fullName: 'Test User', identities: ['testuser'] };
+    const mockUserResource = {
+      ...baseUserResource,
+      fullName: 'Test User',
+      identities: ['testuser'],
+    };
 
-    mockUseSelector
+    useSelectorMock
       .mockReturnValueOnce(mockUser) // for getUser
       .mockReturnValueOnce(mockUserResource); // for getUserResource
 
-    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+    useK8sGetMock.mockReturnValue([mockUserResource, true, null]);
 
     const { result } = renderHook(() => useUser());
 
@@ -63,11 +73,11 @@ describe('useUser', () => {
 
   it('should fallback to username when fullName is not available', () => {
     const mockUser = { username: 'testuser@example.com', uid: '123' };
-    const mockUserResource = { identities: ['testuser'] }; // No fullName
+    const mockUserResource = { ...baseUserResource, identities: ['testuser'] }; // No fullName
 
-    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
+    useSelectorMock.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
 
-    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+    useK8sGetMock.mockReturnValue([mockUserResource, true, null]);
 
     const { result } = renderHook(() => useUser());
 
@@ -77,27 +87,27 @@ describe('useUser', () => {
 
   it('should dispatch setUserResource when user resource is loaded', () => {
     const mockUser = { username: 'testuser@example.com' };
-    const mockUserResource = { fullName: 'Test User' };
+    const mockUserResource = { ...baseUserResource, fullName: 'Test User' };
 
-    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(null); // No userResource in Redux yet
+    useSelectorMock.mockReturnValueOnce(mockUser).mockReturnValueOnce(null); // No userResource in Redux yet
 
-    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+    useK8sGetMock.mockReturnValue([mockUserResource, true, null]);
 
     renderHook(() => useUser());
 
-    expect(mockDispatch).toHaveBeenCalledWith({
+    expect(dispatchMock).toHaveBeenCalledWith({
       type: 'setUserResource',
       payload: { userResource: mockUserResource },
     });
   });
 
   it('should handle edge cases with empty strings and fallback to "Unknown user"', () => {
     const mockUser = { username: '' }; // Empty username
-    const mockUserResource = { fullName: '   ' }; // Whitespace-only fullName
+    const mockUserResource = { ...baseUserResource, fullName: '   ' }; // Whitespace-only fullName
 
-    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
+    useSelectorMock.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
 
-    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+    useK8sGetMock.mockReturnValue([mockUserResource, true, null]);
 
     const { result } = renderHook(() => useUser());
 
@@ -106,11 +116,11 @@ describe('useUser', () => {
 
   it('should trim whitespace from fullName and username', () => {
     const mockUser = { username: '  testuser@example.com  ' };
-    const mockUserResource = { fullName: '  Test User  ' };
+    const mockUserResource = { ...baseUserResource, fullName: '  Test User  ' };
 
-    mockUseSelector.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
+    useSelectorMock.mockReturnValueOnce(mockUser).mockReturnValueOnce(mockUserResource);
 
-    mockUseK8sGet.mockReturnValue([mockUserResource, true, null]);
+    useK8sGetMock.mockReturnValue([mockUserResource, true, null]);
 
     const { result } = renderHook(() => useUser());
 

frontend/packages/console-shared/src/hooks/__tests__/useUserPreference.spec.ts

@@ -11,10 +11,12 @@ import {
 import { useUserPreference } from '../useUserPreference';
 
 const useK8sWatchResourceMock = useK8sWatchResource as jest.Mock;
-const createConfigMapMock = createConfigMap as jest.Mock;
-const updateConfigMapMock = updateConfigMap as jest.Mock;
-const useSelectorMock = useSelector as jest.Mock;
-const useFavoritesOptionsMock = useFavoritesOptions as jest.Mock;
+const createConfigMapMock = createConfigMap as jest.MockedFunction<typeof createConfigMap>;
+const updateConfigMapMock = updateConfigMap as jest.MockedFunction<typeof updateConfigMap>;
+const useSelectorMock = useSelector as jest.MockedFunction<typeof useSelector>;
+const useFavoritesOptionsMock = useFavoritesOptions as jest.MockedFunction<
+  typeof useFavoritesOptions
+>;
 
 jest.mock('@console/internal/components/useFavoritesOptions', () => ({
   useFavoritesOptions: jest.fn(),

frontend/packages/console-shared/src/test-utils/unit-test-utils.tsx

@@ -25,7 +25,7 @@ type WrapperProps = {
 };
 
 // Create a Redux store with reducer and initial state.
-const rootReducer = combineReducers<RootState>(baseReducers);
+const rootReducer = combineReducers(baseReducers);
 const setupStore = (initialState?: Partial<RootState>) => {
   const store = createStore(rootReducer, initialState);
   // Set the store in storeHandler so that modules like rbac.tsx can access it

frontend/packages/dev-console/src/utils/__tests__/usePerspectiveDetection.spec.ts

@@ -7,9 +7,11 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
+const useSelectorMock = useSelector as jest.MockedFunction<typeof useSelector>;
+
 describe('usePerspectiveDetection', () => {
   it('should return loading as true if CAN_GET_NS flag is pending', () => {
-    (useSelector as jest.Mock).mockImplementation(() => ({
+    useSelectorMock.mockImplementation(() => ({
       CAN_GET_NS: undefined,
     }));
 
@@ -21,7 +23,7 @@ describe('usePerspectiveDetection', () => {
   });
 
   it('should return loading as false if CAN_GET_NS flag is loaded', () => {
-    (useSelector as jest.Mock).mockImplementation(() => ({
+    useSelectorMock.mockImplementation(() => ({
       CAN_GET_NS: false,
     }));
 

frontend/packages/knative-plugin/src/components/add/__tests__/EventSink.spec.tsx

@@ -7,7 +7,7 @@ import {
 } from '../__mocks__/Kamelet-data';
 import EventSink from '../EventSink';
 
-const useSelectorMock = useSelector as jest.Mock;
+const useSelectorMock = useSelector as jest.MockedFunction<typeof useSelector>;
 
 jest.mock('react-redux', () => {
   const originalModule = jest.requireActual('react-redux');

frontend/public/redux.ts

@@ -36,9 +36,10 @@ export const baseReducers = Object.freeze({
   ...SDKReducers,
 });
 
+// TODO: Refactor to redux toolkit configureStore
 const store = createStore(
-  combineReducers<RootState>(baseReducers),
-  {},
+  combineReducers(baseReducers),
+  {} as RootState,
   composeEnhancers(applyMiddleware(thunk, featureFlagMiddleware)),
 );
 
@@ -56,7 +57,7 @@ export const applyReduxExtensions = (reducerExtensions: ResolvedExtension<ReduxR
     ? baseReducers
     : { plugins: combineReducers(pluginReducers), ...baseReducers };
 
-  store.replaceReducer(combineReducers<RootState>(nextReducers));
+  store.replaceReducer(combineReducers(nextReducers));
 };
 
 if (process.env.NODE_ENV !== 'production') {