login tests

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

package.json

@@ -28,7 +28,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --detectOpenHandles",
+    "test:coverage" : "react-scripts test --coverage",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -30,7 +30,7 @@ function App() {
 
 
   return (
-    <div className="App">
+    <div className="App" data-testid="app-container">
       <Router>
         <Routes>
           <Route element={<AuthWrapper isLoggedIn={isLoggedIn} redirect="/login" />}>

src/App.test.js

@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/react';
+import React from 'react';
 import App from './App';
 
-test('dummy test', () => {
-  // render(<App />);
-  // const linkElement = screen.getByText(/search/i);
-  // expect(linkElement).toBeInTheDocument();
+
+it('renders the app component', () => {
+  render(<App/>);
+  expect(screen.getByTestId('app-container')).toBeInTheDocument();
 });

src/__tests__/LoginPage/LoginPage.test.js

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import LoginPage from 'pages/LoginPage';
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+it('renders the signin presentation component and signin components if auth enabled', () => {
+  render(
+    <BrowserRouter>
+      <Routes>
+        <Route path="*" element={<LoginPage isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={false} setIsLoggedIn={() => { }} />} />
+      </Routes>
+    </BrowserRouter>
+  );
+  expect(screen.getByTestId('login-container')).toBeInTheDocument();
+  expect(screen.getByTestId('presentation-container')).toBeInTheDocument();
+  expect(screen.getByTestId('signin-container')).toBeInTheDocument();
+});
+

src/__tests__/LoginPage/SignIn.test.js

@@ -0,0 +1,93 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import SignIn from 'components/SignIn';
+import {api} from "../../api";
+import userEvent from '@testing-library/user-event';
+
+
+// useNavigate mock
+const mockedUsedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+   // @ts-ignore
+   ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedUsedNavigate,
+}));
+
+afterEach(() => {
+  // restore the spy created with spyOn
+  jest.restoreAllMocks();
+});
+
+describe('Signin component automatic navigation', () => {
+
+  it('navigates to homepage when user is already logged in',async () => {
+    render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={true} setIsLoggedIn={() => { }} />);
+    await expect(mockedUsedNavigate).toHaveBeenCalledWith('/home');
+  })
+  
+  it('navigates to homepage when auth is disabled',async () => {
+    // mock request to check auth
+    // @ts-ignore
+    jest.spyOn(api,"get").mockResolvedValue({status:200, data:{}});
+    render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={false} setIsLoggedIn={() => { }} />);
+    await waitFor(() => {
+      expect(mockedUsedNavigate).toHaveBeenCalledWith('/home');
+    }) 
+  }); 
+});
+
+describe('Sign in form', () => {
+  beforeEach(() => {
+    // mock auth check request 
+    // @ts-ignore
+    jest.spyOn(api,"get").mockResolvedValue({status:401, data:{}});
+  })
+
+  it('should change username and password values on user input',async () => {
+    render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={false} setIsLoggedIn={() => { }} />);
+    const usernameInput = await screen.findByLabelText(/^Username/i);
+    const passwordInput = await screen.findByLabelText(/^Enter Password/i);
+    fireEvent.change(usernameInput,{target:{value:'test'}});
+    fireEvent.change(passwordInput,{target:{value:'test'}});
+    expect(usernameInput).toHaveValue('test');
+    expect(passwordInput).toHaveValue('test');
+  });
+
+  it('should display error if username and password values are empty after change', async () => {
+    render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={false} setIsLoggedIn={() => { }} />);
+    const usernameInput = screen.getByLabelText(/^Username/i);
+    const passwordInput = screen.getByLabelText(/^Enter Password/i);
+    userEvent.click(usernameInput)
+    userEvent.type(usernameInput,'t');
+    userEvent.type(usernameInput,'{backspace}');
+    userEvent.click(passwordInput)
+    userEvent.type(passwordInput,'t');
+    userEvent.type(passwordInput,'{backspace}');
+    const usernameError =screen.getByText(/enter a username/i);
+    const passwordError =screen.getByText(/enter a password/i);
+    await waitFor(() => expect(usernameError).toBeInTheDocument());
+    await waitFor(() => expect(passwordError).toBeInTheDocument());
+  });
+
+  it('should log in the user and navigate to homepage if login is successful',async () => {
+    render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={false} setIsLoggedIn={() => { }} />);
+    const submitButton = await screen.findByText(/^Continue/i);
+    // @ts-ignore
+    jest.spyOn(api,"get").mockResolvedValue({status:200, data:{data:{}}});
+    fireEvent.click(submitButton);
+    await waitFor(() => {
+      expect(mockedUsedNavigate).toHaveBeenCalledWith('/home');
+    });
+  });
+
+  it('should should display login error if login not successful',async () => {
+    render(<SignIn isAuthEnabled={true} setIsAuthEnabled={() => { }} isLoggedIn={false} setIsLoggedIn={() => { }} />);
+    const submitButton = await screen.findByText(/^Continue/i);
+    jest.spyOn(api,"get").mockRejectedValue();;
+    fireEvent.click(submitButton);
+    const errorDisplay = await screen.findByText(/Authentication Failed/i);
+    await waitFor(() => {
+      expect(errorDisplay).toBeInTheDocument();
+    });
+  })
+});

src/components/SignIn.jsx

@@ -149,7 +149,7 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
 
 
   return (
-    <Box className={classes.cardContainer}>
+    <Box className={classes.cardContainer} data-testid="signin-container">
       <Card className={classes.loginCard} >
         <CardContent className={classes.loginCardContent}>
           <CssBaseline />

src/components/SignInPresentation.jsx

@@ -36,7 +36,7 @@ const useStyles = makeStyles(() => ({
 export default function SigninPresentation(props) {
   const classes = useStyles();
   return (
-    <Stack spacing={0} className={classes.container} >
+    <Stack spacing={0} className={classes.container} data-testid="presentation-container">
       <img src={logoWhite} alt="zot logo" className={classes.logo}></img>
       <Typography variant="h2" className={classes.mainText}>
         Welcome to our repository

src/pages/LoginPage.jsx

@@ -19,7 +19,7 @@ function LoginPage({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, setIsLoggedIn
   const classes = useStyles();
 
   return (
-    <Grid container spacing={0} className={classes.container}>
+    <Grid container spacing={0} className={classes.container} data-testid="login-container">
       <Grid item xs={6}>
         <SigninPresentation />
       </Grid>