fix: Update and expand /client tests

client/components/TestRun/Heading.js

@@ -120,13 +120,13 @@ const TestRunHeading = ({
       <div className="test-info-wrapper">
         <div
           className="test-info-entity apg-example-name"
-          data-test="apg-example-name"
+          data-testid="apg-example-name"
         >
           <div className="info-label">
             <b>Test Plan:</b> {testPlanTitle}
           </div>
         </div>
-        <div className="test-info-entity at-browser" data-test="at-browser">
+        <div className="test-info-entity at-browser" data-testid="at-browser">
           <div className="at-browser-row">
             <div className="info-label">
               <b>AT:</b> {at}

client/components/TestRun/index.jsx

@@ -992,7 +992,7 @@ const TestRun = () => {
 
     return (
       <>
-        <h1 ref={titleRef} data-test="testing-task" tabIndex={-1}>
+        <h1 ref={titleRef} data-testid="testing-task" tabIndex={-1}>
           <span className="task-label">Test {currentTest.seq}:</span>
           {currentTest.title}
         </h1>

client/components/UserSettings/UserSettings.jsx

@@ -67,12 +67,12 @@ const UserSettings = () => {
 
   return (
     <Container id="main" as="main" tabIndex="-1">
-      <Container fluid data-test="user-settings-contents">
+      <Container fluid>
         <Helmet>
           <title>Settings | ARIA-AT</title>
         </Helmet>
         <h1>Settings</h1>
-        <section data-test="user-settings-authorized">
+        <section>
           <h2>User Details</h2>
           <p>
             <a
@@ -87,30 +87,31 @@ const UserSettings = () => {
           <div aria-atomic="true" aria-live="polite">
             {savedAts.length > 0 ? (
               <div>
-                <p>
+                <p data-testid="testable-ats-status">
                   You can currently test the following assistive technologies:
                 </p>
                 <ul>
                   {ats
                     .filter(({ id: atId }) => savedAts.includes(atId))
                     .map(at => (
-                      <li key={at.id}>{at.name}</li>
+                      <li style={{ listStyle: 'disc' }} key={at.id}>
+                        {at.name}
+                      </li>
                     ))}
                 </ul>
               </div>
             ) : (
-              <p>
-                You currently are not configured to run any assistive
-                technologies.
+              <p data-testid="testable-ats-status">
+                You have not yet selected any assistive technologies.
               </p>
             )}
           </div>
           <p>
-            Submit the form below to update the assistive technologies you can
-            test:
+            Update the assistive technologies you can test by selecting from the
+            options below:
           </p>
           <Form>
-            <h3 id="at-group-label">ATs</h3>
+            <h3 id="at-group-label">Assistive Technologies</h3>
             <Form.Group
               controlId="formBasicCheckbox"
               role="group"

client/components/common/AtAndBrowserDetailsModal/index.jsx

@@ -346,6 +346,7 @@ const AtAndBrowserDetailsModal = ({
                         onChange={handleAtVersionChange}
                         isInvalid={isAtVersionError}
                         required
+                        data-testid="at-browser-modal-select"
                       >
                         {['Select a Version', ...atVersions].map(item => (
                           <option
@@ -545,6 +546,7 @@ const AtAndBrowserDetailsModal = ({
                     onChange={handleBrowserVersionChange}
                     isInvalid={isBrowserVersionError}
                     required
+                    data-testid="at-browser-modal-input"
                   />
                   {isBrowserVersionError && (
                     <Form.Control.Feedback

client/package.json

@@ -73,8 +73,6 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.11.0",
     "dotenv-webpack": "^8.1.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.8",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-jest": "^27.9.0",
@@ -84,7 +82,6 @@
     "file-loader": "^6.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-enzyme": "^7.1.2",
     "prettier": "^2.8.8",
     "puppeteer": "^21.11.0",
     "storybook-addon-apollo-client": "^4.1.4",

client/tests/AssignTesterDropdown.test.jsx

@@ -75,16 +75,19 @@ useMutation.mockImplementation(mutation => {
 const getMocks = (atKey, browserKey) => {
   const at = {
     nvda: {
+      __typename: 'At',
       id: '2',
       name: 'NVDA',
       key: 'nvda'
     },
     jaws: {
+      __typename: 'At',
       id: '1',
       name: 'JAWS',
       key: 'jaws'
     },
     voiceover_macos: {
+      __typename: 'At',
       id: '3',
       name: 'VoiceOver for MacOS',
       key: 'voiceover_macos'
@@ -93,16 +96,19 @@ const getMocks = (atKey, browserKey) => {
 
   const browser = {
     chrome: {
+      __typename: 'Browser',
       id: '2',
       name: 'Chrome',
       key: 'chrome'
     },
     safari_macos: {
+      __typename: 'Browser',
       id: '3',
       name: 'Safari for MacOS',
       key: 'safari_macos'
     },
     voiceover_macos: {
+      __typename: 'Browser',
       id: '3',
       name: 'VoiceOver for MacOS',
       key: 'voiceover_macos'

client/tests/DataManagement.test.jsx

@@ -2,16 +2,10 @@
  * @jest-environment jsdom
  */
 
-import React, { act } from 'react';
-import { render, renderHook, waitFor } from '@testing-library/react';
-import { InMemoryCache } from '@apollo/client';
-import { MockedProvider } from '@apollo/client/testing';
-import { BrowserRouter } from 'react-router-dom';
+import { act } from 'react';
+import { renderHook } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import DataManagement from '../components/DataManagement';
 
-// eslint-disable-next-line jest/no-mocks-import
-import { DATA_MANAGEMENT_PAGE_POPULATED_MOCK_DATA } from './__mocks__/GraphQLMocks';
 import {
   useDataManagementTableFiltering,
   useDataManagementTableSorting,
@@ -24,62 +18,6 @@ import {
   DATA_MANAGEMENT_TABLE_SORT_OPTIONS
 } from '../components/DataManagement/utils';
 import { TABLE_SORT_ORDERS } from '../components/common/SortableTableHeader';
-import { AriaLiveRegionProvider } from '../components/providers/AriaLiveRegionProvider';
-
-const setup = (mocks = []) => {
-  return render(
-    <BrowserRouter>
-      <AriaLiveRegionProvider>
-        <MockedProvider
-          mocks={mocks}
-          cache={new InMemoryCache({ addTypename: false })}
-        >
-          <DataManagement />
-        </MockedProvider>
-      </AriaLiveRegionProvider>
-    </BrowserRouter>
-  );
-};
-
-describe('Data Management page', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = setup(DATA_MANAGEMENT_PAGE_POPULATED_MOCK_DATA);
-  });
-
-  it('renders loading state on initialization', async () => {
-    const { getByTestId } = wrapper;
-    const element = getByTestId('page-status');
-
-    expect(element).toBeTruthy();
-    expect(element).toHaveTextContent('Loading');
-  });
-
-  it('renders Status Summary component', async () => {
-    // allow page time to load
-    await waitFor(() => new Promise(res => setTimeout(res, 0)));
-
-    const { queryAllByText } = wrapper;
-    const statusSummaryElement = queryAllByText(/Test Plans Status Summary/i);
-    const testPlanElement = queryAllByText(/Test Plan/i);
-    const coveredAtElement = queryAllByText(/Covered AT/i);
-    const overallStatusElement = queryAllByText(/Overall Status/i);
-    const rdElement = queryAllByText(/R&D Version/i);
-    const draftElement = queryAllByText(/Draft Review/i);
-    const candidateElement = queryAllByText(/Candidate Review/i);
-    const recommendedElement = queryAllByText(/Recommended Version/i);
-
-    expect(statusSummaryElement.length).toBeGreaterThanOrEqual(1);
-    expect(testPlanElement.length).toBeGreaterThanOrEqual(1);
-    expect(coveredAtElement.length).toBeGreaterThanOrEqual(1);
-    expect(overallStatusElement.length).toBeGreaterThanOrEqual(1);
-    expect(rdElement.length).toBeGreaterThanOrEqual(1);
-    expect(draftElement.length).toBeGreaterThanOrEqual(1);
-    expect(candidateElement.length).toBeGreaterThanOrEqual(1);
-    expect(recommendedElement.length).toBeGreaterThanOrEqual(1);
-  });
-});
 
 const testPlans = [
   { title: 'Test A', directory: 'dirA', id: '1' },