Merge branch 'codu-code:develop' into bugfix/pr-lint-issues

.eslintrc.json → .eslintrc

@@ -8,9 +8,8 @@
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "prettier",
-    "plugin:testing-library/react",
-    "plugin:jest-dom/recommended",
-    "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended",
+    "plugin:playwright/recommended"
   ],
   "rules": {
     "@typescript-eslint/consistent-type-imports": "warn",

.github/workflows/playwright.yml

@@ -18,12 +18,9 @@ jobs:
         run: npm ci
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
-      - name: "check is DATABASE_URL exists"
+      - name: Run Playwright tests
         env:
           DATABASE_URL: ${{ secrets.DATABASE_URL }}
-        if: ${{ env.DATABASE_URL == '' }}
-        run: echo "The secret \"DATABASE_URL\" has not been made; echo please go to \"settings \> secrets \> actions\" to create it
-      - name: Run Playwright tests
         run: npx playwright test
       - uses: actions/upload-artifact@v3
         if: always()

.github/workflows/pull-request.yml

@@ -1,6 +1,6 @@
 name: Check the pull request
 
-on: 
+on:
   pull_request:
     types: [opened, synchronize, reopened, edited]
 
@@ -21,5 +21,3 @@ jobs:
         run: npm run lint
       - name: Run Prettier
         run: npm run prettier
-      - name: Run Jest tests
-        run: npm run test:jest

.gitignore

@@ -60,4 +60,12 @@ ssmSetup.zsh
 .sentryclirc
 
 # Generated files
-.swc
+.swc
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

components/PromptService/PromptService.test.tsx

@@ -1,75 +1,75 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import "@testing-library/jest-dom";
-import { PromptDialog } from "@/components/PromptService";
+// TODO refactor into e2e Playwright tests
 
-class ResizeObserver {
-  observe() {
-    // do nothing
-  }
-  unobserve() {
-    // do nothing
-  }
-  disconnect() {
-    // do nothing
-  }
-}
+// import React from "react";
 
-window.ResizeObserver = ResizeObserver;
+// import { PromptDialog } from "@/components/PromptService";
 
-jest.mock("next/navigation", () => ({
-  useRouter: jest.fn(),
-}));
+// class ResizeObserver {
+//   observe() {
+//     // do nothing
+//   }
+//   unobserve() {
+//     // do nothing
+//   }
+//   disconnect() {
+//     // do nothing
+//   }
+// }
 
-jest.mock("./PromptContext", () => ({
-  usePrompt: jest.fn(),
-}));
+// window.ResizeObserver = ResizeObserver;
 
-describe("PromptDialog Component", () => {
-  const mockConfirm = jest.fn();
-  const mockCancel = jest.fn();
+// jest.mock("next/navigation", () => ({
+//   useRouter: jest.fn(),
+// }));
 
-  jest.mock("next/navigation", () => ({
-    useRouter: jest.fn(),
-  }));
+// jest.mock("./PromptContext", () => ({
+//   usePrompt: jest.fn(),
+// }));
 
-  const PromptDialogTestComponent = (
-    <PromptDialog
-      title="Test Title"
-      subTitle="Test Subtitle"
-      content="Test Content"
-      confirm={mockConfirm}
-      cancel={mockCancel}
-      confirmText="Continue without saving"
-      cancelText="Keep editing"
-    />
-  );
+// describe("PromptDialog Component", () => {
+//   const mockConfirm = jest.fn();
+//   const mockCancel = jest.fn();
 
-  it("renders with provided title, subtitle and content", () => {
-    render(PromptDialogTestComponent);
-    expect(screen.getByText("Test Title")).toBeInTheDocument();
-    expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
-    expect(screen.getByText("Test Content")).toBeInTheDocument();
-  });
+//   jest.mock("next/navigation", () => ({
+//     useRouter: jest.fn(),
+//   }));
 
-  it("calls confirm callback when continue button is clicked", async () => {
-    render(PromptDialogTestComponent);
-    await userEvent.click(
-      screen.getByRole("button", { name: "Continue without saving" }),
-    );
-    expect(mockConfirm).toHaveBeenCalled();
-  });
+//   const PromptDialogTestComponent = (
+//     <PromptDialog
+//       title="Test Title"
+//       subTitle="Test Subtitle"
+//       content="Test Content"
+//       confirm={mockConfirm}
+//       cancel={mockCancel}
+//       confirmText="Continue without saving"
+//       cancelText="Keep editing"
+//     />
+//   );
 
-  it("calls cancel callback when cancel button is clicked", async () => {
-    render(PromptDialogTestComponent);
-    await userEvent.click(screen.getByRole("button", { name: "Keep editing" }));
-    expect(mockCancel).toHaveBeenCalled();
-  });
+//   it("renders with provided title, subtitle and content", () => {
+//     render(PromptDialogTestComponent);
+//     expect(screen.getByText("Test Title")).toBeInTheDocument();
+//     expect(screen.getByText("Test Subtitle")).toBeInTheDocument();
+//     expect(screen.getByText("Test Content")).toBeInTheDocument();
+//   });
 
-  it("calls cancel callback when close icon is clicked", async () => {
-    render(PromptDialogTestComponent);
-    await userEvent.click(screen.getByRole("button", { name: "Close" }));
-    expect(mockCancel).toHaveBeenCalled();
-  });
-});
+//   it("calls confirm callback when continue button is clicked", async () => {
+//     render(PromptDialogTestComponent);
+//     await userEvent.click(
+//       screen.getByRole("button", { name: "Continue without saving" }),
+//     );
+//     expect(mockConfirm).toHaveBeenCalled();
+//   });
+
+//   it("calls cancel callback when cancel button is clicked", async () => {
+//     render(PromptDialogTestComponent);
+//     await userEvent.click(screen.getByRole("button", { name: "Keep editing" }));
+//     expect(mockCancel).toHaveBeenCalled();
+//   });
+
+//   it("calls cancel callback when close icon is clicked", async () => {
+//     render(PromptDialogTestComponent);
+//     await userEvent.click(screen.getByRole("button", { name: "Close" }));
+//     expect(mockCancel).toHaveBeenCalled();
+//   });
+// });

components/Theme/ThemeToggle/ThemeToggle.test.tsx

@@ -1,35 +1,38 @@
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import userEvent from "@testing-library/user-event";
-import { ThemeProvider } from "next-themes";
-import { axe, toHaveNoViolations } from "jest-axe";
-import ThemeToggle from "./ThemeToggle";
+// TODO refactor into e2e Playwright tests
+// Use @axe-core/playwright - https://playwright.dev/docs/accessibility-testing
 
-expect.extend(toHaveNoViolations);
+// import { render, screen } from "@testing-library/react";
+// import "@testing-library/jest-dom";
+// import userEvent from "@testing-library/user-event";
+// import { ThemeProvider } from "next-themes";
+// import { axe, toHaveNoViolations } from "jest-axe";
+// import ThemeToggle from "./ThemeToggle";
 
-describe("Theme Toggle", () => {
-  const user = userEvent.setup();
+// expect.extend(toHaveNoViolations);
 
-  it("renders with no axe violations", async () => {
-    const { container } = render(<ThemeToggle />, { wrapper: ThemeProvider });
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+// describe("Theme Toggle", () => {
+//   const user = userEvent.setup();
 
-  it("renders a theme toggle button and toggles pressed state", async () => {
-    render(<ThemeToggle />, { wrapper: ThemeProvider });
+//   it("renders with no axe violations", async () => {
+//     const { container } = render(<ThemeToggle />, { wrapper: ThemeProvider });
+//     const results = await axe(container);
+//     expect(results).toHaveNoViolations();
+//   });
 
-    const toggleButton = screen.getByRole("button", {
-      name: "Toggle Dark Mode",
-      pressed: false,
-    });
+//   it("renders a theme toggle button and toggles pressed state", async () => {
+//     render(<ThemeToggle />, { wrapper: ThemeProvider });
 
-    expect(toggleButton).toBeInTheDocument();
+//     const toggleButton = screen.getByRole("button", {
+//       name: "Toggle Dark Mode",
+//       pressed: false,
+//     });
 
-    await user.click(toggleButton);
-    expect(toggleButton).toHaveAttribute("aria-pressed", "true");
+//     expect(toggleButton).toBeInTheDocument();
 
-    await user.click(toggleButton);
-    expect(toggleButton).toHaveAttribute("aria-pressed", "false");
-  });
-});
+//     await user.click(toggleButton);
+//     expect(toggleButton).toHaveAttribute("aria-pressed", "true");
+
+//     await user.click(toggleButton);
+//     expect(toggleButton).toHaveAttribute("aria-pressed", "false");
+//   });
+// });

e2e/articles.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "playwright/test";
+
+test.describe("Articles", () => {
+  test("Should load more articles when scrolling to the end of the page", async ({
+    page,
+  }) => {
+    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,
+    );
+
+    await page.evaluate(() => {
+      window.scrollTo(0, document.body.scrollHeight);
+    });
+
+    await expect(page.locator(".animate-pulse")).toBeVisible();
+    await expect(page.locator(".animate-pulse")).not.toBeVisible();
+
+    const finalArticleCount = await page.$$eval(
+      "article",
+      (articles) => articles.length,
+    );
+
+    expect(finalArticleCount).toBeGreaterThan(initialArticleCount);
+  });
+});

e2e/home.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
 
 test.describe("Confirm homepage content", () => {
   test("Shared content", async ({ page }) => {
-    await page.goto("/");
+    await page.goto("http://localhost:3000/");
     // Check headers
 
     await expect(page.locator("h1")).toContainText("A space for coders");
@@ -18,7 +18,7 @@ test.describe("Confirm homepage content", () => {
   });
 
   test("Different devices", async ({ page, isMobile }) => {
-    await page.goto("/");
+    await page.goto("http://localhost:3000/");
 
     const elementVisible = await page
       .locator('text="Recommended topics"')

e2e/login.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "playwright/test";
+
+test.afterEach(async ({ page }) => {
+  // Sign out the user after all tests are done
+  await page.goto("http://localhost:3000/api/auth/signout");
+  await page.getByRole("button", { name: "Sign out" }).click();
+  await expect(page.locator("#submitButton")).not.toBeVisible();
+});
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("http://localhost:3000/get-started");
+});
+
+test.describe("Login Page", () => {
+  test("should display the login button", async ({ page }) => {
+    const loginButton = page.getByRole("button", {
+      name: "Sign in with GitHub Login",
+    });
+    expect(loginButton).toBeTruthy();
+  });
+
+  test("should navigate to GitHub login page when clicking the login button", async ({
+    page,
+  }) => {
+    const button = page.getByRole("button", {
+      name: "Sign in with GitHub Login",
+    });
+
+    await button.click();
+    await page.waitForURL("https://github.com/**");
+
+    expect(page.getByLabel("Username or email address")).toBeTruthy();
+
+    expect(page.getByLabel("Password")).toBeTruthy();
+  });
+});