From 0bb31df1414a83c47228a17e5f7aeb5ccc8cb0e1 Mon Sep 17 00:00:00 2001
From: fcrozatier <frederic.crozatier@protonmail.com>
Date: Wed, 5 Nov 2025 10:50:27 +0100
Subject: [PATCH 1/3] new test

---
 .../reflow/tests/classlist/classlist.spec.ts   | 18 ++++++++++++++++++
 packages/reflow/tests/classlist/index.js       | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 packages/reflow/tests/classlist/classlist.spec.ts
 create mode 100644 packages/reflow/tests/classlist/index.js

diff --git a/packages/reflow/tests/classlist/classlist.spec.ts b/packages/reflow/tests/classlist/classlist.spec.ts
new file mode 100644
index 0000000..2e8ebb0
--- /dev/null
+++ b/packages/reflow/tests/classlist/classlist.spec.ts
@@ -0,0 +1,18 @@
+import { expect, test } from "playwright/test";
+
+test("classlist sink", async ({ page }) => {
+  await page.goto("http://localhost:8000/classlist/index.html");
+
+  const button = page.getByRole("button");
+  const output = page.getByTestId("output");
+
+  await expect(output).toHaveClass("selected");
+
+  await button.click();
+  await expect(output).not.toHaveClass("selected");
+  await expect(output).toHaveClass("rounded opacity-0");
+
+  await button.click();
+  await expect(output).toHaveClass("selected");
+  await expect(output).not.toHaveClass("rounded opacity-0");
+});
diff --git a/packages/reflow/tests/classlist/index.js b/packages/reflow/tests/classlist/index.js
new file mode 100644
index 0000000..7dc1862
--- /dev/null
+++ b/packages/reflow/tests/classlist/index.js
@@ -0,0 +1,18 @@
+import { reactive } from "@f-stack/functorial";
+import { classList, html, on } from "@f-stack/reflow";
+
+export default () => {
+  const classes = reactive({
+    selected: true,
+    get "rounded opacity-0"() {
+      return !this.selected;
+    },
+  });
+
+  return html`
+    <button ${on({ click: () => classes.selected = !classes.selected })}>
+      Toggle selection
+    </button>
+    <span ${classList(classes)} data-testid="output"></span>
+  `;
+};

From 00febb64f794941355f430f490281ba2cf5e6034 Mon Sep 17 00:00:00 2001
From: fcrozatier <frederic.crozatier@protonmail.com>
Date: Thu, 6 Nov 2025 13:39:54 +0100
Subject: [PATCH 2/3] add prop test

---
 packages/reflow/tests/prop/index.js     | 17 +++++++++++++++++
 packages/reflow/tests/prop/prop.spec.ts | 16 ++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/reflow/tests/prop/index.js
 create mode 100644 packages/reflow/tests/prop/prop.spec.ts

diff --git a/packages/reflow/tests/prop/index.js b/packages/reflow/tests/prop/index.js
new file mode 100644
index 0000000..50f497d
--- /dev/null
+++ b/packages/reflow/tests/prop/index.js
@@ -0,0 +1,17 @@
+import { reactive } from "@f-stack/functorial";
+import { html, on, prop } from "@f-stack/reflow";
+
+export default () => {
+  const bool = reactive({ value: true });
+
+  return html`
+    <button ${on({ click: () => bool.value = !bool.value })}>toggle</button>
+
+    <input type="checkbox" ${prop({
+      // @ts-ignore
+      get indeterminate() {
+        return bool.value;
+      },
+    })} data-testid="input"></span>
+  `;
+};
diff --git a/packages/reflow/tests/prop/prop.spec.ts b/packages/reflow/tests/prop/prop.spec.ts
new file mode 100644
index 0000000..e34bcaf
--- /dev/null
+++ b/packages/reflow/tests/prop/prop.spec.ts
@@ -0,0 +1,16 @@
+import { expect, test } from "playwright/test";
+
+test("prop", async ({ page }) => {
+  await page.goto("http://localhost:8000/prop/index.html");
+
+  const button = page.getByRole("button");
+  const checkbox = page.getByRole("checkbox");
+
+  await expect(checkbox).toHaveJSProperty("indeterminate", true);
+
+  await button.click();
+  await expect(checkbox).toHaveJSProperty("indeterminate", false);
+
+  await button.click();
+  await expect(checkbox).toHaveJSProperty("indeterminate", true);
+});

From fd12e38ea223e582cc231304bf198e7f49f553d7 Mon Sep 17 00:00:00 2001
From: fcrozatier <frederic.crozatier@protonmail.com>
Date: Thu, 6 Nov 2025 13:45:38 +0100
Subject: [PATCH 3/3] add derived test

---
 packages/reflow/tests/derived/derived.spec.ts | 20 +++++++++++++++++++
 packages/reflow/tests/derived/index.js        | 12 +++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 packages/reflow/tests/derived/derived.spec.ts
 create mode 100644 packages/reflow/tests/derived/index.js

diff --git a/packages/reflow/tests/derived/derived.spec.ts b/packages/reflow/tests/derived/derived.spec.ts
new file mode 100644
index 0000000..614ba05
--- /dev/null
+++ b/packages/reflow/tests/derived/derived.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from "playwright/test";
+
+test("attr", async ({ page }) => {
+  await page.goto("http://localhost:8000/derived/index.html");
+
+  const increment = page.getByRole("button");
+  const count = page.getByTestId("count");
+  const even = page.getByTestId("even");
+
+  await expect(count).toHaveText("0");
+  await expect(even).toHaveText("true");
+
+  await increment.click();
+  await expect(count).toHaveText("1");
+  await expect(even).toHaveText("false");
+
+  await increment.click();
+  await expect(count).toHaveText("2");
+  await expect(even).toHaveText("true");
+});
diff --git a/packages/reflow/tests/derived/index.js b/packages/reflow/tests/derived/index.js
new file mode 100644
index 0000000..14d409d
--- /dev/null
+++ b/packages/reflow/tests/derived/index.js
@@ -0,0 +1,12 @@
+import { derived, reactive } from "@f-stack/functorial";
+import { html, on } from "@f-stack/reflow";
+
+export default () => {
+  const count = reactive({ value: 0 });
+
+  return html`
+    <button ${on({ click: () => count.value++ })}>increment</button>
+    <p data-testid="count">${count}</p>
+    <p data-testid="even">${derived(() => count.value % 2 === 0)}</p>
+  `;
+};