Enable Prettier and ESLint for spec files

.eslintignore

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

.prettierignore

@@ -1,6 +1,3 @@
-*.spec.ts
-!*.pw.spec.ts
-*.spec.tsx
 **/__tests__
 **/__test__
 **/.tmp

change/@microsoft-fast-element-71ad3aa1-de0d-404e-b5ce-09468e600a4a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update Karma tests to Playwright",
+  "packageName": "@microsoft/fast-element",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@microsoft-fast-html-c6ab2b78-faf2-4ae0-9bf7-e6695b05985d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable Prettier and ESLint for spec files",
+  "packageName": "@microsoft/fast-html",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@microsoft-fast-router-270463f8-84fc-4a06-9071-ed1ef4759ae1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable Prettier and ESLint for spec files",
+  "packageName": "@microsoft/fast-router",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@microsoft-fast-ssr-ec14f10d-012c-42a6-ba8b-7fc5e92b6681.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Enable Prettier and ESLint for spec files",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/fast-element/.eslintignore

@@ -3,6 +3,4 @@ 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.*
+coverage

packages/fast-element/.prettierignore

@@ -1,3 +1,2 @@
 coverage/*
 dist/*
-*.spec.ts

packages/fast-element/package.json

@@ -118,7 +118,7 @@
     "eslint:fix": "eslint . --ext .ts --fix",
     "test:playwright": "playwright test",
     "test-server": "npx vite test/ --clearScreen false",
-    "test": "npm run eslint && npm run test-chrome:verbose && npm run doc:ci && npm run doc:exports:ci && npm run test:playwright",
+    "test": "npm run eslint && npm run doc:ci && npm run doc:exports:ci && npm run test:playwright",
     "test-node": "nyc --reporter=lcov --reporter=text-summary --report-dir=coverage/node --temp-dir=coverage/.nyc_output mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
     "test-node:verbose": "nyc --reporter=lcov --reporter=text-summary --report-dir=coverage/node --temp-dir=coverage/.nyc_output 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",

packages/fast-element/playwright.config.ts

@@ -9,6 +9,14 @@ export default defineConfig({
             name: "chromium",
             use: { ...devices["Desktop Chrome"] },
         },
+        {
+            name: "firefox",
+            use: { ...devices["Desktop Firefox"] },
+        },
+        {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+        },
     ],
     webServer: {
         command: "npm run test-server",

packages/fast-element/src/components/attributes.pw.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Attributes", () => {
+    test("should be properly aggregated across an inheritance hierarchy.", async ({
+        page,
+    }) => {
+        await page.goto("/");
+
+        const { componentAAttributesLength, componentBAttributesLength } =
+            await page.evaluate(async () => {
+                // @ts-expect-error: Client module.
+                const { AttributeConfiguration, AttributeDefinition, FASTElement } =
+                    await import("/main.js");
+
+                abstract class BaseElement extends FASTElement {
+                    attributeOne = "";
+                }
+                // Manually add attribute configuration like @attr decorator does
+                AttributeConfiguration.locate(BaseElement).push({
+                    property: "attributeOne",
+                } as any);
+
+                class ComponentA extends BaseElement {
+                    attributeTwo = "two-A";
+                }
+                // Manually add attribute configuration like @attr decorator does
+                AttributeConfiguration.locate(ComponentA).push({
+                    property: "attributeTwo",
+                } as any);
+
+                class ComponentB extends BaseElement {
+                    private get attributeTwo(): string {
+                        return "two-B";
+                    }
+                }
+
+                const componentAAttributes = AttributeDefinition.collect(ComponentA);
+                const componentBAttributes = AttributeDefinition.collect(ComponentB);
+
+                return {
+                    componentAAttributesLength: componentAAttributes.length,
+                    componentBAttributesLength: componentBAttributes.length,
+                };
+            });
+
+        expect(componentAAttributesLength).toBe(2);
+        expect(componentBAttributesLength).toBe(1);
+    });
+});