Fix react tests

Author: Andrewgdewar

src/Pages/Repositories/AdminTaskTable/components/AdminTaskFilters.test.tsx

@@ -1,5 +1,6 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import AdminTaskFilters from './AdminTaskFilters';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('middleware/AppContext', () => ({
   useAppContext: () => ({}),
@@ -21,12 +22,12 @@ it('Render loading state (disabled)', () => {
     />,
   );
 
-  const filterInput = getByRole('textbox');
+  const filterInput = getByRole('searchbox', { name: '' });
   expect(filterInput).toHaveAttribute('disabled');
 });
 
-it('Select a filter of each type and ensure chips are present', () => {
-  const { queryByText, getByRole, getByLabelText } = render(
+it('Select a filter of each type and ensure chips are present admin', async () => {
+  const { queryByText, getByRole, getByLabelText, queryAllByText } = render(
     <AdminTaskFilters
       setFilterData={() => null}
       filterData={{
@@ -39,62 +40,59 @@ it('Select a filter of each type and ensure chips are present', () => {
   );
 
   // Enter an account ID item
-  const accountIdInput = getByRole('textbox');
-  expect(accountIdInput).not.toHaveAttribute('disabled');
-  fireEvent.change(accountIdInput, { target: { value: '11593016' } });
+  const filterInput = getByRole('searchbox', { name: '' });
+  expect(filterInput).not.toHaveAttribute('disabled');
 
-  const optionMenu = getByRole('button', { name: 'filterSelectionDropdown' });
+  await userEvent.type(filterInput, '11593016');
 
-  waitFor(() => {
-    fireEvent.click(optionMenu);
-  });
+  const optionMenu = getByRole('button', { name: 'filterSelectionDropdown' });
+  await userEvent.click(optionMenu);
 
   const orgIdOption = queryByText('Org ID') as Element;
   expect(orgIdOption).toBeInTheDocument();
-  fireEvent.click(orgIdOption);
+  await userEvent.click(orgIdOption);
 
   // Enter an org ID item
-  const orgIdInput = getByRole('textbox');
-  expect(orgIdInput).not.toHaveAttribute('disabled');
-  fireEvent.change(orgIdInput, { target: { value: '13446804' } });
 
-  fireEvent.click(optionMenu);
+  await userEvent.type(filterInput, '13446804');
+  expect(filterInput).toHaveValue('13446804');
 
   // Select a Status item
+  await userEvent.click(optionMenu);
   const statusOption = queryByText('Status') as Element;
   expect(statusOption).toBeInTheDocument();
-  fireEvent.click(statusOption);
+  await userEvent.click(statusOption);
 
   const statusSelector = getByLabelText('filter status') as Element;
   expect(statusSelector).toBeInTheDocument();
-  fireEvent.click(statusSelector);
+  await userEvent.click(statusSelector);
 
   const statusItem = queryByText('Running') as Element;
   expect(statusItem).toBeInTheDocument();
-  fireEvent.click(statusItem);
+  await userEvent.click(statusItem);
 
   // Click the optionsButton to make the statusMenu disappear
-  fireEvent.click(optionMenu);
-
+  await userEvent.click(optionMenu);
   // Select a Type item
   const typeOption = queryByText('Type') as Element;
   expect(typeOption).toBeInTheDocument();
-  fireEvent.click(typeOption);
+  await userEvent.click(typeOption);
 
   const typeSelector = getByLabelText('filter type') as Element;
   expect(typeSelector).toBeInTheDocument();
-  fireEvent.click(typeSelector);
+  await userEvent.click(typeSelector);
 
   const typeItem = queryByText('introspect') as Element;
   expect(typeItem).toBeInTheDocument();
-  fireEvent.click(typeItem);
+  await userEvent.click(typeItem);
 
   // Click the optionsButton to make the typeMenu disappear
-  fireEvent.click(optionMenu);
+  await userEvent.click(typeSelector);
 
   // Check all the chips are there
   expect(queryByText('11593016')).toBeInTheDocument();
   expect(queryByText('13446804')).toBeInTheDocument();
+
   expect(queryByText('Running')).toBeInTheDocument();
-  expect(queryByText('introspect')).toBeInTheDocument();
+  expect(queryAllByText('introspect')).toHaveLength(2);
 });

src/Pages/Repositories/AdminTaskTable/components/AdminTaskFilters.tsx

@@ -7,7 +7,6 @@ import {
   FlexItem,
   InputGroup,
   TextInput,
-  InputGroupItem,
   type SelectOptionProps,
 } from '@patternfly/react-core';
 

src/Pages/Repositories/ContentListTable/components/ContentListFilters.test.tsx

@@ -43,11 +43,11 @@ it('Render loading state (disabled)', () => {
     />,
   );
 
-  const filterInput = getByRole('textbox');
+  const filterInput = getByRole('searchbox');
   expect(filterInput).toHaveAttribute('disabled');
 });
 
-it('Select a filter of each type and ensure chips are present', () => {
+it('Select a filter of each type and ensure chips are present contentlistfilters', () => {
   const { queryByText, getByRole, getByLabelText } = render(
     <ContentListFilters
       contentOrigin={ContentOrigin.CUSTOM}
@@ -64,7 +64,7 @@ it('Select a filter of each type and ensure chips are present', () => {
     />,
   );
 
-  const filterInput = getByRole('textbox');
+  const filterInput = getByRole('searchbox');
   expect(filterInput).not.toHaveAttribute('disabled');
   fireEvent.change(filterInput, { target: { value: 'EPEL' } });
 

src/Pages/Repositories/ContentListTable/components/SnapshotDetailsModal/Tabs/SnapshotErrataFilters.test.tsx

@@ -1,6 +1,7 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import SnapshotErrataFilters from './SnapshotErrataFilters';
 import { ContentOrigin } from 'services/Content/ContentApi';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('middleware/AppContext', () => ({
   useAppContext: () => ({
@@ -25,12 +26,12 @@ it('Render loading state (disabled)', () => {
     />,
   );
 
-  const filterInput = getByRole('textbox');
+  const filterInput = getByRole('searchbox');
   expect(filterInput).toHaveAttribute('disabled');
 });
 
-it('Select a filter of each type and ensure chips are present', () => {
-  const { queryByText, getByRole } = render(
+it('Select a filter of each type and ensure chips are present snapshotErrataFilters', async () => {
+  const { queryByText, getByRole, queryAllByText } = render(
     <SnapshotErrataFilters
       isLoading={false}
       setFilterData={() => null}
@@ -43,40 +44,45 @@ it('Select a filter of each type and ensure chips are present', () => {
   );
 
   // Filter on Name / Synopsis
-  const nameOrSynopsisFilter = getByRole('textbox');
+  const nameOrSynopsisFilter = getByRole('searchbox');
   expect(nameOrSynopsisFilter).not.toHaveAttribute('disabled');
-  fireEvent.change(nameOrSynopsisFilter, { target: { value: 'EPEL' } });
+  await userEvent.type(nameOrSynopsisFilter, 'EPEL');
 
   // Select a Type item
-  const optionMenu = document.getElementsByClassName('pf-v5-c-menu-toggle')[0]; // TODO: pf5 > pf6
-  waitFor(() => fireEvent.click(optionMenu));
+  const optionMenu = getByRole('button', { name: 'Name/Synopsis' });
+  await userEvent.click(optionMenu);
+
   const typeOption = queryByText('Type') as HTMLElement;
   expect(typeOption).toBeInTheDocument();
-  fireEvent.click(typeOption);
+  await userEvent.click(typeOption);
+
+  const typeSelector = queryByText('Filter by type') as HTMLElement;
+  expect(typeSelector).toBeInTheDocument();
+
+  await userEvent.click(typeSelector);
 
-  expect(queryByText('Filter by type')).toBeInTheDocument();
-  const typeSelector = document.getElementsByClassName('pf-v5-c-menu-toggle')[1];
-  fireEvent.click(typeSelector);
   const typeItem = queryByText('Security') as Element;
   expect(typeItem).toBeInTheDocument();
-  fireEvent.click(typeItem);
+  await userEvent.click(typeItem);
 
   // Select a Severity item
-  fireEvent.click(optionMenu);
+  await userEvent.click(optionMenu);
   const severityOption = queryByText('Severity') as Element;
   expect(severityOption).toBeInTheDocument();
-  fireEvent.click(severityOption);
+  await userEvent.click(severityOption);
 
-  expect(queryByText('Filter by severity')).toBeInTheDocument();
-  const severitySelector = document.getElementsByClassName('pf-v5-c-menu-toggle')[1];
-  fireEvent.click(severitySelector);
+  const severitySelector = queryByText('Filter by severity') as Element;
+  expect(severitySelector).toBeInTheDocument();
+
+  await userEvent.click(severitySelector);
   const severityItem = queryByText('Critical') as Element;
+
   expect(severityItem).toBeInTheDocument();
-  fireEvent.click(severityItem);
-  fireEvent.click(optionMenu);
+  await userEvent.click(severityItem);
+  await userEvent.click(severitySelector);
 
   // Check all the chips are there
   expect(queryByText('EPEL')).toBeInTheDocument();
   expect(queryByText('Security')).toBeInTheDocument();
-  expect(queryByText('Critical')).toBeInTheDocument();
+  expect(queryAllByText('Critical')).toHaveLength(2);
 });

src/Pages/Repositories/ContentListTable/components/SnapshotListModal/SnapshotListModal.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { getByText, render } from '@testing-library/react';
 import SnapshotListModal from './SnapshotListModal';
 import {
   ReactQueryTestWrapper,
@@ -41,17 +41,16 @@ it('Render 1 item', () => {
     isLoading: false,
     isFetching: false,
   }));
-  const { queryByText } = render(
+  const { getByText } = render(
     <ReactQueryTestWrapper>
       <SnapshotListModal />
     </ReactQueryTestWrapper>,
   );
 
-  expect(queryByText(defaultContentItemWithSnapshot.name)).toBeInTheDocument();
-  expect(queryByText('Latest Snapshot Config:')).toBeInTheDocument();
-
+  expect(getByText('View list of snapshots for AwesomeNamewwyylse12.')).toBeInTheDocument();
+  expect(getByText('Latest Snapshot Config:')).toBeInTheDocument();
   expect(
-    queryByText((defaultSnapshotItem.content_counts['rpm.package'] as number)?.toString()),
+    getByText((defaultSnapshotItem.content_counts['rpm.package'] as number)?.toString()),
   ).toBeInTheDocument();
 });
 
@@ -76,16 +75,17 @@ it('Render 20 items', () => {
     isLoading: false,
     isFetching: false,
   }));
-  const { queryByText } = render(
+
+  const { getByText } = render(
     <ReactQueryTestWrapper>
       <SnapshotListModal />
     </ReactQueryTestWrapper>,
   );
 
-  expect(queryByText(defaultContentItemWithSnapshot.name)).toBeInTheDocument();
-  expect(queryByText('Latest Snapshot Config:')).toBeInTheDocument();
+  expect(getByText('View list of snapshots for AwesomeNamewwyylse12.')).toBeInTheDocument();
+  expect(getByText('Latest Snapshot Config:')).toBeInTheDocument();
 
   expect(
-    queryByText((defaultSnapshotItem.content_counts['rpm.package'] as number)?.toString()),
+    getByText((defaultSnapshotItem.content_counts['rpm.package'] as number)?.toString()),
   ).toBeInTheDocument();
 });

src/Pages/Repositories/PopularRepositoriesTable/components/AddRepo.test.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
 import { AddRepo } from './AddRepo';
-import { useAppContext } from 'middleware/AppContext';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 
 jest.mock('middleware/AppContext', () => ({
@@ -17,15 +16,6 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
 }));
 
 it('Render enabled with snapshots enabled', () => {
-  (useAppContext as jest.Mock).mockImplementation(() => ({
-    features: {
-      snapshots: {
-        enabled: true,
-        accessible: true,
-      },
-    },
-  }));
-
   const addRepo = jest.fn();
 
   const { queryByText } = render(<AddRepo isDisabled={false} addRepo={addRepo} />);
@@ -52,57 +42,9 @@ it('Render enabled with snapshots enabled', () => {
 });
 
 it('Render disabled with snapshots enabled', () => {
-  (useAppContext as jest.Mock).mockImplementation(() => ({
-    features: {
-      snapshots: {
-        enabled: true,
-        accessible: true,
-      },
-    },
-  }));
-
   const addRepo = jest.fn();
 
   render(<AddRepo isDisabled={true} addRepo={addRepo} />);
 
   expect(document.getElementById('toggle-add') as Element).toHaveAttribute('disabled');
 });
-
-it('Render enabled with snapshots disabled', () => {
-  (useAppContext as jest.Mock).mockImplementation(() => ({
-    features: {
-      snapshots: {
-        enabled: false,
-        accessible: false,
-      },
-    },
-  }));
-
-  const addRepo = jest.fn();
-
-  const { queryByText } = render(<AddRepo isDisabled={false} addRepo={addRepo} />);
-
-  const addWithSnapshot = queryByText('Add') as Element;
-  expect(addWithSnapshot).toBeInTheDocument();
-  fireEvent.click(addWithSnapshot);
-
-  expect(addRepo.mock.calls).toHaveLength(1);
-  expect(addRepo.mock.calls[0][0]).toBe(false);
-});
-
-it('Render disabled with snapshots disabld', () => {
-  (useAppContext as jest.Mock).mockImplementation(() => ({
-    features: {
-      snapshots: {
-        enabled: false,
-        accessible: false,
-      },
-    },
-  }));
-
-  const addRepo = jest.fn();
-
-  const { queryByText } = render(<AddRepo isDisabled={true} addRepo={addRepo} />);
-
-  expect(queryByText('Add')).toHaveAttribute('disabled');
-});

src/Pages/Templates/TemplateDetails/components/Tabs/TemplateSystemsTab.test.tsx

@@ -79,7 +79,7 @@ it('expect TemplateSystemsTab to render 15 items, read-only', async () => {
   expect(queryByRole('checkbox', { name: 'Select row 0' })).not.toBeInTheDocument();
 
   // Ensure top kebab is disabled.
-  expect(getByRole('button', { name: 'Actions' })).toHaveAttribute('disabled');
+  expect(getByRole('button', { name: 'plain kebab' })).toHaveAttribute('disabled');
 
   // Ensure the row kebab is disabled
   expect(getAllByRole('button', { name: 'Kebab toggle' })[0]).toHaveAttribute('disabled');