From 80e2bd66f54bca88a749d40784828d29bae8995f Mon Sep 17 00:00:00 2001
From: Jacob Scearcy <jacobscearcy@gmail.com>
Date: Mon, 6 May 2024 06:42:35 -0700
Subject: =?UTF-8?q?=F0=9F=94=80=20Use=20vitest=20for=20runtime/vdom=20test?=
 =?UTF-8?q?ing.=20(#124)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🧪 move tests into test directory, bump birdie to ignore non-gleam files

* implement feedback

* add comments, update doc
---
 test/02-interactivity.test.js | 88 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 test/02-interactivity.test.js

(limited to 'test/02-interactivity.test.js')

diff --git a/test/02-interactivity.test.js b/test/02-interactivity.test.js
new file mode 100644
index 0000000..3355e94
--- /dev/null
+++ b/test/02-interactivity.test.js
@@ -0,0 +1,88 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { setupDOM } from "./utils.js";
+// built via npm script "build:test:02"
+import { main } from "@root/examples/02-interactivity/build/dev/javascript/app/app.mjs";
+
+let appEl;
+beforeEach(() => {
+  setupDOM();
+  appEl = document.getElementById("app");
+});
+
+describe("counter example", () => {
+    test("should render initially", () => {
+        main();
+
+        expect(document.toString()).toMatchSnapshot();
+    });
+
+    test("should increment on button press", () => {
+        main();
+
+        const buttons = document.querySelectorAll("button.lustre-ui-button");
+        const incrementButton = buttons[0];
+        const count = document.querySelector("p");
+        
+        expect(incrementButton).toBeTruthy();
+
+        incrementButton.click();
+
+        expect(count.innerText).toBe("1");
+        
+        incrementButton.click();
+        expect(count.innerText).toBe("2");
+
+        incrementButton.click();
+        expect(count.innerText).toBe("3");
+
+    });
+
+    test("should decrement on button press", () => {
+        main();
+
+        const buttons = document.querySelectorAll("button.lustre-ui-button");
+        const decrementButton = buttons[1];
+        const count = document.querySelector("p");
+        
+        expect(decrementButton).toBeTruthy();
+
+        decrementButton.click();
+        expect(count.innerText).toBe("-1");
+
+        decrementButton.click();
+        expect(count.innerText).toBe("-2");
+
+        decrementButton.click();
+        expect(count.innerText).toBe("-3");
+    });
+
+    test("should increment and decrement on button press", () => {
+        main();
+
+        const buttons = document.querySelectorAll("button.lustre-ui-button");
+        const incrementButton = buttons[0];
+        const decrementButton = buttons[1];
+        const count = document.querySelector("p");
+
+        incrementButton.click();
+
+        expect(count.innerText).toBe("1");
+        
+        incrementButton.click();
+        expect(count.innerText).toBe("2");
+
+        incrementButton.click();
+        expect(count.innerText).toBe("3");
+        
+        expect(decrementButton).toBeTruthy();
+
+        decrementButton.click();
+        expect(count.innerText).toBe("2");
+
+        decrementButton.click();
+        expect(count.innerText).toBe("1");
+
+        decrementButton.click();
+        expect(count.innerText).toBe("0");
+    });
+});
-- 
cgit v1.2.3