fix(tests): fix unit tests after react 18 upgrade

build_deploy.sh

@@ -8,7 +8,7 @@ export COMPONENT="hac-dev"
 export IMAGE="quay.io/cloudservices/hac-dev-frontend"
 export APP_ROOT=$(pwd)
 export WORKSPACE=${WORKSPACE:-$APP_ROOT} # if running in jenkins, use the build's workspace
-export NODE_BUILD_VERSION=14
+export NODE_BUILD_VERSION=16
 export ROUTE_PATH=/api/plugins/hac-dev
 COMMON_BUILDER=https://raw.githubusercontent.com/RedHatInsights/insights-frontend-builder-common/master
 

package.json

@@ -3,8 +3,8 @@
   "version": "0.2.0",
   "private": false,
   "engines": {
-    "node": ">=18.0.0",
-    "npm": ">=9.0.0"
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
   },
   "scripts": {
     "analyze": "NODE_ENV=production webpack --config config/prod.webpack.config.js --env analyze=true",

pr_check.sh

@@ -8,7 +8,7 @@ export COMPONENT="hac-dev"
 export IMAGE="quay.io/cloudservices/hac-dev-frontend"
 export APP_ROOT=$(pwd)
 export WORKSPACE=${WORKSPACE:-$APP_ROOT} # if running in jenkins, use the build's workspace
-export NODE_BUILD_VERSION=14
+export NODE_BUILD_VERSION=16
 export ROUTE_PATH=/api/plugins/hac-dev
 IMAGE="quay.io/cloudservices/hac-dev-frontend"
 COMMON_BUILDER=https://raw.githubusercontent.com/RedHatInsights/insights-frontend-builder-common/master

src/components/Components/ComponentDetails/__tests__/ComponentDetails.spec.tsx

@@ -248,11 +248,8 @@ describe('ComponentDetailsView', () => {
       </ComponentDetailsViewWrapper>,
     );
     const buildPipeline = screen.getByTestId('edit-build-pipeline');
-    const editButton = buildPipeline.getElementsByClassName('pf-v5-c-label')[0];
-
-    await act(async () => {
-      fireEvent.click(editButton);
-    });
-    await expect(showModalMock).toHaveBeenCalled();
+    const editButton = buildPipeline.getElementsByClassName('pf-v5-c-label__content')[0];
+    await fireEvent.click(editButton);
+    expect(showModalMock).toHaveBeenCalled();
   });
 });

src/components/Components/__tests__/ComponentListView.spec.tsx

