vitest: Fail on console errors and warnings

Some changes introduce warning and error console logs in the test output.

This will make the test run fail when there's any "mess" and the problems can be fixed in place instead of retroactively when the test output becomes unreadable.

Author: regexowl

src/Components/CreateImageWizard/steps/Registration/components/ManualActivationKey.tsx

@@ -1,12 +1,13 @@
-import React, { MutableRefObject, useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 
 import {
+  Button,
   Content,
   ContentVariants,
   FormGroup,
-  FormGroupLabelHelp,
   Popover,
 } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
 
 import { ValidatedInput } from '@/Components/CreateImageWizard/ValidatedInput';
 import { CDN_PROD_URL } from '@/constants';
@@ -20,14 +21,9 @@ import {
   selectOrgId,
 } from '@/store/slices/wizard';
 
-const ManualRegistrationPopover = ({
-  ref,
-}: {
-  ref: MutableRefObject<null>;
-}) => {
+const ManualRegistrationPopover = () => {
   return (
     <Popover
-      triggerRef={ref}
       headerContent='About Activation Keys & Organization ID'
       position='right'
       minWidth='30rem'
@@ -46,9 +42,12 @@ const ManualRegistrationPopover = ({
         </Content>
       }
     >
-      <FormGroupLabelHelp
-        ref={ref}
-        aria-label='About Activation Keys & Organization ID'
+      <Button
+        icon={<HelpIcon />}
+        variant='plain'
+        size='sm'
+        aria-label='Credentials path info'
+        hasNoPadding
       />
     </Popover>
   );
@@ -58,8 +57,6 @@ export const ManualActivationKey = () => {
   const dispatch = useAppDispatch();
   const orgId = useAppSelector(selectOrgId);
   const activationKey = useAppSelector(selectActivationKey);
-  const orgIdRef = useRef(null);
-  const activationKeyRef = useRef(null);
 
   useEffect(() => {
     dispatch(changeServerUrl('subscription.rhsm.redhat.com'));
@@ -71,7 +68,7 @@ export const ManualActivationKey = () => {
       <FormGroup
         className='pf-v6-u-mb-md'
         label={'Activation key'}
-        labelHelp={<ManualRegistrationPopover ref={activationKeyRef} />}
+        labelHelp={<ManualRegistrationPopover />}
         isRequired
       >
         <ValidatedInput
@@ -88,7 +85,7 @@ export const ManualActivationKey = () => {
       </FormGroup>
       <FormGroup
         label={'Organization ID'}
-        labelHelp={<ManualRegistrationPopover ref={orgIdRef} />}
+        labelHelp={<ManualRegistrationPopover />}
         isRequired
       >
         <ValidatedInput

src/Components/CreateImageWizard/steps/Repositories/components/Repositories.tsx

@@ -364,7 +364,7 @@ const Repositories = () => {
         ),
       );
     }
-  }, [templateUuid, reposInTemplate]);
+  }, [dispatch, isTemplateSelected, reposInTemplate]);
 
   if (
     isError ||

src/Components/CreateImageWizard/steps/Repositories/tests/Repositories.test.tsx

@@ -3,7 +3,12 @@ import { screen, waitFor } from '@testing-library/react';
 import { mapRequestFromState } from '@/Components/CreateImageWizard/utilities/requestMapper';
 import { CreateBlueprintRequest } from '@/store/api/backend';
 import { server } from '@/test/mocks/server';
-import { createTestStore, createUser, typeWithWait } from '@/test/testUtils';
+import {
+  clickWithWait,
+  createTestStore,
+  createUser,
+  typeWithWait,
+} from '@/test/testUtils';
 
 import {
   removeRepo,
@@ -101,7 +106,7 @@ describe('Repositories Component', () => {
       const toggle = await screen.findByRole('button', {
         name: /menu toggle/i,
       });
-      await user.click(toggle);
+      await clickWithWait(user, toggle);
 
       // Should show repositories without typing
       expect(
@@ -123,7 +128,7 @@ describe('Repositories Component', () => {
       const toggle = await screen.findByRole('button', {
         name: /menu toggle/i,
       });
-      await user.click(toggle);
+      await clickWithWait(user, toggle);
 
       expect(
         await screen.findByRole('option', {
@@ -135,7 +140,7 @@ describe('Repositories Component', () => {
       const searchInput = await screen.findByRole('textbox', {
         name: /filter repositories/i,
       });
-      await user.type(searchInput, 'nonexistent');
+      await typeWithWait(user, searchInput, 'nonexistent');
 
       expect(
         await screen.findByRole('option', {
@@ -166,15 +171,15 @@ describe('Repositories Component', () => {
       const toggle = await screen.findByRole('button', {
         name: /menu toggle/i,
       });
-      await user.click(toggle);
+      await clickWithWait(user, toggle);
 
       await screen.findByRole('option', { name: /no repositories available/i });
 
       // Type to search - should use limit=50
       const searchInput = await screen.findByRole('textbox', {
         name: /filter repositories/i,
       });
-      await user.type(searchInput, 'test');
+      await typeWithWait(user, searchInput, 'test');
 
       await screen.findByRole('option', {
         name: /no repositories found for "test"/i,
@@ -295,14 +300,16 @@ describe('Repositories Component', () => {
       await selectRepo(user, '01-test-valid-repo');
       await selectRepo(user, '04-test-another-valid-repo');
 
-      expect(
-        await screen.findByRole('cell', { name: /01-test-valid-repo/i }),
-      ).toBeInTheDocument();
-      expect(
-        await screen.findByRole('cell', {
-          name: /04-test-another-valid-repo/i,
-        }),
-      ).toBeInTheDocument();
+      await waitFor(() => {
+        expect(
+          screen.getByRole('cell', { name: /01-test-valid-repo/i }),
+        ).toBeInTheDocument();
+        expect(
+          screen.getByRole('cell', {
+            name: /04-test-another-valid-repo/i,
+          }),
+        ).toBeInTheDocument();
+      });
     });
   });
 

src/test/Components/ImagesTable/ImagesTable.test.tsx

@@ -10,7 +10,7 @@ describe('Images Table', () => {
   });
 
   const user = userEvent.setup();
-  test('render ImagesTable', async () => {
+  test.skipIf(process.env.IS_ON_PREMISE)('render ImagesTable', async () => {
     renderCustomRoutesWithReduxRouter();
 
     const table = await screen.findByTestId('images-table');

src/test/fixtures/repositories.ts

@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
 import {
   ApiLinks,
   ApiRepositoryResponse,
@@ -609,8 +611,9 @@ const generateLinks = (
 
 const generateFillerRepos = (num: number): ApiRepositoryResponse[] => {
   const repos = new Array(num).fill(undefined).map((_, i) => {
+    const uuid = uuidv4();
     return {
-      uuid: '9cf1d45d-aa06-46fe-87ea-121845cc6bbb',
+      uuid,
       name: `z-filler repo ${i}`,
       url: `http://fillerRepos.org/9/x86_64/packages/${i}`,
       distribution_versions: ['any'],

src/test/setup.ts

@@ -80,6 +80,22 @@ configure({
   },
 });
 
-beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
-afterAll(() => server.close());
+// Fail tests on console warnings and errors
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' });
+
+  vi.spyOn(console, 'error').mockImplementation((...args) => {
+    throw new Error(`Console error:\n${args.join(' ')}`);
+  });
+
+  vi.spyOn(console, 'warn').mockImplementation((...args) => {
+    throw new Error(`Console warning:\n${args.join(' ')}`);
+  });
+});
+
+afterAll(() => {
+  server.close();
+  vi.restoreAllMocks();
+});
+
 afterEach(() => server.resetHandlers());