More refactors for other components and increased the timeout value f…

…or app and cart tests to see if they will pass
esgf2-us · Sep 13, 2024 · 7750d91 · 7750d91
1 parent afad5ff
commit 7750d91
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 100 deletions.
diff --git a/frontend/src/components/App/App.test.tsx b/frontend/src/components/App/App.test.tsx
@@ -567,7 +567,7 @@ describe('User cart', () => {
     // Check empty alert renders
     const emptyAlert = await screen.findByText('Your cart is empty');
     expect(emptyAlert).toBeTruthy();
-  });
+  }, 100000);
 
   describe('Error handling', () => {
     it('displays error message after failing to fetch authenticated user"s cart', async () => {

diff --git a/frontend/src/components/Cart/Items.test.tsx b/frontend/src/components/Cart/Items.test.tsx
@@ -21,7 +21,7 @@ const user = userEvent.setup();
 
 const activeSearch: ActiveSearchQuery = getSearchFromUrl('project=test1');
 
-jest.setTimeout(50000);
+jest.setTimeout(80000);
 
 describe('test the cart items component', () => {
   it('renders message that the cart is empty when no items are added', async () => {

diff --git a/frontend/src/components/Facets/FacetsForm.test.tsx b/frontend/src/components/Facets/FacetsForm.test.tsx
@@ -1,10 +1,4 @@
-import {
-  act,
-  fireEvent,
-  screen,
-  waitFor,
-  within,
-} from '@testing-library/react';
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import {
@@ -14,7 +8,6 @@ import {
 } from '../../test/mock/fixtures';
 import FacetsForm, { humanizeFacetNames, Props } from './FacetsForm';
 import customRender from '../../test/custom-render';
-import { printElementContents } from '../../test/jestTestFunctions';
 
 const user = userEvent.setup();
 

diff --git a/frontend/src/components/Facets/ProjectForm.test.tsx b/frontend/src/components/Facets/ProjectForm.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, fireEvent, waitFor } from '@testing-library/react';
+import { act, fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ResponseError } from '../../api';
 import {
@@ -22,17 +22,15 @@ const defaultProps: Props = {
 const user = userEvent.setup();
 
 it('renders empty form', () => {
-  const { queryByRole } = customRender(
-    <ProjectsForm {...defaultProps} projectsFetched={undefined} />
-  );
+  customRender(<ProjectsForm {...defaultProps} projectsFetched={undefined} />);
 
   // Check submit button does not exist
-  const selectDropdown = queryByRole('form');
+  const selectDropdown = screen.queryByRole('form');
   expect(selectDropdown).toBeNull();
 });
 
 it('Runs project form submit when changing projects', async () => {
-  const { getByRole, getByText } = customRender(
+  customRender(
     <ProjectsForm
       {...defaultProps}
       projectsFetched={{ results: projectsFixture() }}
@@ -48,27 +46,22 @@ it('Runs project form submit when changing projects', async () => {
   );
 
   // First project should be selected by default, calling 'onFinish'
-  const option1Selected = await waitFor(() => {
-    return getByText('test1 was selected!');
-  });
+  const option1Selected = await screen.findByText('test1 was selected!');
   expect(option1Selected).toBeTruthy();
 
   // Open the project dropdown
-  const projectDropDown = getByRole('combobox');
+  const projectDropDown = await screen.findByRole('combobox');
   expect(projectDropDown).toBeTruthy();
   fireEvent.mouseDown(projectDropDown);
 
   // Select the 3rd project in the drop-down
-  const option3 = await waitFor(() => {
-    return getByText('test3');
-  });
-
+  const option3 = await screen.findByText('test3');
   await act(async () => {
     await user.click(option3);
   });
 
   // The 3rd project should now be selected
-  const option3Selected = getByText('test3 was selected!');
+  const option3Selected = await screen.findByText('test3 was selected!');
   expect(option3Selected).toBeTruthy();
 });
 

diff --git a/frontend/src/components/Facets/index.test.tsx b/frontend/src/components/Facets/index.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, waitFor, within } from '@testing-library/react';
+import { act, fireEvent, within, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import {
@@ -22,32 +22,30 @@ const defaultProps: Props = {
 };
 
 it('renders component', async () => {
-  const { getByTestId } = customRender(<Facets {...defaultProps} />);
+  customRender(<Facets {...defaultProps} />);
 
   // Check FacetsForm component renders
-  const facetsForm = await waitFor(() => getByTestId('facets-form'));
-  await waitFor(() => expect(facetsForm).toBeTruthy());
+  const facetsForm = await screen.findByTestId('facets-form');
+  expect(facetsForm).toBeTruthy();
 
   // Check ProjectForm component renders
-  const projectForm = await waitFor(() => getByTestId('project-form'));
+  const projectForm = await screen.findByTestId('project-form');
   expect(projectForm).toBeTruthy();
 });
 
 it('handles facets form auto-filtering', async () => {
-  const { getByTestId, getByText, getByRole } = customRender(
-    <Facets {...defaultProps} />
-  );
+  customRender(<Facets {...defaultProps} />);
 
   // Check ProjectForm component renders
-  const projectForm = await waitFor(() => getByTestId('project-form'));
+  const projectForm = await screen.findByTestId('project-form');
   expect(projectForm).toBeTruthy();
 
   // Check FacetsForm component renders
-  const facetsForm = await waitFor(() => getByTestId('facets-form'));
-  await waitFor(() => expect(facetsForm).toBeTruthy());
+  const facetsForm = await screen.findByTestId('facets-form');
+  expect(facetsForm).toBeTruthy();
 
   // Open top collapse panel
-  const group1Panel = within(facetsForm).getByRole('button', {
+  const group1Panel = await within(facetsForm).findByRole('button', {
     name: 'collapsed Group1',
   });
 
@@ -56,7 +54,7 @@ it('handles facets form auto-filtering', async () => {
   });
 
   // Open Collapse Panel in Collapse component for the data_node form to render
-  const collapse = getByText('Data Node');
+  const collapse = await screen.findByText('Data Node');
 
   await act(async () => {
     await user.click(collapse);
@@ -70,18 +68,18 @@ it('handles facets form auto-filtering', async () => {
   fireEvent.mouseDown(facetFormSelect);
 
   // Select the first facet option
-  const facetOption = getByTestId('data_node_aims3.llnl.gov');
+  const facetOption = await screen.findByTestId('data_node_aims3.llnl.gov');
   expect(facetOption).toBeTruthy();
 
   await act(async () => {
     await user.click(facetOption);
   });
 
   // Wait for facet form component to re-render
-  await waitFor(() => getByTestId('facets-form'));
+  await screen.findByTestId('facets-form');
 
   // De-select the first facet option
-  const closeFacetOption = getByRole('img', {
+  const closeFacetOption = await screen.findByRole('img', {
     name: 'close',
     hidden: true,
   });
@@ -91,20 +89,18 @@ it('handles facets form auto-filtering', async () => {
   });
 
   // Wait for facet form component to re-render
-  await waitFor(() => getByTestId('facets-form'));
+  await screen.findByTestId('facets-form');
 });
 
 it('handles facets form submission, including a facet key that is undefined', async () => {
-  const { getByTestId, getByText, getByRole } = customRender(
-    <Facets {...defaultProps} />
-  );
+  customRender(<Facets {...defaultProps} />);
 
   // Check FacetsForm component renders
-  const facetsForm = await waitFor(() => getByTestId('facets-form'));
-  await waitFor(() => expect(facetsForm).toBeTruthy());
+  const facetsForm = await screen.findByTestId('facets-form');
+  expect(facetsForm).toBeTruthy();
 
   // Check ProjectForm component renders
-  const projectForm = await waitFor(() => getByTestId('project-form'));
+  const projectForm = await screen.findByTestId('project-form');
   expect(projectForm).toBeTruthy();
 
   // Open top collapse panel
@@ -117,7 +113,7 @@ it('handles facets form submission, including a facet key that is undefined', as
   });
 
   // Open Collapse Panel in Collapse component for the Data Node form to render
-  const collapse = getByText('Data Node');
+  const collapse = await screen.findByText('Data Node');
 
   await act(async () => {
     await user.click(collapse);
@@ -131,19 +127,19 @@ it('handles facets form submission, including a facet key that is undefined', as
   fireEvent.mouseDown(facetFormSelect);
 
   // Select the first facet option
-  const facetOption = getByTestId('data_node_aims3.llnl.gov');
+  const facetOption = await screen.findByTestId('data_node_aims3.llnl.gov');
   expect(facetOption).toBeTruthy();
 
   await act(async () => {
     await user.click(facetOption);
   });
 
   // Wait for facet form component to re-render
-  await waitFor(() => getByTestId('facets-form'));
+  await screen.findByTestId('facets-form');
 
   // Open Collapse Panel for  in Collapse component for the facet2 form to render
   // Open additional properties collapse panel
-  const collapse2 = getByRole('button', {
+  const collapse2 = await screen.findByRole('button', {
     name: 'collapsed Group2',
   });
 
@@ -161,5 +157,5 @@ it('handles facets form submission, including a facet key that is undefined', as
   fireEvent.mouseDown(facetFormSelect2);
 
   // Wait for facet form component to re-render
-  await waitFor(() => getByTestId('facets-form'));
+  await screen.findByTestId('facets-form');
 });
diff --git a/frontend/src/components/Feedback/Popconfirm.test.tsx b/frontend/src/components/Feedback/Popconfirm.test.tsx
@@ -1,4 +1,4 @@
-import { act, waitFor } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Popconfirm from './Popconfirm';
@@ -7,23 +7,21 @@ import customRender from '../../test/custom-render';
 const user = userEvent.setup();
 
 it('renders component with default exclamation circle', async () => {
-  const { getByText, getByRole } = customRender(
+  customRender(
     <Popconfirm onConfirm={jest.fn}>
       <p>Click here</p>
     </Popconfirm>
   );
 
   // Check component renders
-  const text = getByText('Click here');
+  const text = await screen.findByText('Click here');
   expect(text).toBeTruthy();
 
   await act(async () => {
     await user.click(text);
   });
 
   //   Check icon defaults to exclamation circle
-  const icon = await waitFor(() =>
-    getByRole('img', { name: 'exclamation-circle' })
-  );
+  const icon = await screen.findByRole('img', { name: 'exclamation-circle' });
   expect(icon).toBeTruthy();
 });
diff --git a/frontend/src/components/General/Button.test.tsx b/frontend/src/components/General/Button.test.tsx
@@ -1,29 +1,26 @@
-import { act, waitFor } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Button from './Button';
 import customRender from '../../test/custom-render';
 
 const user = userEvent.setup();
 
-it('renders component', () => {
-  const { getByRole } = customRender(<Button type="primary"></Button>);
+it('renders component', async () => {
+  customRender(<Button type="primary"></Button>);
 
   // Check button rendered
-  const button = getByRole('button');
+  const button = await screen.findByRole('button');
   expect(button).toBeTruthy();
 });
 
 it('returns string "clicked" onClick', async () => {
-  const { getByRole } = customRender(
-    <Button type="primary" onClick={jest.fn()}></Button>
-  );
+  customRender(<Button type="primary" onClick={jest.fn()}></Button>);
 
   // Click on the button
-  const button = getByRole('button');
+  const button = await screen.findByRole('button');
 
   await act(async () => {
     await user.click(button);
   });
-  await waitFor(() => button);
 });
diff --git a/frontend/src/components/Messaging/MessageCard.test.tsx b/frontend/src/components/Messaging/MessageCard.test.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
+import { screen } from '@testing-library/react';
 import MessageCard from './MessageCard';
 import customRender from '../../test/custom-render';
 
-it('renders message component with default markdown when file is wrong.', () => {
-  const { getByText } = customRender(
-    <MessageCard title="test title" fileName="badFile.md" />
-  );
+it('renders message component with default markdown when file is wrong.', async () => {
+  customRender(<MessageCard title="test title" fileName="badFile.md" />);
 
   // Check component renders
-  const text = getByText('Content is empty.');
+  const text = await screen.findByText('Content is empty.');
   expect(text).toBeTruthy();
 });
diff --git a/frontend/src/components/Messaging/RightDrawer.test.tsx b/frontend/src/components/Messaging/RightDrawer.test.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import { screen } from '@testing-library/react';
 import RightDrawer from './RightDrawer';
 import customRender from '../../test/custom-render';
 
-it('renders right drawer component.', () => {
-  const { getByText } = customRender(<RightDrawer open onClose={() => {}} />);
+it('renders right drawer component.', async () => {
+  customRender(<RightDrawer open onClose={() => {}} />);
 
   // Check component renders
-  const text = getByText('Notifications');
+  const text = await screen.findByText('Notifications');
   expect(text).toBeTruthy();
 });