fix

Author: bramkragten

.github/workflows/e2e.yaml

@@ -214,12 +214,18 @@ jobs:
           name: gallery-dist
           path: gallery/dist/
 
+      # Set up BrowserStack credentials
+      - name: Set up BrowserStack
+        uses: browserstack/github-actions@93aebce225b754566349151c0676b26b005e591b # v1.0.4
+        with:
+          username: ${{ secrets.BROWSERSTACK_USERNAME }}
+          access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+
       # Start BrowserStack Local tunnel so BrowserStack's cloud browsers can
-      # reach the tests running on localhost:5000.
+      # reach the tests running on localhost.
       - name: Start BrowserStack Local tunnel
-        uses: browserstack/github-actions@d6cb8baf7febe9aabf62ac7a9c449a03076f1289 # master
+        uses: browserstack/github-actions/setup-local@93aebce225b754566349151c0676b26b005e591b # v1.0.4
         with:
-          action: start
           local-testing: start
           local-identifier: ${{ env.BROWSERSTACK_LOCAL_IDENTIFIER }}
 
@@ -230,10 +236,10 @@ jobs:
           BROWSERSTACK_LOCAL_IDENTIFIER: ${{ env.BROWSERSTACK_LOCAL_IDENTIFIER }}
 
       - name: Stop BrowserStack Local tunnel
-        uses: browserstack/github-actions@d6cb8baf7febe9aabf62ac7a9c449a03076f1289 # master
+        uses: browserstack/github-actions/setup-local@93aebce225b754566349151c0676b26b005e591b # v1.0.4
         if: always()
         with:
-          action: stop
+          local-testing: stop
           local-identifier: ${{ env.BROWSERSTACK_LOCAL_IDENTIFIER }}
 
       - name: Upload blob report

package.json

@@ -21,9 +21,10 @@
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
     "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
-    "test:e2e": "yarn test:e2e:demo && yarn test:e2e:app && yarn test:e2e:gallery && node -e \"const {cpSync,mkdirSync,rmSync,readdirSync}=require('fs');const d='test/e2e/reports/blob';rmSync(d,{recursive:true,force:true});mkdirSync(d,{recursive:true});['demo','app','gallery'].forEach(s=>{readdirSync('test/e2e/reports/'+s).filter(f=>f.endsWith('.zip')).forEach(f=>cpSync('test/e2e/reports/'+s+'/'+f,d+'/'+s+'-'+f))})\" && npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob && yarn playwright show-report test/e2e/reports/combined",
-    "test:e2e:local": "yarn test:e2e:demo:local && yarn test:e2e:app:local && yarn test:e2e:gallery:local && node -e \"const {cpSync,mkdirSync,rmSync,readdirSync}=require('fs');const d='test/e2e/reports/blob';rmSync(d,{recursive:true,force:true});mkdirSync(d,{recursive:true});['demo','app','gallery'].forEach(s=>{readdirSync('test/e2e/reports/'+s).filter(f=>f.endsWith('.zip')).forEach(f=>cpSync('test/e2e/reports/'+s+'/'+f,d+'/'+s+'-'+f))})\" && npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob && yarn playwright show-report test/e2e/reports/combined",
-    "test:e2e:browserstack": "yarn test:e2e:demo:browserstack && yarn test:e2e:app:browserstack && yarn test:e2e:gallery:browserstack && node -e \"const {cpSync,mkdirSync,rmSync,readdirSync}=require('fs');const d='test/e2e/reports/blob';rmSync(d,{recursive:true,force:true});mkdirSync(d,{recursive:true});['demo','app','gallery'].forEach(s=>{readdirSync('test/e2e/reports/'+s).filter(f=>f.endsWith('.zip')).forEach(f=>cpSync('test/e2e/reports/'+s+'/'+f,d+'/'+s+'-'+f))})\" && npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob && yarn playwright show-report test/e2e/reports/combined",
+    "test:e2e": "yarn test:e2e:demo && yarn test:e2e:app && yarn test:e2e:gallery && node test/e2e/collect-blob-reports.mjs && npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob",
+    "test:e2e:local": "yarn test:e2e:demo:local && yarn test:e2e:app:local && yarn test:e2e:gallery:local && node test/e2e/collect-blob-reports.mjs && npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob",
+    "test:e2e:browserstack": "yarn test:e2e:demo:browserstack && yarn test:e2e:app:browserstack && yarn test:e2e:gallery:browserstack && node test/e2e/collect-blob-reports.mjs && npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob",
+    "test:e2e:show-report": "yarn playwright show-report test/e2e/reports/combined",
     "test:e2e:demo": "playwright test --config test/e2e/playwright.demo.config.ts",
     "test:e2e:demo:local": "playwright test --config test/e2e/playwright.demo.config.ts --project=local",
     "test:e2e:demo:browserstack": "BROWSERSTACK=true playwright test --config test/e2e/playwright.demo.config.ts --project=browserstack-*",

