Adding E2E tests for my-posts page Part 1 (#1187)

Author: JohnAllenTech

E2E Overview.md

@@ -2,8 +2,6 @@
 
 To run the end-to-end tests using Playwright, you need to configure your environment and follow these steps:
 
-
-
 ### Session and User Setup
 
 First, you need to add your E2E test user to your locally running database. Do this by running the following script if you haven't already:

e2e/articles.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from "playwright/test";
 import { randomUUID } from "crypto";
-import { loggedInAsUserOne } from "./utils";
+import { articleContent, articleExcerpt, loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated Articles Page", () => {
   test("Should show popular tags", async ({ page, isMobile }) => {
@@ -17,10 +17,10 @@ test.describe("Unauthenticated Articles Page", () => {
   test("Should be able to navigate directly to an article", async ({
     page,
   }) => {
-    await page.goto("http://localhost:3000/articles/e2e-test-slug-eqj0ozor");
-    await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
+    await page.goto("http://localhost:3000/articles/e2e-test-slug-published");
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
     await expect(
-      page.getByRole("heading", { name: "Test Article" }),
+      page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Written by E2E Test User One" }),
@@ -223,8 +223,6 @@ test.describe("Authenticated Articles Page", () => {
   });
 
   test("Should write and publish an article", async ({ page, isMobile }) => {
-    const articleContent =
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
     const articleTitle = "Lorem Ipsum";
     await page.goto("http://localhost:3000");
     // Waits for articles to be loaded
@@ -261,7 +259,7 @@ test.describe("Authenticated Articles Page", () => {
       /^http:\/\/localhost:3000\/articles\/lorem-ipsum-.*$/,
     );
 
-    await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Lorem Ipsum" }),
     ).toBeVisible();
@@ -291,14 +289,14 @@ test.describe("Authenticated Articles Page", () => {
   });
 
   test("Should be able reply to a comment", async ({ page }) => {
-    await page.goto("http://localhost:3000/articles/e2e-test-slug-eqj0ozor");
+    await page.goto("http://localhost:3000/articles/e2e-test-slug-published");
     const numberOfCommentsIntially = await page
       .locator("div")
       .filter({ hasText: /^Thanks for the positive feedback!$/ })
       .count();
-    await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
     await expect(
-      page.getByRole("heading", { name: "Test Article" }),
+      page.getByRole("heading", { name: "Published Article" }),
     ).toBeVisible();
     await expect(
       page.getByRole("heading", { name: "Written by E2E Test User One" }),

e2e/my-posts.spec.ts

@@ -1,15 +1,56 @@
-import test from "@playwright/test";
-import { loggedInAsUserOne } from "./utils";
+import test, { expect } from "@playwright/test";
+import { articleExcerpt, loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated my-posts Page", () => {
-  //
-  // Replace with tests for unauthenticated users
+  test("Unauthenticated users should be redirected to get-started page if they access my-posts directly", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+    await page.waitForURL("http://localhost:3000/get-started");
+    expect(page.url()).toEqual("http://localhost:3000/get-started");
+  });
 });
 
 test.describe("Authenticated my-posts Page", () => {
   test.beforeEach(async ({ page }) => {
     await loggedInAsUserOne(page);
   });
-  //
-  // Replace with tests for authenticated users
+
+  test("Tabs for different type of posts should be visible", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+
+    await expect(page.getByRole("link", { name: "Drafts" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Scheduled" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Published" })).toBeVisible();
+  });
+
+  test("Different article tabs should correctly display articles matching that type", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000/my-posts");
+
+    await expect(page.getByRole("link", { name: "Drafts" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Scheduled" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Published" })).toBeVisible();
+
+    await page.getByRole("link", { name: "Drafts" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Draft Article" }),
+    ).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
+
+    await page.getByRole("link", { name: "Scheduled" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Scheduled Article" }),
+    ).toBeVisible();
+    await expect(page.getByText(articleExcerpt)).toBeVisible();
+
+    await page.getByRole("link", { name: "Published" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Published Article" }),
+    ).toBeVisible();
+    await expect(page.getByText(articleExcerpt, { exact: true })).toBeVisible();
+  });
 });

e2e/setup.ts

@@ -2,6 +2,8 @@ import postgres from "postgres";
 import { drizzle } from "drizzle-orm/postgres-js";
 import { post, comment, session, user } from "@/server/db/schema";
 import {
+  articleContent,
+  articleExcerpt,
   E2E_USER_ONE_EMAIL,
   E2E_USER_ONE_ID,
   E2E_USER_ONE_SESSION_ID,
@@ -12,37 +14,81 @@ import {
 import { eq } from "drizzle-orm";
 
 export const setup = async () => {
+  // Dynamically import nanoid
+  const { nanoid } = await import("nanoid");
+
   const db = drizzle(
     postgres("postgresql://postgres:[email protected]:5432/postgres"),
   );
-
   const addE2EArticleAndComment = async (
     authorId: string,
     commenterId: string,
   ) => {
-    const postId = "1nFnMmN5";
+    const publishedPostId = nanoid(8);
+    const scheduledPostId = nanoid(8);
+    const draftPostId = nanoid(8);
     const now = new Date().toISOString();
-    await db
-      .insert(post)
-      .values({
-        id: postId,
-        published: now,
-        excerpt: "Lorem ipsum dolor sit amet",
-        updatedAt: now,
-        slug: "e2e-test-slug-eqj0ozor",
-        likes: 10,
-        readTimeMins: 3,
-        title: "Test Article",
-        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.",
-        userId: authorId,
-      })
-      .onConflictDoNothing()
-      .returning();
+
+    const oneYearFromToday = new Date(now);
+    oneYearFromToday.setFullYear(oneYearFromToday.getFullYear() + 1);
+
+    await Promise.all([
+      db
+        .insert(post)
+        .values({
+          id: publishedPostId,
+          published: now,
+          excerpt: articleExcerpt,
+          updatedAt: now,
+          slug: "e2e-test-slug-published",
+          likes: 10,
+          readTimeMins: 3,
+          title: "Published Article",
+          body: articleContent,
+          userId: authorId,
+        })
+        .onConflictDoNothing()
+        .returning(),
+
+      db
+        .insert(post)
+        .values({
+          id: draftPostId,
+          published: null,
+          excerpt: articleExcerpt,
+          updatedAt: now,
+          slug: "e2e-test-slug-draft",
+          likes: 10,
+          readTimeMins: 3,
+          title: "Draft Article",
+          body: articleContent,
+          userId: authorId,
+        })
+        .onConflictDoNothing()
+        .returning(),
+
+      db
+        .insert(post)
+        .values({
+          id: scheduledPostId,
+          published: oneYearFromToday.toISOString(),
+          excerpt: articleExcerpt,
+          updatedAt: now,
+          slug: "e2e-test-slug-scheduled",
+          likes: 10,
+          readTimeMins: 3,
+          title: "Scheduled Article",
+          body: articleContent,
+          userId: authorId,
+        })
+        .onConflictDoNothing()
+        .returning(),
+    ]);
 
     await db
       .insert(comment)
       .values({
-        postId,
+        postId: publishedPostId,
         body: "What a great article! Thanks for sharing",
         userId: commenterId,
       })

e2e/utils/constants.ts

@@ -0,0 +1,4 @@
+export const articleContent =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed.";
+
+export const articleExcerpt = "Lorem ipsum dolor sit amet";

e2e/utils/index.ts

@@ -1 +1,2 @@
 export * from "./utils";
+export * from "./constants";