feat: Adding the home page and tests for it

webapp/src/pages/Root.jsx

@@ -1,5 +1,23 @@
+import { Center } from "@chakra-ui/layout";
+import { Heading, Stack } from "@chakra-ui/react";
 import React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import ButtonEf from '../components/ButtonEf';
 
 export default function Root() {
-    return <p>Proof of concept</p>
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+
+    return (
+        <Center display={"flex"} flexDirection={"column"} w={"100wh"} h={"100vh"}
+            bg={"blue.50"} justifyContent={"center"} alignItems={"center"}>
+            <Heading as="h1" color="blue.400">{"WIQ-EN2B"}</Heading>
+            <p>Welcome to the WIQ-EN2B page</p>
+            <Stack spacing={4} p="3rem">
+                <ButtonEf dataTestId={"Login"} variant={"solid"} colorScheme={"blue"} text={t("common.login")} onClick={() => navigate("/login")}/>
+                <p onClick={() => navigate("/signup")} style={{ cursor: 'pointer' }}>You don´t have an account?</p>
+            </Stack>  
+        </Center>
+    );
 }

webapp/src/pages/Signup.jsx

@@ -1,5 +1,5 @@
 import { Center } from "@chakra-ui/layout";
-import { Heading, Input, Button, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, Text, FormHelperText } from "@chakra-ui/react";
+import { Heading, Input, Button, InputGroup, Stack, InputLeftElement, chakra, Box, Avatar, FormControl, InputRightElement, Text, FormHelperText, IconButton } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
 import axios, { HttpStatusCode } from "axios";
 import React, { useState } from "react";
@@ -104,10 +104,8 @@ export default function Signup() {
                                     value={password}
                                     onChange={(e) => setPassword(e.target.value)}
                                 />
-                                <InputRightElement width="4.5rem">
-                                    <Button data-testid="show-confirm-password-button" h="1.75rem" size="sm" onClick={() => setShowPassword(!showPassword)}>
-                                        {showPassword ? <ViewOffIcon/> : <ViewIcon/>}
-                                    </Button>
+                                <InputRightElement>
+                                    <IconButton aria-label='Shows or hides the password' data-testid="show-confirm-password-button" h="1.75rem" size="sm" onClick={() => setShowPassword(!showPassword)} icon={showPassword ? <ViewOffIcon/> : <ViewIcon/>}/>
                                 </InputRightElement>
                             </InputGroup>
                         </FormControl>
@@ -120,10 +118,8 @@ export default function Signup() {
                                     value={confirmPassword}
                                     onChange={(e) => setConfirmPassword(e.target.value)}
                                 />
-                                <InputRightElement width="4.5rem">
-                                    <Button data-testid="show-confirm-password-button" h="1.75rem" size="sm" onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
-                                        {showConfirmPassword ? <ViewOffIcon/> : <ViewIcon/>}
-                                    </Button>
+                                <InputRightElement>
+                                    <IconButton aria-label='Shows or hides the password' data-testid="show-confirm-password-button" h="1.75rem" size="sm" onClick={() => setShowConfirmPassword(!showConfirmPassword)} icon={showConfirmPassword ? <ViewOffIcon/> : <ViewIcon/>}/>
                                 </InputRightElement>
                             </InputGroup>
                             {confirmPassword && password && confirmPassword !== password && (

webapp/src/tests/Root.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, fireEvent, getByTestId } from '@testing-library/react';
+import { MemoryRouter, createMemoryRouter } from 'react-router';
+import Root from '../pages/Root';
+
+describe('Root component', () => {
+
+  it('renders WIQ-EN2B heading', () => {
+    render(<MemoryRouter><Root /></MemoryRouter>);
+    const headingElement = screen.getByText('WIQ-EN2B');
+    expect(headingElement).toBeInTheDocument();
+  });
+
+  it('renders welcome message', () => {
+    render(<MemoryRouter><Root /></MemoryRouter>);
+    const welcomeMessage = screen.getByText(/welcome to the WIQ-EN2B page/i);
+    expect(welcomeMessage).toBeInTheDocument();
+  });
+
+  it('renders Log In button', () => {
+    render(<MemoryRouter><Root /></MemoryRouter>);
+    expect(getByTestId(document.body, 'Login')).toBeInTheDocument();
+  });
+
+  it('navigates to /login when Log In button is clicked', () => {
+    const { container } = render(<MemoryRouter><Root /></MemoryRouter>);
+    fireEvent.click(getByTestId(document.body, 'Login'));
+    expect(container.innerHTML).toMatch('<div class=\"css-xmmg5m\"><h1 class=\"chakra-heading css-p03q1r\">WIQ-EN2B</h1><p>Welcome to the WIQ-EN2B page</p><div class=\"chakra-stack css-gjlptk\"><button type=\"submit\" class=\"chakra-button custom-button effect1 css-1vdwnhw\" data-testid=\"Login\">common.login</button><p style=\"cursor: pointer;\">You don´t have an account?</p></div></div>');
+  });
+
+  it('navigates to /signup when "You don\'t have an account?" message is clicked', () => {
+    const { container } = render(<MemoryRouter><Root /></MemoryRouter>);
+    fireEvent.click(screen.getByText('You don´t have an account?'));
+    expect(container.innerHTML).toMatch('<div class=\"css-xmmg5m\"><h1 class=\"chakra-heading css-p03q1r\">WIQ-EN2B</h1><p>Welcome to the WIQ-EN2B page</p><div class=\"chakra-stack css-gjlptk\"><button type=\"submit\" class=\"chakra-button custom-button effect1 css-1vdwnhw\" data-testid=\"Login\">common.login</button><p style=\"cursor: pointer;\">You don´t have an account?</p></div></div>');
+  });
+});