test(relfow): add e2e tests

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");
+});

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>
+  `;
+};

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");
+});

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>
+  `;
+};

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>
+  `;
+};

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);
+});