updated create account tests

Author: Rad14nt

client/tests/e2e/1-user-account/1.1-create-add.spec.ts

@@ -3,7 +3,6 @@ import { loginAsServerAdmin } from "../utils/authenticate";
 import {
     generateUniqueUsername,
     navigateTo,
-    selectVuetifyFirstOption,
     selectVuetifyOptionByName,
 } from "../utils/helpers";
 
@@ -69,14 +68,14 @@ async function expectSuccessfulCreateRedirect(page: Page) {
     });
 }
 
+//TODO this test was left with kinda big redundancies to explain to the apprentices in simple terms what is going on. Small refactor later
 test.describe("1.1 User Accounts - CREATE Add", () => {
     test.beforeEach(async ({ page }) => {
         await loginAsServerAdmin(page);
         await navigateTo(page, "/user-accounts/create");
     });
 
-    //test A
-    test("A Success - creates a new INACTIVE user account, verifies user with all details were created successfully", async ({
+    test("A Success - creates a new INACTIVE user account", async ({
         page,
     }) => {
         const {
@@ -92,9 +91,7 @@ test.describe("1.1 User Accounts - CREATE Add", () => {
             saveButtonLocator,
         } = await setupCreateUserAccountPage(page);
 
-        const uniqueValue = generateUniqueUsername(
-            "e2e-1.1.A-Success-User-Accounts",
-        );
+        const uniqueValue = generateUniqueUsername("e2e-1.1.A-Success");
 
         //define values to be filled in
         const username = uniqueValue;
@@ -162,7 +159,7 @@ test.describe("1.1 User Accounts - CREATE Add", () => {
 
         //this needs to match the fields we filled out above
         const expectedPayload = {
-            institutionId: "11", //this matches SQL script for e2e testing!!!
+            institutionId: "11", //this matches SQL script for e2e testing!!! it corresponds to SEB Server institution
             name: name,
             surname: surname,
             username: username,
@@ -183,51 +180,83 @@ test.describe("1.1 User Accounts - CREATE Add", () => {
         // 2: Clean way, set up a database query to actually verify the data is entered correct in the tables - This would be the clean way
     });
 
-    test("B Failed Validation - password too short", async ({ page }) => {
-        const {
-            institutionSelectLocator,
-            usernameLocator,
-            nameLocator,
-            surnameLocator,
-            emailLocator,
-            timezoneSelectLocator,
-            passwordLocator,
-            confirmPasswordLocator,
-            roleSelectLocator,
-            saveButtonLocator,
-        } = await setupCreateUserAccountPage(page);
+    test("B Client Validation - checks all validations and that create button doesn't do API call", async ({
+        page,
+    }) => {
+        const { passwordLocator, confirmPasswordLocator, saveButtonLocator } =
+            await setupCreateUserAccountPage(page);
+
+        // mo post request allowed during this test (well none should get through)
+        await page.route(/\/useraccount(?:\?|$)/i, async (route, request) => {
+            if (request.method() === "POST") {
+                await route.abort();
+                throw new Error(
+                    "POST /useraccount was attempted during failed client validation test",
+                );
+            }
+            await route.continue();
+        });
 
-        const uname = generateUniqueUsername("e2e-invalid");
+        page.on("request", (req) => {
+            if (
+                req.method() === "POST" &&
+                /\/useraccount(?:\?|$)/i.test(req.url())
+            ) {
+                throw new Error(
+                    `Validation test must not call POST /useraccount, but it did: ${req.url()}`,
+                );
+            }
+        });
 
-        if (await institutionSelectLocator.isEnabled()) {
-            await selectVuetifyOptionByName(
-                page,
-                institutionSelectLocator,
-                "SEB Server",
-            );
+        async function expectFieldError(testId: string, text: string) {
+            const field = page.getByTestId(testId);
+            await expect(
+                field.locator(".v-messages__message").filter({ hasText: text }),
+            ).toHaveCount(1, { timeout: 5000 });
         }
 
-        await usernameLocator.fill(uname);
-        await nameLocator.fill("Test");
-        await surnameLocator.fill("User");
-        await emailLocator.fill(`${uname}@example.com`);
-
-        await selectVuetifyFirstOption(page, timezoneSelectLocator);
+        const REQUIRED = "This field is required";
+        const PASSWORD_TOO_SHORT = "Password must be at least 8 characters";
+        const PASSWORDS_MUST_MATCH = "Passwords must match";
 
-        // too short (<8)
-        await passwordLocator.fill("Abc1");
-        await confirmPasswordLocator.fill("Abc1");
+        // 1. Click with all empty
+        await saveButtonLocator.click();
 
-        await selectVuetifyFirstOption(page, roleSelectLocator);
+        await expectFieldError(
+            "createUserAccount-institution-select",
+            REQUIRED,
+        );
+        await expectFieldError("createUserAccount-username-input", REQUIRED);
+        await expectFieldError("createUserAccount-name-input", REQUIRED);
+        await expectFieldError("createUserAccount-surname-input", REQUIRED);
+        await expectFieldError("createUserAccount-password-input", REQUIRED);
+        await expectFieldError(
+            "createUserAccount-confirmPassword-input",
+            REQUIRED,
+        );
+        await expectFieldError("createUserAccount-role-select", REQUIRED);
 
+        // 2. Too short password
+        await passwordLocator.fill("Abc1"); // < 8
         await saveButtonLocator.click();
 
-        await expect(page).toHaveURL(/\/user-accounts\/create(?:$|[?#])/i);
+        await expectFieldError(
+            "createUserAccount-password-input",
+            PASSWORD_TOO_SHORT,
+        );
 
-        const anyValidationMessage = page.locator(
-            ".v-messages .v-messages__message",
+        // 3. missmatch passwords
+        await passwordLocator.fill("Abcdefg1");
+        await confirmPasswordLocator.fill("Abcdefg2");
+        await saveButtonLocator.click();
+
+        await expectFieldError(
+            "createUserAccount-confirmPassword-input",
+            PASSWORDS_MUST_MATCH,
         );
-        await expect(anyValidationMessage.first()).toBeVisible();
+
+        // expected to not change URL
+        await expect(page).toHaveURL(/\/user-accounts\/create(?:$|[?#])/i);
     });
 
     test("C Server Error - user account already exists (duplicate username)", async ({
@@ -246,31 +275,76 @@ test.describe("1.1 User Accounts - CREATE Add", () => {
             saveButtonLocator,
         } = await setupCreateUserAccountPage(page);
 
-        // Seeded by Flyway/SQL (precondition)
-        const uname = "createtests";
+        const uniqueValue = generateUniqueUsername("e2e-1.1.C-Server-Error");
 
-        if (await institutionSelectLocator.isEnabled()) {
-            await selectVuetifyOptionByName(
-                page,
-                institutionSelectLocator,
-                "SEB Server",
-            );
-        }
+        const username = "createtests"; // SQL Script includes a user with this username!!!
+        const name = uniqueValue + "Name";
+        const surname = uniqueValue + "LastName";
+        const email = uniqueValue + "@email.com";
+        const password = "StrongPass123!";
 
-        await usernameLocator.fill(uname);
-        await nameLocator.fill("John");
-        await surnameLocator.fill("Doe");
-        await emailLocator.fill(`${uname}@example.com`);
+        const institutionToSelect = "SEB Server";
+        const roleToSelect = "Server Administrator";
+        const timeZoneToSelect = "Europe/Zurich";
 
-        await selectVuetifyFirstOption(page, timezoneSelectLocator);
+        // fill selects
+        await selectVuetifyOptionByName(
+            page,
+            institutionSelectLocator,
+            institutionToSelect,
+        );
+        await selectVuetifyOptionByName(page, roleSelectLocator, roleToSelect);
+        await selectVuetifyOptionByName(
+            page,
+            timezoneSelectLocator,
+            timeZoneToSelect,
+        );
 
-        await passwordLocator.fill("StrongPass123!");
-        await confirmPasswordLocator.fill("StrongPass123!");
+        //fill fields
+        await usernameLocator.fill(username);
+        await nameLocator.fill(name);
+        await surnameLocator.fill(surname);
+        await emailLocator.fill(email);
+        await passwordLocator.fill(password);
+        await confirmPasswordLocator.fill(password);
 
-        await selectVuetifyFirstOption(page, roleSelectLocator);
+        const createRequestPromise = page.waitForRequest((req) => {
+            return (
+                req.method() === "POST" &&
+                /\/useraccount(?:\?|$)/i.test(req.url())
+            );
+        });
+
+        const createResponsePromise = page.waitForResponse((resp) => {
+            return (
+                resp.request().method() === "POST" &&
+                /\/useraccount(?:\?|$)/i.test(resp.url())
+            );
+        });
 
         await saveButtonLocator.click();
 
+        const createRequest = await createRequestPromise;
+        const createResponse = await createResponsePromise;
+
+        expect(createRequest.method()).toBe("POST");
+        expect(createRequest.url()).toMatch(/\/useraccount(?:\?|$)/i);
+
+        expect(createResponse.status()).toBe(400);
+        expect(createResponse.ok()).toBeFalsy();
+
         await expect(page).toHaveURL(/\/user-accounts\/create(?:$|[?#])/i);
+
+        //check toast
+        const toast = page.locator(".toast-item[role='alert']");
+
+        await expect(toast).toBeVisible();
+
+        await expect(toast.locator(".toast-text")).toContainText(
+            "Field validation error",
+        );
+        await expect(toast.locator(".toast-text")).toContainText(
+            "Username is already being used.",
+        );
     });
 });