fix: get all popover tests running with polyfill

Author: cwoolum

.changeset/twenty-spoons-fail.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+Chromium 109-113 did not properly support the popover but reported that they did. This led to the polyfill not activating which caused our E2E tests to break. We are dropping down to Chromium 108 to validate the polyfill as users of Chrome would see it before the popover API was supported.

package.json

@@ -33,7 +33,7 @@
     "test.headless": "nx component-test headless --skip-nx-cache",
     "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
-    "test.pw.headless-chrome-113": "nx e2e-chrome-113 headless",
+    "test.pw.headless-chrome-108": "nx e2e-chrome-108 headless",
     "test.pw.headless.ci": "nx e2e headless",
     "test.headless.ci": "nx component-test-ci headless",
     "test.utils": "nx test utils"

packages/kit-headless/package.json

@@ -16,7 +16,7 @@
   "types": "./index.d.ts",
   "type": "module",
   "scripts": {
-    "setup.chrome.113": "npx tsx ./scripts/prepare-chrome-113.ts"
+    "setup.chrome.108": "npx tsx ./scripts/prepare-chrome-browser.ts"
   },
   "exports": {
     ".": {

packages/kit-headless/playwright.config.ts

@@ -18,16 +18,16 @@ let binaryPath;
 switch (currentPlatform) {
   case 'darwin':
     binaryPath =
-      './browsers/chrome/113/chrome-darwin/Chromium.app/Contents/MacOS/Chromium';
+      './browsers/chrome/108/chrome-darwin/Chromium.app/Contents/MacOS/Chromium';
     break;
   case 'win32':
-    binaryPath = './browsers/chrome/113/chrome-win32/chrome.exe';
+    binaryPath = './browsers/chrome/108/chrome-win32/chrome.exe';
     break;
   case 'linux':
-    binaryPath = './browsers/chrome/113/chrome-linux/chrome';
+    binaryPath = './browsers/chrome/108/chrome-linux/chrome';
     break;
   default:
-    throw new Error('Cannot install Chrome 13 on unknown platform');
+    throw new Error('Cannot install Chrome 108 on unknown platform');
 }
 
 /**
@@ -65,7 +65,7 @@ export default defineConfig({
     },
 
     {
-      name: 'popover-chrome-113',
+      name: 'popover-chrome-108',
       use: {
         launchOptions: {
           executablePath: path.resolve(dirName, binaryPath),

packages/kit-headless/project.json

@@ -55,19 +55,19 @@
         "project": ["logic"]
       }
     },
-    "setup-chrome-113": {
+    "setup-chrome-108": {
       "executor": "nx:run-script",
       "options": {
-        "script": "setup.chrome.113"
+        "script": "setup.chrome.108"
       }
     },
-    "e2e-chrome-113": {
+    "e2e-chrome-108": {
       "executor": "@nx/playwright:playwright",
       "outputs": ["{workspaceRoot}/dist/.playwright/packages/kit-headless"],
-      "dependsOn": ["setup-chrome-113"],
+      "dependsOn": ["setup-chrome-108"],
       "options": {
         "config": "packages/kit-headless/playwright.config.ts",
-        "project": ["popover-chrome-113"]
+        "project": ["popover-chrome-108"]
       }
     },
     "visual-test": {

packages/kit-headless/scripts/prepare-chrome-113.ts renamed to packages/kit-headless/scripts/prepare-chrome-browser.ts

@@ -12,16 +12,16 @@ function printProgress(progress: number) {
 }
 
 async function prepareChrome113() {
-  const path = `browsers/chrome/113/chrome-${os.platform()}`;
+  const path = `browsers/chrome/108/chrome-${os.platform()}`;
 
   if (fs.existsSync(path)) {
-    console.log('Chrome 113 already exists. Skipping unzip ⏩');
+    console.log('Chrome 108 already exists. Skipping unzip ⏩');
   } else {
     console.log('Creating directory to save the browser 🌐');
     fs.mkdirSync(path, { recursive: true });
 
     const downloadResponse = await fetch(
-      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/113/chrome-${os.platform()}.zip`,
+      `https://github.com/qwikifiers/qwik-ui-polyfill-browsers/raw/main/chrome/108/chrome-${os.platform()}.zip`,
     );
 
     const contentLength = downloadResponse.headers.get('content-length');
@@ -33,7 +33,7 @@ async function prepareChrome113() {
         async start(controller) {
           if (!downloadResponse.body) {
             throw new Error(
-              'Invalid response received when trying to download Chrome 113',
+              'Invalid response received when trying to download Chrome 108',
             );
           }
 
@@ -53,7 +53,7 @@ async function prepareChrome113() {
 
     await decompress(
       Buffer.from(await res.arrayBuffer()),
-      `browsers/chrome/113/chrome-${os.platform()}`,
+      `browsers/chrome/108/chrome-${os.platform()}`,
       { strip: 1 },
     );
   }

packages/kit-headless/src/components/combobox/combobox.test.ts-snapshots/closed-combobox-visual-win32.png

@@ -23,7 +23,10 @@ export const HPopoverTrigger = component$<PopoverTriggerProps>(
     } = usePopover(context.compId);
 
     const handleClick$ = $(async () => {
-      if (context.hover) return;
+      if (context.hover && !isSupportedSig.value) {
+        await showPopover();
+        return;
+      }
 
       if (isSupportedSig.value) return;