xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/ToneChangerButton/ToneChangerButton.spec.js

@@ -0,0 +1,414 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneChangerButton />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("displays light-to-dark icon in light mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        // Verify we're in light mode
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        const button = page.getByRole("button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Check that the icon exists within the button
+        const icon = button.locator("svg, img, [data-testid*='icon']").first();
+        yield (0, fixtures_1.expect)(icon).toBeVisible();
+    }));
+    (0, fixtures_1.test)("displays dark-to-light icon in dark mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        // Switch to dark mode first
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        // Verify the icon changes (should be different from light mode)
+        const icon = button.locator("svg, img, [data-testid*='icon']").first();
+        yield (0, fixtures_1.expect)(icon).toBeVisible();
+    }));
+    (0, fixtures_1.test)("switches from light to dark mode when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        // Initially in light mode
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        // Click to switch to dark mode
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+    }));
+    (0, fixtures_1.test)("switches from dark to light mode when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        // Switch to dark mode first
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        // Click again to switch back to light mode
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+    }));
+    (0, fixtures_1.test)("toggles between modes multiple times", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        // Initial state: light
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        // First toggle: light -> dark
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        // Second toggle: dark -> light
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        // Third toggle: light -> dark
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+    }));
+    // =============================================================================
+    // CLICK EVENT TESTS
+    // =============================================================================
+    fixtures_1.test.describe("click event", () => {
+        (0, fixtures_1.test)("fires click event with 'dark' when switching to dark mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <App>
+          <ToneChangerButton onClick="arg => testState = arg" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            // Initially in light mode
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+            // Click to switch to dark mode
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("dark");
+        }));
+        (0, fixtures_1.test)("fires click event with 'light' when switching to light mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <App>
+          <ToneChangerButton onClick="arg => testState = arg" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            // Switch to dark mode first
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+            // Click again to switch to light mode
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("light");
+        }));
+        (0, fixtures_1.test)("fires click event on each toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            // TODO: Investigate why the onClick event handler is not being called
+            const { testStateDriver } = yield initTestBed(`
+        <App>
+          <ToneChangerButton onClick="testState = testState == null ? 1 : testState + 1" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            // First click
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
+            // Second click
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
+            // Third click
+            yield button.click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(3);
+        }));
+    });
+    // =============================================================================
+    // ICON PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("icon properties", () => {
+        (0, fixtures_1.test)("uses custom lightToDarkIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton lightToDarkIcon="custom-light-icon" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            // Verify we're in light mode and icon is visible
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+            const button = page.getByRole("button");
+            const icon = button.locator("svg, img, [data-testid*='icon']").first();
+            yield (0, fixtures_1.expect)(icon).toBeVisible();
+        }));
+        (0, fixtures_1.test)("uses custom darkToLightIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton darkToLightIcon="custom-dark-icon" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            // Switch to dark mode to see dark-to-light icon
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+            const icon = button.locator("svg, img, [data-testid*='icon']").first();
+            yield (0, fixtures_1.expect)(icon).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles null lightToDarkIcon gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton lightToDarkIcon="{null}" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            // Should still render and be functional
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+            const button = page.getByRole("button");
+            yield (0, fixtures_1.expect)(button).toBeVisible();
+            // Should still be able to toggle
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        }));
+        (0, fixtures_1.test)("handles null darkToLightIcon gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton darkToLightIcon="{null}" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            // Switch to dark mode
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+            // Should still render and be functional
+            yield (0, fixtures_1.expect)(button).toBeVisible();
+            // Should still be able to toggle back
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        }));
+        (0, fixtures_1.test)("handles undefined icon properties gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton lightToDarkIcon="{undefined}" darkToLightIcon="{undefined}" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            yield (0, fixtures_1.expect)(button).toBeVisible();
+            // Should still function for toggling
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        }));
+        (0, fixtures_1.test)("handles non-string icon properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton lightToDarkIcon="{123}" darkToLightIcon="{true}" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            yield (0, fixtures_1.expect)(button).toBeVisible();
+            // Should still function for toggling despite invalid icon values
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        }));
+        (0, fixtures_1.test)("handles very long unicode characters in icon names", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <App>
+          <ToneChangerButton lightToDarkIcon="👨‍👩‍👧‍👦🌟✨" darkToLightIcon="中文图标名称" />
+          <Text testId="theme-state">{activeThemeTone}</Text>
+        </App>
+      `);
+            const button = page.getByRole("button");
+            yield (0, fixtures_1.expect)(button).toBeVisible();
+            // Should still function despite unusual icon names
+            yield button.click();
+            yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        }));
+    });
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has button role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneChangerButton />`);
+        const button = page.getByRole("button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+    }));
+    (0, fixtures_1.test)("is keyboard accessible with Enter key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        yield button.focus();
+        yield (0, fixtures_1.expect)(button).toBeFocused();
+        // Initially in light mode
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        // Press Enter to toggle
+        yield page.keyboard.press("Enter");
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+    }));
+    (0, fixtures_1.test)("is keyboard accessible with Space key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        yield button.focus();
+        yield (0, fixtures_1.expect)(button).toBeFocused();
+        // Initially in light mode
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        // Press Space to toggle
+        yield page.keyboard.press("Space");
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+    }));
+    (0, fixtures_1.test)("maintains focus during interactions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        yield button.focus();
+        yield button.click();
+        // Focus should be maintained after click
+        yield (0, fixtures_1.expect)(button).toBeFocused();
+    }));
+    (0, fixtures_1.test)("is focusable via Tab navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <Button>Before</Button>
+        <ToneChangerButton />
+        <Button>After</Button>
+      </App>
+    `);
+        // Focus the first button
+        yield page.getByRole("button", { name: "Before" }).focus();
+        // Tab to ToneChangerButton
+        yield page.keyboard.press("Tab");
+        const toneButton = page.getByRole("button").nth(1); // ToneChangerButton is the second button
+        yield (0, fixtures_1.expect)(toneButton).toBeFocused();
+        // Tab to the next button
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "After" })).toBeFocused();
+    }));
+    (0, fixtures_1.test)("has appropriate ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneChangerButton />`);
+        const button = page.getByRole("button");
+        // Should be focusable (not disabled)
+        yield (0, fixtures_1.expect)(button).not.toBeDisabled();
+        // Should have role button (implicit from getByRole test above)
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles no props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneChangerButton/>`);
+        const button = page.getByRole("button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+    }));
+    (0, fixtures_1.test)("works within different container components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <Card>
+          <ToneChangerButton />
+        </Card>
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Should still function normally
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+    }));
+    (0, fixtures_1.test)("maintains state consistency across multiple instances", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton testId="button1" />
+        <ToneChangerButton testId="button2" />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button1 = page.getByTestId("button1");
+        const button2 = page.getByTestId("button2");
+        // Initially in light mode
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+        // Click first button to switch to dark
+        yield button1.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+        // Click second button to switch back to light
+        yield button2.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+    }));
+    (0, fixtures_1.test)("handles rapid successive clicks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        // Perform rapid clicks
+        yield button.click();
+        yield button.click();
+        yield button.click();
+        yield button.click();
+        // Should end up in light mode (even number of clicks)
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("light");
+    }));
+    (0, fixtures_1.test)("handles empty string icon properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneChangerButton lightToDarkIcon="" darkToLightIcon="" />
+        <Text testId="theme-state">{activeThemeTone}</Text>
+      </App>
+    `);
+        const button = page.getByRole("button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Should still function despite empty icon names
+        yield button.click();
+        yield (0, fixtures_1.expect)(page.getByTestId("theme-state")).toHaveText("dark");
+    }));
+});

