diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b082ddb8..dc6639b7 100644 --- a/.github/workflows/release.yml +++ b/.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 ] diff --git a/webapp/e2e/features/about_features/positive_logged_user_seeing_about_screen.feature b/webapp/e2e/features/about_features/positive_logged_user_seeing_about_screen.feature index b75ae049..63d9fa6c 100644 --- a/webapp/e2e/features/about_features/positive_logged_user_seeing_about_screen.feature +++ b/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 \ No newline at end of file + And the user presses the button for seeing the about section (i) + Then The user is presented to the about screen \ No newline at end of file diff --git a/webapp/e2e/jest.config.js b/webapp/e2e/jest.config.js index db3be3d9..147c0817 100644 --- a/webapp/e2e/jest.config.js +++ b/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 } \ No newline at end of file diff --git a/webapp/e2e/steps/about.steps.js b/webapp/e2e/steps/about.steps.js new file mode 100644 index 00000000..4730db3a --- /dev/null +++ b/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 = "test@email.com" + 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(); + }); +}); \ No newline at end of file diff --git a/webapp/e2e/steps/register-form.steps.js b/webapp/e2e/steps/register-form.steps.js deleted file mode 100644 index 172e1969..00000000 --- a/webapp/e2e/steps/register-form.steps.js +++ /dev/null @@ -1,52 +0,0 @@ -const puppeteer = require('puppeteer'); -const { defineFeature, loadFeature }=require('jest-cucumber'); -const setDefaultOptions = require('expect-puppeteer').setDefaultOptions -const feature = loadFeature('./features/register-form.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('The user is not registered in the site', ({given,when,then}) => { - - let username; - let password; - - given('An unregistered user', async () => { - username = "pablo" - password = "pabloasw" - await expect(page).toClick("button", { text: "Don't have an account? Register here." }); - }); - - when('I fill the data in the form and press submit', async () => { - await expect(page).toFill('input[name="username"]', username); - await expect(page).toFill('input[name="password"]', password); - await expect(page).toClick('button', { text: 'Add User' }) - }); - - then('A confirmation message should be shown in the screen', async () => { - await expect(page).toMatchElement("div", { text: "User added successfully" }); - }); - }) - - afterAll(async ()=>{ - browser.close() - }) - -}); \ No newline at end of file diff --git a/webapp/e2e/test-environment-setup.js b/webapp/e2e/test-environment-setup.js deleted file mode 100644 index 7b7ed511..00000000 --- a/webapp/e2e/test-environment-setup.js +++ /dev/null @@ -1,19 +0,0 @@ -const { MongoMemoryServer } = require('mongodb-memory-server'); - - -let mongoserver; -let userservice; -let authservice; -let gatewayservice; - -async function startServer() { - console.log('Starting MongoDB memory server...'); - mongoserver = await MongoMemoryServer.create(); - const mongoUri = mongoserver.getUri(); - process.env.MONGODB_URI = mongoUri; - userservice = await require("../../users/userservice/user-service"); - authservice = await require("../../users/authservice/auth-service"); - gatewayservice = await require("../../gatewayservice/gateway-service"); - } - - startServer(); diff --git a/webapp/package.json b/webapp/package.json index 00f78c59..7b1b35ac 100644 --- a/webapp/package.json +++ b/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": { diff --git a/webapp/src/components/LateralMenu.jsx b/webapp/src/components/LateralMenu.jsx index c9066075..b6a63379 100644 --- a/webapp/src/components/LateralMenu.jsx +++ b/webapp/src/components/LateralMenu.jsx @@ -103,7 +103,7 @@ const LateralMenu = ({ isOpen, onClose, changeLanguage, isDashboard }) => { {isLoggedIn && ( )} - } className={"custom-button effect1"} onClick={() => {navigate("/about");}} margin={"10px"}> + } className={"custom-button effect1"} onClick={() => {navigate("/about");}} margin={"10px"} id={"aboutButton"}> diff --git a/webapp/src/components/MenuButton.jsx b/webapp/src/components/MenuButton.jsx index 73e5a3e7..8c4da367 100644 --- a/webapp/src/components/MenuButton.jsx +++ b/webapp/src/components/MenuButton.jsx @@ -22,7 +22,7 @@ const MenuButton = ({ onClick }) => { }, []); return ( - + {t('about.title')} - + {t("about.description1")} -