Merge pull request #15694 from cajieh/missed-enzyme-rtl-migration-tests

CONSOLE-4860: Missed Enzyme to RTL migration tests

Author: openshift-merge-bot[bot]

frontend/packages/console-app/src/components/detect-perspective/__tests__/DetectPerspective.spec.tsx

@@ -1,12 +1,16 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { useLocation } from 'react-router-dom-v5-compat';
 import { usePerspectives } from '@console/shared/src';
 import DetectPerspective from '../DetectPerspective';
-import PerspectiveDetector from '../PerspectiveDetector';
 import { useValuesForPerspectiveContext } from '../useValuesForPerspectiveContext';
 
 const MockApp = () => <h1>App</h1>;
 
+jest.mock('../PerspectiveDetector', () => ({
+  __esModule: true,
+  default: () => 'PerspectiveDetector',
+}));
+
 jest.mock('../useValuesForPerspectiveContext', () => ({
   useValuesForPerspectiveContext: jest.fn(),
 }));
@@ -28,29 +32,41 @@ describe('DetectPerspective', () => {
     useValuesForPerspectiveContextMock.mockClear();
     usePerspectivesMock.mockClear();
     useLocationMock.mockClear();
+    useLocationMock.mockReturnValue({ pathname: '/test' });
   });
