fix tests

canada-ca · Jul 27, 2023 · 1bb828f · 1bb828f
1 parent 64b849e
commit 1bb828f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 96 deletions.
diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { t, Trans } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { Box, Button, Heading, Stack, useToast } from '@chakra-ui/react'
+import { Box, Button, Heading, Stack, Text, useToast } from '@chakra-ui/react'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
-import { Formik } from 'formik'
+import { ErrorMessage, Formik } from 'formik'
 
 import { LoadingMessage } from '../components/LoadingMessage'
 import { AuthenticateField } from '../components/fields/AuthenticateField'
@@ -111,9 +111,11 @@ export default function TwoFactorAuthenticatePage() {
               <Trans>Two Factor Authentication</Trans>
             </Heading>
 
-            <AuthenticateField sendMethod={sendMethod} mb="4" />
-
             <Stack align="center">
+              <AuthenticateField sendMethod={sendMethod} />
+              <Text color="red">
+                <ErrorMessage name="twoFactorCode" />
+              </Text>
               <Button variant="primary" isLoading={isSubmitting} type="submit">
                 <Trans>Submit</Trans>
               </Button>

diff --git a/frontend/src/auth/__tests__/TwoFactorAuthenticatePage.test.js b/frontend/src/auth/__tests__/TwoFactorAuthenticatePage.test.js
@@ -28,15 +28,10 @@ describe('<TwoFactorAuthenticatePage />', () => {
   it('renders correctly', async () => {
     const { getByText } = render(
       <MockedProvider>
-        <UserVarProvider
-          userVar={makeVar({ jwt: null, tfaSendMethod: null, userName: null })}
-        >
+        <UserVarProvider userVar={makeVar({ jwt: null, tfaSendMethod: null, userName: null })}>
           <ChakraProvider theme={theme}>
             <I18nProvider i18n={i18n}>
-              <MemoryRouter
-                initialEntries={['/authenticate/phone/authenticate-token-test']}
-                initialIndex={0}
-              >
+              <MemoryRouter initialEntries={['/authenticate/phone/authenticate-token-test']} initialIndex={0}>
                 <Route path="/authenticate/:sendMethod/:authenticateToken">
                   <TwoFactorAuthenticatePage />
                 </Route>
@@ -47,9 +42,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
       </MockedProvider>,
     )
 
-    await waitFor(() =>
-      expect(getByText(/Two Factor Authentication/)).toBeInTheDocument(),
-    )
+    await waitFor(() => expect(getByText(/Two Factor Authentication/)).toBeInTheDocument())
   })
 
   describe('given no input', () => {
@@ -67,12 +60,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
               >
                 <ChakraProvider theme={theme}>
                   <I18nProvider i18n={i18n}>
-                    <MemoryRouter
-                      initialEntries={[
-                        '/authenticate/phone/authenticate-token-test',
-                      ]}
-                      initialIndex={0}
-                    >
+                    <MemoryRouter initialEntries={['/authenticate/phone/authenticate-token-test']} initialIndex={0}>
                       <Route path="/authenticate/:sendMethod/:authenticateToken">
                         <TwoFactorAuthenticatePage />
                       </Route>
@@ -86,9 +74,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
           fireEvent.click(submitButton)
 
           await waitFor(() => {
-            expect(
-              getByText(/Code field must not be empty/i),
-            ).toBeInTheDocument()
+            expect(getByText(/Code field must not be empty/i)).toBeInTheDocument()
           })
         })
       })
@@ -126,7 +112,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         initialIndex: 0,
       })
 
-      const { container, getByRole, queryByText } = render(
+      const { getAllByRole, getByRole, queryByText } = render(
         <MockedProvider mocks={mocks} addTypename={false}>
           <UserVarProvider
             userVar={makeVar({
@@ -148,7 +134,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         </MockedProvider>,
       )
 
-      const twoFactorCode = container.querySelector('#twoFactorCode')
+      const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0]
       const form = getByRole('form')
 
       fireEvent.change(twoFactorCode, {
@@ -160,9 +146,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
       fireEvent.submit(form)
 
       await waitFor(() => {
-        expect(
-          queryByText(/Unable to sign in to your account, please try again./i),
-        )
+        expect(queryByText(/Unable to sign in to your account, please try again./i))
       })
     })
     it('client-side error', async () => {
@@ -202,7 +186,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         initialIndex: 0,
       })
 
-      const { container, getByRole, queryByText } = render(
+      const { getAllByRole, getByRole, queryByText } = render(
         <MockedProvider mocks={mocks} addTypename={false}>
           <UserVarProvider
             userVar={makeVar({
@@ -224,7 +208,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         </MockedProvider>,
       )
 
-      const twoFactorCode = container.querySelector('#twoFactorCode')
+      const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0]
       const form = getByRole('form')
 
       fireEvent.change(twoFactorCode, {
@@ -276,7 +260,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         initialIndex: 0,
       })
 
-      const { container, getByRole, queryByText } = render(
+      const { getAllByRole, getByRole, queryByText } = render(
         <MockedProvider mocks={mocks} addTypename={false}>
           <UserVarProvider
             userVar={makeVar({
@@ -298,7 +282,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         </MockedProvider>,
       )
 
-      const twoFactorCode = container.querySelector('#twoFactorCode')
+      const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0]
       const form = getByRole('form')
 
       fireEvent.change(twoFactorCode, {
@@ -358,7 +342,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         initialIndex: 0,
       })
 
-      const { container, getByRole } = render(
+      const { getAllByRole, getByRole } = render(
         <MockedProvider mocks={mocks} addTypename={false}>
           <UserVarProvider
             userVar={makeVar({
@@ -380,7 +364,7 @@ describe('<TwoFactorAuthenticatePage />', () => {
         </MockedProvider>,
       )
 
-      const twoFactorCode = container.querySelector('#twoFactorCode')
+      const twoFactorCode = getAllByRole('textbox', { name: 'Please enter your pin code' })[0]
       const form = getByRole('form')
 
       fireEvent.change(twoFactorCode, {

diff --git a/frontend/src/components/fields/AuthenticateField.js b/frontend/src/components/fields/AuthenticateField.js
@@ -25,7 +25,7 @@ function AuthenticateField({ name = 'twoFactorCode', sendMethod }) {
           <FormLabel htmlFor={name} fontWeight="bold" textAlign="center">
             {codeSendMessage + ' ' + t`Please enter your two factor code below.`}
           </FormLabel>
-          <HStack justify="center" mb="4">
+          <HStack justify="center">
             <PinInput
               id={name}
               otp
@@ -34,12 +34,12 @@ function AuthenticateField({ name = 'twoFactorCode', sendMethod }) {
               name={name}
               onChange={(val) => form.setFieldValue(field.name, val)}
             >
-              <PinInputField borderColor="black" />
-              <PinInputField borderColor="black" />
-              <PinInputField borderColor="black" />
-              <PinInputField borderColor="black" />
-              <PinInputField borderColor="black" />
-              <PinInputField borderColor="black" />
+              <PinInputField borderColor="black" isRequired={true} />
+              <PinInputField borderColor="black" isRequired={true} />
+              <PinInputField borderColor="black" isRequired={true} />
+              <PinInputField borderColor="black" isRequired={true} />
+              <PinInputField borderColor="black" isRequired={true} />
+              <PinInputField borderColor="black" isRequired={true} />
             </PinInput>
           </HStack>
         </FormControl>

diff --git a/frontend/src/components/fields/__tests__/AuthenticateField.test.js b/frontend/src/components/fields/__tests__/AuthenticateField.test.js