added playwright

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

Author: shairez

.env

@@ -0,0 +1,39 @@
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false
+
+# Nx 18 enables using plugins to infer targets by default
+# This is disabled for existing workspaces to maintain compatibility
+# For more info, see: https://nx.dev/concepts/inferred-tasks
+NX_ADD_PLUGINS=false

apps/website-e2e/project.json

@@ -19,10 +19,7 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["apps/website-e2e/**/*.{js,ts}"]
-      }
+      "outputs": ["{options.outputFile}"]
     }
   },
   "tags": [],

apps/website/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": [
+    "plugin:playwright/recommended",
     "../../.eslintrc.json",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -28,6 +29,10 @@
     {
       "files": ["*.js", "*.jsx"],
       "rules": {}
+    },
+    {
+      "files": ["e2e/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
     }
   ]
 }

apps/website/adapters/cloudflare-pages/vite.config.ts

@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect h1 to contain a substring.
+  expect(await page.locator('h1').innerText()).toContain('Qwik UI');
+});

apps/website/e2e/example.spec.ts

@@ -0,0 +1,70 @@
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig, devices } from '@playwright/test';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:5173';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './e2e' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+    // timeout: 120000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});

apps/website/playwright.config.ts

@@ -1,36 +1,38 @@
-import { cn } from '@qwik-ui/utils';
 import { PropsOf, component$, useSignal } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/fluffy';
+import { cn } from '@qwik-ui/utils';
 import copy from 'clipboard-copy';
 
 export type CodeCopyProps = PropsOf<typeof Button> & {
   code?: string;
 };
 
-export const CodeCopy = component$(({ code = '', class: outsideClass, ...props }) => {
-  const copied = useSignal(false);
+export const CodeCopy = component$<CodeCopyProps>(
+  ({ code = '', class: outsideClass, ...props }) => {
+    const copied = useSignal(false);
 
-  return (
-    <Button
-      look="ghost"
-      intent="basic"
-      animation={!copied.value ? 'bouncy' : 'none'}
-      {...props}
-      title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
-      class={cn(outsideClass)}
-      onClick$={async () => {
-        await copy(code);
-        copied.value = true;
+    return (
+      <Button
+        look="ghost"
+        intent="basic"
+        animation={!copied.value ? 'bouncy' : 'none'}
+        {...props}
+        title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
+        class={cn(outsideClass)}
+        onClick$={async () => {
+          await copy(code);
+          copied.value = true;
 
-        setTimeout(() => {
-          copied.value = false;
-        }, 4000);
-      }}
-    >
-      {!copied.value ? <CopyIcon /> : <ClipboardCheck />}
-    </Button>
-  );
-});
+          setTimeout(() => {
+            copied.value = false;
+          }, 4000);
+        }}
+      >
+        {!copied.value ? <CopyIcon /> : <ClipboardCheck />}
+      </Button>
+    );
+  },
+);
 
 export function CopyIcon(props: PropsOf<'svg'>, key: string) {
   return (

apps/website/src/components/code-copy/code-copy.tsx

@@ -1,6 +1,8 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, type PropsOf } from '@builder.io/qwik';
 
-export default component$((props) => {
+export type AstroLogoProps = PropsOf<'svg'>;
+
+export default component$<AstroLogoProps>((props) => {
   return (
     <svg {...props} viewBox="0 0 57 72" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

apps/website/src/components/icons/AstroLogo.tsx

@@ -1,6 +1,8 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, type PropsOf } from '@builder.io/qwik';
 
-export default component$((props) => {
+export type QwikLogoProps = PropsOf<'svg'>;
+
+export default component$<QwikLogoProps>((props) => {
   return (
     <svg viewBox="0 0 500 506" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path

apps/website/src/components/icons/QwikLogo.tsx

@@ -10,6 +10,14 @@ export default defineConfig(async () => {
   const { visit } = await import('unist-util-visit');
 
   return {
+    root: __dirname,
+    build: {
+      outDir: '../../dist/apps/website',
+      reportCompressedSize: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+    },
     plugins: [
       qwikNxVite(),
       qwikCity({
@@ -101,13 +109,5 @@ export default defineConfig(async () => {
         'Cache-Control': 'public, max-age=600',
       },
     },
-    test: {
-      globals: true,
-      cache: {
-        dir: '../../node_modules/.vitest',
-      },
-      environment: 'node',
-      include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    },
   };
 });