[#21] Use nock for mocking API response WIP

package.json

@@ -65,6 +65,7 @@
     "danger": "10.9.0",
     "danger-plugin-istanbul-coverage": "1.6.2",
     "eslint": "8.11.0",
+    "nock": "13.3.0",
     "postcss": "8.4.21",
     "postcss-import": "14.1.0",
     "prettier": "2.6.0",

src/routes/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { RouteObject } from 'react-router-dom';
 
 import HomeScreen from 'screens/Home';
-import LoginScreen from 'screens/Home/login';
+import LoginScreen from 'screens/Login';
 
 const routes: RouteObject[] = [
   {

src/screens/Login/index.test.tsx

@@ -0,0 +1,91 @@
+import { BrowserRouter } from 'react-router-dom';
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import nock from 'nock';
+
+import LoginScreen from '.';
+
+afterAll(() => {
+  nock.cleanAll();
+  nock.restore();
+});
+
+describe('LoginScreen', () => {
+  test('submit an an empty email and password and receive errors', async () => {
+    render(<LoginScreen />, { wrapper: BrowserRouter });
+
+    const submitButton = screen.getByRole('button', { name: 'login.sign-in' });
+
+    await userEvent.click(submitButton);
+
+    expect(screen.getByText('login.invalid-email')).toBeInTheDocument();
+    expect(screen.getByText('login.invalid-password')).toBeInTheDocument();
+  });
+
+  test('submit incorrect details', async () => {
+    render(<LoginScreen />, { wrapper: BrowserRouter });
+
+    const formData = {
+      email: '[email protected]',
+      password: 'password123',
+    };
+
+    nock(`${process.env.REACT_APP_API_ENDPOINT}`)
+      .defaultReplyHeaders({
+        'access-control-allow-origin': '*',
+        'access-control-allow-credentials': 'true',
+      })
+      .post('/oauth/token', {
+        email: formData.email,
+        password: formData.password,
+        grant_type: 'password',
+        client_id: process.env.REACT_APP_API_CLIENT_ID,
+        client_secret: process.env.REACT_APP_API_CLIENT_SECRET,
+      })
+      .reply(400, {
+        errors: [
+          {
+            detail: 'Your email or password is incorrect. Please try again.',
+            code: 'invalid_email_or_password',
+          },
+        ],
+      });
+
+    const emailField = screen.getByLabelText('login.email');
+    const passwordField = screen.getByLabelText('login.password');
+    const submitButton = screen.getByRole('button', { name: 'login.sign-in' });
+
+    await userEvent.type(emailField, formData.email);
+    await userEvent.type(passwordField, formData.password);
+
+    await userEvent.click(submitButton);
+    await waitFor(() => {
+      expect(screen.getByText('Your email or password is incorrect. Please try again.')).toBeInTheDocument();
+    });
+  });
+
+  // test('Allows form submission of email and password', async () => {
+  //   const requestData = {
+  //     email: '[email protected]',
+  //     password: 'password123',
+  //   };
+
+  //   render(<LoginScreen />, { wrapper: BrowserRouter });
+
+  //   const emailField = screen.getByLabelText('login.email');
+  //   const passwordField = screen.getByLabelText('login.password');
+  //   const submitButton = screen.getByRole('button', { name: 'login.sign-in' });
+
+  //   await userEvent.type(emailField, '[email protected]');
+  //   await userEvent.type(passwordField, 'password123');
+
+  //   const requestSpy = jest.spyOn(axios, 'request').mockImplementation(() => Promise.resolve({}));
+
+  //   await userEvent.click(submitButton);
+
+  //   expect(axios.request).toHaveBeenCalledWith(requestData);
+
+  //   requestSpy.mockRestore();
+  // });
+});

src/screens/Home/login.tsx → src/screens/Login/index.tsx

@@ -41,10 +41,10 @@ function LoginScreen() {
       setToken({ accessToken: accessToken, refreshToken: refreshToken });
       navigate('/');
     } catch (error) {
-      let errorMessage = '';
+      let errorMessage = 'There was a problem receiving a response from the server';
 
       if (error instanceof Error) {
-        errorMessage = (error as AxiosError).response?.data?.errors[0]?.detail || error.message || 'Internal error';
+        errorMessage = (error as AxiosError).response?.data?.errors[0]?.detail || error.cause || errorMessage;
       }
       setErrors([errorMessage]);
     } finally {