From 4c10145886c47a7aa03f8727c64d1fedccd105c3 Mon Sep 17 00:00:00 2001
From: sergiorodriguezgarcia
 <113514397+sergiorodriguezgarcia@users.noreply.github.com>
Date: Tue, 5 Mar 2024 14:10:43 +0100
Subject: [PATCH] feat: Adding the home page and tests for it

---
 webapp/src/pages/Root.jsx     | 20 ++++++++++++++++++-
 webapp/src/tests/Root.test.js | 36 +++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/tests/Root.test.js

diff --git a/webapp/src/pages/Root.jsx b/webapp/src/pages/Root.jsx
index c334a10c..2f907990 100644
--- a/webapp/src/pages/Root.jsx
+++ b/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>
+    );
 }
\ No newline at end of file
diff --git a/webapp/src/tests/Root.test.js b/webapp/src/tests/Root.test.js
new file mode 100644
index 00000000..554312bb
--- /dev/null
+++ b/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>');
+  });
+});
\ No newline at end of file