Merge pull request #99 from johnnygerard/test

test: improve Playwright test performance

Author: johnnygerard

client/e2e/fixtures.ts

@@ -0,0 +1,9 @@
+import { test as base } from "@playwright/test";
+
+export const test = base.extend({
+  page: async ({ page }, use) => {
+    // Disable Angular animations (see `app.config.ts`)
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await use(page);
+  },
+});

client/e2e/global-setup.ts

@@ -3,18 +3,18 @@ import ms from "ms";
 import child_process from "node:child_process";
 import { promisify } from "node:util";
 import { globalCredentials } from "./global-credentials";
-import { registerUser } from "./register-user.function";
+import { registerUserViaApi } from "./register-user.function";
 
 const exec = promisify(child_process.exec);
 
-test("Global setup", async ({ page }) => {
+test("Global setup", async ({ page, request }) => {
   test.setTimeout(ms("20 seconds"));
   await exec("docker compose up --detach");
 
   console.log("Waiting for servers to be ready...");
   await exec("npm run wait:servers");
   console.log("Servers are ready ✔");
 
-  await registerUser(page, globalCredentials);
+  await registerUserViaApi(request, globalCredentials);
   console.log("Global setup complete ✔");
 });

client/e2e/register-user.function.ts

@@ -1,5 +1,5 @@
 import { faker } from "@faker-js/faker";
-import { expect, Page } from "@playwright/test";
+import { APIRequestContext, expect, Page } from "@playwright/test";
 import { CREATED } from "_server/constants/http-status-code";
 import { Credentials } from "_server/types/credentials";
 
@@ -33,3 +33,23 @@ export const registerUser = async (
     return response.finished();
   });
 };
+
+/**
+ * Register a user via the API while verifying the response status.
+ * @param request - The API request context
+ * @param credentials - The user's credentials to register with
+ * @param expectedStatus  - The expected response status code
+ */
+export const registerUserViaApi = async (
+  request: APIRequestContext,
+  credentials?: Partial<Credentials>,
+  expectedStatus = CREATED,
+): Promise<void> => {
+  const data: Credentials = {
+    username: credentials?.username ?? faker.internet.userName(),
+    password: credentials?.password ?? faker.internet.password(),
+  };
+
+  const response = await request.post("/api/account", { data });
+  expect(response.status()).toBe(expectedStatus);
+};

client/e2e/tests/account-deletion.spec.ts

@@ -1,8 +1,9 @@
 import { faker } from "@faker-js/faker";
-import { expect, Locator, test } from "@playwright/test";
+import { expect, Locator } from "@playwright/test";
 import { NO_CONTENT } from "_server/constants/http-status-code";
 import { UserMessage } from "../../src/app/types/user-message.enum";
 import { getResponsePredicate } from "../extensions";
+import { test } from "../fixtures";
 import { registerUser } from "../register-user.function";
 
 test.describe("Account deletion", () => {

client/e2e/tests/password-validation.spec.ts

@@ -1,6 +1,7 @@
 import { faker } from "@faker-js/faker";
-import { expect, Locator, test } from "@playwright/test";
+import { expect, Locator } from "@playwright/test";
 import { PASSWORD_MAX_LENGTH } from "_server/constants/password";
+import { test } from "../fixtures";
 
 test.describe("Password validation", () => {
   let username: string;

client/e2e/tests/password-visibility.spec.ts

@@ -1,5 +1,6 @@
 import { faker } from "@faker-js/faker";
-import { expect, Locator, test } from "@playwright/test";
+import { expect, Locator } from "@playwright/test";
+import { test } from "../fixtures";
 
 test.describe("Password visibility", () => {
   let passwordInput: Locator;

client/e2e/tests/rate-limiter.spec.ts

@@ -1,6 +1,6 @@
 import { faker } from "@faker-js/faker";
-import { test } from "@playwright/test";
 import { TOO_MANY_REQUESTS } from "_server/constants/http-status-code";
+import { test } from "../fixtures";
 
 // This test should be run separately. To run it:
 // - Replace `describe.skip` with `describe.only`

client/e2e/tests/session-revocation.spec.ts

@@ -1,18 +1,18 @@
-import { expect, test } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { getFakeCredentials } from "_server/test-helpers/faker-extensions";
 import { Credentials } from "_server/types/credentials";
 import { UserMessage } from "../../src/app/types/user-message.enum";
+import { test } from "../fixtures";
 import { logInUser } from "../log-in-user.function";
-import { registerUser } from "../register-user.function";
+import { registerUserViaApi } from "../register-user.function";
 
 test.describe("Session revocation", () => {
   let credentials: Credentials;
 
-  test.beforeEach(async ({ browser, page }) => {
-    const context = await browser.newContext();
+  test.beforeEach(async ({ page, request }) => {
     credentials = getFakeCredentials();
 
-    await registerUser(await context.newPage(), credentials);
+    await registerUserViaApi(request, credentials);
     await logInUser(page, credentials);
   });
 

client/e2e/tests/user-login.spec.ts

@@ -1,5 +1,6 @@
-import { expect, test } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { UNAUTHORIZED } from "_server/constants/http-status-code";
+import { test } from "../fixtures";
 import { globalCredentials } from "../global-credentials";
 import { logInUser } from "../log-in-user.function";
 

client/e2e/tests/user-logout.spec.ts

@@ -1,5 +1,6 @@
-import { expect, test } from "@playwright/test";
+import { expect } from "@playwright/test";
 import { NO_CONTENT } from "_server/constants/http-status-code";
+import { test } from "../fixtures";
 import { globalCredentials } from "../global-credentials";
 import { logInUser } from "../log-in-user.function";