Migrate enzyme packages/console-shared unit tests to React Testing Library.

Author: cajieh

frontend/packages/console-shared/src/components/catalog/__tests__/CatalogController.spec.tsx

@@ -1,20 +1,31 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
-import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
+import { screen, waitFor } from '@testing-library/react';
 import * as UseQueryParams from '@console/shared/src/hooks/useQueryParams';
+import { renderWithProviders } from '../../../test-utils/unit-test-utils';
 import CatalogController from '../CatalogController';
 
 jest.mock('react-router-dom-v5-compat', () => ({
   ...jest.requireActual('react-router-dom-v5-compat'),
-  useLocation: () => {
-    return 'path';
-  },
+  useLocation: () => ({
+    pathname: '/test-path',
+    search: '',
+    hash: '',
+    state: null,
+  }),
 }));
 
-describe('Catalog Controller', () => {
-  const spyUseMemo = jest.spyOn(React, 'useMemo');
+describe('CatalogController', () => {
   const spyUseQueryParams = jest.spyOn(UseQueryParams, 'useQueryParams');
-  it('should return proper catalog title and description', () => {
+
+  beforeEach(() => {
+    spyUseQueryParams.mockImplementation(() => new URLSearchParams());
+  });
+
+  afterEach(() => {
+    spyUseQueryParams.mockRestore();
+  });
+
+  it('should render the title and description from the catalog extension', async () => {
     const catalogControllerProps: React.ComponentProps<typeof CatalogController> = {
       type: 'HelmChart',
       title: null,
@@ -33,80 +44,38 @@ describe('Catalog Controller', () => {
         },
       ],
       items: [],
-      itemsMap: null,
+      itemsMap: { HelmChart: [] },
       loaded: true,
       loadError: null,
       searchCatalog: jest.fn(),
     };
-    spyUseQueryParams.mockImplementation(() => ({
-      catagory: null,
-      keyword: null,
-      sortOrder: null,
-    }));
-    spyUseMemo.mockReturnValue({
-      pluginID: '@console/helm-plugin',
-      pluginName: '@console/helm-plugin',
-      properties: {
-        catalogDescription: 'Helm Catalog description',
-        title: 'Helm Charts',
-        type: 'HelmChart',
-      },
-      type: 'console.catalog/item-type',
-      uid: '@console/helm-plugin[9]',
-    });
 
-    const catalogController = shallow(<CatalogController {...catalogControllerProps} />);
+    renderWithProviders(<CatalogController {...catalogControllerProps} />);
 
-    expect(catalogController.find(PageHeading).props().title).toEqual('Helm Charts');
-    expect(catalogController.find(PageHeading).props().helpText).toEqual(
-      'Helm Catalog description',
-    );
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Helm Charts' })).toBeInTheDocument();
+    });
+    expect(screen.getByText('Helm Catalog description')).toBeInTheDocument();
   });
 
-  it('should return proper catalog title and description when the extension does not have title and description', () => {
+  it('should fall back to the default title and description if the extension is missing them', async () => {
     const catalogControllerProps: React.ComponentProps<typeof CatalogController> = {
       type: 'HelmChart',
       title: 'Default title',
       description: 'Default description',
-      catalogExtensions: [
-        {
-          pluginID: '@console/helm-plugin',
-          pluginName: '@console/helm-plugin',
-          properties: {
-            catalogDescription: null,
-            title: null,
-            type: 'HelmChart',
-          },
-          type: 'console.catalog/item-type',
-          uid: '@console/helm-plugin[9]',
-        },
-      ],
+      catalogExtensions: [],
       items: [],
-      itemsMap: null,
+      itemsMap: { HelmChart: [] },
       loaded: true,
       loadError: null,
       searchCatalog: jest.fn(),
     };
-    spyUseQueryParams.mockImplementation(() => ({
-      catagory: null,
-      keyword: null,
-      sortOrder: null,
-    }));
-    spyUseMemo.mockReturnValue({
-      pluginID: '@console/helm-plugin',
-      pluginName: '@console/helm-plugin',
-      properties: {
-        catalogDescription: null,
-        title: null,
-        type: 'HelmChart',
-      },
-      type: 'console.catalog/item-type',
-      uid: '@console/helm-plugin[9]',
-    });
 
-    const catalogController = shallow(<CatalogController {...catalogControllerProps} />);
+    renderWithProviders(<CatalogController {...catalogControllerProps} />);
 
-    expect(catalogController.find(PageHeading).props().title).toEqual('Default title');
-    expect(catalogController.find(PageHeading).props().helpText).toEqual('Default description');
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Default title' })).toBeInTheDocument();
+    });
+    expect(screen.getByText('Default description')).toBeInTheDocument();
   });
 });

frontend/packages/console-shared/src/components/catalog/__tests__/CatalogDetailsPanel.spec.tsx

@@ -1,15 +1,98 @@
-import { shallow } from 'enzyme';
+import { screen, waitFor } from '@testing-library/react';
+import * as UseQueryParams from '@console/shared/src/hooks/useQueryParams';
+import { renderWithProviders } from '../../../test-utils/unit-test-utils';
+import CatalogController from '../CatalogController';
 import CatalogDetailsPanel from '../details/CatalogDetailsPanel';
 import { eventSourceCatalogItems } from './catalog-item-data';
 
-describe('Catalog details panel', () => {
-  it('should show Support as Community', () => {
-    const wrapper = shallow(<CatalogDetailsPanel item={eventSourceCatalogItems[1]} />);
-    expect(wrapper.find('PropertyItem[label="Support"]').props().value).toBe('Community');
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useLocation: () => ({
+    pathname: '/test-path',
+    search: '',
+    hash: '',
+    state: null,
+  }),
+}));
+
+describe('CatalogController', () => {
+  const spyUseQueryParams = jest.spyOn(UseQueryParams, 'useQueryParams');
+
+  beforeEach(() => {
+    spyUseQueryParams.mockImplementation(() => new URLSearchParams());
   });
 
-  it('should show one Support property in properties side panel', () => {
-    const wrapper = shallow(<CatalogDetailsPanel item={eventSourceCatalogItems[1]} />);
-    expect(wrapper.find('PropertyItem[label="Support"]').length).toBe(1);
+  afterEach(() => {
+    spyUseQueryParams.mockRestore();
+  });
+
+  it('should render the title and description from the catalog extension', async () => {
+    const catalogControllerProps: React.ComponentProps<typeof CatalogController> = {
+      type: 'HelmChart',
+      title: null,
+      description: null,
+      catalogExtensions: [
+        {
+          pluginID: '@console/helm-plugin',
+          pluginName: '@console/helm-plugin',
+          properties: {
+            catalogDescription: 'Helm Catalog description',
+            title: 'Helm Charts',
+            type: 'HelmChart',
+          },
+          type: 'console.catalog/item-type',
+          uid: '@console/helm-plugin[9]',
+        },
+      ],
+      items: [],
+      itemsMap: { HelmChart: [] },
+      loaded: true,
+      loadError: null,
+      searchCatalog: jest.fn(),
+    };
+
+    renderWithProviders(<CatalogController {...catalogControllerProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Helm Charts' })).toBeInTheDocument();
+    });
+    expect(screen.getByText('Helm Catalog description')).toBeInTheDocument();
+  });
+
+  it('should fall back to the default title and description if the extension is missing them', async () => {
+    const catalogControllerProps: React.ComponentProps<typeof CatalogController> = {
+      type: 'HelmChart',
+      title: 'Default title',
+      description: 'Default description',
+      catalogExtensions: [],
+      items: [],
+      itemsMap: { HelmChart: [] },
+      loaded: true,
+      loadError: null,
+      searchCatalog: jest.fn(),
+    };
+
+    renderWithProviders(<CatalogController {...catalogControllerProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Default title' })).toBeInTheDocument();
+    });
+    expect(screen.getByText('Default description')).toBeInTheDocument();
+  });
+});
+
+describe('CatalogDetailsPanel', () => {
+  it('should show the correct support level', () => {
+    renderWithProviders(<CatalogDetailsPanel item={eventSourceCatalogItems[1]} />);
+
+    expect(screen.getByText('Support')).toBeInTheDocument();
+    expect(screen.getByText('Community')).toBeInTheDocument();
+  });
+
+  it('should show only one "Support" property in the side panel', () => {
+    renderWithProviders(<CatalogDetailsPanel item={eventSourceCatalogItems[1]} />);
+
+    const supportLabels = screen.getAllByText('Support');
+    expect(supportLabels).toHaveLength(1);
   });
 });