refactor(select): improve types, update vite dep

fix(select): inline component fix!

refactor(select): naming and perf improvements

typo

simplified component testing

Co-authored-by: Jack Shelton <[email protected]>

fix(tests): add styles to new testing area

pw tests now run component-tests app

refactored tests to use driver methods and removed assertions from driver

test(headless/select): refactored dynamic users test

test(headless/select): fix flaky tests

test(headless/select): fixed flaky tests

test(headless/select): removed unnecessary timers

fix linting issues

Author: thejackshelton

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["ms-playwright.playwright"]
+  "recommendations": ["ms-playwright.playwright", "esbenp.prettier-vscode"]
 }

apps/component-tests/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended",
+    "../../.eslintrc.json"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": ["apps/component-tests/tsconfig.*?.json"],
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["@typescript-eslint"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/component-tests/.prettierignore

@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules

apps/component-tests/README.md

@@ -0,0 +1,65 @@
+# Qwik City App ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+
+---
+
+## Project Structure
+
+This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
+
+Inside your project, you'll see the following directory structure:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── routes/
+        └── ...
+```
+
+- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
+
+- `src/components`: Recommended directory for components.
+
+- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
+
+## Add Integrations and deployment
+
+Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
+
+```shell
+pnpm qwik add # or `yarn qwik add`
+```
+
+## Development
+
+Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
+
+```shell
+npm start # or `yarn start`
+```
+
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
+
+## Preview
+
+The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
+
+```shell
+pnpm preview # or `yarn preview`
+```
+
+## Production
+
+The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
+
+```shell
+pnpm build # or `yarn build`
+```

apps/component-tests/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "componentTests"
+}

apps/component-tests/postcss.config.cjs

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': 'postcss-nested',
+    tailwindcss: {
+      config: path.join(__dirname, 'tailwind.config.cjs'),
+    },
+    autoprefixer: {},
+  },
+};

apps/component-tests/project.json

@@ -0,0 +1,68 @@
+{
+  "name": "component-tests",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/component-tests/src",
+  "targets": {
+    "build": {
+      "executor": "qwik-nx:build",
+      "options": {
+        "runSequence": ["component-tests:build.client", "component-tests:build.ssr"],
+        "outputPath": "dist/apps/component-tests"
+      },
+      "configurations": {
+        "preview": {}
+      }
+    },
+    "build.client": {
+      "executor": "@nx/vite:build",
+      "options": {
+        "outputPath": "dist/apps/component-tests",
+        "configFile": "apps/component-tests/vite.config.ts"
+      }
+    },
+    "build.ssr": {
+      "executor": "@nx/vite:build",
+      "defaultConfiguration": "preview",
+      "options": {
+        "outputPath": "dist/apps/component-tests"
+      },
+      "configurations": {
+        "preview": {
+          "ssr": "src/entry.preview.tsx",
+          "mode": "production"
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "options": {
+        "buildTarget": "component-tests:build",
+        "port": 4173
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "options": {
+        "buildTarget": "component-tests:build.client",
+        "mode": "ssr",
+        "port": 5173
+      }
+    },
+    "serve.debug": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "node --inspect-brk ../../node_modules/vite/bin/vite.js --mode ssr --force",
+        "cwd": "apps/component-tests"
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/component-tests/**/*.{ts,tsx,js,jsx}"]
+      }
+    }
+  },
+  "tags": []
+}

apps/component-tests/public/favicon.svg

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "qwik-project-name",
+  "short_name": "Welcome to Qwik",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A Qwik project app."
+}