test/e2e/app.spec.ts

@@ -206,17 +206,14 @@ test.describe("Theming", () => {
   test("dark theme sets darkMode flag", async ({ page }) => {
     await goToPanel(page, "/?scenario=dark-theme");
 
-    // Verify the app initialized correctly in dark-theme scenario (no crash)
     await expect(page.locator("ha-test")).toBeAttached();
 
-    // The dark-theme scenario sets themes.darkMode=true; after the themes
-    // subscription fires it may be overridden by prefers-color-scheme, but
-    // we can verify updateHass was called by checking the element loaded.
-    const haTestLoaded = await page.evaluate(() => {
-      const el = document.querySelector("ha-test") as any;
-      return Boolean(el?.hass);
-    });
-    expect(haTestLoaded).toBe(true);
+    // The dark-theme scenario calls updateHass({ themes: { darkMode: true } });
+    // verify that flag is actually set on the mock hass object.
+    const darkMode = await page.evaluate(
+      () => (window.__mockHass as any)?.themes?.darkMode
+    );
+    expect(darkMode).toBe(true);
   });
 
   test("custom theme applies CSS variables", async ({ page }) => {

test/e2e/app/src/ha-test.ts

@@ -55,7 +55,13 @@ export class HaTest extends HomeAssistantAppEl {
     const initial: Partial<MockHomeAssistant> = {
       // Use the full panel map (history + config + developer-tools enabled)
       panels: e2eTestPanels,
-      panelUrl: (this as any)._panelUrl,
+      panelUrl: (() => {
+        const path = window.location.pathname;
+        const dividerPos = path.indexOf("/", 1);
+        return dividerPos === -1
+          ? path.substring(1)
+          : path.substring(1, dividerPos);
+      })(),
       updateHass: (hassUpdate: Partial<HomeAssistant>) =>
         this._updateHass(hassUpdate),
     };
@@ -120,7 +126,7 @@ export class HaTest extends HomeAssistantAppEl {
       { capture: true }
     );
 
-    (this as any).hassConnected();
+    this.hassConnected();
   }
 }
 

test/e2e/collect-blob-reports.mjs

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+// Collects blob reports from each suite into a single staging directory so
+// `playwright merge-reports` can consume them from one path.
+//
+// Usage: node test/e2e/collect-blob-reports.mjs
+
+import { cpSync, mkdirSync, readdirSync, rmSync } from "fs";
+
+const dest = "test/e2e/reports/blob";
+rmSync(dest, { recursive: true, force: true });
+mkdirSync(dest, { recursive: true });
+
+for (const suite of ["demo", "app", "gallery"]) {
+  const src = `test/e2e/reports/${suite}`;
+  for (const file of readdirSync(src).filter((f) => f.endsWith(".zip"))) {
+    cpSync(`${src}/${file}`, `${dest}/${suite}-${file}`);
+  }
+}

test/e2e/gallery.spec.ts

@@ -18,8 +18,11 @@ async function goToGalleryPage(page: Page, hash: string) {
   // First visit to let ha-gallery boot up
   await page.goto(`/#${hash}`);
   await page.waitForSelector("ha-gallery", { state: "attached" });
-  // Gallery uses dynamic imports; give it time to load the page component
-  await page.waitForTimeout(1500);
+  // Wait for the gallery to finish rendering the page content inside its shadow root
+  await page.waitForFunction(() => {
+    const gallery = document.querySelector("ha-gallery") as any;
+    return gallery?.shadowRoot?.querySelector("page-description") != null;
+  });
 }
 
 /** Assert a gallery page loads without console errors.

test/vitest.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "vitest/config";
+import { defineConfig, configDefaults } from "vitest/config";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   plugins: [tsconfigPaths()],
   test: {
-    exclude: ["test/e2e/**"],
+    exclude: [...configDefaults.exclude, "test/e2e/**"],
     environment: "jsdom", // to run in browser-like environment
     env: {
       TZ: "Etc/UTC",