🔀 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, 150 insertions, 0 deletions

diff --git a/test/vdom.ffi.test.js b/test/vdom.ffi.test.js
new file mode 100644
index 0000000..2614c71
--- /dev/null
+++ b/test/vdom.ffi.test.js
@@ -0,0 +1,150 @@
+import { beforeEach, describe, expect, test } from "vitest";
+import { setupDOM } from "./utils.js";
+
+import { morph } from "@root/src/vdom.ffi.mjs";
+
+// built via npm script "build:test:vdom"
+import {
+  disabled_attr_test,
+  dynamic_content_test,
+  fragment_test,
+  keyed_test,
+  smoke_test,
+} from "../test-apps/vdom-test-templates/build/dev/javascript/app/client_test.mjs";
+
+let appEl;
+beforeEach(() => {
+  setupDOM();
+  appEl = document.getElementById("app");
+});
+
+// TEST ------------------------------------------------------------------------
+
+const singleMorphSnapshot = (name, template) => {
+  appEl = morph(appEl, template);
+
+  const currentState = document.toString();
+
+  expect(currentState).toMatchSnapshot(name);
+};
+
+describe("vdom morph", () => {
+  test(`should render smoke test with vdom morph`, () => {
+    const template = smoke_test();
+
+    singleMorphSnapshot("smoke_test", template);
+  });
+
+  test(`should render using vdom morph with fragments`, () => {
+    const template = fragment_test();
+
+    singleMorphSnapshot("fragment_test", template);
+  });
+
+  test(`should render using vdom morph with keys`, () => {
+    const template = keyed_test();
+
+    singleMorphSnapshot("fragment_test", template);
+  });
+
+  test(`should be stable when vdom morph is called multiple times with no changes using fragment`, () => {
+    const template = fragment_test();
+    appEl = morph(appEl, template);
+
+    const initialState = document.toString();
+
+    const states = [];
+    for (let i = 0; i < 5; i++) {
+      appEl = morph(appEl, template);
+      states.push(document.toString());
+    }
+
+    states.forEach((state) => {
+      expect(state).toEqual(initialState);
+    });
+  });
+
+  test(`should be stable when vdom morph is called multiple times with no changes using keys`, () => {
+    const template = keyed_test();
+    appEl = morph(appEl, template);
+
+    const initialState = document.toString();
+
+    const states = [];
+    for (let i = 0; i < 5; i++) {
+      appEl = morph(appEl, template);
+      states.push(document.toString());
+    }
+
+    states.forEach((state) => {
+      expect(state).toEqual(initialState);
+    });
+  });
+
+  test(`should render updated templates`, () => {
+    const initialTemplate = dynamic_content_test(0, "initial_name");
+
+    appEl = morph(appEl, initialTemplate);
+
+    const initialState = document.toString();
+
+    expect(initialState).toContain("0");
+    expect(initialState).toContain("initial_name");
+
+    const updatedtemplate = dynamic_content_test(56, "updated_name");
+
+    appEl = morph(appEl, updatedtemplate);
+
+    const updatedState = document.toString();
+
+    expect(updatedState).toContain("56");
+    expect(updatedState).toContain("updated_name");
+  });
+});
+
+describe("vdom morph attribute", () => {
+  describe("disabled", () => {
+    test("should not be disabled when is_disabled is false", () => {
+      const template = disabled_attr_test(false);
+  
+      appEl = morph(appEl, template);
+      
+      const domResult = document.toString();
+
+      expect(domResult).toContain("input");
+      expect(domResult).not.toContain("disabled");
+    });
+  
+    test("should be disabled when is_disabled is true", () => {
+      const template = disabled_attr_test(true);
+  
+      appEl = morph(appEl, template);
+      
+      const domResult = document.toString();
+
+      expect(domResult).toContain("input");
+      expect(domResult).toContain("disabled");
+    });
+
+
+    // this fails today
+    test.skip("should be stable when disabled attribute does not change", () => {
+      const template = disabled_attr_test(true);
+  
+      appEl = morph(appEl, template);
+  
+      const initialState = document.toString();
+  
+      const states = [];
+      for (let i = 0; i < 5; i++) {
+        appEl = morph(appEl, template);
+        states.push(document.toString());
+      }
+  
+      states.forEach((state) => {
+        expect(state).toEqual(initialState);
+      });
+    });
+  });
+});
+