Merge pull request #15540 from cajieh/migrate-enzyme-console-dynamic-plugin-sdk-unit-tests-rtl

CONSOLE-4603: Migrate enzyme "packages/console-dynamic-plugin-sdk" unit tests to Re…

Author: openshift-merge-bot[bot]

frontend/packages/console-dynamic-plugin-sdk/src/app/__tests__/AppInitSDK.spec.tsx

@@ -1,113 +1,89 @@
-import { shallow, mount } from 'enzyme';
-import { Provider } from 'react-redux';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import * as reactRedux from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import AppInitSDK from '../AppInitSDK';
 import * as configSetup from '../configSetup';
 import * as apiDiscovery from '../k8s/api-discovery/api-discovery';
 import * as hooks from '../useReduxStore';
 
-jest.mock('react-redux', () => {
-  const ActualReactRedux = jest.requireActual('react-redux');
-  return {
-    ...ActualReactRedux,
-    useStore: jest.fn(),
-  };
-});
+jest.mock('react-redux', () => ({
+  Provider: jest.fn(({ children }) => children),
+}));
+
+jest.mock('../useReduxStore', () => ({
+  useReduxStore: jest.fn(),
+}));
+
+jest.mock('../configSetup', () => ({
+  setUtilsConfig: jest.fn(),
+}));
+
+jest.mock('../k8s/api-discovery/api-discovery', () => ({
+  initApiDiscovery: jest.fn(),
+}));
+
+const { useReduxStore: useReduxStoreMock } = hooks as jest.Mocked<typeof hooks>;
+const mockStore = configureMockStore([thunk]);
+const store = mockStore({});
+const mockProvider = (reactRedux as jest.Mocked<typeof reactRedux>).Provider;
+const mockConfig = { appFetch: jest.fn() };
+const mockApiDiscoveryConfig = { apiDiscovery: jest.fn(), appFetch: jest.fn() };
 
 describe('AppInitSDK', () => {
-  const mockStore = configureMockStore();
-  const store = mockStore([thunk]);
-  const mockConfig = {
-    apiDiscovery: jest.fn(),
-    appFetch: jest.fn(),
+  const renderAppInitSDK = (config, storeContext = { store, storeContextPresent: true }) => {
+    useReduxStoreMock.mockReturnValue(storeContext);
+    return render(
+      <AppInitSDK configurations={config}>
+        <div>Hello, OpenShift!</div>
+      </AppInitSDK>,
+    );
   };
 
-  let useReduxStoreSpy;
-  let configSetupSpy;
-  beforeEach(() => {
-    useReduxStoreSpy = jest.spyOn(hooks, 'useReduxStore');
-    configSetupSpy = jest.spyOn(configSetup, 'setUtilsConfig');
-  });
-
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
 
   it('should not wrap children with Provider', () => {
-    useReduxStoreSpy.mockImplementation(() => ({ store, storeContextPresent: true }));
-    const wrapper = shallow(
-      <AppInitSDK configurations={mockConfig}>
-        <div data-test-id="child-id">Hello!!</div>
-      </AppInitSDK>,
-    );
-    expect(wrapper.find(Provider)).toHaveLength(0);
-    expect(wrapper.find('[data-test-id="child-id"]')).toHaveLength(1);
+    renderAppInitSDK(mockConfig, { store, storeContextPresent: true });
+
+    expect(mockProvider).not.toHaveBeenCalled();
+    expect(screen.getByText('Hello, OpenShift!')).toBeVisible();
   });
 
-  it('should wrap children with Provider', () => {
-    useReduxStoreSpy.mockImplementation(() => ({ store, storeContextPresent: false }));
-    const wrapper = shallow(
-      <AppInitSDK configurations={mockConfig}>
-        <div data-test-id="child-id">Hello!!</div>
-      </AppInitSDK>,
-    );
-    expect(wrapper.find(Provider)).toHaveLength(1);
-    expect(wrapper.find('[data-test-id="child-id"]')).toHaveLength(1);
+  it('should wrap children with a Provider if no store context is present', () => {
+    renderAppInitSDK(mockConfig, { store, storeContextPresent: false });
+
+    expect(mockProvider).toHaveBeenCalled();
+    expect(screen.getByText('Hello, OpenShift!')).toBeVisible();
   });
 
-  it('should call the hook useReduxStore', () => {
-    useReduxStoreSpy.mockImplementation(() => ({ store, storeContextPresent: true }));
-    shallow(
-      <AppInitSDK configurations={mockConfig}>
-        <div data-test-id="child-id">Hello!!</div>
-      </AppInitSDK>,
-    );
-    expect(useReduxStoreSpy).toHaveBeenCalled();
-    expect(useReduxStoreSpy).toHaveBeenCalledTimes(1);
+  it('should call the useReduxStore hook', () => {
+    renderAppInitSDK(mockConfig, { store, storeContextPresent: true });
+
+    expect(useReduxStoreMock).toHaveBeenCalledTimes(1);
   });
 
-  it('should call the util setUtilsConfig with proper config', () => {
-    useReduxStoreSpy.mockImplementation(() => ({ store, storeContextPresent: true }));
-    mount(
-      <AppInitSDK configurations={mockConfig}>
-        <div data-test-id="child-id">Hello!!</div>
-      </AppInitSDK>,
-    );
-    expect(configSetupSpy).toHaveBeenCalled();
-    expect(configSetupSpy).toHaveBeenCalledTimes(1);
-    expect(configSetupSpy).toHaveBeenCalledWith({ appFetch: mockConfig.appFetch });
+  it('should call the setUtilsConfig utility with the proper config', () => {
+    renderAppInitSDK(mockConfig, { store, storeContextPresent: true });
+
+    expect(configSetup.setUtilsConfig).toHaveBeenCalledTimes(1);
+    expect(configSetup.setUtilsConfig).toHaveBeenCalledWith({ appFetch: mockConfig.appFetch });
   });
 
-  it('should call apiDiscovery with store instance if provided and not default one', () => {
-    useReduxStoreSpy.mockImplementation(() => ({ store, storeContextPresent: true }));
-    const initApiDiscoverySpy = jest.spyOn(apiDiscovery, 'initApiDiscovery');
-    initApiDiscoverySpy.mockImplementation(jest.fn());
-    mount(
-      <AppInitSDK configurations={mockConfig}>
-        <div data-test-id="child-id">Hello!!</div>
-      </AppInitSDK>,
-    );
-    expect(mockConfig.apiDiscovery).toHaveBeenCalled();
-    expect(mockConfig.apiDiscovery).toHaveBeenCalledTimes(1);
-    expect(mockConfig.apiDiscovery).toHaveBeenCalledWith(store);
-    expect(initApiDiscoverySpy).toHaveBeenCalledTimes(0);
+  it('should call the provided apiDiscovery function if it exists', () => {
+    renderAppInitSDK(mockApiDiscoveryConfig, { store, storeContextPresent: true });
+
+    expect(mockApiDiscoveryConfig.apiDiscovery).toHaveBeenCalledTimes(1);
+    expect(mockApiDiscoveryConfig.apiDiscovery).toHaveBeenCalledWith(store);
+    expect(apiDiscovery.initApiDiscovery).not.toHaveBeenCalled();
   });
 
-  it('should trigger default apiDiscovery if apiDiscovery is not provided with config', () => {
-    const mockConfigData = {
-      appFetch: jest.fn(),
-    };
-    useReduxStoreSpy.mockImplementation(() => ({ store, storeContextPresent: false }));
-    const initApiDiscoverySpy = jest.spyOn(apiDiscovery, 'initApiDiscovery');
-    initApiDiscoverySpy.mockImplementation(jest.fn());
-    mount(
-      <AppInitSDK configurations={mockConfigData}>
-        <div data-test-id="child-id">Hello!!</div>
-      </AppInitSDK>,
-    );
-    expect(initApiDiscoverySpy).toHaveBeenCalled();
-    expect(initApiDiscoverySpy).toHaveBeenCalledTimes(1);
-    expect(initApiDiscoverySpy).toHaveBeenCalledWith(store);
+  it('should trigger the default initApiDiscovery if no apiDiscovery function is provided', () => {
+    renderAppInitSDK(mockConfig, { store, storeContextPresent: false });
+
+    expect(apiDiscovery.initApiDiscovery).toHaveBeenCalledTimes(1);
+    expect(apiDiscovery.initApiDiscovery).toHaveBeenCalledWith(store);
   });
 });