Use Playwright with Storybook for component tests in fast-foundation

.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;
 
@@ -777,10 +792,11 @@ export class FASTBaseProgress extends FASTElement {
 
 // @public
 export class FASTBreadcrumb extends FASTElement {
+    static slottedBreadcrumbItemFilter: (n: HTMLElement) => boolean;
     // @internal (undocumented)
     slottedBreadcrumbItems: HTMLElement[];
     // (undocumented)
-    protected slottedBreadcrumbItemsChanged(): void;
+    protected slottedBreadcrumbItemsChanged(prev: Element[] | undefined, next: Element[] | undefined): void;
 }
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
@@ -1327,14 +1343,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 +1385,7 @@ export class FASTMenuItem extends FASTElement {
     handleMouseOver: (e: MouseEvent) => boolean;
     // @internal (undocumented)
     hasSubmenu: boolean;
+    hidden: boolean;
     role: MenuItemRole;
     // @internal (undocumented)
     startColumnCount: MenuItemColumnCount;
@@ -1630,7 +1649,9 @@ export class FASTRadioGroup extends FASTElement {
     name: string;
     // (undocumented)
     protected nameChanged(): void;
-    orientation: Orientation | "horizontal" | "vertical";
+    orientation: Orientation;
+    // (undocumented)
+    positioningRegion: HTMLDivElement;
     readOnly: boolean;
     // (undocumented)
     protected readOnlyChanged(): void;
@@ -1770,6 +1791,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;
@@ -1970,7 +1993,7 @@ export interface FASTTextArea extends DelegatesARIATextbox {
 export class FASTTextField extends FormAssociatedTextField {
     autofocus: boolean;
     // (undocumented)
-    protected autofocusChanged(): void;
+    protected autofocusChanged(prev: boolean | undefined, next: boolean): void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
@@ -1983,29 +2006,29 @@ export class FASTTextField extends FormAssociatedTextField {
     handleTextInput(): void;
     list: string;
     // (undocumented)
-    protected listChanged(): void;
-    maxlength: number;
+    protected listChanged(prev: string | undefined, next: string): void;
+    maxlength: number | null;
     // (undocumented)
-    protected maxlengthChanged(): void;
-    minlength: number;
+    protected maxlengthChanged(prev: number | null | undefined, next: number | null): void;
+    minlength: number | null;
     // (undocumented)
-    protected minlengthChanged(): void;
+    protected minlengthChanged(prev: number | null | undefined, next: number | null): void;
     pattern: string;
     // (undocumented)
-    protected patternChanged(): void;
+    protected patternChanged(prev: string | undefined, next: string): void;
     placeholder: string;
     // (undocumented)
-    protected placeholderChanged(): void;
+    protected placeholderChanged(prev: string | undefined, next: string): void;
     readOnly: boolean;
     // (undocumented)
-    protected readOnlyChanged(): void;
+    protected readOnlyChanged(prev: boolean | undefined, next: boolean): void;
     select(): void;
-    size: number;
+    size: number | null;
     // (undocumented)
-    protected sizeChanged(): void;
+    protected sizeChanged(prev: number | null | undefined, next: number | null): void;
     spellcheck: boolean;
     // (undocumented)
-    protected spellcheckChanged(): void;
+    protected spellcheckChanged(prev: boolean | undefined, next: boolean): void;
     type: TextFieldType;
     validate(): void;
 }
@@ -2108,39 +2131,39 @@ export class FASTTooltip extends FASTElement {
 //
 // @public
 export class FASTTreeItem extends FASTElement {
-    // @internal
-    childItemLength(): number;
     // @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;
     // @internal
     handleBlur: (e: FocusEvent) => void;
     // @internal
-    handleExpandCollapseButtonClick: (e: MouseEvent) => void;
+    handleExpandCollapseButtonClick: (e: MouseEvent) => boolean | void;
     // @internal
     handleFocus: (e: FocusEvent) => void;
     readonly isNestedItem: () => boolean;
     // @internal
     items: HTMLElement[];
     // (undocumented)
-    protected itemsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
+    protected itemsChanged(prev: HTMLElement[] | undefined, next: HTMLElement[]): void;
     // @internal
     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
@@ -2333,11 +2356,14 @@ export type HorizontalScrollView = typeof HorizontalScrollView[keyof typeof Hori
 // @internal
 export function interactiveCalendarGridTemplate<T extends FASTCalendar>(options: CalendarOptions, todayString: string): ViewTemplate<T>;
 
+// @public
+export function isBreadcrumbItem(element: Element): element is FASTBreadcrumbItem;
+
 // @public
 export function isListboxOption(el: Element): el is FASTListboxOption;
 
 // @public
-export function isTreeItemElement(el: Element): el is HTMLElement;
+export function isTreeItemElement(el: Element): el is FASTTreeItem;
 
 // @public
 export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
@@ -2795,7 +2821,7 @@ export type WeekdayText = {
 };
 
 // @public
-export function whitespaceFilter(value: Node, index: number, array: Node[]): boolean;
+export const whitespaceFilter: ElementsFilter;
 
 // @public
 export const YearFormat: {