From 8435d5890460e477ff257b1d381f15adccb94d0e Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Thu, 14 Oct 2021 11:22:57 +0200
Subject: [PATCH] Improving testcase
---
frontend/src/routes/register/index.test.tsx | 55 ++++++++++---------
.../src/routes/register/stepPersonForm.tsx | 1 +
2 files changed, 29 insertions(+), 27 deletions(-)
diff --git a/frontend/src/routes/register/index.test.tsx b/frontend/src/routes/register/index.test.tsx
index 1a9a04bd..51cb20ab 100644
--- a/frontend/src/routes/register/index.test.tsx
+++ b/frontend/src/routes/register/index.test.tsx
@@ -1,26 +1,22 @@
import React from 'react'
import { render, waitFor, screen } from 'test-utils'
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
import userEvent from '@testing-library/user-event'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import { LocalizationProvider } from '@mui/lab'
import Register from './index'
+import { act } from '@testing-library/react'
-// TODO: can this be initialized in 'test-utils'? should we stub it?
-// see https://react.i18next.com/misc/testing
-i18n.use(initReactI18next).init({
- lng: 'en',
- fallbackLng: 'en',
+// Mock react-i18next module to return a translation that just returns the key
+jest.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (value: string) => value,
+ i18n: {
+ changeLanguage: () => new Promise(() => {
+ }),
+ },
+ }),
+}))
- // Have a common namespace used around the full app
- ns: ['translations'],
- defaultNS: 'translations',
-
- debug: false,
-
- resources: { en: { translations: {} } },
-})
test('Validation message showing if last name is missing', async () => {
render(
@@ -28,21 +24,26 @@ test('Validation message showing if last name is missing', async () => {
<Register />
</LocalizationProvider>)
- const firstNameLabel = i18n.t('input.firstName').toString()
- const firstNameComponent = screen.getByLabelText(firstNameLabel)
- expect(firstNameComponent).toBeInTheDocument()
-
- userEvent.type(firstNameComponent, 'Test')
-
// Try to go to the next step and check that the validation message is showing
const submitButton = screen.getByTestId('button-next')
userEvent.click(submitButton)
- const validationLastName = i18n
- .t('common:validation.lastNameRequired')
- .toString()
- await waitFor(() => screen.getByText(validationLastName))
-
- const validationMessage = screen.getByText(validationLastName)
+ const validationMessage = await waitFor(() => screen.getByText('validation.lastNameRequired'))
expect(validationMessage).toBeInTheDocument()
+
+ screen.queryByText('validation.lastNameRequired')
+
+ const inputValue = 'Test input value'
+ // Note that we need to use the test-ID of the input field inside the Material UI TextField-component
+ userEvent.type(screen.getByTestId('lastName-input-field'), inputValue)
+ expect(screen.getByDisplayValue(inputValue)).toBeInTheDocument()
+
+ // Type in text, the message should disappear
+ screen.queryByText('validation.lastNameRequired')
+ userEvent.click(submitButton)
+
+ await waitFor((() => {
+ expect(screen.queryByText('validation.lastNameRequired')).not.toBeInTheDocument()
+ }))
+
})
diff --git a/frontend/src/routes/register/stepPersonForm.tsx b/frontend/src/routes/register/stepPersonForm.tsx
index 9674d86f..cb93d43d 100644
--- a/frontend/src/routes/register/stepPersonForm.tsx
+++ b/frontend/src/routes/register/stepPersonForm.tsx
@@ -132,6 +132,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
{...register(`last_name`, {
required: t<string>('validation.lastNameRequired'),
})}
+ inputProps={{ 'data-testid': 'lastName-input-field' }}
/>
<TextField
id='email'
--
GitLab