From 3ee1736c895281c07acd46ee094a949289e46b85 Mon Sep 17 00:00:00 2001 From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com> Date: Mon, 14 Oct 2024 18:59:31 -0600 Subject: [PATCH 1/2] chore: improved current E2E tests and enhanced labels --- e2e/accessibility.spec.ts | 13 +++++++++ e2e/articles.spec.ts | 15 +++++++++- e2e/auth.setup.ts | 6 ++-- e2e/home.spec.ts | 46 +++++++++++------------------- e2e/login.spec.ts | 60 +++++++++++++++++++++++++++++++-------- 5 files changed, 94 insertions(+), 46 deletions(-) create mode 100644 e2e/accessibility.spec.ts diff --git a/e2e/accessibility.spec.ts b/e2e/accessibility.spec.ts new file mode 100644 index 00000000..15f3028a --- /dev/null +++ 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 index 6b782ffc..99e9109b 100644 --- a/e2e/articles.spec.ts +++ b/e2e/articles.spec.ts @@ -1,6 +1,19 @@ 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 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 index de63a20d..ad2347be 100644 --- 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 index f8f50898..acbcfcf8 100644 --- 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 index 491c77c5..7c5626ec 100644 --- 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(); + }); +}); From 8105aa830e725835413d9a0efa831d9c584bbf2d Mon Sep 17 00:00:00 2001 From: JohnAllenTech <46611809+JohnAllenTech@users.noreply.github.com> Date: Mon, 14 Oct 2024 19:14:01 -0600 Subject: [PATCH 2/2] chore: added more tests around article page and unauth/auth views --- e2e/articles.spec.ts | 80 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index 99e9109b..bc153b67 100644 --- a/e2e/articles.spec.ts +++ b/e2e/articles.spec.ts @@ -4,6 +4,7 @@ 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( @@ -14,6 +15,85 @@ test.describe("Unauthenticated Articles Page", () => { 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,