e2e: the accessibility tests now cover the logged in page too.

1p22geo · Dec 24, 2023 · b9289d6 · b9289d6
1 parent 92cea8f
commit b9289d6
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 84 deletions.
diff --git a/app/in/page.tsx b/app/in/page.tsx
@@ -19,10 +19,10 @@ const Page = async () => {
   const user = await checkUser(sess.user._id.toString());
   const { posts } = (await req.json()) as responseJSON;
   return (
-    <div className="flex max-w-[100vw] flex-col items-center gap-8 p-24">
+    <main className="flex max-w-[100vw] flex-col items-center gap-8 p-24">
       <PostEditor />
       <PostView voted={user.data.voted} initPosts={posts} session={session as unknown as ObjectId} />
-    </div>
+    </main>
   );
 };
 

diff --git a/components/FileUpload/index.tsx b/components/FileUpload/index.tsx
@@ -50,6 +50,7 @@ export default function FileUploader(props: {
   return (
     <input
       type="file"
+      aria-label="add a file"
       onChange={() => void onImageFileChange}
       className="rounded-md bg-secondary-800 p-8 text-xl text-white shadow-inner shadow-secondary-500"
     />

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -16,9 +16,11 @@ export const Header = ({ user }: { user?: UserID }) => {
         id="menu"
         className="top-0 flex w-full scale-y-100 flex-col items-center gap-2 bg-white p-2 shadow-2xl  peer-checked:max-sm:hidden sm:flex-row sm:items-baseline"
       >
-        <Link href="/in" className="text-xl font-bold sm:pr-8">
-          WordBook
-        </Link>
+        <h1>
+          <Link href="/in" className="text-xl font-bold sm:pr-8">
+            WordBook
+          </Link>
+        </h1>
         <Link href={"#"} className="mx-4 text-primary-600 hover:underline">
           About
         </Link>
@@ -30,15 +32,15 @@ export const Header = ({ user }: { user?: UserID }) => {
         </Link>
         {user ? (
           <div className="flex flex-row flex-wrap items-center justify-center sm:ml-auto">
-            <h3 className="hidden text-sm font-bold sm:mr-4 sm:block">{user.name}</h3>
+            <h2 className="hidden text-sm font-bold sm:mr-4 sm:block">{user.name}</h2>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="mt-4 h-8 w-full sm:mt-0 sm:w-8">
               <circle cx="12" cy="12" r="10" className="fill-primary-600" />
               <path
                 className="fill-primary-100"
                 d="M3.66 17.52A5 5 0 0 1 8 15h8a5 5 0 0 1 4.34 2.52 10 10 0 0 1-16.68 0zM12 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"
               />
             </svg>
-            <input type="checkbox" id="cb" className="peer sr-only"></input>
+            <input type="checkbox" id="cb" aria-label="toggle user details" className="peer sr-only"></input>
             <label
               htmlFor="cb"
               className="hidden w-full cursor-pointer place-content-center duration-200 peer-checked:scale-y-[-1] sm:grid sm:w-fit"

diff --git a/components/Post/index.tsx b/components/Post/index.tsx
@@ -24,7 +24,7 @@ export const Post = ({ post, votePost: _votePost }: { post: PostAuthorID; votePo
       <div className="flex w-fit flex-col items-stretch bg-secondary-100 shadow-2xl">
         <div className="flex flex-row gap-4 p-2">
           <Link href={`/in/user/${post.author._id.toString()}`} className="group">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-12">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="user icon" className="w-12">
               <circle cx="12" cy="12" r="10" className="fill-primary-600" />
               <path
                 className="fill-primary-100"
@@ -73,6 +73,7 @@ export const Post = ({ post, votePost: _votePost }: { post: PostAuthorID; votePo
                 setShowThread((q) => !q);
               }}
               height="800px"
+              aria-label="toggle comment thread"
               width="800px"
               version="1.1"
               className="h-8 w-8 cursor-pointer"
@@ -104,7 +105,12 @@ export const Post = ({ post, votePost: _votePost }: { post: PostAuthorID; votePo
                   <div className="bg-secondary-100 p-4 shadow-2xl">
                     <div className="flex flex-row gap-4 p-2">
                       <Link href={`/in/user/${comment.author._id.toString()}`} className="group">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-12">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          aria-label="user icon"
+                          className="w-12"
+                        >
                           <circle cx="12" cy="12" r="10" className="fill-primary-600" />
                           <path
                             className="fill-primary-100"

diff --git a/e2e/WCAG.spec.ts b/e2e/WCAG.spec.ts
@@ -1,13 +1,18 @@
 import { test, expect } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
+import { sha256 } from "js-sha256";
+import { signup } from "lib/e2e/signup";
+import { login } from "lib/e2e/login";
 
 test.describe("accessibility", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("./");
   });
 
   test.afterEach(async ({ page }) => {
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .exclude(".w-md-editor") // exclude the Markdown editor from an external library
+      .analyze();
 
     expect(accessibilityScanResults.violations).toEqual([]);
   });
@@ -21,4 +26,12 @@ test.describe("accessibility", () => {
   test("signup page", async ({ page }) => {
     await page.goto("./signup");
   });
+  test("logged in", async ({ page, userAgent }) => {
+    const id = sha256(userAgent as string);
+    const email = "test2@email_" + id + ".com";
+    const name = "Test user 2 of " + id;
+    const pass = "123";
+    await signup(page, { email, name, pass });
+    await login(page, { email, pass });
+  });
 });
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
@@ -1,60 +1,41 @@
-import { expect, test } from "@playwright/test";
+import { test, type Page, expect } from "@playwright/test";
 import { sha256 } from "js-sha256";
+import { login } from "lib/e2e/login";
+import { signup } from "lib/e2e/signup";
 import { switchBar } from "lib/e2e/switchBar";
 
-test.beforeEach(async ({ page }, testInfo) => {
-  await page.goto("./");
+test.describe.configure({ mode: "serial" });
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.afterAll(async () => {
+  await page.close();
 });
 
-test("signs up", async ({ page, userAgent }) => {
+test("signs up", async ({ userAgent }) => {
   const id = sha256(userAgent as string);
+  const email = "test1@email_" + id + ".com";
+  const name = "Test user 1 of " + id;
+  const pass = "123";
   await page.goto("./");
-  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
-  await expect(page.getByText(/Sign up/)).toBeVisible();
-  await page.getByText(/Sign up/).click();
-  await expect(page).toHaveTitle(/WordBook \| Sign up to WordBook/);
-  await (await page.$("#email"))?.fill("test@email_" + id + ".com");
-  await (await page.getByText("2")).click();
-  await (await page.$("#name"))?.fill("Test user " + id);
-  await (await page.getByText("3")).click();
-  await (await page.$("#pass"))?.fill("123");
-  await (await page.$("#rpass"))?.fill("123");
-  await (await page.getByText("4")).click();
-  await expect(page.getByText(/submit/i)).toBeVisible();
-  await (await page.getByText(/submit/i)).click();
-  await expect(page.getByText(/account created/i)).toBeVisible();
+  await signup(page, {
+    email,
+    name,
+    pass,
+  });
 });
-test("logs in", async ({ page, userAgent }) => {
+test("logs in", async ({ userAgent }) => {
   const id = sha256(userAgent as string);
-
-  // create an account, ik this is a redundancy
-  await page.goto("./");
-  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
-  await expect(page.getByText(/Sign up/)).toBeVisible();
-  await page.getByText(/Sign up/).click();
-  await expect(page).toHaveTitle(/WordBook \| Sign up to WordBook/);
-  await (await page.$("#email"))?.fill("test2@email_" + id + ".com");
-  await (await page.getByText("2")).click();
-  await (await page.$("#name"))?.fill("Test user 2 of " + id);
-  await (await page.getByText("3")).click();
-  await (await page.$("#pass"))?.fill("123");
-  await (await page.$("#rpass"))?.fill("123");
-  await (await page.getByText("4")).click();
-  await (await page.getByText(/submit/i)).click();
-  await expect(page.getByText(/account created/i)).toBeVisible();
+  const email = "test1@email_" + id + ".com";
+  const name = "Test user 1 of " + id;
+  const pass = "123";
 
   await page.goto("./");
-  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
-  await expect(await page.getByText(/WordBook - the Internet redefined/i)).toBeVisible();
-  await switchBar(page);
-  const loc = page.getByText(/Log in/i).filter({ hasNotText: /account/ });
-  await expect(loc).toBeVisible();
-  await loc.click();
-  await expect(page).toHaveTitle(/WordBook \| Log in to WordBook/);
-  await (await page.$("#email"))?.fill("test2@email_" + id + ".com");
-  await (await page.$("#password"))?.fill("123");
-  await (await page.getByText(/submit/i)).click();
-  await expect(page.locator(".w-md-editor")).toBeVisible();
+  await login(page, { email, pass });
   await switchBar(page);
   await expect(page.locator("a").filter({ hasText: "WordBook" })).toBeVisible();
   await expect(page.locator("#menu svg.w-full")).toBeVisible();

diff --git a/e2e/post.spec.ts b/e2e/post.spec.ts
@@ -1,5 +1,7 @@
 import { test, type Page, expect } from "@playwright/test";
 import { sha256 } from "js-sha256";
+import { login } from "lib/e2e/login";
+import { signup } from "lib/e2e/signup";
 import { switchBar } from "lib/e2e/switchBar";
 
 // Annotate entire file as serial.
@@ -18,38 +20,19 @@ test.afterAll(async () => {
 test("register and login", async ({ userAgent }) => {
   await page.goto("./");
   const id = sha256(userAgent as string);
+  const email = "test3@email_" + id + ".com";
+  const name = "Test user 3 of " + id;
+  const pass = "123";
 
   // create an account, ik this is a redundancy
-  await page.goto("./");
-  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
-  await expect(page.getByText(/Sign up/)).toBeVisible();
-  await page.getByText(/Sign up/).click();
-  await expect(page).toHaveTitle(/WordBook \| Sign up to WordBook/);
-  await (await page.$("#email"))?.fill("test3@email_" + id + ".com");
-  await (await page.getByText("2")).click();
-  await (await page.$("#name"))?.fill("Test user 3 of " + id);
-  await (await page.getByText("3")).click();
-  await (await page.$("#pass"))?.fill("123");
-  await (await page.$("#rpass"))?.fill("123");
-  await (await page.getByText("4")).click();
-  await (await page.getByText(/submit/i)).click();
-  await expect(page.getByText(/account created/i)).toBeVisible();
+  await signup(page, {
+    email,
+    name,
+    pass,
+  });
 
   await page.goto("./");
-  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
-  await expect(await page.getByText(/WordBook - the Internet redefined/i)).toBeVisible();
-  await switchBar(page);
-  const loc = page.getByText(/Log in/i).filter({ hasNotText: /account/ });
-  await expect(loc).toBeVisible();
-  await loc.click();
-  await expect(page).toHaveTitle(/WordBook \| Log in to WordBook/);
-  await (await page.$("#email"))?.fill("test3@email_" + id + ".com");
-  await (await page.$("#password"))?.fill("123");
-  await (await page.getByText(/submit/i)).click();
-  await expect(page.locator(".w-md-editor")).toBeVisible();
-  await switchBar(page);
-  await expect(await page.locator("a").filter({ hasText: "WordBook" })).toBeVisible();
-  await expect(await page.locator("#menu svg.w-full")).toBeVisible();
+  await login(page, { email, pass });
 });
 
 test("submit a post", async ({ userAgent }) => {

diff --git a/lib/e2e/login/index.ts b/lib/e2e/login/index.ts
@@ -0,0 +1,17 @@
+import { expect, type Page } from "@playwright/test";
+import { switchBar } from "lib/e2e/switchBar";
+
+export async function login(page: Page, { email, pass }: { email: string; pass: string }) {
+  await page.goto("./");
+  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
+  await expect(page.getByText(/WordBook - the Internet redefined/i)).toBeVisible();
+  await switchBar(page);
+  const loc = page.getByText(/Log in/i).filter({ hasNotText: /account/ });
+  await expect(loc).toBeVisible();
+  await loc.click();
+  await expect(page).toHaveTitle(/WordBook \| Log in to WordBook/);
+  await (await page.$("#email"))?.fill(email);
+  await (await page.$("#password"))?.fill(pass);
+  await page.getByText(/submit/i).click();
+  await expect(page.locator(".w-md-editor")).toBeVisible();
+}
diff --git a/lib/e2e/signup/index.ts b/lib/e2e/signup/index.ts
@@ -0,0 +1,18 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function signup(page: Page, { email, name, pass }: { email: string; name: string; pass: string }) {
+  await page.goto("./");
+  await expect(page).toHaveTitle(/WordBook - Internet redefined/);
+  await expect(page.getByText(/Sign up/)).toBeVisible();
+  await page.getByText(/Sign up/).click();
+  await expect(page).toHaveTitle(/WordBook \| Sign up to WordBook/);
+  await (await page.$("#email"))?.fill(email);
+  await page.getByText("2").click();
+  await (await page.$("#name"))?.fill(name);
+  await page.getByText("3").click();
+  await (await page.$("#pass"))?.fill(pass);
+  await (await page.$("#rpass"))?.fill(pass);
+  await page.getByText("4").click();
+  await page.getByText(/submit/i).click();
+  await expect(page.getByText(/account created/i)).toBeVisible();
+}