fix unit test

Author: kylemh

common/constants/testIDs.js

@@ -43,3 +43,4 @@ export const MODAL_CONTENT = 'MODAL_CONTENT';
 export const MODAL_OVERLAY = 'MODAL_OVERLAY';
 export const LOGIN_FORM = 'LOGIN_FORM';
 export const SUCCESS_PAGE_MESSAGE = 'SUCCESS_PAGE_MESSAGE';
+export const REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON = 'REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON';

components/Forms/RegistrationForm/RegistrationForm.tsx

@@ -14,6 +14,7 @@ import OutboundLink from 'components/OutboundLink/OutboundLink';
 import type { AxiosError } from 'axios';
 import axios from 'axios';
 import { InlineLoadingSpinner } from 'components/InlineLoadingSpinner';
+import { REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON } from 'common/constants/testIDs';
 
 export interface RegistrationFormValues {
   email: string;
@@ -222,7 +223,12 @@ export function RegistrationForm({
           {errorMessage && <Alert type="error">{errorMessage}</Alert>}
 
           <div className="max-w-md px-3 mt-5">
-            <Button type="submit" theme="secondary" disabled={isSubmitting}>
+            <Button
+              type="submit"
+              theme="secondary"
+              disabled={isSubmitting}
+              data-testid={REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON}
+            >
               <span className="flex items-center justify-center gap-x-2">
                 {isSubmitting && <InlineLoadingSpinner />}
                 <span className="mt-[0.325rem]">Submit ✓</span>

components/Forms/RegistrationForm/__tests__/RegistrationForm.test.tsx

@@ -5,6 +5,7 @@ import { mockUser } from 'test-utils/mockGenerators/mockUser';
 import { describe, expect, it } from 'vitest';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
+import { REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON } from 'common/constants/testIDs';
 import { RegistrationForm } from '../RegistrationForm';
 
 const axiosMock = new MockAdapter(axios);
@@ -22,11 +23,11 @@ describe('RegistrationForm', () => {
     const successSpy = vi.fn();
     const submitSpy = vi.fn();
 
-    const { getByText } = render(
+    const { getByTestId } = render(
       <RegistrationForm onSubmit={submitSpy} onSuccess={successSpy} initialValues={user} />,
     );
 
-    fireEvent.click(getByText('Submit'));
+    fireEvent.click(getByTestId(REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON));
 
     await waitFor(() => {
       expect(submitSpy).toHaveBeenCalledTimes(1);
@@ -40,13 +41,13 @@ describe('RegistrationForm', () => {
     axiosMock.onPost('/api/registration/new', user).reply(200);
 
     const successSpy = vi.fn(() => Promise.resolve(true));
-    const { container, getByText, findByText } = render(
+    const { container, getByTestId, findByTestId } = render(
       <RegistrationForm onSuccess={successSpy} initialValues={user} />,
     );
 
-    fireEvent.click(getByText('Submit'));
+    fireEvent.click(getByTestId(REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON));
 
-    const submit = await findByText('Submit');
+    const submit = await findByTestId(REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON);
     expect(submit).not.toBeDisabled();
     container.querySelectorAll('input').forEach(input => {
       expect(input.textContent).toBeFalsy();
@@ -64,7 +65,7 @@ describe('RegistrationForm', () => {
 
     // No Alert on mount
     expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-    fireEvent.click(screen.getByText('Submit'));
+    fireEvent.click(screen.getByTestId(REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON));
 
     // Alert shown after submitting
     await waitFor(() => expect(submitSpy).toHaveBeenCalledTimes(1));

components/Forms/RegistrationForm/__tests__/__snapshots__/RegistrationForm.test.tsx.snap

@@ -327,13 +327,21 @@ exports[`RegistrationForm > should render with required props 1`] = `
   >
     <button
       className="Button secondary"
-      data-testid="BUTTON"
+      data-testid="REGISTRATION_FORM_INITIAL_SUBMIT_BUTTON"
       disabled={false}
       onClick={[Function]}
       tabIndex={0}
       type="submit"
     >
-      Submit
+      <span
+        className="flex items-center justify-center gap-x-2"
+      >
+        <span
+          className="mt-[0.325rem]"
+        >
+          Submit ✓
+        </span>
+      </span>
     </button>
     <p
       className="pt-5 text-xs"