Feat/adding test for replying to a comment (#1183)

Author: JohnAllenTech

e2e/articles.spec.ts

@@ -14,6 +14,21 @@ 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 expect(
+      page.getByRole("heading", { name: "Test Article" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Written by E2E Test User One" }),
+    ).toBeVisible();
+    await expect(page.getByLabel("like-trigger")).toBeVisible();
+    await expect(page.getByLabel("bookmark-trigger")).toBeVisible();
+  });
+
   test("Should show bookmark article icon", async ({ page }) => {
     await page.goto("http://localhost:3000/articles");
 
@@ -274,4 +289,46 @@ test.describe("Authenticated Articles Page", () => {
 
     await expect(page.getByText(commentContent)).toBeVisible();
   });
+
+  test("Should be able reply to a comment", async ({ page }) => {
+    await page.goto("http://localhost:3000/articles/e2e-test-slug-eqj0ozor");
+    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.getByRole("heading", { name: "Test Article" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Written by E2E Test User One" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Discussion (0)" }),
+    ).toBeVisible();
+    await expect(page.getByLabel("like-trigger")).toBeVisible();
+    await expect(page.getByLabel("bookmark-trigger")).toBeVisible();
+
+    await page.getByRole("button", { name: "Reply" }).first().click();
+
+    await page.locator("#reply").fill("Thanks for the positive feedback!");
+    await page.getByRole("button", { name: "Submit" }).nth(1).click();
+    await page.waitForTimeout(250);
+
+    await expect(
+      page.getByText("AUTHOR", { exact: true }).first(),
+    ).toBeVisible();
+    const numberOfCommentsAfteringCommenting = await page
+      .locator("div")
+      .filter({ hasText: /^Thanks for the positive feedback!$/ })
+      .count();
+    expect(numberOfCommentsAfteringCommenting).toBeGreaterThan(
+      numberOfCommentsIntially,
+    );
+    await expect(
+      page
+        .getByRole("link", { name: "E2E Test User One", exact: true })
+        .nth(numberOfCommentsIntially + 1),
+    ).toBeVisible();
+  });
 });

e2e/setup.ts

@@ -0,0 +1,65 @@
+import dotenv from "dotenv";
+import postgres from "postgres";
+import { drizzle } from "drizzle-orm/postgres-js";
+import { post, comment } from "@/server/db/schema";
+
+dotenv.config(); // Load .env file contents into process.env
+
+export const setup = async () => {
+  if (
+    !process.env.DATABASE_URL ||
+    !process.env.E2E_USER_ONE_ID ||
+    !process.env.E2E_USER_TWO_ID
+  ) {
+    throw new Error("Missing env variables for DB clean up script");
+  }
+  const db = drizzle(postgres(process.env.DATABASE_URL as string));
+
+  const addE2EArticleAndComment = async (
+    authorId: string,
+    commenterId: string,
+  ) => {
+    const postId = "1nFnMmN5";
+    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();
+
+    await db
+      .insert(comment)
+      .values({
+        postId,
+        body: "What a great article! Thanks for sharing",
+        userId: commenterId,
+      })
+      .onConflictDoNothing()
+      .returning();
+  };
+
+  try {
+    console.log("creating articles");
+
+    await addE2EArticleAndComment(
+      process.env.E2E_USER_ONE_ID as string,
+      process.env.E2E_USER_TWO_ID as string,
+    );
+    console.log("DB setup successful");
+  } catch (err) {
+    console.log("Error while setting up DB before E2E test run", err);
+  }
+};
+
+export default setup;

playwright.config.ts

@@ -10,6 +10,7 @@ import { defineConfig, devices } from "@playwright/test";
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
+  globalSetup: "./e2e/setup.ts",
   globalTeardown: "./e2e/teardown.ts",
   testDir: "e2e",
   /* Run tests in files in parallel */