[BADGER-223][WIP] Redux-based refactor of Desktop

.github/workflows/release.yml

@@ -108,6 +108,7 @@ jobs:
         working-directory: ./desktop
         env:
           TEST_APPLICATION_PATH: ${{ runner.temp }}\badger\Badger Desktop.exe
+          ELECTRON: "true"
 
   linear:
     needs: [test-e2e-server, test-desktop]

.github/workflows/tests.yml

@@ -178,7 +178,7 @@ jobs:
           PLAYWRIGHT_HTML_REPORT: ${{ github.workspace }}/server/playwright-report
 
       - uses: actions/upload-artifact@v3
-        if: always()
+        if: failure()
         with:
           name: playwright-report-server
           path: ./server/playwright-report/
@@ -187,10 +187,13 @@ jobs:
   test-e2e-desktop-standalone:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        ELECTRON: [true, false]
     env:
       NODE_ENV: test
       E2E_TEST: "true"
-      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: ${{ matrix.ELECTRON == 'true' && 1 || 0 }}
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -210,15 +213,20 @@ jobs:
       - name: Make logs folder
         run: mkdir -p ${{ runner.temp }}/logs
 
+      - uses: ./.github/steps/setup-playwright
+        with:
+          working-directory: ./desktop
+
       - name: Run Playwright tests
         run: xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- yarn ${{ runner.debug && 'test:e2e:debug' || 'test:e2e' }} --project standalone
         working-directory: ./desktop
         env:
           PLAYWRIGHT_HTML_REPORT: ${{ github.workspace }}/desktop/playwright-report
           BADGER_LOGS_PATH: ${{ runner.temp }}/logs
+          ELECTRON: ${{ matrix.ELECTRON }}
 
       - uses: actions/upload-artifact@v3
-        if: always()
+        if: failure()
         with:
           name: playwright-report-desktop
           path: |
@@ -297,9 +305,10 @@ jobs:
         env:
           PLAYWRIGHT_HTML_REPORT: ${{ github.workspace }}/desktop/playwright-report
           BADGER_LOGS_PATH: ${{ runner.temp }}/logs
+          ELECTRON: "true"
 
       - uses: actions/upload-artifact@v3
-        if: always()
+        if: failure()
         with:
           name: playwright-report-desktop
           path: |

.mise-tasks/build/desktop

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+#MISE dir="{{config_root}}/desktop"
+#MISE sources=["{{config_root}}/desktop/src/**/*", "{{config_root}}/desktop/*.cjs", "{{config_root}}/desktop/*.mjs", "{{config_root}}/desktop/*.ts", "{{config_root}}/desktop/*.mts", "{{config_root}}/desktop/package.json"]
+#MISE outputs=["{{config_root}}/desktop/out/**/*"]
+rm -rf out
+node ../node_modules/.bin/electron-vite build

.mise-tasks/test/desktop/e2e/standalone

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+#MISE env={E2E_TEST = "true"}
+#MISE dir="{{config_root}}/desktop"
+#MISE depends="build:desktop"
+#USAGE flag "--headed" help="Run tests in headed mode"
+#USAGE flag "-d --debug-webserver" help="Run tests in debug mode"
+#USAGE flag "-e --electron" help="Run tests in Electron"
+playwright_args=()
+if [ -n "$usage_headed" ]; then
+  playwright_args+=("--headed")
+fi
+if [ -n "$usage_electron" ]; then
+  export ELECTRON=true
+fi
+if [ -n "$usage_debug" ]; then
+  export DEBUG='pw:api*,pw:browser*'
+fi
+export E2E_TEST=true
+npx playwright test --project standalone "${playwright_args[@]}"

Dangerfile.ts

@@ -1,6 +1,6 @@
 import { message, danger, fail, warn } from "danger";
 
-const issueKeyRe = /(BDGR-\d+)/g;
+const issueKeyRe = /(BA?DGE?R-\d+)/g;
 
 async function findAddedAndRemovedTodoIssues() {
   const removed = new Set<string>();
@@ -41,6 +41,12 @@ async function findAddedAndRemovedTodoIssues() {
       }
     }
   }
+  for (const rm of removed) {
+    if (added.has(rm)) {
+      removed.delete(rm);
+      added.delete(rm);
+    }
+  }
   return { removed, added, linesWithoutKey, fixmes };
 }
 