package/dist/scripts/src/components/ToneSwitch/ToneSwitch.spec.js

@@ -0,0 +1,89 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders in light mode by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneSwitch />
+        <Text>{activeThemeTone}</Text>
+      </App>
+    `);
+        const toggle = page.getByRole("switch");
+        yield (0, fixtures_1.expect)(toggle).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("light")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("toggles to dark mode when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneSwitch />
+        <Text>{activeThemeTone}</Text>
+      </App>
+    `);
+        const toggle = page.getByRole("switch");
+        yield (0, fixtures_1.expect)(toggle).toBeVisible();
+        yield toggle.click({ force: true });
+        yield (0, fixtures_1.expect)(page.getByText("dark")).toBeVisible();
+        yield (0, fixtures_1.expect)(toggle).toBeChecked();
+    }));
+    (0, fixtures_1.test)("toggles back to light mode when clicked again", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <App>
+        <ToneSwitch />
+        <Text>{activeThemeTone}</Text>
+      </App>
+    `);
+        const toggle = page.getByRole("switch");
+        yield (0, fixtures_1.expect)(toggle).toBeVisible();
+        yield toggle.click({ force: true });
+        yield (0, fixtures_1.expect)(page.getByText("dark")).toBeVisible();
+        yield (0, fixtures_1.expect)(toggle).toBeChecked();
+        yield toggle.click({ force: true });
+        yield (0, fixtures_1.expect)(page.getByText("light")).toBeVisible();
+        yield (0, fixtures_1.expect)(toggle).not.toBeChecked();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has switch role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneSwitch />`);
+        const toggle = page.getByRole("switch");
+        yield (0, fixtures_1.expect)(toggle).toBeVisible();
+    }));
+    (0, fixtures_1.test)("is keyboard accessible with Space key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneSwitch />`);
+        const toggle = page.getByRole("switch");
+        yield toggle.focus();
+        yield (0, fixtures_1.expect)(toggle).toBeFocused();
+        yield page.keyboard.press("Space");
+        yield (0, fixtures_1.expect)(toggle).toBeChecked();
+    }));
+    (0, fixtures_1.test)("maintains focus during interactions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneSwitch />`);
+        const toggle = page.getByRole("switch");
+        yield toggle.focus();
+        yield toggle.click({ force: true });
+        yield (0, fixtures_1.expect)(toggle).toBeFocused();
+    }));
+    (0, fixtures_1.test)("has appropriate aria-checked state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<ToneSwitch />`);
+        const toggle = page.getByRole("switch");
+        yield (0, fixtures_1.expect)(toggle).toHaveAttribute("aria-checked", "false");
+        yield toggle.click({ force: true });
+        yield (0, fixtures_1.expect)(toggle).toHaveAttribute("aria-checked", "true");
+    }));
+});