From 927f0ca0fe6658bae76cdd151978c26a71de3568 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Korczak?= <michal.k2001@gmail.com>
Date: Sat, 4 Nov 2023 03:19:41 +0100
Subject: [PATCH] feat: add tests

---
 .xstate/collapsible.js                        |  5 ++
 e2e/collapsible.e2e.ts                        | 64 +++++++++++++++++++
 .../collapsible/src/collapsible.machine.ts    |  9 +++
 3 files changed, 78 insertions(+)
 create mode 100644 e2e/collapsible.e2e.ts

diff --git a/.xstate/collapsible.js b/.xstate/collapsible.js
index 2279affd8d..20f5506a55 100644
--- a/.xstate/collapsible.js
+++ b/.xstate/collapsible.js
@@ -13,6 +13,11 @@ const fetchMachine = createMachine({
   id: "collapsible",
   initial: ctx.open ? "open" : "closed",
   context: {},
+  on: {
+    "CONTEXT.SET": {
+      actions: ["setContext"]
+    }
+  },
   on: {
     UPDATE_CONTEXT: {
       actions: "updateContext"
diff --git a/e2e/collapsible.e2e.ts b/e2e/collapsible.e2e.ts
new file mode 100644
index 0000000000..885f927974
--- /dev/null
+++ b/e2e/collapsible.e2e.ts
@@ -0,0 +1,64 @@
+import { expect, test, type Page } from "@playwright/test"
+import { a11y, controls, part } from "./__utils"
+
+const root = part("root")
+const trigger = part("trigger")
+const content = part("content")
+
+const expectToBeOpen = async (page: Page) => {
+  await expect(page.locator(root)).toHaveAttribute("data-state", "open")
+  await expect(page.locator(trigger)).toHaveAttribute("data-state", "open")
+  await expect(page.locator(content)).toHaveAttribute("data-state", "open")
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/collapsible")
+})
+
+test("should have no accessibility violation", async ({ page }) => {
+  await a11y(page)
+})
+
+test("should be open when clicked", async ({ page }) => {
+  await page.click(trigger)
+  await expectToBeOpen(page)
+})
+
+test("should be focused when page is tabbed", async ({ page }) => {
+  await page.click("main")
+  await page.keyboard.press("Tab")
+  await expect(page.locator(trigger)).toBeFocused()
+  await expect(page.locator(trigger)).toHaveAttribute("data-focus", "")
+})
+
+test("should be open when spacebar is pressed while focused", async ({ page }) => {
+  await page.click("main")
+  await page.keyboard.press("Tab")
+  await page.keyboard.press(" ")
+  await expectToBeOpen(page)
+})
+
+test("should have disabled attributes when disabled", async ({ page }) => {
+  await controls(page).bool("disabled")
+  await expect(page.locator(trigger)).toHaveAttribute("data-disabled", "")
+  await expect(page.locator(trigger)).toBeDisabled()
+})
+
+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(trigger)).not.toBeFocused()
+})
+
+test("input is not blurred on trigger click", async ({ page }) => {
+  let blurCount = 0
+  await page.exposeFunction("trackBlur", () => blurCount++)
+  await page.locator(trigger).evaluate((input) => {
+    input.addEventListener("blur", (window as any).trackBlur)
+  })
+  await page.click(trigger)
+  await page.click(trigger)
+  await page.click(trigger)
+  expect(blurCount).toBe(0)
+})
diff --git a/packages/machines/collapsible/src/collapsible.machine.ts b/packages/machines/collapsible/src/collapsible.machine.ts
index e039a5bde1..abe07d5ca8 100644
--- a/packages/machines/collapsible/src/collapsible.machine.ts
+++ b/packages/machines/collapsible/src/collapsible.machine.ts
@@ -19,6 +19,12 @@ export function machine(userContext: UserDefinedContext) {
         isDisabled: (ctx) => !!ctx.disabled,
       },
 
+      on: {
+        "CONTEXT.SET": {
+          actions: ["setContext"],
+        },
+      },
+
       states: {
         closed: {
           on: {
@@ -49,6 +55,9 @@ export function machine(userContext: UserDefinedContext) {
     {
       guards: {},
       actions: {
+        setContext(ctx, evt) {
+          Object.assign(ctx, evt.context)
+        },
         invokeOnOpen: (ctx) => {
           ctx.onOpenChange?.({ open: true })
         },