🔀 Use vitest for runtime/vdom testing. (#124)

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

* implement feedback

* add comments, update doc

1 files changed, 88 insertions, 0 deletions

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