[#38] Add i18next mocks and use translation slugs in tests

src/__mocks__/react-i18next.ts

@@ -0,0 +1,8 @@
+const useMock = {
+  t: (k: string) => {
+    return k;
+  },
+  i18n: {changeLanguage: (language: string) => {}}
+};
+
+export const useTranslation = () => useMock;

src/components/LoginForm/index.tsx

@@ -9,6 +9,13 @@ export interface LoginFormValues {
   password: string;
 }
 
+export const submitLoginForm = async (values: LoginFormValues, { setSubmitting }: FormikHelpers<LoginFormValues>) => {
+  await new Promise((resolve) => setTimeout(resolve, 2000)); // Will be replaced by API call in BackEnd Task
+
+  console.log(JSON.stringify(values, null, 2)); // Will be replaced by authentication & redirection in BackEnd Task
+  setSubmitting(false);
+};
+
 const LoginForm = () => {
   const { t } = useTranslation();
 
@@ -20,13 +27,6 @@ const LoginForm = () => {
       .required(t('login.errors.password_required'))
   });
 
-  const submitLoginForm = async (values: LoginFormValues, { setSubmitting }: FormikHelpers<LoginFormValues>) => {
-    await new Promise((resolve) => setTimeout(resolve, 2000)); // Will be replaced by API call in BackEnd Task
-
-    console.log(JSON.stringify(values, null, 2)); // Will be replaced by authentication & redirection in BackEnd Task
-    setSubmitting(false);
-  };
-
   return (
     <div className="login-form">
       <img className="login-form__header-image" src={nimbleLogo} alt={t('login.nimble_logo_alt')} />

src/tests/Login/index.test.tsx

@@ -5,11 +5,9 @@ describe('LoginScreen', () => {
   const screenClass = 'login-screen';
 
   it('displays a sign in to Nimble message', () => {
-    const signInText = 'Sign in to Nimble';
-
     const loginScreen = render(<LoginScreen />);
 
-    expect(loginScreen.getByText(signInText)).toBeVisible();
+    expect(loginScreen.getByText('login.title')).toBeVisible();
   });
 
   it('adds the screen class to body', () => {

src/tests/components/BaseAlert/__snapshots__/index.test.tsx.snap

@@ -12,7 +12,7 @@ Object {
           class="base-alert__icon"
         >
           <img
-            alt="Error icon"
+            alt="base_alert.error_icon_alt"
             src="icon-error.svg"
           />
         </div>
@@ -22,7 +22,7 @@ Object {
           <h5
             class="base-alert__content-title"
           >
-            Error
+            base_alert.error_title
           </h5>
           <div
             class="base-alert__content-message"
@@ -42,7 +42,7 @@ Object {
         class="base-alert__icon"
       >
         <img
-          alt="Error icon"
+          alt="base_alert.error_icon_alt"
           src="icon-error.svg"
         />
       </div>
@@ -52,7 +52,7 @@ Object {
         <h5
           class="base-alert__content-title"
         >
-          Error
+          base_alert.error_title
         </h5>
         <div
           class="base-alert__content-message"

src/tests/components/LoginForm/__snapshots__/index.test.tsx.snap

@@ -9,14 +9,14 @@ Object {
         class="login-form"
       >
         <img
-          alt="Nimble Logo"
+          alt="login.nimble_logo_alt"
           class="login-form__header-image"
           src="nimble-logo.png"
         />
         <div
           class="login-form__header-title"
         >
-          Sign in to Nimble
+          login.title
         </div>
         <form
           action="#"
@@ -28,7 +28,7 @@ Object {
               class="login-form__label"
               for="email"
             >
-              Email
+              login.email
             </label>
             <input
               class="login-form__input form-control"
@@ -45,7 +45,7 @@ Object {
               class="login-form__label"
               for="password"
             >
-              Password
+              login.password
             </label>
             <input
               class="login-form__input form-control"
@@ -62,7 +62,7 @@ Object {
               class="btn btn-light"
               type="submit"
             >
-              Sign in
+              login.submit
             </button>
           </div>
         </form>
@@ -74,14 +74,14 @@ Object {
       class="login-form"
     >
       <img
-        alt="Nimble Logo"
+        alt="login.nimble_logo_alt"
         class="login-form__header-image"
         src="nimble-logo.png"
       />
       <div
         class="login-form__header-title"
       >
-        Sign in to Nimble
+        login.title
       </div>
       <form
         action="#"
@@ -93,7 +93,7 @@ Object {
             class="login-form__label"
             for="email"
           >
-            Email
+            login.email
           </label>
           <input
             class="login-form__input form-control"
@@ -110,7 +110,7 @@ Object {
             class="login-form__label"
             for="password"
           >
-            Password
+            login.password
           </label>
           <input
             class="login-form__input form-control"
@@ -127,7 +127,7 @@ Object {
             class="btn btn-light"
             type="submit"
           >
-            Sign in
+            login.submit
           </button>
         </div>
       </form>

src/tests/components/LoginForm/index.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import LoginForm, { LoginFormValues } from '@src/components/LoginForm';
+import LoginForm, { LoginFormValues, submitLoginForm } from '@src/components/LoginForm';
 import { FormikHelpers } from 'formik';
 
 describe('LoginForm', () => {
@@ -11,27 +11,27 @@ describe('LoginForm', () => {
 
   it('displays an email field with its label', () => {
     const loginForm = render(<LoginForm />);
-    expect(loginForm.getByLabelText('Email')).toBeVisible();
+    expect(loginForm.getByLabelText('login.email')).toBeVisible();
   });
 
   it('displays a password field with its label', () => {
     const loginForm = render(<LoginForm />);
 
-    expect(loginForm.getByLabelText('Password')).toBeVisible();
+    expect(loginForm.getByLabelText('login.password')).toBeVisible();
   });
 
   it('displays a Sign In button', () => {
     const loginForm = render(<LoginForm />);
 
-    expect(loginForm.getByText('Sign in')).toBeVisible();
+    expect(loginForm.getByText('login.title')).toBeVisible();
   });
 
   it('calls the setSubmitting callback after submitLoginForn is called', async () => {
-    const loginForm = new LoginForm({});
     const values = { email: 'test@email.com', password: '012345678' };
+
     const formikHelpers = { setSubmitting: jest.fn() } as unknown as FormikHelpers<LoginFormValues>;
 
-    await loginForm.submitLoginForm(values, formikHelpers);
+    await submitLoginForm(values, formikHelpers);
 
     expect(formikHelpers.setSubmitting).toBeCalledWith(false);
   });

src/tests/index.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import App from '@src/App';
 
@@ -7,6 +7,9 @@ import App from '@src/App';
 // called with <App /> and HTML element with id = root
 jest.mock('react-dom', () => ({ render: jest.fn() }));
 
+// mock i18n import as we do not need translations setup for this test
+jest.mock('@src/i18n', () => ({}));
+
 test('renders with App and root div', () => {
   // Create and append to document body
   // an HTML element with id = root
@@ -21,7 +24,9 @@ test('renders with App and root div', () => {
   // and HTML element with id = root
   expect(ReactDOM.render).toHaveBeenCalledWith(
     <React.StrictMode>
-      <App />
+      <Suspense fallback="loading">
+        <App />
+      </Suspense>
     </React.StrictMode>,
     root
   );