Desktop E2E tests: show creation and selection (#88)

* Desktop E2E show creation and selection

* Add assertion that the show load succeeded

.github/workflows/tests.yml

@@ -236,7 +236,7 @@ jobs:
         working-directory: ./server/.next/standalone
 
       - name: Run Playwright tests
-        run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn playwright test
+        run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn test:e2e
         working-directory: ./desktop
         env:
           PLAYWRIGHT_HTML_REPORT: ${{ github.workspace }}/server/playwright-report

desktop/e2e/media.spec.ts

@@ -0,0 +1,63 @@
+/* eslint-disable no-empty-pattern */
+import {
+  test as base,
+  _electron as electron,
+  expect,
+  type ElectronApplication,
+  type Page,
+} from "@playwright/test";
+import { server } from "./serverAPI";
+
+const test = base.extend<{
+  app: [ElectronApplication, Page];
+}>({
+  app: async ({}, use) => {
+    const app = await electron.launch({ args: [".vite/build/main.js"] });
+    const win = await app.firstWindow();
+
+    await win.waitForLoadState("domcontentloaded");
+
+    await win.getByLabel("Server address").fill("http://localhost:3000");
+    await win.getByLabel("Server Password").fill("aaa");
+
+    await win.getByRole("button", { name: "Connect" }).click();
+
+    await expect(
+      win.getByRole("heading", { name: "Select a show" }),
+    ).toBeVisible();
+
+    await use([app, win]);
+
+    await expect(
+      app.evaluate(({ ipcMain }) => ipcMain.emit("resetTestSettings")),
+    ).not.toBe(false);
+
+    await win.close();
+    await app.close();
+  },
+});
+
+test.beforeEach(async ({ request }) => {
+  await request.post(
+    "http://localhost:3000/api/resetDBInTestsDoNotUseOrYouWillBeFired",
+  );
+  await server.shows.create.mutate({
+    name: "Test Show",
+    start: new Date("2026-01-01T19:00:00Z"),
+    continuityItems: {
+      create: {
+        name: "Test Continuity",
+        durationSeconds: 0,
+        order: 0,
+      },
+    },
+  });
+});
+
+test("can select newly created show", async ({ app: [_app, page] }) => {
+  const row = page.getByRole("listitem").filter({ hasText: "Test Show" });
+  expect(row).toBeVisible();
+  const btn = row.getByRole("button", { name: "Select" });
+  await btn.click();
+  await expect(page.getByRole("button", { name: "Test Show" })).toBeVisible();
+});

desktop/e2e/serverAPI.ts

@@ -0,0 +1,18 @@
+import { fetch } from "undici";
+import type { AppRouter } from "bowser-server/app/api/_router";
+import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
+import SuperJSON from "superjson";
+
+export const server = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: "http://localhost:3000/api/trpc",
+      headers: () => ({
+        Authorization: "Bearer aaa",
+      }),
+      // @ts-expect-error the undici types don't match what TRPC is expecting, but they're close enough
+      fetch,
+    }),
+  ],
+  transformer: SuperJSON,
+});

desktop/package.json

@@ -12,7 +12,8 @@
     "lint": "eslint src/",
     "prettify": "prettier --write .",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "E2E_TEST=true playwright test"
   },
   "keywords": [],
   "author": {
@@ -48,6 +49,7 @@
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.3.3",
+    "undici": "^5.23.0",
     "vite": "^4.4.6",
     "vitest": "^0.33.0"
   },

desktop/src/main/main.ts

@@ -74,7 +74,7 @@ const createWindow = async () => {
   }
 
   // Open the DevTools.