@@ -135,7 +135,7 @@ describe('ComponentListViewPage', () => {
 
     // interact with filters
     const filterMenuButton = view.getByRole('button', { name: /filter/i });
-    fireEvent.click(filterMenuButton);
+    await fireEvent.click(filterMenuButton);
 
     const successCb = view.getByLabelText(/successful/i, {
       selector: 'input',
@@ -173,7 +173,7 @@ describe('ComponentListViewPage', () => {
     expect(view.queryAllByTestId('component-list-item')).toHaveLength(0);
 
     // clear the filter
-    const clearFilterButton = view.getAllByRole('button', { name: 'Clear filters' })[1];
+    const clearFilterButton = view.getAllByRole('button', { name: 'Clear filters' })[0];
     fireEvent.click(clearFilterButton);
     view.rerender(<ComponentListView applicationName="test-app" />);
 

src/components/Environment/__tests__/EditStrategyModal.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
 import { k8sPatchResource } from '@openshift/dynamic-plugin-sdk-utils';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import { EnvironmentKind } from '../../../types';
 import { EditStrategyModal } from '../EditStrategyModal';
 
@@ -48,25 +49,25 @@ describe('EditStrategyModal', () => {
     const { rerender } = render(<EditStrategyModal obj={devEnv} />);
     const button = screen.getByRole('button', { name: 'Save' });
     expect(button).toBeDisabled();
-    screen.getByRole('button', { name: 'Automatic' }).click();
-    screen.getByRole('menuitem', { name: 'Manual' }).click();
+    await userEvent.click(screen.getByRole('button', { name: 'Automatic' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Manual' }));
     expect(button).toBeEnabled();
 
     rerender(<EditStrategyModal obj={prodEnv} />);
     expect(button).toBeDisabled();
-    screen.getByRole('button', { name: 'Manual' }).click();
-    screen.getByRole('menuitem', { name: 'Automatic' }).click();
+    await userEvent.click(screen.getByRole('button', { name: 'Manual' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Automatic' }));
     expect(button).toBeDisabled();
-    await act(async () => screen.getByRole('checkbox').click());
+    await userEvent.click(screen.getByRole('checkbox'));
     expect(button).toBeEnabled();
   });
 
   it('updates resource when submitted', async () => {
     patchResourceMock.mockResolvedValue({});
     render(<EditStrategyModal obj={devEnv} onClose={() => {}} />);
-    screen.getByRole('button', { name: 'Automatic' }).click();
-    screen.getByRole('menuitem', { name: 'Manual' }).click();
-    await act(async () => screen.getByRole('button', { name: 'Save' }).click());
+    await userEvent.click(screen.getByRole('button', { name: 'Automatic' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Manual' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
     expect(patchResourceMock).toHaveBeenCalledWith(
       expect.objectContaining({
         queryOptions: { name: 'dev', ns: 'test' },

src/components/Environment/__tests__/EnvironmentListView.spec.tsx

@@ -171,8 +171,8 @@ describe('EnvironmentListView', () => {
     expect(screen.queryAllByTestId('environment-card')).toHaveLength(1);
 
     // clear the filter
-    const clearFilterButton = screen.getAllByRole('button', { name: 'Clear filters' })[1];
-    fireEvent.click(clearFilterButton);
+    const clearFilterButton = screen.getAllByRole('button', { name: 'Clear filters' })[0];
+    await fireEvent.click(clearFilterButton);
     expect(screen.getAllByTestId('environment-card')).toHaveLength(4);
   });
 
@@ -228,7 +228,7 @@ describe('EnvironmentListView', () => {
     expect(screen.queryAllByTestId('environment-card')).toHaveLength(0);
 
     // clear the filter
-    const clearFilterButton = screen.getAllByRole('button', { name: 'Clear filters' })[1];
+    const clearFilterButton = screen.getAllByRole('button', { name: 'Clear filters' })[0];
     fireEvent.click(clearFilterButton);
     await expect(screen.getAllByTestId('environment-card')).toHaveLength(4);
   });

src/components/Filter/__tests__/FilterToolbar.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 import { FilterToolbar } from '../FilterToolbar';
 
 describe('FilterToolbar', () => {
@@ -19,7 +20,7 @@ describe('FilterToolbar', () => {
     expect(screen.getByRole('textbox', { name: 'Name filter' })).toBeVisible();
   });
 
-  it('should update filter type on select', () => {
+  it('should update filter type on select', async () => {
     render(
       <FilterToolbar
         value="test"
@@ -29,16 +30,12 @@ describe('FilterToolbar', () => {
       />,
     );
     expect(screen.getByText('Name')).toBeVisible();
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Name' }));
-    });
-    act(() => {
-      fireEvent.click(screen.getByRole('option', { name: 'Date' }));
-    });
+    await fireEvent.click(screen.getByRole('button', { name: 'Name' }));
+    await fireEvent.click(screen.getByRole('option', { name: 'Date' }));
     expect(screen.getByText('Date')).toBeVisible();
   });
 
-  it('should capitalize filter type items', () => {
+  it('should capitalize filter type items', async () => {
     render(
       <FilterToolbar
         value="test"
@@ -48,14 +45,14 @@ describe('FilterToolbar', () => {
       />,
     );
     expect(screen.getByText('Name')).toBeVisible();
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Name' }));
-    });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Name' }));
+
     expect(screen.getByRole('option', { name: 'Name' })).toBeVisible();
     expect(screen.getByRole('option', { name: 'Date' })).toBeVisible();
   });
 
-  it('should run callback on enter', () => {
+  it('should run callback on enter', async () => {
     const onInput = jest.fn();
     const onFilterChange = jest.fn();
     render(
@@ -67,21 +64,11 @@ describe('FilterToolbar', () => {
       />,
     );
     expect(screen.getByText('Name')).toBeVisible();
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Name' }));
-    });
-    act(() => {
-      fireEvent.click(screen.getByRole('option', { name: 'Date' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'Name' }));
+    await userEvent.click(screen.getByRole('option', { name: 'Date' }));
     expect(onFilterChange).toHaveBeenCalledWith('date');
-    act(() => {
-      fireEvent.input(screen.getByRole('textbox', { name: 'date filter' }), {
-        target: { value: 'test' },
-      });
-    });
-    act(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
-    });
+    await userEvent.type(screen.getByRole('textbox', { name: 'date filter' }), 'test');
+    await userEvent.click(screen.getByRole('button', { name: 'Reset' }));
     expect(onInput).toHaveBeenCalledWith('');
   });
 });

src/components/ImportForm/SourceSection/__tests__/SourceSection.spec.tsx

@@ -136,6 +136,15 @@ describe('SourceSection', () => {
       expect(screen.queryByText('Git reference')).toBeInTheDocument();
       expect(screen.queryByText('Context directory')).toBeInTheDocument();
     });
+  });
+
+  it('should not show git options for invalid git url', async () => {
+    useAccessCheckMock.mockReturnValue([
+      { isRepoAccessible: false, isGit: true, serviceProvider: ServiceProviderType.GitHub },
+      false,
+    ]);
+
+    const { input, user } = renderSourceSection();
 
     await user.type(input, 'dummy text');
 

src/components/Releases/__tests__/ReleasesListView.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
 import { Table as PfTable, TableHeader } from '@patternfly/react-table/deprecated';
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { useApplicationReleases } from '../../../hooks/useApplicationReleases';
 import { mockReleases } from '../__data__/mock-release-data';
 import ReleasesListRow from '../ReleasesListRow';
@@ -117,9 +117,7 @@ describe('ReleasesListView', () => {
     useMockReleases.mockReturnValue([mockReleases, true]);
     render(<ReleasesListView applicationName="test-app" />);
     const table = screen.getByRole('table');
-    await act(async () => {
-      fireEvent.click(within(table).getByRole('button', { name: 'Name' }));
-    });
+    await fireEvent.click(within(table).getByRole('button', { name: 'Name' }));
     expect(screen.getByRole('columnheader', { name: 'Name' })).toHaveAttribute(
       'aria-sort',
       'ascending',
@@ -133,9 +131,7 @@ describe('ReleasesListView', () => {
     expect(rows[2].children[0]).toHaveTextContent('test-release-2');
     expect(rows[3].children[0]).toHaveTextContent('test-release-3');
 
-    await act(async () => {
-      fireEvent.click(within(table).getByRole('button', { name: 'Name' }));
-    });
+    await fireEvent.click(within(table).getByRole('button', { name: 'Name' }));
     expect(screen.getByRole('columnheader', { name: 'Name' })).toHaveAttribute(
       'aria-sort',
       'descending',
@@ -148,9 +144,7 @@ describe('ReleasesListView', () => {
   it('should allow filtering by name', async () => {
     useMockReleases.mockReturnValue([mockReleases, true]);
     render(<ReleasesListView applicationName="test-app" />);
-    await act(async () => {
-      fireEvent.input(screen.getByRole('textbox'), { target: { value: 'test-release-2' } });
-    });
+    await fireEvent.input(screen.getByRole('textbox'), { target: { value: 'test-release-2' } });
     const rows = screen.getAllByRole('row');
     expect(rows.length).toBe(2);
     expect(rows[1].children[0]).toHaveTextContent('test-release-2');
@@ -159,15 +153,9 @@ describe('ReleasesListView', () => {
   it('should allow filtering by release plan', async () => {
     useMockReleases.mockReturnValue([mockReleases, true]);
     render(<ReleasesListView applicationName="test-app" />);
-    await act(async () => {
-      fireEvent.click(screen.getAllByRole('button')[0], { name: 'Name' });
-    });
-    await act(async () => {
-      fireEvent.click(screen.getByRole('option', { name: 'Release plan' }));
-    });
-    await act(async () => {
-      fireEvent.input(screen.getByRole('textbox'), { target: { value: 'test-plan-2' } });
-    });
+    await fireEvent.click(screen.getAllByRole('button')[0], { name: 'Name' });
+    await fireEvent.click(screen.getByRole('option', { name: 'Release plan' }));
+    await fireEvent.input(screen.getByRole('textbox'), { target: { value: 'test-plan-2' } });
     const rows = screen.getAllByRole('row');
     expect(rows.length).toBe(2);
     expect(rows[1].children[3]).toHaveTextContent('test-plan-2');
@@ -176,15 +164,9 @@ describe('ReleasesListView', () => {
   it('should allow filtering by release snapshot', async () => {
     useMockReleases.mockReturnValue([mockReleases, true]);
     render(<ReleasesListView applicationName="test-app" />);
-    await act(async () => {
-      fireEvent.click(screen.getAllByRole('button')[0], { name: 'Name' });
-    });
-    await act(async () => {
-      fireEvent.click(screen.getByRole('option', { name: 'Release snapshot' }));
-    });
-    await act(async () => {
-      fireEvent.input(screen.getByRole('textbox'), { target: { value: 'test-snapshot-2' } });
-    });
+    await fireEvent.click(screen.getAllByRole('button')[0], { name: 'Name' });
+    await fireEvent.click(screen.getByRole('option', { name: 'Release snapshot' }));
+    await fireEvent.input(screen.getByRole('textbox'), { target: { value: 'test-snapshot-2' } });
     const rows = screen.getAllByRole('row');
     expect(rows.length).toBe(2);
     expect(rows[1].children[4]).toHaveTextContent('test-snapshot-2');

src/components/Secrets/__tests___/SecretTypeSubForm.spec.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import '@testing-library/jest-dom';
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { useApplications } from '../../../hooks/useApplications';
 import { useComponents } from '../../../hooks/useComponents';
 import { useEnvironments } from '../../../hooks/useEnvironments';
-import { SecretFor } from '../../../types';
+import { SecretFor, SecretTypeDropdownLabel } from '../../../types';
 import { formikRenderer } from '../../../utils/test-utils';
 import { SecretTypeSubForm } from '../SecretsForm/SecretTypeSubForm';
 
@@ -37,7 +37,8 @@ const useEnvironmentsMock = useEnvironments as jest.Mock;
 describe('SecretTypeSubForm', () => {
   beforeEach(() => {
     const initialValues = {
-      SecretFor: SecretFor.Build,
+      secretFor: SecretFor.Build,
+      type: SecretTypeDropdownLabel.opaque,
       opaque: {
         keyValues: [{ key: '', value: '' }],
       },
@@ -56,54 +57,38 @@ describe('SecretTypeSubForm', () => {
   });
 
   it('should render subforms correctly for specified targets', async () => {
-    await act(async () => {
-      fireEvent.click(screen.getByRole('radio', { name: 'Deployment' }));
-    });
-    waitFor(() => {
+    await fireEvent.click(screen.getByRole('radio', { name: 'Deployment' }));
+    await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Key/value secret' })).toBeDisabled();
       expect(screen.getByText('Key value sub form')).toBeVisible();
     });
 
-    await act(async () => {
-      fireEvent.click(screen.getByRole('radio', { name: 'Build' }));
-    });
-    waitFor(() => {
+    await fireEvent.click(screen.getByRole('radio', { name: 'Build' }));
+    await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Key/value secret' })).toBeEnabled();
     });
 
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'Key/value secret' }));
-    });
-    await act(async () => {
-      fireEvent.click(screen.getByText('Image pull secret'));
-    });
+    await fireEvent.click(screen.getByRole('button', { name: 'Key/value secret' }));
+    await fireEvent.click(screen.getByText('Image pull secret'));
     expect(screen.getByText('Image pull sub form')).toBeVisible();
   });
 
   it('should render correct variant of name field', async () => {
-    await act(async () => {
-      fireEvent.click(screen.getByRole('radio', { name: 'Deployment' }));
-    });
+    await fireEvent.click(screen.getByRole('radio', { name: 'Deployment' }));
     await waitFor(() => {
       expect(screen.getByRole('textbox', { name: 'Secret name' })).toBeVisible();
     });
 
-    await act(async () => {
-      fireEvent.click(screen.getByRole('radio', { name: 'Build' }));
-    });
-    waitFor(() => {
+    await fireEvent.click(screen.getByRole('radio', { name: 'Build' }));
+    await waitFor(async () => {
       expect(screen.getByRole('button', { name: 'Secret name' })).toBeVisible();
-      act(async () => {
-        fireEvent.click(screen.getByRole('button', { name: 'Secret name' }));
-      });
+      await fireEvent.click(screen.getByRole('button', { name: 'Secret name' }));
       expect(screen.getByText('snyk-secret')).toBeVisible();
     });
   });
 
   it('should render target fields for Deployment secret', async () => {
-    await act(async () => {
-      fireEvent.click(screen.getByRole('radio', { name: 'Deployment' }));
-    });
+    await fireEvent.click(screen.getByRole('radio', { name: 'Deployment' }));
 
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Select application' })).toBeVisible();