Merge pull request #86 from Arquisoft/LaraFMz

Lara f mz

package.json

@@ -1,6 +1,8 @@
 {
     "devDependencies": {
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "cucumber": "^6.0.7",
+        "jest": "^29.7.0"
     },
     "dependencies": {
         "path-browserify": "^1.0.1"

webapp/e2e/features/home.feature

@@ -0,0 +1,6 @@
+Feature: Access the app
+
+Scenario: A registered user enters the app
+  Given A user that is logged in the application
+  When I navigate to the Home page
+  Then I should be able to interact with the app

webapp/e2e/features/login.feature

@@ -0,0 +1,6 @@
+Feature: Logging in as a user
+
+Scenario: Logging in with valid credentials
+  Given A user that is logged in the application
+  When I enter valid username and password
+  Then A confirmation message should be shown in the screen

webapp/e2e/steps/home.steps.js

@@ -0,0 +1,57 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('../features/home.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 registered user enters the app', ({given,when,then}) => {
+
+    let username;
+    let password;
+
+    given('A user that is logged in the application', async () => {
+      username = "pablo"
+      password = "pabloasw"
+      await expect(page).toClick("button", { text: "INICIA SESIÓN" });
+    });
+
+    when('I navigate to the Home page', async () => {
+      await expect(page).toFill('input[name="username"]', username);
+      await expect(page).toFill('input[name="password"]', password);
+      await expect(page).toClick('button', { text: 'Login' })
+
+      await expect(page).toClick('a[href="/"]', { text: 'WIQ 5A' });
+      await page.waitForNavigation();
+
+    });
+
+    then('I should be able to interact with the app', async () => {
+        await expect(page).toMatchElement("button", { text: "JUGAR" });
+        await expect(page).toMatchElement("button", { text: "ESTADÍSTICAS" });
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});

webapp/e2e/steps/login.steps.js

@@ -0,0 +1,52 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('../features/login.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('Logging in with valid credentials', ({given,when,then}) => {
+
+    let username;
+    let password;
+
+    given('A user that is logged in the application', async () => {
+      username = "pablo"
+      password = "pabloasw"
+      await expect(page).toClick("button", { text: "INICIA SESIÓN" });
+    });
+
+    when('I enter valid username and password', async () => {
+      await expect(page).toFill('input[name="username"]', username);
+      await expect(page).toFill('input[name="password"]', password);
+      await expect(page).toClick('button', { text: 'Login' })
+    });
+
+    then('A confirmation message should be shown in the screen', async () => {
+        await expect(page).toMatchElement("div", { text: "Hello "+username+"!" });
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});

webapp/e2e/steps/register-form.steps.js

@@ -1,7 +1,7 @@
 const puppeteer = require('puppeteer');
 const { defineFeature, loadFeature }=require('jest-cucumber');
 const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
-const feature = loadFeature('./features/register-form.feature');
+const feature = loadFeature('../features/register-form.feature');
 
 let page;
 let browser;
@@ -31,7 +31,7 @@ defineFeature(feature, test => {
     given('An unregistered user', async () => {
       username = "pablo"
       password = "pabloasw"
-      await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+      await expect(page).toClick("button", { text: "REGÍSTRATE" });
     });
 
     when('I fill the data in the form and press submit', async () => {

webapp/src/components/Login.js

@@ -49,13 +49,15 @@ const Login = ({isLogged, setIsLogged, username, setUsername}) => {
             Login
           </Typography>
           <TextField
+            name="username"
             margin="normal"
             fullWidth
             label="Username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
           />
           <TextField
+            name="password"
             margin="normal"
             fullWidth
             label="Password"