From 4e0ab9856b2a07d53bfc485c1e9f3ce13bbac645 Mon Sep 17 00:00:00 2001 From: Benjamin Paige Date: Mon, 22 Jan 2024 11:21:46 -0700 Subject: [PATCH] add loginpage and reviewer auth to e2e setup --- .gitignore | 2 +- src/services/ui/e2e/pages/index.ts | 1 + src/services/ui/e2e/pages/loginPage.ts | 21 ++++++++++++++ .../ui/e2e/tests/a11y/homepage.spec.ts | 28 ++++++++++-------- src/services/ui/e2e/utils/auth.setup.ts | 29 +++++++++++-------- src/services/ui/e2e/utils/users.ts | 6 ++-- src/services/ui/playwright.config.ts | 6 ++-- src/services/ui/src/pages/profile/index.tsx | 3 +- 8 files changed, 64 insertions(+), 32 deletions(-) create mode 100644 src/services/ui/e2e/pages/index.ts create mode 100644 src/services/ui/e2e/pages/loginPage.ts diff --git a/.gitignore b/.gitignore index c7372acd1b..0be21c7dbc 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,4 @@ build_run .turbo coverage lambda_layer.zip -**/.auth/user.json \ No newline at end of file +**/.auth/*.json \ No newline at end of file diff --git a/src/services/ui/e2e/pages/index.ts b/src/services/ui/e2e/pages/index.ts new file mode 100644 index 0000000000..b311de19c0 --- /dev/null +++ b/src/services/ui/e2e/pages/index.ts @@ -0,0 +1 @@ +export * from "./loginPage"; diff --git a/src/services/ui/e2e/pages/loginPage.ts b/src/services/ui/e2e/pages/loginPage.ts new file mode 100644 index 0000000000..13c740bb5d --- /dev/null +++ b/src/services/ui/e2e/pages/loginPage.ts @@ -0,0 +1,21 @@ +import { Page, expect } from "@playwright/test"; + +export class LoginPage { + constructor(private readonly page: Page) {} + + async goto() { + await this.page.goto("/"); + await this.page.getByRole("button", { name: "Sign In" }).click(); + } + + async login(email: string, password: string) { + await this.goto(); + await this.page.getByRole("textbox", { name: "name@host.com" }).fill(email); + await this.page.getByRole("textbox", { name: "Password" }).fill(password); + await this.page.getByRole("button", { name: "submit" }).click(); + await this.page.waitForLoadState("networkidle"); + expect( + await this.page.getByRole("link", { name: "Dashboard" }) + ).toBeVisible(); + } +} diff --git a/src/services/ui/e2e/tests/a11y/homepage.spec.ts b/src/services/ui/e2e/tests/a11y/homepage.spec.ts index 1d9f53915b..b5151f526b 100644 --- a/src/services/ui/e2e/tests/a11y/homepage.spec.ts +++ b/src/services/ui/e2e/tests/a11y/homepage.spec.ts @@ -1,17 +1,21 @@ import { test, expect } from "@playwright/test"; import AxeBuilder from "@axe-core/playwright"; -// this could be repeated for every page we want to test a11y for. -// we could also have a list of paths to test and loop through them ie ['/', 'dashboard', 'faq'] etc +const staticRoutes = ["/", "/dashboard", "/faq", "/profile"]; -test.describe("homepage", () => { - test("should not have any automatically detectable accessibility issues", async ({ - page, - }) => { - await page.goto("/"); - await page.waitForLoadState("networkidle"); // playwright is so fast this is sometimes helpful to slow it down to view results - const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); - console.log("violations: ", accessibilityScanResults.violations.length); - expect(accessibilityScanResults.violations).toEqual([]); - }); +test.describe("test a11y on static routes", () => { + for (const route of staticRoutes) { + test(`${route} should not have any automatically detectable accessibility issues`, async ({ + page, + }) => { + await page.goto(route); + await page.waitForLoadState("networkidle"); // playwright is so fast this is sometimes helpful to slow it down to view results + const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); + console.log( + `${route} violations: `, + accessibilityScanResults.violations.length + ); + expect(accessibilityScanResults.violations).toEqual([]); + }); + } }); diff --git a/src/services/ui/e2e/utils/auth.setup.ts b/src/services/ui/e2e/utils/auth.setup.ts index a08b9059d9..cfcf5be90e 100644 --- a/src/services/ui/e2e/utils/auth.setup.ts +++ b/src/services/ui/e2e/utils/auth.setup.ts @@ -1,6 +1,7 @@ import { test as setup } from "@playwright/test"; import * as Libs from "../../../../libs/secrets-manager-lib"; import { testUsers } from "./users"; +import { LoginPage } from "../pages"; const stage = process.env.STAGE_NAME === "production" || process.env.STAGE_NAME === "val" @@ -13,18 +14,22 @@ const password = (await Libs.getSecretsValue( secretId )) as string; -const authFile = "playwright/.auth/user.json"; +const stateSubmitterAuthFile = "playwright/.auth/state-user.json"; -setup("authenticate", async ({ page }) => { - await page.goto("/"); - await page.getByRole("button", { name: "Sign In" }).click(); - await page - .getByRole("textbox", { name: "name@host.com" }) - .fill(testUsers.state); - await page.getByRole("textbox", { name: "Password" }).fill(password); - await page.getByRole("button", { name: "submit" }).click(); - await page.getByRole("link", { name: "Dashboard" }).click(); - // End of authentication steps. +setup("authenticate state submitter", async ({ page, context }) => { + const loginPage = new LoginPage(page); + await loginPage.goto(); - await page.context().storageState({ path: authFile }); + await loginPage.login(testUsers.state, password); + await context.storageState({ path: stateSubmitterAuthFile }); +}); + +const reviewerAuthFile = "playwright/.auth/reviewer-user.json"; + +setup("authenticate cms reviewer", async ({ page, context }) => { + const loginPage = new LoginPage(page); + await loginPage.goto(); + + await loginPage.login(testUsers.reviewer, password); + await context.storageState({ path: reviewerAuthFile }); }); diff --git a/src/services/ui/e2e/utils/users.ts b/src/services/ui/e2e/utils/users.ts index d80170240d..1076ba94d1 100644 --- a/src/services/ui/e2e/utils/users.ts +++ b/src/services/ui/e2e/utils/users.ts @@ -1,4 +1,4 @@ export const testUsers = { - state: "george@example.com", - cmsAdmin: "cmsadmin@example.com" -}; \ No newline at end of file + state: "george@example.com", + reviewer: "reviewer@example.com", +}; diff --git a/src/services/ui/playwright.config.ts b/src/services/ui/playwright.config.ts index 7b945827f4..3ffb614799 100644 --- a/src/services/ui/playwright.config.ts +++ b/src/services/ui/playwright.config.ts @@ -34,15 +34,15 @@ export default defineConfig({ // Note: we can test on multiple browsers and resolutions defined here projects: [ // Setup project - { name: "setup", testMatch: /.*\.setup\.ts/ }, + { name: "setup", testMatch: /.*\.setup\.ts/, fullyParallel: true }, { // we can have different projects for different users/use cases name: "logged in state user", use: { ...devices["Desktop Chrome"], - // Use prepared auth state. - storageState: "playwright/.auth/user.json", + // Use prepared auth state for state submitter. + storageState: "playwright/.auth/state-user.json", }, // Tests start already authenticated because we specified storageState in the config. dependencies: ["setup"], diff --git a/src/services/ui/src/pages/profile/index.tsx b/src/services/ui/src/pages/profile/index.tsx index f20988069d..ccb7bc2941 100644 --- a/src/services/ui/src/pages/profile/index.tsx +++ b/src/services/ui/src/pages/profile/index.tsx @@ -30,7 +30,8 @@ export const Profile = () => {
- + {/* using bg-sky-50 for a11y compliance */} +