Merge pull request #428 from adhocteam/js-fix-some-flaky-tests

Attempt to un-flak-ify some frontend tests
HHS · Sep 20, 2021 · 039fb14 · 039fb14
2 parents 208c464 + 43b1d63
commit 039fb14
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/frontend/src/pages/ActivityReport/Pages/components/__tests__/GoalPicker.js b/frontend/src/pages/ActivityReport/Pages/components/__tests__/GoalPicker.js
@@ -65,7 +65,8 @@ describe('GoalPicker', () => {
 
       const select = await screen.findByText('Select goal(s) or type here to create a new goal');
       userEvent.type(select, 'Unfettered');
-      fireEvent.click(document.querySelector('#react-select-3-option-2'));
+      const newGoal = await screen.findByText('Create "Unfettered"');
+      fireEvent.click(newGoal);
       expect(screen.getByText(/unfettered/i)).toBeInTheDocument();
     });
 
@@ -80,12 +81,18 @@ describe('GoalPicker', () => {
 
       const select = await screen.findByText('Select goal(s) or type here to create a new goal');
       userEvent.type(select, 'Unfettered');
-      fireEvent.click(document.querySelector('#react-select-4-option-2'));
-      const unfetteredlabel = screen.getByText(/unfettered/i);
+
+      const newGoal = await screen.findByText('Create "Unfettered"');
+      fireEvent.click(newGoal);
+      let unfetteredlabel = await screen.findByText(/unfettered/i);
       expect(unfetteredlabel).toBeInTheDocument();
-      userEvent.type(select, 'a');
-      const unfett = document.querySelector('#react-select-4-option-0');
-      fireEvent.click(unfett);
+
+      selectEvent.openMenu(select);
+      // Ignore the "Goal: Unfettered" element that isn't in the multi-select menu
+      const selected = await screen.findByText(/unfettered/i, { ignore: 'p' });
+      userEvent.click(selected);
+
+      unfetteredlabel = screen.queryByText(/unfettered/i);
       expect(unfetteredlabel).not.toBeInTheDocument();
     });
 
@@ -100,7 +107,8 @@ describe('GoalPicker', () => {
 
       const select = await screen.findByText('Select goal(s) or type here to create a new goal');
       userEvent.type(select, 'Unfettered');
-      fireEvent.click(document.querySelector('#react-select-5-option-2'));
+      const newGoal = await screen.findByText('Create "Unfettered"');
+      fireEvent.click(newGoal);
       const menuButton = await screen.findByRole('button', { name: /actions for goal 1/i });
 
       await waitFor(() => expect(menuButton).toBeVisible());

diff --git a/frontend/src/pages/Admin/__tests__/index.js b/frontend/src/pages/Admin/__tests__/index.js
@@ -4,13 +4,27 @@ import { Router } from 'react-router';
 import {
   render, screen,
 } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import join from 'url-join';
 import { createMemoryHistory } from 'history';
 
 import Admin from '../index';
 
+const grantsUrl = join('/', 'api', 'admin', 'grants', 'cdi?unassigned=false&active=true');
+const granteesUrl = join('/', 'api', 'admin', 'grantees');
+const usersUrl = join('/', 'api', 'admin', 'users');
+
 describe('Admin landing page', () => {
   const history = createMemoryHistory();
 
+  afterEach(() => fetchMock.restore());
+
+  beforeEach(() => {
+    fetchMock.get(grantsUrl, []);
+    fetchMock.get(granteesUrl, []);
+    fetchMock.get(usersUrl, []);
+  });
+
   it('displays the cdi page', async () => {
     history.push('/admin/cdi');
     render(