Merge pull request #198 from Arquisoft/feat/e2e

test: initial e2e testing

.github/workflows/release.yml

@@ -41,7 +41,7 @@ jobs:
           node-version: 20
       - run: npm --prefix webapp install
       - run: npm --prefix webapp run build
-      #- run: npm --prefix webapp run test:e2e TODO: re-enable
+      - run: npm --prefix webapp run test:e2e
   docker-push-api:
     runs-on: ubuntu-latest
     needs: [ e2e-tests ]

webapp/e2e/features/about_features/positive_logged_user_seeing_about_screen.feature

@@ -3,5 +3,5 @@ Feature: Seeing the about screen of the webpage
   Scenario: A logged user wants to see the about screen of the webpage
     Given A logged user in the main menu
     When The user presses the button for deploying the lateral menu
-    And the user presses the button for seeing the about secction (i)
-    Then The screen shows redirects the user to the about screen
+    And the user presses the button for seeing the about section (i)
+    Then The user is presented to the about screen

webapp/e2e/jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
     testMatch: ["**/steps/*.js"],
-    testTimeout: 30000,
-    setupFilesAfterEnv: ["expect-puppeteer"]
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+    testTimeout: 30000
 }

webapp/e2e/steps/about.steps.js

@@ -0,0 +1,60 @@
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const puppeteer = require('puppeteer');
+const setDefaultOptions = require("expect-puppeteer").setDefaultOptions;
+const feature = loadFeature('./features/about_features/positive_logged_user_seeing_about_screen.feature');
+let page;
+let browser;
+
+defineFeature(feature, test => {
+
+    beforeAll(async () => {
+        browser = process.env.GITHUB_ACTIONS
+          ? await puppeteer.launch()
+          : await puppeteer.launch({ headless: false, slowMo: 100 });
+        page = await browser.newPage();
+        //Way of setting up the timeout
+        setDefaultOptions({ timeout: 10000 })
+
+        await page
+          .goto("http://localhost:3000", {
+            waitUntil: "networkidle0",
+          })
+          .catch(() => {});
+      });
+
+      test("A logged user wants to see the about screen of the webpage", ({given,when,and,then}) => {
+
+        let username;
+        let password;
+
+        given("A logged user in the main menu", async () => {
+            username = "[email protected]"
+            password = "password"
+
+            await expect(page).toClick("button[data-testid='Login'");
+            await expect(page).toFill("#user", username);
+            await expect(page).toFill("#password", password);
+            await expect(page).toClick("button[data-testid='Login'");
+        });
+
+        when("The user presses the button for deploying the lateral menu", async () => {
+            await expect(page).toClick("#lateralMenuButton");
+        });
+
+        and("the user presses the button for seeing the about section (i)", async () => {
+            await expect(page).toClick("#aboutButton");
+        });
+
+        then("The user is presented to the about screen", async () => {
+            let header = await page.$eval("h2", (element) => {
+                return element.innerHTML
+              })
+            let value = header === "About" || header === "Sobre nosotros";
+            expect(value).toBeTruthy();
+        });
+      });
+
+      afterAll((done) => {
+        done();
+      });
+});

webapp/package.json

@@ -35,7 +35,7 @@
     "build": "react-scripts build",
     "prod": "serve -s build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!axios)/'",
-    "test:e2e": "start-server-and-test 'node e2e/test-environment-setup.js' http://localhost:8000/health prod 3000 \"cd e2e && jest\"",
+    "test:e2e": "start-server-and-test start 3000 \"cd e2e && jest --detectOpenHandles\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

webapp/src/components/LateralMenu.jsx

@@ -103,7 +103,7 @@ const LateralMenu = ({ isOpen, onClose, changeLanguage, isDashboard }) => {
                             {isLoggedIn && (
                                 <Button data-testid={"LogOut"} type="submit" colorScheme="raw_umber" margin={"10px"} className={"custom-button effect1"} onClick={handleLogout} width="70%">{t("common.logout")}</Button>
                             )}
-                            <IconButton type="submit" aria-label='About' colorScheme={"forest_green"} icon={<InfoIcon />} className={"custom-button effect1"} onClick={() => {navigate("/about");}} margin={"10px"}></IconButton>
+                            <IconButton type="submit" aria-label='About' colorScheme={"forest_green"} icon={<InfoIcon />} className={"custom-button effect1"} onClick={() => {navigate("/about");}} margin={"10px"} id={"aboutButton"}></IconButton>
                         </Flex>
                     </DrawerFooter>
                 </DrawerContent>

webapp/src/components/MenuButton.jsx

@@ -22,7 +22,7 @@ const MenuButton = ({ onClick }) => {
     }, []);
 
     return (
-        <Box position={isFixed ? "fixed" : "absolute"} top="1rem" left="1rem">
+        <Box position={isFixed ? "fixed" : "absolute"} top="1rem" left="1rem" id={"lateralMenuButton"}>
             <IconButton 
                 bg="pigment_green.600"
                 color="whiteAlpha.900"

webapp/src/pages/About.jsx

@@ -25,9 +25,8 @@ export default function About() {
               <InfoIcon boxSize={10} color="pigment_green.500" />
               <Heading as="h2">{t('about.title')}</Heading>
             </Box> 
-            <Stack spacing={4} p="1rem" backgroundColor="whiteAlpha.900" boxShadow="md" rounded="1rem">
+            <Stack spacing={4} p="1rem" backgroundColor="whiteAlpha.900" boxShadow="md" rounded="1rem" data-testid={"About page"}>
               <Text>{t("about.description1")}</Text>
-              <br></br>
               <Table variant="simple">
                 <Thead>
                   <Tr>