feat: adding e2e test for article commenting (#1158)

Author: JohnAllenTech

e2e/articles.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from "playwright/test";
+import { randomUUID } from "crypto";
 
 test.describe("Unauthenticated Articles Page", () => {
   test.beforeEach(async ({ page }) => {
@@ -57,6 +58,24 @@ test.describe("Unauthenticated Articles Page", () => {
     await expect(page.getByText("Sponsorship")).toBeVisible();
     await expect(page.getByText("Code Of Conduct")).toBeVisible();
   });
+
+  test("Should not be able to post a comment on an article", async ({
+    page,
+  }) => {
+    await page.goto("http://localhost:3000");
+    // Waits for articles to be loaded
+    await expect(page.getByText("Read Full Article").first()).toBeVisible();
+    await page.getByText("Read Full Article").first().click();
+    await page.waitForURL(/^http:\/\/localhost:3000\/articles\/.*$/);
+
+    await expect(page.getByPlaceholder("What do you think?")).toBeHidden();
+
+    await expect(page.getByText("Hey! 👋")).toBeVisible();
+    await expect(page.getByText("Got something to say?")).toBeVisible();
+    await expect(
+      page.getByText("Sign in or sign up to leave a comment"),
+    ).toBeVisible();
+  });
 });
 
 test.describe("Authenticated Articles Page", () => {
@@ -186,4 +205,19 @@ test.describe("Authenticated Articles Page", () => {
     await expect(page.getByLabel("like-trigger")).toBeVisible();
     await expect(page.getByLabel("bookmark-trigger")).toBeVisible();
   });
+
+  test("Should post a comment on an article", async ({ page }, workerInfo) => {
+    const commentContent = `This is a great read. Thanks for posting! Sent from ${workerInfo.project.name} + ${randomUUID()}`;
+    await page.goto("http://localhost:3000");
+    // Waits for articles to be loaded
+    await expect(page.getByText("Read Full Article").first()).toBeVisible();
+    await page.getByText("Read Full Article").first().click();
+    await page.waitForURL(/^http:\/\/localhost:3000\/articles\/.*$/);
+
+    await expect(page.getByPlaceholder("What do you think?")).toBeVisible();
+    await page.getByPlaceholder("What do you think?").fill(commentContent);
+    await page.getByRole("button", { name: "Submit" }).click();
+
+    await expect(page.getByText(commentContent)).toBeVisible();
+  });
 });

playwright.config.ts

@@ -37,17 +37,16 @@ export default defineConfig({
   projects: [
     { name: "setup", testMatch: /auth.setup\.ts/ },
     {
-      name: "chromium",
+      name: "Desktop Chrome",
       use: {
-        ...devices["Desktop Chrome"],
         storageState: "playwright/.auth/browser.json",
       },
       dependencies: ["setup"],
     },
 
     // Example other browsers
     {
-      name: "firefox",
+      name: "Desktop Firefox",
       use: {
         ...devices["Desktop Firefox"],
         storageState: "playwright/.auth/browser.json",