fix: run Playwright tests in all browsers

.github/workflows/ci-validate-platforms.yml

@@ -19,7 +19,7 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-11]
+        os: [ubuntu-latest, windows-latest, macos-latest]
 
     env:
       PLAYWRIGHT_BROWSERS_PATH: 0

change/@microsoft-fast-foundation-351b8362-46ce-4262-b311-00458eabdd52.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix toolbar focus functions",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-foundation-4ebf7506-c37e-4969-933c-813b923b7ca9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "allow calendar getYear() to accept additional options for DateTimeFormatOptions",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

change/@microsoft-fast-ssr-74cb2e18-9808-48e2-951b-729382a9fef2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update Playwright",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

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

@@ -402,7 +402,7 @@ export class DateFormatter {
     // (undocumented)
     getWeekdays(format?: WeekdayFormat, locale?: string): string[];
     // (undocumented)
-    getYear(year?: number, format?: YearFormat, locale?: string): string;
+    getYear(year?: number, format?: YearFormat, locale?: string, options?: Intl.DateTimeFormatOptions): string;
     locale: string;
     monthFormat: MonthFormat;
     weekdayFormat: WeekdayFormat;
@@ -2117,6 +2117,8 @@ export class FASTToolbar extends FASTElement {
     // @internal
     direction: Direction;
     // @internal
+    focus(): void;
+    // @internal
     focusinHandler(e: FocusEvent): boolean | void;
     // @internal
     keydownHandler(e: KeyboardEvent): boolean | void;

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

@@ -253,7 +253,7 @@
     "@custom-elements-manifest/to-markdown": "^0.1.0",
     "@microsoft/api-extractor": "7.24.2",
     "@microsoft/tsdoc-config": "^0.13.4",
-    "@playwright/test": "^1.25.2",
+    "@playwright/test": "~1.40.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@storybook/addon-docs": "6.5.10",
     "@storybook/addon-essentials": "6.5.10",

packages/web-components/fast-foundation/playwright.config.ts

@@ -1,11 +1,28 @@
 import type { Locator, PlaywrightTestConfig } from "@playwright/test";
-import { expect } from "@playwright/test";
+import { devices, expect } from "@playwright/test";
 
 const config: PlaywrightTestConfig = {
-    projects: [{ name: "chromium" }, { name: "firefox" }, { name: "webkit" }],
+    projects: [
+        {
+            name: "chromium",
+            use: {
+                ...devices["Desktop Chrome"],
+                deviceScaleFactor: 1,
+                launchOptions: { args: ["--force-device-scale-factor=1"] },
+            },
+        },
+        {
+            name: "firefox",
+            use: devices["Desktop Firefox"],
+        },
+        {
+            name: "webkit",
+            use: devices["Desktop Safari"],
+        },
+    ],
     reporter: "list",
     testMatch: /.*\.pw\.spec\.ts$/,
-    retries: 3,
+    retries: process.env.CI ? 3 : 0,
     fullyParallel: process.env.CI ? false : true,
     timeout: process.env.CI ? 10000 : 30000,
     use: {
@@ -60,20 +77,4 @@ expect.extend({
 expected ${recieved} to have boolean attribute \`${name}\``,
         };
     },
-
-    async hasAttribute(recieved: Locator, attribute: string) {
-        if (await recieved.isVisible()) {
-            await (await recieved.elementHandle())?.waitForElementState("stable");
-        }
-
-        const pass = await recieved.evaluate(
-            (node, attribute) => node.hasAttribute(attribute),
-            attribute
-        );
-
-        return {
-            message: () => `expected ${recieved} to have attribute \`${attribute}\``,
-            pass,
-        };
-    },
 });

packages/web-components/fast-foundation/src/__test__/global.d.ts

@@ -1,7 +1,6 @@
 declare global {
     namespace PlaywrightTest {
         interface Matchers<R> {
-            hasAttribute(a: string): Promise<R>;
             toHaveBooleanAttribute(a: string): Promise<R>;
         }
     }

packages/web-components/fast-foundation/src/accordion-item/accordion-item.pw.spec.ts

@@ -38,7 +38,7 @@ test.describe("Accordion item", () => {
             `;
         });
 
-        await expect(element).not.hasAttribute("headinglevel");
+        await expect(element).not.toHaveAttribute("headinglevel");
 
         await expect(element).toHaveJSProperty("headinglevel", 2);
     });

packages/web-components/fast-foundation/src/accordion/accordion.pw.spec.ts

@@ -235,7 +235,7 @@ test.describe("Accordion", () => {
             node.setAttribute("expand-mode", "multi");
         });
 
-        await expect(firstItem.locator("button")).not.hasAttribute("aria-disabled");
+        await expect(firstItem.locator("button")).not.toHaveAttribute("aria-disabled");
     });
 
     test("should set the first item as expanded if no child is expanded by default in single mode", async () => {

packages/web-components/fast-foundation/src/breadcrumb-item/breadcrumb-item.pw.spec.ts

@@ -45,7 +45,7 @@ test.describe("Breadcrumb item", () => {
 
         const anchor = element.locator("a");
 
-        await expect(element).not.hasAttribute("href");
+        await expect(element).not.toHaveAttribute("href");
 
         await expect(element).toHaveJSProperty("href", undefined);
 

packages/web-components/fast-foundation/src/breadcrumb/breadcrumb.pw.spec.ts

@@ -97,6 +97,6 @@ test.describe("Breadcrumb", () => {
 
         await expect(
             element.locator("fast-breadcrumb-item:nth-of-type(2) a")
-        ).not.hasAttribute("aria-current");
+        ).not.toHaveAttribute("aria-current");
     });
 });

packages/web-components/fast-foundation/src/calendar/calendar.pw.spec.ts

@@ -487,11 +487,24 @@ test.describe("Calendar", () => {
                 `;
             });
 
-            expect(
-                await element.evaluate((node: FASTCalendar) =>
-                    node.dateFormatter.getYear(node.year)
-                )
-            ).toBe("พ.ศ. 2564");
+            let year = await element.evaluate((node: FASTCalendar) =>
+                node.dateFormatter.getYear(node.year)
+            );
+
+            expect(year).toContain("2564");
+
+            // Webkit on Windows only returns "2564" for the Buddhist calendar,
+            // so check again with `era` option.
+            // Possibly related: https://bugs.webkit.org/show_bug.cgi?id=265818
+            if (year === "2564") {
+                year = await element.evaluate((node: FASTCalendar) =>
+                    node.dateFormatter.getYear(node.year, node.yearFormat, node.locale, {
+                        era: "short",
+                    })
+                );
+            }
+
+            expect(year).toBe("พ.ศ. 2564");
         });
 
         test("should not be RTL for languages that are not Arabic or Hebrew", async () => {

packages/web-components/fast-foundation/src/calendar/date-formatter.ts

@@ -150,15 +150,24 @@ export class DateFormatter {
      * @param year - The year to localize
      * @param format - The formatting for the year
      * @param locale - The locale data used for formatting
+     * @param options - Additional options to pass to Intl.DateTimeFormat
      * @returns - A localized string for the year
      * @public
      */
     public getYear(
         year: number = this.date.getFullYear(),
         format: YearFormat = this.yearFormat,
-        locale: string = this.locale
+        locale: string = this.locale,
+        options?: Intl.DateTimeFormatOptions
     ): string {
-        return this.getDate({ month: 2, day: 2, year }, { year: format }, locale);
+        return this.getDate(
+            { month: 2, day: 2, year },
+            {
+                year: format,
+                ...(options ?? {}),
+            },
+            locale
+        );
     }
 
     /**