Use Playwright with Storybook for component tests in fast-foundation (#…

…6189)

* add playwright and remove karma from fast-foundation

* make ElementsFilter type arguments optional

* convert utilities tests to playwright

- Simplify whitespaceFilter and getDirection functions
- Add getDirection tests

* convert accordion tests to playwright

* convert accordion-item tests to playwright

* convert anchor tests to playwright

* convert anchored-region tests to playwright

* add slottedBreadcrumbItemFilter

- Add prev and next to slottedBreadcrumbItemsChanged method
- Add isBreadcrumbItem filter function

* convert breadcrumb tests to playwright

* convert breadcrumb-item tests to playwright

* mark formnovalidate as boolean attribute in button template

* convert breadcrumb-item tests to playwright

* convert button tests to playwright

* clean up extra spacing in checkbox template

* convert checkbox tests to playwright

* reset combobox value if no first selected option

* convert combobox tests to playwright

* allow cell templates to be SyntheticViewTemplate or string

* use lookup for data-grid-cell template role and class

* convert data-grid tests to playwright

* convert data-grid-row tests to playwright

* convert data-grid-cell tests to playwright

* convert dialog tests to playwright

* convert disclosure tests to playwright

* convert divider tests to playwright

* convert flipper tests to playwright

* convert horizontal-scroll tests to playwright

* convert listbox-option tests to playwright

* convert listbox tests to playwright

* menu should not navigate to hidden items when set after connection

* convert menu tests to playwright

* convert menu-item tests to playwright

* convert number-field tests to playwright

* convert progress tests to playwright

* convert progress-ring tests to playwright

* convert radiogroup tests to playwright

* convert radio tests to playwright

* convert search tests to playwright

* convert select tests to playwright

* ensure slider value is within min and max limits

* convert slider tests to playwright

* convert slider-label tests to playwright

* use whitespaceFilter with switch template

* convert switch tests to playwright

* convert tab tests to playwright

* convert tab-panel tests to playwright

* convert tabs tests to playwright

* convert text-area tests to playwright

* convert text-field tests to playwright

* convert toolbar tests to playwright

* convert tooltip tests to playwright

* add ARIA attributes to tree-item

* convert tree-item tests to playwright

* convert tree-view tests to playwright

* update api-report.md

* update lockfile

* Change files

* wip

* update playwright

* update api-report.md

* update imports

* menu tests

* tooltip tests

* text-area tests

* progress tests

* horizontal-scroll tests

* toolbar tests

* make dialog tests syncronous

* finish converting all tests to be synchronous

* remove attribute enumeration

* remove positioningRegion from radio-group

* fix flaky tree-item test

* ensure aria-expanded is only set when the tree-item has children

* simplify rewritten combobox form reset fix

* revert breadcrumb and breadcrumb item changes

* revert checkbox template changes

* use regex for toHaveClass assertions

* revert unrelated number-field changes

* remove unused import from radio-group template

* revert unrelated search template changes

* revert unrelated switch template changes

* revert unrelated text-area template changes

* revert unrelated text-field class and template changes

* revert unrelated tree-item and tree-view changes

* make tree-view tests synchronous

* revert unrelated radio-group changes

* revert unrelated search template changes

* revert unrelated text-field template changes

* update api-report and READMEs

* revert unrelated combobox changes

* revert unrelated data-grid-row template changes

* revert unrelated menu-item template changes

.eslintignore

@@ -1,5 +1,6 @@
 # Never lint test files
 *.spec.ts
+!*.pw.spec.ts
 
 # Never lint node_modules
 node_modules

.prettierignore

@@ -1,4 +1,5 @@
 *.spec.ts
+!*.pw.spec.ts
 *.spec.tsx
 **/__tests__
 **/__test__

change/@microsoft-fast-element-46232efd-035f-48e7-8524-a2385961aaf0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "make ElementsFilter type arguments optional",
+  "packageName": "@microsoft/fast-element",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-foundation-99df5d5a-e466-4042-b4b7-56b6ebd958b7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Convert karma and mocha tests to playwright",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-ssr-07e30dc1-38a0-46ba-952a-3c6931a1a6ba.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update playwright",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

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

