[6.x] Replace Combobox JS tests with Browser tests

.gitignore

@@ -11,6 +11,7 @@ resources/dist
 resources/dist-dev
 resources/dist-frontend
 resources/dist-package
+resources/js/tests/browser/__screenshots__
 packages/cms/src/ui.css
 composer.lock
 .env

.storybook/main.ts

@@ -7,7 +7,8 @@ const config: StorybookConfig = {
     ],
     addons: [
         '@storybook/addon-docs',
-        '@storybook/addon-a11y'
+        '@storybook/addon-a11y',
+        '@storybook/addon-vitest'
     ],
     staticDirs: ['./public'],
     framework: {

package.json

@@ -100,6 +100,7 @@
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.2",
     "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-vitest": "^10.1.10",
     "@storybook/vue3-vite": "^10.1.2",
     "@tailwindcss/vite": "^4.1.8",
     "@vitejs/plugin-vue": "^6.0.0",

resources/js/components/ui/Combobox/Combobox.vue

@@ -423,7 +423,7 @@ defineExpose({
                             @mount-auto-focus.prevent
                             @unmount-auto-focus="(event) => {
                                 if (event.defaultPrevented) return;
-                                $refs.trigger.$el.focus();
+                                $refs.trigger?.$el?.focus();
                                 event.preventDefault();
                             }"
                         >

resources/js/tests/browser/setup.js

@@ -0,0 +1,66 @@
+import '../setup.js';
+
+import { config as browserConfig } from 'vitest-browser-vue';
+
+import '../../../css/app.css';
+import '../../../css/ui.css';
+
+browserConfig.global.mocks = {
+    __: (key) => key,
+};
+
+browserConfig.global.directives = {
+    tooltip: () => {},
+};
+
+if (typeof window !== 'undefined') {
+    window.__ = (key) => key;
+}
+
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = `
+        :root {
+            /* Basic theme colors */
+            --theme-color-primary: #3b82f6;
+            --theme-color-success: #10b981;
+            --theme-color-gray-50: #f9fafb;
+            --theme-color-gray-100: #f3f4f6;
+            --theme-color-gray-150: #e8ebef;
+            --theme-color-gray-200: #e5e7eb;
+            --theme-color-gray-300: #d1d5db;
+            --theme-color-gray-400: #9ca3af;
+            --theme-color-gray-500: #6b7280;
+            --theme-color-gray-600: #4b5563;
+            --theme-color-gray-700: #374151;
+            --theme-color-gray-800: #1f2937;
+            --theme-color-gray-850: #1a202c;
+            --theme-color-gray-900: #111827;
+            --theme-color-gray-925: #0d1117;
+
+            /* UI specific colors */
+            --theme-color-body-bg: #ffffff;
+            --theme-color-body-border: #e5e7eb;
+            --theme-color-content-border: #e5e7eb;
+            --theme-color-focus-outline: #3b82f6;
+
+            /* Z-index values */
+            --z-index-above: 10;
+            --z-index-portal: 1000;
+            --z-index-modal: 1050;
+        }
+
+        /* Ensure body has a white background */
+        body {
+            background-color: white;
+            color: #111827;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        /* Basic button/input styling for visibility */
+        button, input, select {
+            font-family: inherit;
+        }
+    `;
+    document.head.appendChild(style);
+}