CORE-10 Add tests

package.json

@@ -13,6 +13,7 @@
   "private": false,
   "dependencies": {},
   "devDependencies": {
+    "@happy-dom/global-registrator": "^13.3.8",
     "@types/bun": "latest",
     "typescript": "^5.3.3"
   },

test/application.test.ts

@@ -0,0 +1,62 @@
+// noinspection ES6PreferShortImport
+
+import {expect, test} from "bun:test";
+import {View} from "../src/ui/view";
+import {state, State} from "../src/state";
+import {mg, MgDiv} from "../src/ui/node_type";
+import {Magnolia} from "../src/index";
+import {init_happy_dom} from "./happy_dom";
+
+init_happy_dom({
+    url: "http://localhost"
+});
+
+test('application', () => {
+    document.body.innerHTML = `<div id="root"></div>`;
+
+    const root: HTMLElement | null = document.getElementById('root');
+
+    if (root === null) {
+        throw new Error("Application root element not found");
+    }
+
+    function root_view(): View {
+        const view: View = new View();
+
+        // State management
+        const counter: State<number> = state(0);
+        const inc_counter: () => void = () => counter.set(counter.get() + 1);
+        const clicked_times: State<string> = counter.map((value: number): string => `Clicked ${value} times`);
+
+        // View composition
+        const div: MgDiv = mg.div();
+        mg.p().bind_text(clicked_times).child_of(div);
+        mg.button("+").on_click(inc_counter).id("button").child_of(div);
+
+        return view.add_child(div);
+    }
+
+    function fallback_view(): View {
+        const view: View = new View();
+
+        const div: MgDiv = mg.div();
+        mg.p("404 Not Found!").child_of(div);
+
+        return view.add_child(div);
+    }
+
+    const magnolia: Magnolia = new Magnolia(root);
+
+    magnolia.router().route("/", root_view);
+    magnolia.router().fallback_to(fallback_view);
+
+    magnolia.init();
+
+
+    expect(document.body.innerHTML).toEqual(`<div id="root"><div><p>Clicked 0 times</p><button id="button">+</button></div></div>`)
+    document.getElementById("button")?.click();
+    expect(document.body.innerHTML).toEqual(`<div id="root"><div><p>Clicked 1 times</p><button id="button">+</button></div></div>`)
+
+    magnolia.router().navigate("/non-existent-path");
+    expect(document.body.innerHTML).toEqual(`<div id="root"><div><p>404 Not Found!</p></div></div>`)
+});

test/happy_dom.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import {GlobalRegistrator} from "@happy-dom/global-registrator";
+// @ts-ignore
+import type {IOptionalBrowserSettings} from "happy-dom";
+
+export function init_happy_dom(
+    options?: {
+        width?: number;
+        height?: number;
+        url?: string;
+        settings?: IOptionalBrowserSettings;
+    }
+): void {
+    try {
+        GlobalRegistrator.unregister();
+    } catch (exception) {}
+
+
+    GlobalRegistrator.register(options);
+    console.log("[init] Happy DOM initialized");
+}

test/node.test.ts

@@ -0,0 +1,31 @@
+import {expect, test} from "bun:test";
+import {mg, MgParagraph} from "../src/ui/node_type";
+import {State, state} from "../src/state";
+import {init_happy_dom} from "./happy_dom";
+
+init_happy_dom()
+
+test('style bind', () => {
+    document.body.innerHTML = `<div id="root"></div>`;
+    const root: HTMLElement = document.getElementById("root")!;
+
+    const classes: State<string[]> = state(["one"])
+
+    const node: MgParagraph = mg.p("Hello world!");
+    node.mount(root, null);
+    node.bind_style(classes)
+
+    expect(node.element().classList.contains("one")).toEqual(true);
+
+    classes.set(["one", "two"])
+    expect(node.element().classList.contains("one")).toEqual(true);
+    expect(node.element().classList.contains("two")).toEqual(true);
+
+    classes.set(["two"])
+    expect(node.element().classList.contains("one")).toEqual(false);
+    expect(node.element().classList.contains("two")).toEqual(true);
+
+    classes.set([])
+    expect(node.element().classList.contains("one")).toEqual(false);
+    expect(node.element().classList.contains("two")).toEqual(false);
+});

tsconfig.json

@@ -1,14 +1,15 @@
 {
   "compilerOptions": {
-    "target": "ES2018",
-    "module": "ESNext",
+    "target": "ES2022",
+    "module": "NodeNext",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
     "declaration": true,
     "outDir": "./dist",
-    "moduleResolution": "Classic"
+    "moduleResolution": "NodeNext",
+    "moduleDetection": "force"
   },
   "include": [
     "src/**/*"