chore(web-components): Use Playwright fixture for tests (#33023)

Author: radium-v

change/@fluentui-web-components-ec172ca8-23f3-4d01-a969-6504fa67a87a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Allow field states to be set regardless of connection status",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -84,6 +84,7 @@
     "@nx/plugin": "19.8.4",
     "@nx/workspace": "19.8.4",
     "@octokit/rest": "18.12.0",
+    "@oddbird/css-anchor-positioning": "0.4.0",
     "@phenomnomnominal/tsquery": "6.1.3",
     "@playwright/test": "1.49.1",
     "@react-native/babel-preset": "0.73.21",
@@ -224,7 +225,7 @@
     "enquirer": "2.3.6",
     "enzyme": "3.10.0",
     "enzyme-to-json": "3.6.2",
-    "esbuild": "0.20.1",
+    "esbuild": "0.24.2",
     "esbuild-loader": "4.1.0",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "18.2.1",
@@ -342,6 +343,7 @@
     "tslib": "2.6.3",
     "typescript": "5.3.3",
     "vinyl": "2.2.0",
+    "vite": "6.0.7",
     "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
@@ -374,7 +376,7 @@
   },
   "resolutions": {
     "@types/jest-axe/axe-core": "4.7.2",
-    "esbuild": "0.20.1",
+    "esbuild": "0.24.2",
     "eslint": "8.57.0",
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",

packages/web-components/.eslintrc.json

@@ -35,6 +35,7 @@
       }
     ],
     "comma-dangle": "off",
+    "prefer-const": ["error", { "destructuring": "all" }],
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-use-before-define": "off",
     "@typescript-eslint/no-empty-interface": "error",

packages/web-components/README.md

@@ -89,4 +89,6 @@ This is a known issue and will indicate that you need to refresh the page. We're
 
 ## Testing
 
-When testing locally, start the dev server and in a separate terminal window, run `yarn test:dev` within the web-components folder.
+On CI, a static test harness build is first generated by running Vite in build mode. The Playwright tests are then run against the generated harness. To run Playwright tests in this mode, use the command `yarn nx run web-components:e2e`.
+
+To run Playwright tests locally in [UI mode](https://playwright.dev/docs/test-ui-mode), use the command `yarn nx run web-components:e2e:local`. This will start a local development server with Vite and open the Playwright test runner UI.

packages/web-components/docs/api-report.md

@@ -4060,6 +4060,8 @@ export class Tooltip extends FASTElement {
     mouseleaveAnchorHandler: () => void;
     positioning?: TooltipPositioningOption;
     // @internal
+    positioningChanged(): void;
+    // @internal
     showTooltip(delay?: number): void;
 }
 

packages/web-components/package.json

@@ -65,6 +65,8 @@
     "./package.json": "./package.json"
   },
   "sideEffects": [
+    "define.*",
+    "index-rollup.*",
     "./dist/esm/**/define.js",
     "./dist/web-components.js",
     "./dist/web-components.min.js"
@@ -86,8 +88,8 @@
     "start": "yarn start-storybook -p 6006 --docs",
     "start-storybook": "storybook dev",
     "build-storybook": "storybook build -o ./dist/storybook --docs",
-    "e2e": "playwright test",
-    "test:dev": "playwright test"
+    "e2e": "node ./scripts/e2e.js",
+    "e2e:local": "node ./scripts/e2e.js --ui"
   },
   "devDependencies": {
     "@microsoft/fast-element": "2.0.0",

packages/web-components/playwright.config.ts

@@ -7,34 +7,26 @@ const config: PlaywrightTestConfig = {
   fullyParallel: process.env.CI ? false : true,
   timeout: process.env.CI ? 10000 : 30000,
   use: {
-    baseURL: 'http://localhost:6006/iframe.html',
-    viewport: {
-      height: 720,
-      width: 1280,
-    },
+    baseURL: 'http://localhost:5173',
   },
   projects: [
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
-      testMatch: /.*\.spec\.ts$/,
     },
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
-      testMatch: [/set-theme\.spec\.ts$/],
     },
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
-      testMatch: [/set-theme\.spec\.ts$/],
     },
   ],
   webServer: {
-    // double-quotes are required for Windows
-    command: `node -e "import('express').then(({ default: e }) => e().use(e.static('./dist/storybook')).listen(6006))"`,
-    port: 6006,
-    reuseExistingServer: process.env.CI ? false : true,
+    command: 'yarn vite preview test/harness',
+    port: 5173,
+    reuseExistingServer: true,
   },
 };
 

packages/web-components/project.json

@@ -3,8 +3,5 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "implicitDependencies": [],
-  "tags": ["platform:web", "web-components"],
-  "targets": {
-    "e2e": { "dependsOn": ["build-storybook"] }
-  }
+  "tags": ["platform:web", "web-components"]
 }

packages/web-components/scripts/e2e.js

@@ -0,0 +1,38 @@
+/* eslint-env node */
+import { execSync, spawn } from 'node:child_process';
+
+const uiMode = process.argv.includes('--ui');
+
+try {
+  // UI Mode runs Vite in development mode and Playwright in UI mode, in parallel
+  if (uiMode) {
+    const vite = spawn('vite', ['serve', 'test/harness'], { stdio: 'inherit' });
+    const playwright = spawn('playwright', ['test', '--ui'], { stdio: 'inherit' });
+
+    // Forward the exit codes if the child processes exit
+    vite.on('exit', code => process.exit(code));
+    playwright.on('exit', code => process.exit(code));
+
+    // Close the processes when the parent process exits
+    process.on('exit', () => {
+      vite.kill();
+      playwright.kill();
+      process.exit(0);
+    });
+
+    // Run both processes in parallel
+    Promise.all([vite, playwright]);
+  }
+
+  // E2E Mode first builds the test harness with Vite and then runs the tests with Playwright
+  if (!uiMode) {
+    // Build the test harness
+    execSync(`vite build test/harness`, { stdio: 'inherit' });
+
+    // Run the tests
+    execSync(`playwright test`, { stdio: 'inherit' });
+  }
+} catch (err) {
+  console.error(err);
+  process.exit(1);
+}