From 1bb828f6dbc497954522ed3f7fb0cda7a3ea68da Mon Sep 17 00:00:00 2001
From: lcampbell <l.campbell144768@gmail.com>
Date: Thu, 27 Jul 2023 13:18:04 -0300
Subject: [PATCH] fix tests

---
 .../src/auth/TwoFactorAuthenticatePage.js     | 10 ++--
 .../TwoFactorAuthenticatePage.test.js         | 44 +++++----------
 .../components/fields/AuthenticateField.js    | 14 ++---
 .../__tests__/AuthenticateField.test.js       | 55 -------------------
 4 files changed, 27 insertions(+), 96 deletions(-)
 delete mode 100644 frontend/src/components/fields/__tests__/AuthenticateField.test.js

diff --git a/frontend/src/auth/TwoFactorAuthenticatePage.js b/frontend/src/auth/TwoFactorAuthenticatePage.js
index f8040ddcb8..2ff79b20dc 100644
--- 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
index bf5941b7e8..0b613a9da6 100644
--- 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
index 48034182d3..21fcfbd0a3 100644
--- 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
deleted file mode 100644
index 611b6e8bad..0000000000
--- a/frontend/src/components/fields/__tests__/AuthenticateField.test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import { object, string } from 'yup'
-import { fireEvent, render, waitFor } from '@testing-library/react'
-import { theme, ChakraProvider } from '@chakra-ui/react'
-import { Formik } from 'formik'
-import { I18nProvider } from '@lingui/react'
-import { setupI18n } from '@lingui/core'
-
-import { AuthenticateField } from '../AuthenticateField'
-
-const i18n = setupI18n({
-  locale: 'en',
-  messages: {
-    en: {},
-  },
-  localeData: {
-    en: {},
-  },
-})
-
-describe('<AuthenticateField />', () => {
-  describe('when validation fails', () => {
-    it('displays an error message', async () => {
-      const validationSchema = object().shape({
-        twoFactorCode: string().required('sadness'),
-      })
-
-      const { getByRole, getByText } = render(
-        <I18nProvider i18n={i18n}>
-          <ChakraProvider theme={theme}>
-            <Formik
-              // return a sadness error for the password field
-              validationSchema={validationSchema}
-              initialValues={{
-                twoFactorCode: '',
-              }}
-              onSubmit={() => {}}
-            >
-              {() => <AuthenticateField sendMethod="phone" />}
-            </Formik>
-          </ChakraProvider>
-        </I18nProvider>,
-      )
-
-      const authenticateInput = getByRole('textbox', {
-        name: /Please enter your two factor code below/i,
-      })
-      fireEvent.blur(authenticateInput)
-
-      await waitFor(() => {
-        expect(getByText(/sadness/)).toBeInTheDocument()
-      })
-    })
-  })
-})