test(e2e): refactor switch

e2e/models/switch.model.ts

@@ -0,0 +1,77 @@
+import { expect, type Page } from "@playwright/test"
+import { a11y, repeat } from "../_utils"
+import { Model } from "./model"
+
+export class SwitchModel extends Model {
+  constructor(public page: Page) {
+    super(page)
+  }
+
+  checkAccessibility() {
+    return a11y(this.page)
+  }
+
+  goto(url = "/switch") {
+    return this.page.goto(url)
+  }
+
+  get root() {
+    return this.page.locator("[data-scope='switch'][data-part='root']")
+  }
+
+  get label() {
+    return this.page.locator("[data-scope='switch'][data-part='label']")
+  }
+
+  get control() {
+    return this.page.locator("[data-scope='switch'][data-part='control']")
+  }
+
+  get input() {
+    return this.page.locator("[data-scope='switch'][data-part='root'] input")
+  }
+
+  async clickCheckbox() {
+    return this.root.click()
+  }
+
+  async clickLabel(times = 1) {
+    await repeat(times, () => this.label.click({ force: true }))
+  }
+
+  async focusCheckbox() {
+    return this.input.focus()
+  }
+
+  async seeCheckboxIsChecked() {
+    await expect(this.input).toBeChecked()
+  }
+
+  async seeCheckboxIsFocused() {
+    await expect(this.input).toBeFocused()
+    await expect(this.control).toHaveAttribute("data-focus", "")
+  }
+
+  async seeCheckboxIsNotFocused() {
+    await expect(this.input).not.toBeFocused()
+    await expect(this.control).not.toHaveAttribute("data-focus", "")
+  }
+
+  async seeCheckboxIsDisabled() {
+    await expect(this.input).toBeDisabled()
+    await expect(this.control).toHaveAttribute("data-disabled", "")
+  }
+
+  private blurCount = 0
+
+  async trackBlur() {
+    await this.page.exposeFunction("trackBlur", () => this.blurCount++)
+    await this.input.evaluate((input) => {
+      input.addEventListener("blur", (window as any).trackBlur)
+    })
+  }
+
+  async expectBlurCount(count: number) {
+    expect(this.blurCount).toBe(count)
+  }
+}

e2e/switch.e2e.ts

@@ -1,65 +1,46 @@
-import { expect, type Page, test } from "@playwright/test"
-import { a11y, controls, part, testid } from "./_utils"
+import { test } from "@playwright/test"
+import { SwitchModel } from "./models/switch.model"
 
-const root = part("root")
-const label = part("label")
-const control = part("control")
-const input = testid("hidden-input")
-
-const expectToBeChecked = async (page: Page) => {
-  await expect(page.locator(root)).toHaveAttribute("data-state", "checked")
-  await expect(page.locator(label)).toHaveAttribute("data-state", "checked")
-  await expect(page.locator(control)).toHaveAttribute("data-state", "checked")
-}
+let I: SwitchModel
 
 test.beforeEach(async ({ page }) => {
-  await page.goto("/switch")
+  I = new SwitchModel(page)
+  await I.goto()
 })
 
-test("should have no accessibility violation", async ({ page }) => {
-  await a11y(page)
+test("should have no accessibility violation", async () => {
+  await I.checkAccessibility()
 })
 
-test("should be checked when clicked", async ({ page }) => {
-  await page.click(root)
-  await expectToBeChecked(page)
+test("should be checked when clicked", async () => {
+  await I.clickCheckbox()
+  await I.seeCheckboxIsChecked()
 })
 
-test("should be focused when page is tabbed", async ({ page }) => {
-  await page.click("main")
-  await page.keyboard.press("Tab")
-  await expect(page.locator(input)).toBeFocused()
-  await expect(page.locator(control)).toHaveAttribute("data-focus", "")
+test("should be focused when page is tabbed", async () => {
+  await I.focusCheckbox()
+  await I.seeCheckboxIsFocused()
 })
 
-test("should be checked when spacebar is pressed while focused", async ({ page }) => {
-  await page.click("main")
-  await page.keyboard.press("Tab")
-  await page.keyboard.press(" ")
-  await expectToBeChecked(page)
+test("should be checked when spacebar is pressed while focused", async () => {
+  await I.focusCheckbox()
+  await I.pressKey(" ")
+  await I.seeCheckboxIsChecked()
 })
 
-test("should have disabled attributes when disabled", async ({ page }) => {
-  await controls(page).bool("disabled")
-  await expect(page.locator(control)).toHaveAttribute("data-disabled", "")
-  await expect(page.locator(input)).toBeDisabled()
+test("should have disabled attributes when disabled", async () => {
+  await I.controls.bool("disabled", true)
+  await I.seeCheckboxIsDisabled()
 })
 
-test("should not be focusable when disabled", async ({ page }) => {
-  await controls(page).bool("disabled")
-  await page.click("main")
-  await page.keyboard.press("Tab")
-  await expect(page.locator(input)).not.toBeFocused()
+test("should not be focusable when disabled", async () => {
+  await I.controls.bool("disabled", true)
+  await I.clickLabel()
+  await I.seeCheckboxIsNotFocused()
 })
 
-test("input is not blurred on label click", async ({ page }) => {
-  let blurCount = 0
-  await page.exposeFunction("trackBlur", () => blurCount++)
-  await page.locator(input).evaluate((input) => {
-    input.addEventListener("blur", (window as any).trackBlur)
-  })
-  await page.click(label)
-  await page.click(label)
-  await page.click(label)
-  expect(blurCount).toBe(0)
+test("input is not blurred on label click", async () => {
+  await I.trackBlur()
+  await I.clickLabel(3)
+  await I.expectBlurCount(0)
 })

packages/machines/switch/src/switch.connect.ts

@@ -47,6 +47,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           send({ type: "CONTEXT.SET", context: { hovered: false } })
         },
         onClick(event) {
+          if (disabled) return
           if (event.target === dom.getHiddenInputEl(state.context)) {
             event.stopPropagation()
           }