Feat/improving existing e2e tests (#1125)

* chore: improved current E2E tests and enhanced labels * chore: added more tests around article page and unauth/auth views
codu-code · Oct 15, 2024 · 9803fd1 · 9803fd1
1 parent f929677
commit 9803fd1
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 46 deletions.
diff --git a/e2e/accessibility.spec.ts b/e2e/accessibility.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Accessibility Tests", () => {
+  test.describe("Confirm all images on homepage have alt text", () => {
+    test("Shared content", async ({ page }) => {
+      const imagesWithoutAltText = await page.$$eval(
+        "img:not([alt])",
+        (images) => images.length,
+      );
+      expect(imagesWithoutAltText).toBe(0); // All images should have alt text
+    });
+  });
+});
diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
@@ -1,6 +1,99 @@
 import { test, expect } from "playwright/test";
 
-test.describe("Articles", () => {
+test.describe("Unauthenticated Articles Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.context().clearCookies();
+  });
+
+  test("Should show popular tags", async ({ page, isMobile }) => {
+    await page.goto("http://localhost:3000/articles");
+    await expect(
+      page.getByRole("heading", { name: "Popular topics" }),
+    ).toBeVisible({ visible: !isMobile });
+
+    await expect(
+      page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
+    ).toBeVisible({ visible: !isMobile });
+  });
+
+  test("Should not show bookmark article icon", async ({ page }) => {
+    await page.goto("http://localhost:3000/articles");
+
+    await expect(
+      page.getByRole("heading", { name: "Recent bookmarks" }),
+    ).toBeHidden();
+
+    await expect(
+      page.locator("article").first().getByLabel("Bookmark this post"),
+    ).toBeHidden();
+  });
+  test("Should load more articles when scrolling to the end of the page", async ({
+    page,
+    isMobile,
+  }) => {
+    await page.goto("http://localhost:3000/articles");
+    // Waits for articles to be loaded
+    await page.waitForSelector("article");
+
+    const initialArticleCount = await page.$$eval(
+      "article",
+      (articles) => articles.length,
+    );
+
+    if (!isMobile) {
+      await page.getByText("Code Of Conduct").scrollIntoViewIfNeeded();
+      await page.waitForTimeout(5000);
+      const finalArticleCount = await page.$$eval(
+        "article",
+        (articles) => articles.length,
+      );
+      expect(finalArticleCount).toBeGreaterThan(initialArticleCount);
+    }
+
+    await expect(page.getByText("Home")).toBeVisible();
+    await expect(
+      page.getByLabel("Footer").getByRole("link", { name: "Events" }),
+    ).toBeVisible();
+    await expect(page.getByText("Sponsorship")).toBeVisible();
+    await expect(page.getByText("Code Of Conduct")).toBeVisible();
+  });
+});
+
+test.describe("Authenticated Articles Page", () => {
+  test("Should show recent bookmarks", async ({ page, isMobile }) => {
+    await page.goto("http://localhost:3000/articles");
+    await expect(
+      page.getByRole("heading", { name: "Popular topics" }),
+    ).toBeVisible({ visible: !isMobile });
+
+    await expect(
+      page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
+    ).toBeVisible({ visible: !isMobile });
+
+    await expect(
+      page.getByRole("heading", { name: "Recent bookmarks" }),
+    ).toBeVisible({ visible: !isMobile });
+  });
+
+  test("Should show bookmark article icon", async ({ page, isMobile }) => {
+    await page.goto("http://localhost:3000/articles");
+    await expect(
+      page.getByRole("heading", { name: "Popular topics" }),
+    ).toBeVisible({ visible: !isMobile });
+
+    await expect(
+      page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
+    ).toBeVisible({ visible: !isMobile });
+
+    await expect(
+      page.getByRole("heading", { name: "Recent bookmarks" }),
+    ).toBeVisible({ visible: !isMobile });
+
+    await expect(
+      page.locator("article").first().getByLabel("Bookmark this post"),
+    ).toBeVisible();
+  });
+
   test("Should load more articles when scrolling to the end of the page", async ({
     page,
     isMobile,

diff --git a/e2e/auth.setup.ts b/e2e/auth.setup.ts
@@ -28,14 +28,12 @@ setup("authenticate", async ({ page }) => {
   }
 
   try {
-    //expect(process.env.E2E_USER_SESSION_ID).toBeDefined(); removing until I can get it all working.
-
-    const E2E_USER_SESSION_ID = "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
+    expect(process.env.E2E_USER_SESSION_ID).toBeDefined();
 
     await page.context().addCookies([
       {
         name: "next-auth.session-token",
-        value: E2E_USER_SESSION_ID as string,
+        value: process.env.E2E_USER_SESSION_ID as string,
         domain: "localhost",
         path: "/",
         sameSite: "Lax",

diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
@@ -1,20 +1,33 @@
 import { test, expect } from "@playwright/test";
 
-test.describe("Testing homepage views", () => {
-  test("Authenticated homepage view", async ({ page, isMobile }) => {
+test.describe("Authenticated homepage", () => {
+  test("Homepage view", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/");
 
     await expect(page.locator("h1")).not.toContainText("Unwanted text");
 
-    if (!isMobile)
+    const elementVisible = await page
+      .locator('text="Popular topics"')
+      .isVisible();
+
+    if (isMobile) {
+      expect(elementVisible).toBe(false);
+    } else {
       await expect(
         page.getByRole("link", {
           name: "Your Posts",
         }),
       ).toBeVisible();
+      expect(elementVisible).toBe(true);
+    }
   });
-  test("Unauthenticated homepage view", async ({ page }) => {
+});
+
+test.describe("Unauthenticated homepage", () => {
+  test.beforeEach(async ({ page }) => {
     await page.context().clearCookies();
+  });
+  test("Homepage view", async ({ page }) => {
     await page.goto("http://localhost:3000/");
 
     await expect(page.locator("h1")).not.toContainText("Unwanted text");
@@ -25,29 +38,4 @@ test.describe("Testing homepage views", () => {
       "The free web developer community",
     );
   });
-
-  test("Authenticated landing page view", async ({ page, isMobile }) => {
-    await page.goto("http://localhost:3000/");
-
-    const elementVisible = await page
-      .locator('text="Popular topics"')
-      .isVisible();
-
-    if (isMobile) {
-      expect(elementVisible).toBe(false);
-    } else {
-      expect(elementVisible).toBe(true);
-    }
-  });
-
-  test.describe("Confirm image accessibiliy content", () => {
-    test("Shared content", async ({ page }) => {
-      // Accessibility
-      const imagesWithoutAltText = await page.$$eval(
-        "img:not([alt])",
-        (images) => images.length,
-      );
-      expect(imagesWithoutAltText).toBe(0); // All images should have alt text
-    });
-  });
 });
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
@@ -1,23 +1,59 @@
 import { test, expect } from "playwright/test";
 import "dotenv/config";
 
-test.describe("Login Page", () => {
-  test("should display the welcome message", async ({ page }) => {
-    await page.goto("http://localhost:3000/get-started");
-    const welcomeMessage = page.getByText("Sign in or create your accounttton");
-    expect(welcomeMessage).toBeTruthy();
-  });
-  test("should display the Github login button", async ({ page }) => {
+test.describe("Unauthenticated Login Page", () => {
+  test.beforeEach(async ({ page }) => {
     await page.context().clearCookies();
     await page.goto("http://localhost:3000/get-started");
-    await page.waitForTimeout(3000);
+  });
+  test("Sign up page contains sign up links", async ({ page, isMobile }) => {
+    await expect(page.getByText("CodúBetaSign in or create")).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Sign in or create your account" }),
+    ).toBeVisible();
+    await expect(page.getByRole("link", { name: "return home" })).toBeVisible();
+    if (!isMobile) {
+      await expect(
+        page.getByRole("button", { name: "Sign up for free" }),
+      ).toBeVisible();
+      await expect(
+        page.getByRole("button", { name: "Sign in", exact: true }),
+      ).toBeVisible();
+    }
+  });
+  test("Login page contains GitHub button", async ({ page }) => {
     await expect(page.getByTestId("github-login-button")).toBeVisible();
   });
 
-  test("should display the Gitlab login button", async ({ page }) => {
-    await page.context().clearCookies();
-    await page.goto("http://localhost:3000/get-started");
-    await page.waitForLoadState();
+  test("Login page contains GitLab button", async ({ page }) => {
     await expect(page.getByTestId("gitlab-login-button")).toBeVisible();
   });
 });
+
+test.describe("Authenticated Login Page", () => {
+  test("Sign up page contains sign up links", async ({ page, isMobile }) => {
+    // authenticated users are kicked back to the homepage if they try to go to /get-started
+    await page.goto("http://localhost:3000/get-started");
+    expect(page.url()).toEqual("http://localhost:3000/");
+    await expect(page.getByText("CodúBetaSign in or create")).toBeHidden();
+    await expect(
+      page.getByRole("heading", { name: "Sign in or create your account" }),
+    ).toBeHidden();
+    await expect(page.getByRole("link", { name: "return home" })).toBeHidden();
+    if (!isMobile) {
+      await expect(
+        page.getByRole("button", { name: "Sign up for free" }),
+      ).toBeHidden();
+      await expect(
+        page.getByRole("button", { name: "Sign in", exact: true }),
+      ).toBeHidden();
+    }
+  });
+  test("Login page contains GitHub button", async ({ page }) => {
+    await expect(page.getByTestId("github-login-button")).toBeHidden();
+  });
+
+  test("Login page contains GitLab button", async ({ page }) => {
+    await expect(page.getByTestId("gitlab-login-button")).toBeHidden();
+  });
+});