@@ -75,7 +81,11 @@ You can also include \`Closes ${Array.from(removed).join(
   }
   if (fixmes.size > 0) {
     fail(
-      `Found ${fixmes.size} FIXME comments. Please either remove them or convert them to TODOs (with an associated Linear ticket).`,
+      `Found ${fixmes.size} FIXME comments. Please either remove them or convert them to TODOs (with an associated Linear ticket): \n${Array.from(
+        fixmes,
+      )
+        .map((l) => " * `" + l + "`")
+        .join("\n")}`,
     );
   }
 };

desktop/.env

@@ -1,4 +1,5 @@
-DESKTOP_SENTRY_DSN=https://[email protected]/789x`
+DESKTOP_SENTRY_DSN=https://[email protected]/789x
 VITE_DESKTOP_SENTRY_DSN=$DESKTOP_SENTRY_DSN
 ENVIRONMENT=localhost
 VITE_ENVIRONMENT=$ENVIRONMENT
+BADGER_ENABLE_REDUX_DEVTOOLS=true

desktop/.gitignore

@@ -99,3 +99,6 @@ dist/
 
 # Bundle visualization
 bundle-*.html
+
+# Settings
+.dev/

desktop/e2e/standalone/base.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-empty-pattern */
 /* eslint-disable no-console */
 import {
   test as base,
@@ -17,71 +18,122 @@ const MICRO_SERVER_PORT = process.env.MICRO_SERVER_PORT
     : 8594;
 const MICRO_SERVER_PASSWORD = "microserver";
 
-const test = base.extend<{
+const ELECTRON = Boolean(process.env.TEST_USE_ELECTRON);
+
+let test = base.extend<{
   scenario: string;
   enabledIntegrations: ("obs" | "ontime" | "vmix")[];
   testMediaPath: string;
-  app: [ElectronApplication, Page];
 }>({
   scenario: "default",
   enabledIntegrations: ["obs", "ontime", "vmix"],
-  // eslint-disable-next-line no-empty-pattern
   testMediaPath: async ({}, use) => {
     const dir = await fsp.mkdtemp(
       join(tmpdir(), "badger-desktop-e2e-standalone"),
     );
     await use(dir);
     await fsp.rm(dir, { recursive: true });
   },
-
-  app: async ({ scenario, testMediaPath }, use, testInfo) => {
-    // Allow running tests on a built / installed app
-    const electronPath = process.env.TEST_APPLICATION_PATH;
-    const app = await electron.launch({
-      args: electronPath
-        ? ["--enable-logging"]
-        : ["--enable-logging", "out/main/index.js"],
-      executablePath: electronPath,
-      env: {
-        ...process.env,
-        NODE_ENV: "test",
-        E2E_TEST: "true",
-        __USE_MOCK_VMIX: "true",
-        __TEST_SETTINGS_MEDIA: `{ "mediaPath": ${JSON.stringify(testMediaPath)} }`,
-        __TEST_SUPPORTED_INTEGRATIONS: JSON.stringify([
-          "obs",
-          "ontime",
-          "vmix",
-        ]),
-      },
-    });
-
-    const win = await app.firstWindow();
-
-    await win.context().tracing.start({ screenshots: true, snapshots: true });
-
-    await win.waitForLoadState("domcontentloaded");
-
-    await win
-      .getByLabel("Server address")
-      .fill(`http://localhost:${MICRO_SERVER_PORT}/${scenario}`);
-    await win.getByLabel("Server Password").fill(MICRO_SERVER_PASSWORD);
-
-    await win.getByRole("button", { name: "Connect" }).click();
-
-    await expect(
-      win.getByRole("heading", { name: "Select a show" }),
-    ).toBeVisible();
-
-    await use([app, win]);
-
-    await win
-      .context()
-      .tracing.stop({ path: `traces/${testInfo.title}-${testInfo.retry}.zip` });
-
-    await win.close();
-    await app.close();
-  },
 });
 
+if (ELECTRON) {
+  test = test.extend<{ app: [ElectronApplication, Page]; page: Page }>({
+    app: async ({ scenario, testMediaPath }, use, testInfo) => {
+      // Allow running tests on a built / installed app
+      const electronPath = process.env.TEST_APPLICATION_PATH;
+      const app = await electron.launch({
+        args: electronPath
+          ? ["--enable-logging"]
+          : ["--enable-logging", "out/main/index.js"],
+        executablePath: electronPath,
+        env: {
+          ...process.env,
+          NODE_ENV: "test",
+          E2E_TEST: "true",
+          __USE_MOCK_VMIX: "true",
+          __TEST_SETTINGS_MEDIA: `{ "mediaPath": ${JSON.stringify(testMediaPath)} }`,
+          __TEST_SUPPORTED_INTEGRATIONS: JSON.stringify([
+            "obs",
+            "ontime",
+            "vmix",
+          ]),
+        },
+      });
+
+      const win = await app.firstWindow();
+
+      await win.context().tracing.start({ screenshots: true, snapshots: true });
+
+      await win.waitForLoadState("domcontentloaded");
+
+      await win
+        .getByLabel("Server address")
+        .fill(`http://localhost:${MICRO_SERVER_PORT}/${scenario}`);
+      await win.getByLabel("Server Password").fill(MICRO_SERVER_PASSWORD);
+
+      await win.getByRole("button", { name: "Connect" }).click();
+
+      await expect(
+        win.getByRole("heading", { name: "Select a show" }),
+      ).toBeVisible();
+
+      await use([app, win]);
+
+      await win.context().tracing.stop({
+        path: `traces/${testInfo.title}-${testInfo.retry}.zip`,
+      });
+
+      await win.close();
+      await app.close();
+    },
+    page: async ({ app }, use) => {
+      const [_, page] = app;
+      await use(page);
+    },
+  });
+} else {
+  test = test.extend<{ app: [ElectronApplication, Page]; page: Page }>({
+    app: async ({}, _use, testInfo) => {
+      testInfo.skip(true, "Not running in Electron");
+    },
+    page: async ({ browser, scenario, request, testMediaPath }, use) => {
+      await request.post("http://localhost:5174/reset", {
+        data: {
+          settings: {
+            media: {
+              mediaPath: testMediaPath,
+            },
+          },
+          integrations: {
+            supported: ["obs", "ontime", "vmix"],
+          },
+        },
+      });
+
+      const page = await browser.newPage({
+        baseURL: `http://localhost:5173`,
+        viewport: { width: 1280, height: 720 },
+        ignoreHTTPSErrors: true,
+      });
+      await page.goto("/");
+
+      await page.waitForLoadState("domcontentloaded");
+
+      await page
+        .getByLabel("Server address")
+        .fill(`http://localhost:${MICRO_SERVER_PORT}/${scenario}`);
+      await page.getByLabel("Server Password").fill(MICRO_SERVER_PASSWORD);
+
+      await page.getByRole("button", { name: "Connect" }).click();
+
+      await expect(
+        page.getByRole("heading", { name: "Select a show" }),
+      ).toBeVisible();
+
+      await use(page);
+      await page.close();
+    },
+  });
+}
+
 export { test, expect };

desktop/e2e/standalone/obs.spec.ts

@@ -1,9 +1,7 @@
 import MockOBSWebSocket from "@badger/testing/MockOBSWebSocket";
 import { test, expect } from "./base";
 
-test("download continuity media and load into OBS", async ({
-  app: [_, page],
-}) => {
+test("download continuity media and load into OBS", async ({ page }) => {
   const mows = await MockOBSWebSocket.create(expect, async (obs) => {
     obs.alwaysRespond("GetVersion", () => ({
       success: true,

desktop/e2e/standalone/standalone.spec.ts

@@ -1,24 +1,26 @@
 import { test, expect } from "./base";
 
-test("it works", async ({ app: [_, page] }) => {
+test("it works", async ({ page }) => {
   await page.getByText("Test show").click();
 });
 
 test.describe("big show", () => {
   test.use({ scenario: "big-show" });
-  test("scrolling for a show with lots of rundown items", async ({
-    app: [_, page],
-  }) => {
-    await page.getByRole("button", { name: "Select" }).click();
+  // TODO[BADGER-180]: Need new vmix mocks in place
+  test.fixme(
+    "scrolling for a show with lots of rundown items",
+    async ({ page }) => {
+      await page.getByRole("button", { name: "Select" }).click();
 
-    await page.getByText("Continuity").click();
-    await page.getByRole("menuitem", { name: "Test Rundown" }).click();
+      await page.getByText("Continuity").click();
+      await page.getByRole("menuitem", { name: "Test Rundown" }).click();
 
-    await page
-      .getByRole("cell", { name: "Test Item 40" })
-      .scrollIntoViewIfNeeded();
-    await expect(
-      page.getByRole("cell", { name: "Test Item 40" }),
-    ).toBeInViewport();
-  });
+      await page
+        .getByRole("cell", { name: "Test Item 40" })
+        .scrollIntoViewIfNeeded();
+      await expect(
+        page.getByRole("cell", { name: "Test Item 40" }),
+      ).toBeInViewport();
+    },
+  );
 });