From 752edc00cc6170cd9a22e3ef2d0e61e78cc3a639 Mon Sep 17 00:00:00 2001 From: lauratbg Date: Sat, 20 Apr 2024 14:28:11 +0200 Subject: [PATCH] Login and navbar e2e --- webapp/e2e/features/login.feature | 12 ++++++ webapp/e2e/features/navBar.feature | 13 +++++++ webapp/e2e/steps/login.steps.js | 61 +++++++++++++++++++++++++++++ webapp/e2e/steps/navBar.steps.js | 62 ++++++++++++++++++++++++++++++ webapp/package-lock.json | 13 +++++++ 5 files changed, 161 insertions(+) create mode 100644 webapp/e2e/features/login.feature create mode 100644 webapp/e2e/features/navBar.feature create mode 100644 webapp/e2e/steps/login.steps.js create mode 100644 webapp/e2e/steps/navBar.steps.js diff --git a/webapp/e2e/features/login.feature b/webapp/e2e/features/login.feature new file mode 100644 index 00000000..0f259caf --- /dev/null +++ b/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 + diff --git a/webapp/e2e/features/navBar.feature b/webapp/e2e/features/navBar.feature new file mode 100644 index 00000000..87c66b97 --- /dev/null +++ b/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 + diff --git a/webapp/e2e/steps/login.steps.js b/webapp/e2e/steps/login.steps.js new file mode 100644 index 00000000..5c3fb3a1 --- /dev/null +++ b/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(); + }); +}); diff --git a/webapp/e2e/steps/navBar.steps.js b/webapp/e2e/steps/navBar.steps.js new file mode 100644 index 00000000..9664ff4c --- /dev/null +++ b/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(); + }); +}); diff --git a/webapp/package-lock.json b/webapp/package-lock.json index d4d75e5c..01a7cfde 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -11691,6 +11691,19 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",