From 8d246dec5b7b345eb17118b40b4175e891f6c73e Mon Sep 17 00:00:00 2001
From: lcampbell <l.campbell144768@gmail.com>
Date: Thu, 27 Jul 2023 16:09:37 -0300
Subject: [PATCH] fix tests

---
 frontend/src/user/EditableUserPhoneNumber.js  |  2 +-
 .../__tests__/EditableUserPhoneNumber.test.js | 35 ++++++++-----------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/frontend/src/user/EditableUserPhoneNumber.js b/frontend/src/user/EditableUserPhoneNumber.js
index b25b0633bb..53f92b9bfb 100644
--- a/frontend/src/user/EditableUserPhoneNumber.js
+++ b/frontend/src/user/EditableUserPhoneNumber.js
@@ -221,7 +221,7 @@ export function EditableUserPhoneNumber({ detailValue, ...props }) {
           }}
         >
           {({ handleSubmit, isSubmitting }) => (
-            <form id="form" onSubmit={handleSubmit}>
+            <form id="form" role="form" onSubmit={handleSubmit}>
               <ModalHeader>
                 <Trans>Verify</Trans>
               </ModalHeader>
diff --git a/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js b/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js
index ac88171023..41094eefc2 100644
--- a/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js
+++ b/frontend/src/user/__tests__/EditableUserPhoneNumber.test.js
@@ -116,9 +116,7 @@ describe('<EditableUserPhoneNumber />', () => {
           fireEvent.click(confirmButton)
 
           await waitFor(() => {
-            expect(
-              getByText(/Phone number field must not be empty/i),
-            ).toBeInTheDocument()
+            expect(getByText(/Phone number field must not be empty/i)).toBeInTheDocument()
           })
         })
       })
@@ -160,14 +158,13 @@ describe('<EditableUserPhoneNumber />', () => {
             {
               request: {
                 query: VERIFY_PHONE_NUMBER,
-                variables: { twoFactorCode: 1234 },
+                variables: { twoFactorCode: 123456 },
               },
               result: {
                 data: {
                   verifyPhoneNumber: {
                     result: {
-                      status:
-                        'You have successfully verified your phone number.',
+                      status: 'You have successfully verified your phone number.',
                       user: {
                         id: '1234asdf',
                         phoneNumber: '+19025555555',
@@ -182,7 +179,7 @@ describe('<EditableUserPhoneNumber />', () => {
               },
             },
           ]
-          const { queryByText, getByText, getByRole, findByRole } = render(
+          const { queryByText, getByText, getByRole, getAllByRole } = render(
             <Suspense fallback="test loading">
               <MockedProvider addTypename={false} mocks={mocks}>
                 <UserVarProvider
@@ -223,30 +220,26 @@ describe('<EditableUserPhoneNumber />', () => {
           userEvent.clear(displayNameInput)
           userEvent.type(displayNameInput, '19025555555')
 
-          // ensure verify phone number modal is not open
-          expect(
-            queryByText(/Please enter your two factor code below/i),
-          ).not.toBeInTheDocument()
-
           const confirmButton = getByRole('button', { name: 'Confirm' })
           fireEvent.click(confirmButton)
 
-          const twoFactorCodeInput = await findByRole('textbox', {
-            name: /Please enter your two factor code below/i,
+          await waitFor(() => {
+            expect(queryByText(/Please enter your two factor code below/i)).toBeInTheDocument()
           })
 
-          userEvent.type(twoFactorCodeInput, '1234')
+          const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0]
+          const form = getByRole('form')
 
-          const confirmVerifyPhoneNumberButton = getByRole('button', {
-            name: 'Confirm',
+          fireEvent.change(twoFactorCode, {
+            target: {
+              value: '123456',
+            },
           })
 
-          userEvent.click(confirmVerifyPhoneNumberButton)
+          fireEvent.submit(form)
 
           await waitFor(() =>
-            expect(
-              queryByText(/You have successfully updated your phone number\./),
-            ).toBeInTheDocument(),
+            expect(queryByText(/You have successfully updated your phone number\./)).toBeInTheDocument(),
           )
         })
       })