-  it('should render children if there is an activePerspective', () => {
-    useValuesForPerspectiveContextMock.mockReturnValue(['dev', () => {}, true]);
+
+  it('should render children when there is an active perspective', () => {
+    useValuesForPerspectiveContextMock.mockReturnValue(['dev', jest.fn(), true]);
     usePerspectivesMock.mockReturnValue([
       { properties: { id: 'admin' } },
       { properties: { id: 'dev' } },
       { properties: { id: 'dev-test' } },
     ]);
-    const wrapper = shallow(
+
+    render(
       <DetectPerspective>
         <MockApp />
       </DetectPerspective>,
     );
-    expect(wrapper.find(MockApp).exists()).toBe(true);
+
+    expect(screen.getByRole('heading', { name: 'App' })).toBeVisible();
+    expect(screen.queryByText('PerspectiveDetector')).not.toBeInTheDocument();
   });
 
-  it('should render PerspectiveDetector if there is no activePerspective', () => {
-    useValuesForPerspectiveContextMock.mockReturnValue([undefined, () => {}, true]);
-    const wrapper = shallow(
+  it('should render PerspectiveDetector when there is no active perspective', () => {
+    useValuesForPerspectiveContextMock.mockReturnValue([undefined, jest.fn(), true]);
+    usePerspectivesMock.mockReturnValue([
+      { properties: { id: 'admin' } },
+      { properties: { id: 'dev' } },
+    ]);
+
+    render(
       <DetectPerspective>
         <MockApp />
       </DetectPerspective>,
     );
-    expect(wrapper.find(PerspectiveDetector).exists()).toBe(true);
+
+    expect(screen.getByText('PerspectiveDetector')).toBeVisible();
+    expect(screen.queryByRole('heading', { name: 'App' })).not.toBeInTheDocument();
   });
 });

frontend/packages/console-app/src/components/detect-perspective/__tests__/PerspectiveDetector.spec.tsx

@@ -1,5 +1,4 @@
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { render, waitFor } from '@testing-library/react';
 import { Perspective } from '@console/dynamic-plugin-sdk';
 import { LoadedExtension } from '@console/plugin-sdk';
 import { usePerspectives } from '@console/shared/src';
@@ -13,12 +12,10 @@ jest.mock('@console/shared/src', () => ({
   usePerspectives: jest.fn(),
 }));
 
-jest.mock('react-router', () => {
-  return {
-    ...jest.requireActual('react-router'),
-    useLocation: jest.fn(() => ({ pathname: '' })),
-  };
-});
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useLocation: jest.fn(() => ({ pathname: '' })),
+}));
 
 const mockPerspectives = [
   {
@@ -42,17 +39,21 @@ const mockPerspectives = [
 const setActivePerspective = jest.fn();
 
 describe('PerspectiveDetector', () => {
-  it('should set default perspective if there are no perspective detectors available', async () => {
+  beforeEach(() => {
+    setActivePerspective.mockClear();
+  });
+
+  it('should set default perspective when there are no perspective detectors available', async () => {
     (usePerspectives as jest.Mock).mockImplementation(() => mockPerspectives);
 
-    const wrapper = mount(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
-    expect(wrapper.isEmptyRender()).toBe(true);
-    expect(setActivePerspective).toHaveBeenCalledWith('admin', '');
+    render(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
+
+    await waitFor(() => {
+      expect(setActivePerspective).toHaveBeenCalledWith('admin', '');
+    });
   });
 
-  it('should set detected perspective if detection is successful', async () => {
-    // create a promise and capture the resolver such that we can use act later on to ensure
-    // the test waits for this promise to resolve before continuing
+  it('should set detected perspective when detection is successful', async () => {
     let promiseResolver: (value: () => [boolean, boolean]) => void;
     const testPromise = new Promise<() => [boolean, boolean]>(
       (resolver) => (promiseResolver = resolver),
@@ -61,17 +62,16 @@ describe('PerspectiveDetector', () => {
 
     (usePerspectives as jest.Mock).mockImplementation(() => mockPerspectives);
 
-    const wrapper = mount(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
-    await act(async () => {
-      promiseResolver(() => [true, false]);
+    render(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
+
+    promiseResolver(() => [true, false]);
+
+    await waitFor(() => {
+      expect(setActivePerspective).toHaveBeenCalledWith('dev', '');
     });
-    expect(wrapper.isEmptyRender()).toBe(true);
-    expect(setActivePerspective).toHaveBeenCalledWith('dev', '');
   });
 
-  it('should set default perspective if detection fails', async () => {
-    // create a promise and capture the resolver such that we can use act later on to ensure
-    // the test waits for this promise to resolve before continuing
+  it('should set default perspective when detection fails', async () => {
     let promiseResolver: (value: () => [boolean, boolean]) => void;
     const testPromise = new Promise<() => [boolean, boolean]>(
       (resolver) => (promiseResolver = resolver),
@@ -80,15 +80,16 @@ describe('PerspectiveDetector', () => {
 
     (usePerspectives as jest.Mock).mockImplementation(() => mockPerspectives);
 
-    const wrapper = mount(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
-    await act(async () => {
-      promiseResolver(() => [false, false]);
+    render(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
+
+    promiseResolver(() => [false, false]);
+
+    await waitFor(() => {
+      expect(setActivePerspective).toHaveBeenCalledWith('admin', '');
     });
-    expect(wrapper.isEmptyRender()).toBe(true);
-    expect(setActivePerspective).toHaveBeenCalledWith('admin', '');
   });
 
-  it('should set admin as default perspective if all perspectives are disabled', async () => {
+  it('should set admin as default perspective when all perspectives are disabled', async () => {
     const perspectives: PerspectiveType[] = [
       {
         id: 'dev',
@@ -118,8 +119,7 @@ describe('PerspectiveDetector', () => {
       },
     ];
     window.SERVER_FLAGS.perspectives = JSON.stringify(perspectives);
-    // create a promise and capture the resolver such that we can use act later on to ensure
-    // the test waits for this promise to resolve before continuing
+
     let promiseResolver: (value: () => [boolean, boolean]) => void;
     const testPromise = new Promise<() => [boolean, boolean]>(
       (resolver) => (promiseResolver = resolver),
@@ -128,11 +128,12 @@ describe('PerspectiveDetector', () => {
 
     (usePerspectives as jest.Mock).mockImplementation(() => mockPerspectives);
 
-    const wrapper = mount(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
-    await act(async () => {
-      promiseResolver(() => [false, false]);
+    render(<PerspectiveDetector setActivePerspective={setActivePerspective} />);
+
+    promiseResolver(() => [false, false]);
+
+    await waitFor(() => {
+      expect(setActivePerspective).toHaveBeenCalledWith('admin', '');
     });
-    expect(wrapper.isEmptyRender()).toBe(true);
-    expect(setActivePerspective).toHaveBeenCalledWith('admin', '');
   });
 });

frontend/packages/dev-console/src/components/import/image-search/__tests__/ImageStream.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Alert } from '@patternfly/react-core';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { ValidatedOptions } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
 import * as formik from 'formik';
 import { formikFormProps } from '@console/shared/src/test-utils/formik-props-utils';
 import * as imgUtils from '../../../../utils/imagestream-utils';
@@ -10,49 +10,62 @@ import {
   internalImageValues,
 } from '../../../edit-application/__tests__/edit-application-data';
 import ImageStream from '../ImageStream';
-import ImageStreamDropdown from '../ImageStreamDropdown';
-import ImageStreamNsDropdown from '../ImageStreamNsDropdown';
-import ImageStreamTagDropdown from '../ImageStreamTagDropdown';
+
+jest.mock('../ImageStreamNsDropdown', () => ({
+  __esModule: true,
+  default: () => 'Namespace Dropdown',
+}));
+
+jest.mock('../ImageStreamDropdown', () => ({
+  __esModule: true,
+  default: () => 'ImageStream Dropdown',
+}));
+
+jest.mock('../ImageStreamTagDropdown', () => ({
+  __esModule: true,
+  default: () => 'ImageStream Tag Dropdown',
+}));
 
 const spyUseFormikContext = jest.spyOn(formik, 'useFormikContext');
 const spyUseReducer = jest.spyOn(React, 'useReducer');
-const spyUseField = jest.spyOn(formik, 'useField');
 const spyGetImageStreamTags = jest.spyOn(imgUtils, 'getImageStreamTags');
-const spyUseState = jest.spyOn(React, 'useState');
 
 const mockReducerState = {
   loading: false,
   accessLoading: false,
   selectedImageStream: appResources.imageStream.data[0],
 };
-type ImagestreamProps = React.ComponentProps<typeof ImageStream>;
 
-describe('Imagestream', () => {
-  let wrapper: ShallowWrapper<ImagestreamProps>;
+describe('ImageStream', () => {
   beforeEach(() => {
     spyGetImageStreamTags.mockReturnValue({ 3.6: 3.6 });
     spyUseReducer.mockImplementation(() => [mockReducerState, jest.fn()]);
-    spyUseField.mockImplementation(() => [{ value: '' }, {}]);
-    spyUseState.mockReturnValue([true, jest.fn()]);
     spyUseFormikContext.mockReturnValue({
       ...formikFormProps,
       values: internalImageValues,
       initialValues: internalImageValues,
     });
-    wrapper = shallow(<ImageStream />);
   });
 
-  it('should render namespace, imagestream and imagestream-tag dropdowns ', () => {
-    expect(wrapper.find(ImageStreamNsDropdown)).toHaveLength(1);
-    expect(wrapper.find(ImageStreamDropdown)).toHaveLength(1);
-    expect(wrapper.find(ImageStreamTagDropdown)).toHaveLength(1);
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
-  it('should not render any alerts if current project and imagestream project is the same', () => {
-    expect(wrapper.find(Alert)).toHaveLength(0);
+  it('should render namespace, imagestream and imagestream tag dropdowns', () => {
+    render(<ImageStream />);
+
+    expect(screen.getByText('Namespace Dropdown')).toBeVisible();
+    expect(screen.getByText('ImageStream Dropdown')).toBeVisible();
+    expect(screen.getByText('ImageStream Tag Dropdown')).toBeVisible();
   });
 
-  it('should not render any alerts if the imagestream namespace is openshift', () => {
+  it('should not render any alerts when current project and imagestream project are the same', () => {
+    render(<ImageStream />);
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('should not render any alerts when imagestream namespace is openshift', () => {
     spyUseFormikContext.mockReturnValue({
       ...formikFormProps,
       values: {
@@ -65,34 +78,53 @@ describe('Imagestream', () => {
       },
       initialValues: internalImageValues,
     });
-    wrapper = shallow(<ImageStream />);
-    expect(wrapper.find(Alert)).toHaveLength(0);
+
+    render(<ImageStream />);
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
   });
 
-  it('should render oc command alert if current namespace and imagestream namespace are not equal', () => {
+  it('should render oc command alert when current namespace and imagestream namespace are not equal', () => {
+    const spyUseState = jest.spyOn(React, 'useState');
+    spyUseState.mockReturnValueOnce([ValidatedOptions.default, jest.fn()]); // validated state
+    spyUseState.mockReturnValueOnce([true, jest.fn()]); // hasImageStreams state
+
     spyUseFormikContext.mockReturnValue({
       ...formikFormProps,
-      values: { ...internalImageValues, project: { name: 'project-a' } },
+      values: {
+        ...internalImageValues,
+        project: { name: 'project-a' },
+        imageStream: { image: 'python', tag: '3.6', namespace: 'div' },
+      },
       initialValues: internalImageValues,
     });
-    wrapper = shallow(<ImageStream />);
-    const alert = wrapper.find(Alert);
-    expect(alert).toHaveLength(1);
-    expect(alert.props().title).toEqual(
-      'Service account default will need pull authority to deploy Images from div',
-    );
+
+    render(<ImageStream />);
+
+    expect(
+      screen.getByText(
+        'Service account default will need pull authority to deploy Images from div',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/You can grant authority with the command/)).toBeInTheDocument();
+
+    spyUseState.mockRestore();
   });
 
-  it('should render imagestream not found alert if there are no imagestreams', () => {
+  it('should render imagestream not found alert when there are no imagestreams', () => {
+    spyUseReducer.mockImplementation(() => [{ ...mockReducerState, loading: false }, jest.fn()]);
     spyUseFormikContext.mockReturnValue({
       ...formikFormProps,
-      values: { ...internalImageValues, imageStream: { image: '' } },
+      values: { ...internalImageValues, imageStream: { image: '', namespace: 'div' } },
     });
-    wrapper = shallow(<ImageStream />);
-    expect(wrapper.find(Alert)).toHaveLength(1);
+
+    render(<ImageStream />);
+
+    expect(screen.getByText('No Image streams found')).toBeInTheDocument();
+    expect(screen.getByText('No Image streams are available in Project div')).toBeInTheDocument();
   });
 
-  it('should render imagestream tag not found alert if there are no imagestreams tags', () => {
+  it('should render imagestream tag not found alert when there are no imagestream tags', () => {
     spyGetImageStreamTags.mockReturnValue({});
     spyUseFormikContext.mockReturnValue({
       ...formikFormProps,
@@ -102,7 +134,10 @@ describe('Imagestream', () => {
       },
       initialValues: internalImageValues,
     });
-    wrapper = shallow(<ImageStream />);
-    expect(wrapper.find(Alert)).toHaveLength(1);
+
+    render(<ImageStream />);
+
+    expect(screen.getByText('No Image streams tags found')).toBeInTheDocument();
+    expect(screen.getByText('No tags are available in Image Stream python')).toBeInTheDocument();
   });
 });