Login and navbar e2e

webapp/e2e/features/login.feature

@@ -0,0 +1,12 @@
+Feature: Login page functionality
+
+  Scenario: Successful login
+    Given I am on the login page
+    When I enter valid credentials
+    Then I should be redirected to the menu
+
+  Scenario: Failed login
+    Given I am on the login page
+    When I enter invalid credentials
+    Then I should NOT be redirected to the menu
+

webapp/e2e/features/navBar.feature

@@ -0,0 +1,13 @@
+Feature: NavBar functionality
+
+  Scenario: Displaying navbar elements correctly
+    Given I am on the home page
+    Then The navbar elements are visible
+
+  Scenario: Changing language
+    Given I am on the home page
+    When I click on the language button
+    Then The language options menu should be visible
+    Then I choose Spanish
+    Then The navbar should be in Spanish
+

webapp/e2e/steps/login.steps.js

@@ -0,0 +1,61 @@
+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 = await puppeteer.launch({
+      slowMo: 20,
+      defaultViewport: { width: 1920, height: 1080 },
+      args: ['--window-size=1920,1080']
+    });
+    page = await browser.newPage();
+    setDefaultOptions({ timeout: 10000 });
+  });
+
+  test('Successful login', ({ given, when, then }) => {
+    given('I am on the login page', async () => {
+      await page.goto('http://localhost:3000/login');
+      await page.waitForSelector('.general');
+    });
+
+    when('I enter valid credentials', async () => {
+      await page.type('input[type="text"]', 'validUsername');
+      await page.type('input[type="password"]', 'validPassword');
+      await page.click('button[type="submit"]');
+    });
+
+    then('I should be redirected to the menu', async () => {
+      await page.waitForNavigation();
+      expect(page.url()).toContain('/menu');
+    });
+  });
+
+  test('Failed login', ({ given, when, then }) => {
+    given('I am on the login page', async () => {
+      await page.goto('http://localhost:3000/login');
+      await page.waitForSelector('.general');
+    });
+
+    when('I enter invalid credentials', async () => {
+      await page.type('input[type="text"]', 'invalidUsername');
+      await page.type('input[type="password"]', 'invalidPassword');
+      await page.click('button[type="submit"]');
+    });
+
+    then('I should NOT be redirected to the menu', async () => {
+        await page.waitForNavigation();
+        expect(page.url()).toContain('/login');
+      });
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});

webapp/e2e/steps/navBar.steps.js

@@ -0,0 +1,62 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature } = require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions;
+
+const feature = loadFeature('./features/navBar.feature');
+
+let page;
+let browser;
+
+defineFeature(feature, test => {
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      slowMo: 20,
+      defaultViewport: { width: 1920, height: 1080 },
+      args: ['--window-size=1920,1080']
+    });
+    page = await browser.newPage();
+    setDefaultOptions({ timeout: 10000 });
+  });
+
+  test('Displaying navbar elements correctly', ({ given, then }) => {
+    given('I am on the home page', async () => {
+      await page.goto('http://localhost:3000/'); 
+      await page.waitForSelector('.navbar-container');
+    });
+
+    then('The navbar elements are visible', async () => {
+      await expect(page).toMatchElement('.navbar-text', { text: 'Know and win!' });
+      await expect(page).toMatchElement('.language-button', { text: 'Language' });
+      await expect(page).toMatchElement('.help-button');
+    });
+  });
+
+  test('Changing language', ({ given, when, then }) => {
+    given('I am on the home page', async () => {
+      await page.goto('http://localhost:3000/'); 
+      await page.waitForSelector('.navbar-container');
+    });
+
+    when('I click on the language button', async () => {
+      await page.click('.language-button');
+    });
+
+    then('The language options menu should be visible', async () => {
+      await page.waitForSelector('.MuiMenu-paper', { visible: true });
+    });
+
+    then('I choose Spanish', async () => {
+      await page.click('text=Spanish');
+    });
+
+    then('The navbar should be in Spanish', async () => {
+      const navbarText = await page.$eval('.navbar-text', el => el.textContent.trim());
+      expect(navbarText).toBe('¡Saber y ganar!');
+    });
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});