Setup Playwright for end-to-end testing (aeharding#1392)

* Install Playwright

* Add Playwright config, update Vite config

* Vite tries to run all test files by default. The directory containing
  Playwright tests (`e2e/`) and `node_modules/` need to be excluded in
  vite.config.ts.

* Add some basic tests for community feed page

* Tests currently depend on locally stored test data.

* Add GitHub action to run Playwright tests

* Add e2e.yml to run Playwright tests in a container using an image
  provided by the Playwright team.
* Update Playwright config to run tests against a production build of
  the app instead of the dev server.
* Add script to package.json to run Playwright tests.

* Remove trailing whitespace to pass Prettier check

* Update e2e/testdata/posts.ts

.github/workflows/e2e.yml

@@ -0,0 +1,27 @@
+name: Run e2e tests
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  playwright:
+    name: Run Playwright tests
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.43.0-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build project
+        run: pnpm build
+      - name: Run tests
+        run: env HOME=/root pnpm test:e2e

.gitignore

@@ -37,3 +37,7 @@ vite.config.ts.timestamp-*
 
 # fly.io
 fly.toml
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/community-feed.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+
+import { posts } from "./testdata/posts";
+
+test("load community posts", async ({ page }) => {
+  await page.route("*/**/api/v3/post/list**", async (route) => {
+    await route.fulfill({ json: { posts } });
+  });
+
+  await page.goto("/");
+  await page.waitForURL("/posts/lemmy.world/all");
+
+  await expect(page).toHaveTitle("Voyager for Lemmy");
+
+  await expect(page.getByText(posts[0].post.name)).toBeVisible();
+});
+
+test("navigate to post on click", async ({ page }) => {
+  await page.route("*/**/api/v3/post/list**", async (route) => {
+    await route.fulfill({ json: { posts } });
+  });
+
+  await page.goto("/");
+
+  await page.getByText(posts[0].post.name).click();
+
+  await expect(page).toHaveURL(
+    "/posts/lemmy.world/c/[email protected]/comments/999",
+  );
+});

e2e/testdata/posts.ts

@@ -0,0 +1,75 @@
+import type { PostView } from "lemmy-js-client";
+
+export const posts: PostView[] = [
+  {
+    post: {
+      id: 999,
+      name: "Post 999 title",
+      body: "Post 999 body.",
+      creator_id: 100,
+      community_id: 111,
+      removed: false,
+      locked: false,
+      published: "2024-04-01T00:00:00.000000Z",
+      updated: "2024-04-01T00:00:00.000000Z",
+      deleted: false,
+      nsfw: false,
+      thumbnail_url: "",
+      ap_id: "",
+      local: false,
+      language_id: 0,
+      featured_community: false,
+      featured_local: false,
+    },
+    creator: {
+      id: 100,
+      name: "user_1",
+      display_name: "lemmy_user",
+      banned: false,
+      published: "2024-04-01T00:00:00.000000Z",
+      actor_id: "https://test.lemmy/u/lemmy_user",
+      local: false,
+      deleted: false,
+      bot_account: false,
+      instance_id: 1,
+    },
+    community: {
+      id: 111,
+      name: "community_1",
+      title: "Community",
+      description: "Description 1",
+      removed: false,
+      published: "2024-04-01T00:00:00.000000Z",
+      updated: "2024-04-01T00:00:00.000000Z",
+      deleted: false,
+      nsfw: false,
+      actor_id: "https://test.lemmy/c/community_1",
+      local: false,
+      icon: "",
+      banner: "",
+      hidden: false,
+      posting_restricted_to_mods: false,
+      instance_id: 3,
+      visibility: "Public",
+    },
+    creator_banned_from_community: false,
+    creator_is_moderator: false,
+    creator_is_admin: false,
+    counts: {
+      post_id: 111,
+      comments: 20,
+      score: 91,
+      upvotes: 100,
+      downvotes: 9,
+      published: "2024-04-01T00:00:00.000000Z",
+      newest_comment_time: "2024-04-01T00:00:00.000000Z",
+    },
+    subscribed: "NotSubscribed",
+    saved: false,
+    read: false,
+    creator_blocked: false,
+    unread_comments: 20,
+    banned_from_community: false,
+    hidden: false,
+  },
+];

package.json

@@ -10,6 +10,7 @@
     "build": "./build.sh",
     "preview": "vite preview",
     "test": "vitest",
+    "test:e2e": "playwright test",
     "test:typecheck": "tsc",
     "lint": "eslint src --max-warnings=0",
     "lint:formatting": "prettier --check .",
@@ -110,6 +111,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@playwright/test": "^1.43.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -118,6 +120,7 @@
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
     "@types/mdast": "^4.0.3",
+    "@types/node": "^20.12.4",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
     "@types/react-router": "^5.1.20",

playwright.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "list",
+  use: {
+    baseURL: "http://localhost:4173",
+
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 7"] },
+    },
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 14"] },
+    },
+  ],
+
+  webServer: {
+    command: "pnpm preview",
+    url: "http://localhost:4173",
+    reuseExistingServer: !process.env.CI,
+  },
+});