-  if (import.meta.env.DEV) {
+  if (import.meta.env.DEV || process.env.BOWSER_OPEN_DEVTOOLS === "true") {
     mainWindow.webContents.openDevTools();
   }
 

desktop/src/main/settings.ts

@@ -1,9 +1,37 @@
-import settings from "electron-settings";
+import electronSettings from "electron-settings";
 import { safeStorage } from "./safeStorage";
 import { z } from "zod";
 import * as fsp from "fs/promises";
 import { AssetTypeSchema } from "@bowser/prisma/types";
 import { IPCEvents } from "./ipcEventBus";
+import { ipcMain } from "electron";
+
+/*
+ * In E2E tests we don't want settings to persist between tests, so we use
+ * an in-memory store that can be reset by the test harness.
+ */
+
+interface SettingsStore {
+  get(key: string): Promise<unknown | undefined>;
+  set(key: string, value: unknown): Promise<void>;
+}
+
+const inMemSettings = new Map<string, unknown>();
+const inMemSettingsStore: SettingsStore = {
+  async get(key: string) {
+    return inMemSettings.get(key);
+  },
+  async set(key: string, value: unknown) {
+    inMemSettings.set(key, value);
+  },
+};
+
+const settings: SettingsStore =
+  process.env.E2E_TEST === "true" ? inMemSettingsStore : electronSettings;
+
+ipcMain.on("resetTestSettings", () => {
+  inMemSettings.clear();
+});
 
 /**
  * Since settings are stored as JSON files on disk, we pass them through zod as a sanity check.

desktop/src/renderer/ConnectAndSelectShowGate.tsx

@@ -78,9 +78,9 @@ export function SelectShowForm(props: { onSelect?: () => void }) {
   }
   invariant(listShows.data, "listShows.data is null");
   return (
-    <div>
+    <div data-testid="SelectShowForm.showsList" role="list">
       {listShows.data.map((show) => (
-        <div key={show.id}>
+        <div key={show.id} role="listitem">
           <h3 className="text-xl">{show.name}</h3>
           <Button
             color="primary"

server/app/api/_base.ts

@@ -1,9 +1,18 @@
-import { initTRPC } from "@trpc/server";
+import { TRPCError, initTRPC } from "@trpc/server";
 import superjson from "superjson";
 
 const t = initTRPC.create({
   transformer: superjson,
 });
 
 export const publicProcedure = t.procedure;
+export const e2eProcedure = t.procedure.use(({ next }) => {
+  if (process.env.E2E_TEST !== "true") {
+    throw new TRPCError({
+      code: "FORBIDDEN",
+      message: "This endpoint is only available in e2e tests",
+    });
+  }
+  return next();
+});
 export const router = t.router;

server/app/api/_router.ts

@@ -1,4 +1,4 @@
-import { publicProcedure, router } from "./_base";
+import { e2eProcedure, publicProcedure, router } from "./_base";
 import { z } from "zod";
 import { db } from "@/lib/db";
 import {
@@ -8,7 +8,11 @@ import {
   PartialShowModel,
 } from "@bowser/prisma/utilityTypes";
 import { getPresignedURL } from "@/lib/s3";
-import { ContinuityItemSchema, RundownItemSchema } from "@bowser/prisma/types";
+import {
+  ContinuityItemSchema,
+  RundownItemSchema,
+  ShowCreateInputSchema,
+} from "@bowser/prisma/types";
 
 const ExtendedMediaModelWithDownloadURL = CompleteMediaModel.extend({
   continuityItem: ContinuityItemSchema.nullable(),
@@ -80,6 +84,36 @@ export const appRouter = router({
         });
         return obj;
       }),
+    create: e2eProcedure
+      .input(ShowCreateInputSchema)
+      .output(CompleteShowModel)
+      .mutation(async ({ input }) => {
+        const res = await db.show.create({
+          data: input,
+          include: {
+            continuityItems: {
+              include: {
+                media: true,
+              },
+            },
+            rundowns: {
+              include: {
+                items: {
+                  include: {
+                    media: true,
+                  },
+                },
+                assets: {
+                  include: {
+                    media: true,
+                  },
+                },
+              },
+            },
+          },
+        });
+        return res;
+      }),
   }),
   media: router({
     get: publicProcedure

yarn.lock

@@ -5805,6 +5805,7 @@ __metadata:
     superjson: ^1.13.1
     tailwindcss: ^3.3.3
     typescript: ^5.1.6
+    undici: ^5.23.0
     utf-8-validate: ^6.0.3
     uuid: ^9.0.0
     vite: ^4.4.6