chore(web-components): Add playwright testing for v3 web components (m…

…icrosoft#28142)

* setup playwright testing

* fix deps and update readme

* add playwright to ensure browsers and deps are installed

* test npx command playwright

* add pretest hook to test

* add dev specific testing command so we can run ci pretest

* point to the right directory chris...

.prettierignore

@@ -35,8 +35,6 @@ packages/fluentui/docs/src/behaviorMenu.json
 packages/fluentui/docs/src/exampleMenus
 packages/fluentui/docs/src/exampleSources
 packages/fluentui/ability-attributes/src/schema.ts
-packages/web-components/**/*.spec.ts
-packages/web-components/src/default-palette.ts
 
 # template files which actually follow a different language's formatting
 *.hbs

change/@fluentui-web-components-320e7f04-b281-4749-8342-2bc7d1d65e95.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "add playwright testing to the web component package",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "none"
+}

package.json

@@ -103,6 +103,7 @@
     "@nx/workspace": "17.3.2",
     "@octokit/rest": "18.12.0",
     "@phenomnomnominal/tsquery": "6.1.3",
+    "@playwright/test": "1.43.1",
     "@storybook/addon-a11y": "6.5.15",
     "@storybook/addon-actions": "6.5.15",
     "@storybook/addon-docs": "6.5.15",

packages/web-components/README.md

@@ -55,3 +55,7 @@ Storybook will watch modules for changes and hot-reload the module when necessar
 `Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
 
 This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.
+
+## Testing
+
+When testing locally, start the dev server and in a separate terminal window, run `yarn test:dev` within the web-components folder.

packages/web-components/package.json

@@ -176,43 +176,13 @@
     "start": "yarn start-storybook -p 6006 --docs --no-manager-cache",
     "start-storybook": "node node_modules/@storybook/html/bin/index",
     "build-storybook": "node node_modules/@storybook/html/bin/build -o ./dist/storybook --docs",
-    "test": "yarn test-chrome:verbose",
-    "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
-    "test-chrome:verbose": "karma start karma.conf.cjs --no-fail-on-empty-test-suite --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
-    "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
-    "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha ",
-    "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
-    "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+    "pretest": "yarn build-storybook --quiet",
+    "test": "npx playwright test",
+    "test:dev": "playwright test"
   },
   "devDependencies": {
-    "@storybook/html": "6.5.15",
-    "@types/chai": "4.3.3",
-    "@types/chai-spies": "1.0.3",
-    "@types/karma": "6.3.3",
-    "@types/mocha": "7.0.2",
-    "chai": "4.3.6",
-    "chai-spies": "1.0.0",
-    "esm": "3.2.25",
-    "ignore-loader": "0.1.2",
-    "istanbul": "0.4.5",
-    "istanbul-instrumenter-loader": "3.0.1",
-    "jsdom-global": "3.0.2",
-    "karma": "6.4.0",
-    "karma-chrome-launcher": "3.1.1",
-    "karma-coverage": "2.2.0",
-    "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-firefox-launcher": "^1.3.0",
-    "karma-mocha": "2.0.1",
-    "karma-mocha-reporter": "2.2.5",
-    "karma-source-map-support": "1.4.0",
-    "karma-sourcemap-loader": "0.3.8",
-    "karma-webpack": "5.0.0",
-    "mocha": "7.2.0",
     "@microsoft/api-extractor": "7.31.2",
+    "@storybook/html": "6.5.15",
     "rimraf": "^3.0.2",
     "typescript": "4.7.4"
   },

packages/web-components/playwright.config.ts

@@ -0,0 +1,25 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  projects: [{ name: 'chromium' }, { name: 'firefox' }, { name: 'webkit' }],
+  reporter: 'list',
+  testMatch: /.*\.spec\.ts$/,
+  retries: 3,
+  fullyParallel: process.env.CI ? false : true,
+  timeout: process.env.CI ? 10000 : 30000,
+  use: {
+    baseURL: 'http://localhost:6006/iframe.html',
+    viewport: {
+      height: 1280,
+      width: 720,
+    },
+  },
+  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,
+  },
+};
+
+export default config;

packages/web-components/src/helpers.tests.ts

@@ -0,0 +1,31 @@
+import qs from 'qs';
+
+/**
+ * Returns a formatted URL for a given Storybook fixture.
+ *
+ * @param id - the Storybook fixture ID
+ * @param args - Story args
+ * @returns - the local URL for the Storybook fixture iframe
+ */
+export function fixtureURL(id: string = 'debug--blank', args?: Record<string, any>): string {
+  const params: Record<string, any> = { id };
+  if (args) {
+    params.args = qs
+      .stringify(args, {
+        allowDots: true,
+        delimiter: ';',
+        format: 'RFC1738',
+        encode: false,
+      })
+      .replace(/=/g, ':')
+      .replace(/\//g, '--');
+  }
+
+  const url = qs.stringify(params, {
+    addQueryPrefix: true,
+    format: 'RFC1738',
+    encode: false,
+  });
+
+  return url;
+}