@@ -271,7 +271,7 @@ export class ElementController<TElement extends HTMLElement = HTMLElement> exten
 export const elements: (selector?: string) => ElementsFilter;
 
 // @public
-export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
+export type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
 
 // @public
 export class ElementStyles {

packages/web-components/fast-element/src/templating/node-observation.ts

@@ -26,7 +26,7 @@ export interface NodeBehaviorOptions<T = any> {
  *
  * @public
  */
-export type ElementsFilter = (value: Node, index: number, array: Node[]) => boolean;
+export type ElementsFilter = (value: Node, index?: number, array?: Node[]) => boolean;
 
 const selectElements = (value: Node): boolean => value.nodeType === 1;
 

packages/web-components/fast-foundation/.eslintignore

@@ -1,10 +1,5 @@
-# don't ever lint node_modules
-node_modules
-# don't lint build output (make sure it's set to your correct build folder name)
-dist
-# don't lint coverage output
 coverage
-# don't lint tests
-*.spec.*
-#
-karma.conf.cjs
+dist
+node_modules
+*.spec.ts
+!*.pw.spec.ts

packages/web-components/fast-foundation/.eslintrc.json

@@ -30,7 +30,7 @@
                 "no-restricted-imports": [
                     "error",
                     {
-                        "patterns": ["**/stories/**"]
+                        "patterns": ["**/stories/**", "**/*.pw.spec.ts"]
                     }
                 ]
             }

packages/web-components/fast-foundation/.storybook/main.cjs

@@ -10,9 +10,19 @@ module.exports = {
     },
     core: {
         disableTelemetry: true,
-        builder: "webpack5",
+        builder: {
+            name: "webpack5",
+            options: {
+                lazyCompilation: true,
+                fsCache: true,
+            },
+        },
     },
     webpackFinal: async config => {
+        config.performance = {
+            ...(config.performance ?? {}),
+            hints: false,
+        };
         config.module.rules = [
             {
                 test: /\.ts$/,
@@ -23,10 +33,18 @@ module.exports = {
                     transpileOnly: true,
                 },
             },
+            {
+                test: /\.m?js$/,
+                enforce: "pre",
+                loader: require.resolve("source-map-loader"),
+                resolve: {
+                    fullySpecified: false,
+                },
+            },
         ];
 
         config.resolve.plugins = [
-            ...(config.resolve.plugins || []),
+            ...(config.resolve.plugins ?? []),
             new ResolveTypescriptPlugin({
                 includeNodeModules: true,
             }),

packages/web-components/fast-foundation/.storybook/preview.js

@@ -1,3 +1,5 @@
+import { useArgs } from "@storybook/client-api";
+
 import "@microsoft/fast-element/polyfills";
 import "../src/anchor/stories/anchor.register.js";
 import "../src/anchored-region/stories/anchored-region.register.js";
@@ -56,3 +58,10 @@ import "../src/menu/stories/menu.register.js";
 
 import "../src/tree-item/stories/tree-item.register.js";
 import "../src/tree-view/stories/tree-view.register.js";
+
+export const decorators = [
+    (Story, context) => {
+        const [_, updateArgs] = useArgs();
+        return Story({ ...context, updateArgs });
+    },
+];

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

@@ -8,8 +8,9 @@ import type { CaptureType } from '@microsoft/fast-element';
 import { composedContains } from '@microsoft/fast-element/utilities';
 import { composedParent } from '@microsoft/fast-element/utilities';
 import { Constructable } from '@microsoft/fast-element';
-import { CSSDirective } from '@microsoft/fast-element';
+import type { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
+import type { ElementsFilter } from '@microsoft/fast-element';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
@@ -269,12 +270,12 @@ export function checkboxTemplate<T extends FASTCheckbox>(options?: CheckboxOptio
 export interface ColumnDefinition {
     cellFocusTargetCallback?: (cell: FASTDataGridCell) => HTMLElement;
     cellInternalFocusQueue?: boolean;
-    cellTemplate?: ViewTemplate;
+    cellTemplate?: ViewTemplate | SyntheticViewTemplate | string;
     columnDataKey: string;
     gridColumn?: string;
     headerCellFocusTargetCallback?: (cell: FASTDataGridCell) => HTMLElement;
     headerCellInternalFocusQueue?: boolean;
-    headerCellTemplate?: ViewTemplate;
+    headerCellTemplate?: ViewTemplate | SyntheticViewTemplate | string;
     isRowHeader?: boolean;
     title?: string;
 }
@@ -513,6 +514,20 @@ export class DelegatesARIAToolbar {
 export interface DelegatesARIAToolbar extends ARIAGlobalStatesAndProperties {
 }
 
+// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIATreeItem" because one of its declarations is marked as @internal
+//
+// @public
+export class DelegatesARIATreeItem {
+    ariaDisabled: "true" | "false" | string | null;
+    ariaExpanded: "true" | "false" | string | null;
+    ariaSelected: "true" | "false" | string | null;
+}
+
+// @internal
+export interface DelegatesARIATreeItem extends ARIAGlobalStatesAndProperties {
+}
+
 // @public
 export type DerivedDesignTokenValue<T> = (resolve: DesignTokenResolver) => T;
 
@@ -1327,14 +1342,16 @@ export class FASTMenu extends FASTElement {
     // @internal (undocumented)
     disconnectedCallback(): void;
     focus(): void;
+    // (undocumented)
+    handleChange(source: any, propertyName: string): void;
     // @internal
     handleFocusOut: (e: FocusEvent) => void;
     // @internal (undocumented)
     handleMenuKeyDown(e: KeyboardEvent): void | boolean;
     // @internal (undocumented)
     readonly isNestedMenu: () => boolean;
     // @internal (undocumented)
-    items: HTMLSlotElement;
+    items: HTMLElement[];
     // (undocumented)
     protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
 }
@@ -1367,6 +1384,7 @@ export class FASTMenuItem extends FASTElement {
     handleMouseOver: (e: MouseEvent) => boolean;
     // @internal (undocumented)
     hasSubmenu: boolean;
+    hidden: boolean;
     role: MenuItemRole;
     // @internal (undocumented)
     startColumnCount: MenuItemColumnCount;
@@ -1770,6 +1788,8 @@ export class FASTSkeleton extends FASTElement {
 //
 // @public
 export class FASTSlider extends FormAssociatedSlider implements SliderConfiguration {
+    // @internal
+    calculateNewValue(rawValue: number): number;
     // @internal (undocumented)
     connectedCallback(): void;
     decrement(): void;
@@ -2113,11 +2133,13 @@ export class FASTTreeItem extends FASTElement {
     // @internal (undocumented)
     childItems: HTMLElement[];
     disabled: boolean;
+    // (undocumented)
+    protected disabledChanged(prev: boolean | undefined, next: boolean): void;
     // @internal
     expandCollapseButton: HTMLDivElement;
     expanded: boolean;
     // (undocumented)
-    protected expandedChanged(): void;
+    protected expandedChanged(prev: boolean | undefined, next: boolean): void;
     // @internal
     focusable: boolean;
     static focusItem(el: HTMLElement): void;
@@ -2136,11 +2158,11 @@ export class FASTTreeItem extends FASTElement {
     nested: boolean;
     selected: boolean;
     // (undocumented)
-    protected selectedChanged(): void;
+    protected selectedChanged(prev: boolean | undefined, next: boolean): void;
 }
 
 // @internal
-export interface FASTTreeItem extends StartEnd {
+export interface FASTTreeItem extends StartEnd, DelegatesARIATreeItem {
 }
 
 // @public
@@ -2795,7 +2817,7 @@ export type WeekdayText = {
 };
 
 // @public
-export function whitespaceFilter(value: Node, index: number, array: Node[]): boolean;
+export const whitespaceFilter: ElementsFilter;
 
 // @public
 export const YearFormat: {