tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

style: fix linting issues met Prettier

Browse source
This commit is contained in:
Lint Action 2025-04-14 07:07:06 +00:00
parent 0154af4de8
commit a74e786da2
5 changed files with 139 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

114
frontend/e2e/basic-homepage.spec.ts
View file

@ -1,82 +1,82 @@
import { test, expect } from '@playwright/test'; import { test, expect } from "@playwright/test";
test('User can pick their language', async ({ page }) => { test("User can pick their language", async ({ page }) => {
await page.goto('/'); await page.goto("/");
await expect(page.getByRole('button', { name: 'translate' })).toBeVisible(); await expect(page.getByRole("button", { name: "translate" })).toBeVisible();
await page.getByRole('button', { name: 'translate' }).click(); await page.getByRole("button", { name: "translate" }).click();
await page.getByText('Nederlands').click(); await page.getByText("Nederlands").click();
await expect(page.locator('h1')).toContainText('Onze sterke punten'); await expect(page.locator("h1")).toContainText("Onze sterke punten");
await expect(page.getByRole('heading', { name: 'Innovatief' })).toBeVisible(); await expect(page.getByRole("heading", { name: "Innovatief" })).toBeVisible();
await expect(page.getByRole('button', { name: 'vertalen' })).toBeVisible(); await expect(page.getByRole("button", { name: "vertalen" })).toBeVisible();
await page.getByRole('button', { name: 'vertalen' }).click(); await page.getByRole("button", { name: "vertalen" }).click();
await page.getByText('English').click(); await page.getByText("English").click();
await expect(page.locator('h1')).toContainText('Our strengths'); await expect(page.locator("h1")).toContainText("Our strengths");
await expect(page.getByRole('heading', { name: 'Innovative' })).toBeVisible(); await expect(page.getByRole("heading", { name: "Innovative" })).toBeVisible();
}); });
test('Teacher can sign in', async ({ page }) => { test("Teacher can sign in", async ({ page }) => {
await page.goto('/'); await page.goto("/");
await expect(page.getByRole('link', { name: 'log in' })).toBeVisible(); await expect(page.getByRole("link", { name: "log in" })).toBeVisible();
await page.getByRole('link', { name: 'log in' }).click(); await page.getByRole("link", { name: "log in" }).click();
await expect(page.getByRole('button', { name: 'teacher' })).toBeVisible(); await expect(page.getByRole("button", { name: "teacher" })).toBeVisible();
await page.getByRole('button', { name: 'teacher' }).click(); await page.getByRole("button", { name: "teacher" }).click();
await expect(page.getByText('teacher')).toBeVisible(); await expect(page.getByText("teacher")).toBeVisible();
await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible(); await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
await expect(page).toHaveURL(/\/realms\/teacher\//); await expect(page).toHaveURL(/\/realms\/teacher\//);
await page.getByRole('textbox', { name: 'Username or email' }).fill('testleerkracht1'); await page.getByRole("textbox", { name: "Username or email" }).fill("testleerkracht1");
await page.getByRole('textbox', { name: 'Password' }).fill('password'); await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole('button', { name: 'Sign In' }).click(); await page.getByRole("button", { name: "Sign In" }).click();
await expect(page.getByRole('link', { name: 'Dwengo logo teacher' })).toBeVisible(); await expect(page.getByRole("link", { name: "Dwengo logo teacher" })).toBeVisible();
await expect(page.getByRole('button').nth(1)).toBeVisible(); await expect(page.getByRole("button").nth(1)).toBeVisible();
}); });
test('Student can sign in', async ({ page }) => { test("Student can sign in", async ({ page }) => {
await page.goto('/'); await page.goto("/");
await expect(page.getByRole('link', { name: 'log in' })).toBeVisible(); await expect(page.getByRole("link", { name: "log in" })).toBeVisible();
await page.getByRole('link', { name: 'log in' }).click(); await page.getByRole("link", { name: "log in" }).click();
await expect(page.getByRole('button', { name: 'student' })).toBeVisible(); await expect(page.getByRole("button", { name: "student" })).toBeVisible();
await page.getByRole('button', { name: 'student' }).click(); await page.getByRole("button", { name: "student" }).click();
await expect(page).toHaveURL(/\/realms\/student\//); await expect(page).toHaveURL(/\/realms\/student\//);
await expect(page.getByText('student')).toBeVisible(); await expect(page.getByText("student")).toBeVisible();
await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible(); await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
await page.getByRole('textbox', { name: 'Username or email' }).fill('testleerling1'); await page.getByRole("textbox", { name: "Username or email" }).fill("testleerling1");
await page.getByRole('textbox', { name: 'Password' }).fill('password'); await page.getByRole("textbox", { name: "Password" }).fill("password");
await page.getByRole('button', { name: 'Sign In' }).click(); await page.getByRole("button", { name: "Sign In" }).click();
await expect(page.getByRole('link', { name: 'Dwengo logo student' })).toBeVisible(); await expect(page.getByRole("link", { name: "Dwengo logo student" })).toBeVisible();
await expect(page.getByRole('button').nth(1)).toBeVisible(); await expect(page.getByRole("button").nth(1)).toBeVisible();
}); });
test('Cannot sign in with invalid credentials', async ({ page }) => { test("Cannot sign in with invalid credentials", async ({ page }) => {
await page.goto('/'); await page.goto("/");
await page.getByRole('link', { name: 'log in' }).click(); await page.getByRole("link", { name: "log in" }).click();
await page.getByRole('button', { name: 'teacher' }).click(); await page.getByRole("button", { name: "teacher" }).click();
await page.getByRole('textbox', { name: 'Username or email' }).fill('doesnotexist'); await page.getByRole("textbox", { name: "Username or email" }).fill("doesnotexist");
await page.getByRole('textbox', { name: 'Password' }).fill('wrong'); await page.getByRole("textbox", { name: "Password" }).fill("wrong");
await page.getByRole('button', { name: 'Sign In' }).click(); await page.getByRole("button", { name: "Sign In" }).click();
await expect(page.getByText('Invalid username or password.')).toBeVisible(); await expect(page.getByText("Invalid username or password.")).toBeVisible();
await page.goto('/'); await page.goto("/");
await page.getByRole('link', { name: 'log in' }).click(); await page.getByRole("link", { name: "log in" }).click();
await page.getByRole('button', { name: 'student' }).click(); await page.getByRole("button", { name: "student" }).click();
await page.getByRole('textbox', { name: 'Username or email' }).fill('doesnotexist'); await page.getByRole("textbox", { name: "Username or email" }).fill("doesnotexist");
await page.getByRole('textbox', { name: 'Password' }).fill('wrong'); await page.getByRole("textbox", { name: "Password" }).fill("wrong");
await page.getByRole('button', { name: 'Sign In' }).click(); await page.getByRole("button", { name: "Sign In" }).click();
await expect(page.getByText('Invalid username or password.')).toBeVisible(); await expect(page.getByText("Invalid username or password.")).toBeVisible();
}); });
test('Cannot skip login', async ({ page }) => { test("Cannot skip login", async ({ page }) => {
await page.goto('/user'); await page.goto("/user");
await expect(page.getByRole('link', { name: 'log in' })).toBeVisible(); await expect(page.getByRole("link", { name: "log in" })).toBeVisible();
}); });

16
frontend/e2e/basic-learning.spec.ts
View file

@ -1,12 +1,12 @@
import { test, expect } from './fixtures.js'; import { test, expect } from "./fixtures.js";
test('Users can filter', async ({ page }) => { test("Users can filter", async ({ page }) => {
await page.goto('/user'); await page.goto("/user");
await page.getByRole('combobox').filter({ hasText: 'Select a themeAll' }).locator('i').click(); await page.getByRole("combobox").filter({ hasText: "Select a themeAll" }).locator("i").click();
await page.getByText('Nature and climate').click(); await page.getByText("Nature and climate").click();
await page.getByRole('combobox').filter({ hasText: 'Select ageAll agesSelect age' }).locator('i').click(); await page.getByRole("combobox").filter({ hasText: "Select ageAll agesSelect age" }).locator("i").click();
await page.getByText('and older').click(); await page.getByText("and older").click();
await expect(page.getByRole('link', { name: 'AI and Climate Students in' })).toBeVisible(); await expect(page.getByRole("link", { name: "AI and Climate Students in" })).toBeVisible();
}); });

6
frontend/e2e/basic-learning.ts
View file

@ -1,5 +1,5 @@
import { test, expect } from './fixtures.js'; import { test, expect } from "./fixtures.js";
test('myTest', async ({ page }) => { test("myTest", async ({ page }) => {
await expect(page).toHaveURL('/'); await expect(page).toHaveURL("/");
}); });

119
frontend/e2e/fixtures.ts
View file

@ -1,14 +1,14 @@
/* eslint-disable no-await-in-loop */ /* eslint-disable no-await-in-loop */
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
import { test as baseTest, expect } from '@playwright/test'; import { test as baseTest, expect } from "@playwright/test";
import type { Browser } from 'playwright-core'; import type { Browser } from "playwright-core";
import fs from 'fs'; import fs from "fs";
import path from 'path'; import path from "path";
/* Based on https://playwright.dev/docs/auth#moderate-one-account-per-parallel-worker */ /* Based on https://playwright.dev/docs/auth#moderate-one-account-per-parallel-worker */
export * from '@playwright/test'; export * from "@playwright/test";
export const ROOT_URL = 'http://localhost:5173'; export const ROOT_URL = "http://localhost:5173";
interface Account { interface Account {
username: string; username: string;
@ -23,40 +23,40 @@ interface Account {
async function acquireAccount(id: number, browser: Browser): Promise<Account> { async function acquireAccount(id: number, browser: Browser): Promise<Account> {
const account = { const account = {
username: `worker${id}`, username: `worker${id}`,
password: 'password', password: "password",
} };
const page = await browser.newPage(); const page = await browser.newPage();
await page.goto(ROOT_URL); await page.goto(ROOT_URL);
await page.getByRole('link', { name: 'log in' }).click(); await page.getByRole("link", { name: "log in" }).click();
await page.getByRole('button', { name: 'student' }).click(); await page.getByRole("button", { name: "student" }).click();
await page.getByRole('textbox', { name: 'Username' }).fill(account.username); await page.getByRole("textbox", { name: "Username" }).fill(account.username);
await page.getByRole('textbox', { name: 'Password', exact: true }).fill(account.password); await page.getByRole("textbox", { name: "Password", exact: true }).fill(account.password);
await page.getByRole('button', { name: 'Sign In' }).click(); await page.getByRole("button", { name: "Sign In" }).click();
let failed = await page.getByText('Invalid username or password.').isVisible(); let failed = await page.getByText("Invalid username or password.").isVisible();
if (failed) { if (failed) {
await page.getByRole('link', { name: 'Register' }).click(); await page.getByRole("link", { name: "Register" }).click();
} }
while (failed) { while (failed) {
// Retry with a different username, based on Unix timestamp. // Retry with a different username, based on Unix timestamp.
account.username = `worker${id}-${Date.now()}`; account.username = `worker${id}-${Date.now()}`;
await page.getByRole('textbox', { name: 'Username' }).fill(account.username); await page.getByRole("textbox", { name: "Username" }).fill(account.username);
await page.getByRole('textbox', { name: 'Password', exact: true }).fill(account.password); await page.getByRole("textbox", { name: "Password", exact: true }).fill(account.password);
await page.getByRole('textbox', { name: 'Confirm password' }).fill(account.password); await page.getByRole("textbox", { name: "Confirm password" }).fill(account.password);
await page.getByRole('textbox', { name: 'Email' }).fill(`${account.username}@dwengo.org`); await page.getByRole("textbox", { name: "Email" }).fill(`${account.username}@dwengo.org`);
await page.getByRole('textbox', { name: 'First name' }).fill('Worker'); await page.getByRole("textbox", { name: "First name" }).fill("Worker");
await page.getByRole('textbox', { name: 'Last name' }).fill(id.toString()); await page.getByRole("textbox", { name: "Last name" }).fill(id.toString());
await page.getByRole('button', { name: 'Register' }).click(); await page.getByRole("button", { name: "Register" }).click();
await page.waitForURL(/localhost/); await page.waitForURL(/localhost/);
failed = await page.getByText('Username already exists.').isVisible(); failed = await page.getByText("Username already exists.").isVisible();
} }
await page.waitForURL(/localhost/); await page.waitForURL(/localhost/);
@ -70,41 +70,44 @@ export const test = baseTest.extend<object, { workerStorageState: string }>({
storageState: async ({ workerStorageState }, use) => use(workerStorageState), storageState: async ({ workerStorageState }, use) => use(workerStorageState),
// Authenticate once per worker with a worker-scoped fixture. // Authenticate once per worker with a worker-scoped fixture.
workerStorageState: [async ({ browser }, use): Promise<void> => { workerStorageState: [
// Use parallelIndex as a unique identifier for each worker. async ({ browser }, use): Promise<void> => {
const id = test.info().parallelIndex; // Use parallelIndex as a unique identifier for each worker.
const fileName = path.resolve(test.info().project.outputDir, `.auth/${id}.json`); const id = test.info().parallelIndex;
const fileName = path.resolve(test.info().project.outputDir, `.auth/${id}.json`);
if (fs.existsSync(fileName)) { if (fs.existsSync(fileName)) {
// Reuse existing authentication state if any. // Reuse existing authentication state if any.
await use(fileName);
return;
}
// Important: make sure we authenticate in a clean environment by unsetting storage state.
const page = await browser.newPage({ storageState: undefined });
// Acquire a unique account by creating a new one.
const account = await acquireAccount(id, browser);
// Perform authentication steps. Replace these actions with your own.
await page.goto(ROOT_URL);
await page.getByRole("link", { name: "log in" }).click();
await page.getByRole("button", { name: "student" }).click();
await page.getByRole("textbox", { name: "Username or email" }).fill(account.username);
await page.getByRole("textbox", { name: "Password" }).fill(account.password);
await page.getByRole("button", { name: "Sign In" }).click();
// Wait until the page receives the cookies.
//
// Sometimes login flow sets cookies in the process of several redirects.
// Wait for the final URL to ensure that the cookies are actually set.
await page.waitForLoadState("domcontentloaded");
// Alternatively, you can wait until the page reaches a state where all cookies are set.
// End of authentication steps.
await page.context().storageState({ path: fileName });
await page.close();
await use(fileName); await use(fileName);
return; },
} { scope: "worker" },
],
// Important: make sure we authenticate in a clean environment by unsetting storage state.
const page = await browser.newPage({ storageState: undefined });
// Acquire a unique account by creating a new one.
const account = await acquireAccount(id, browser);
// Perform authentication steps. Replace these actions with your own.
await page.goto(ROOT_URL);
await page.getByRole('link', { name: 'log in' }).click();
await page.getByRole('button', { name: 'student' }).click();
await page.getByRole('textbox', { name: 'Username or email' }).fill(account.username);
await page.getByRole('textbox', { name: 'Password' }).fill(account.password);
await page.getByRole('button', { name: 'Sign In' }).click();
// Wait until the page receives the cookies.
//
// Sometimes login flow sets cookies in the process of several redirects.
// Wait for the final URL to ensure that the cookies are actually set.
await page.waitForLoadState("domcontentloaded");
// Alternatively, you can wait until the page reaches a state where all cookies are set.
// End of authentication steps.
await page.context().storageState({ path: fileName });
await page.close();
await use(fileName);
}, { scope: 'worker' }],
}); });

20
frontend/playwright.config.ts
View file

@ -66,16 +66,16 @@ export default defineConfig({
/* Test against mobile viewports. */ /* Test against mobile viewports. */
{ {
name: 'Mobile Chrome', name: "Mobile Chrome",
use: { use: {
...devices['Pixel 5'], ...devices["Pixel 5"],
}, },
}, },
{ {
name: 'Mobile Safari', name: "Mobile Safari",
use: { use: {
...devices['iPhone 12'], ...devices["iPhone 12"],
}, },
}, },
/* Test against branded browsers. */ /* Test against branded browsers. */
@ -109,7 +109,7 @@ export default defineConfig({
gracefulShutdown: { gracefulShutdown: {
signal: "SIGTERM", signal: "SIGTERM",
timeout: 5000, timeout: 5000,
} },
}, },
{ {
command: process.env.CI ? "cd ../ && npm run dev -w backend" : "cd ../ && npm run start -w backend", command: process.env.CI ? "cd ../ && npm run dev -w backend" : "cd ../ && npm run start -w backend",
@ -119,6 +119,6 @@ export default defineConfig({
{ {
command: "wait-on http://localhost:7080", command: "wait-on http://localhost:7080",
timeout: 120000, timeout: 120000,
} },
], ],
}); });