native-document 1.0.169 → 1.0.173

package/tests/integration/ui/lifecycle.test.js

@@ -0,0 +1,146 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Observable } from '../../../src/core/data/Observable';
+
+vi.mock('../../../src/core/utils/debug-manager', () => ({
+    default: { log: vi.fn(), warn: vi.fn(), error: vi.fn(), disable: vi.fn() },
+}));
+
+import { Div } from '../../../elements';
+
+// Wait for MutationObserver to fire
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+// Helper - returns the HTMLElement and a stable .nd reference
+const mkEl = (text = 'content') => {
+    const el = Div({}, text);
+    return { el, nd: el.nd };
+};
+
+describe('Lifecycle', () => {
+
+    // -- mounted() ------------------------------------------------------------
+
+    describe('mounted()', () => {
+        it('callback is called when element is inserted into DOM', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.mounted(cb);
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            expect(cb).toHaveBeenCalledOnce();
+        });
+
+        it('callback is not called before insertion', async () => {
+            const { nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.mounted(cb);
+            await tick();
+            expect(cb).not.toHaveBeenCalled();
+        });
+
+        it('multiple mounted callbacks are all called', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb1 = vi.fn();
+            const cb2 = vi.fn();
+            nd.mounted(cb1);
+            nd.mounted(cb2);
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            expect(cb1).toHaveBeenCalledOnce();
+            expect(cb2).toHaveBeenCalledOnce();
+        });
+
+        it('lifecycle({ mounted }) shorthand works', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.lifecycle({ mounted: cb });
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            expect(cb).toHaveBeenCalledOnce();
+        });
+    });
+
+    // -- unmounted() ----------------------------------------------------------
+
+    describe('unmounted()', () => {
+        it('callback is called when element is removed from DOM', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.unmounted(cb);
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            el.remove();
+            await tick();
+            expect(cb).toHaveBeenCalledOnce();
+        });
+
+        it('callback is not called before removal', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.unmounted(cb);
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            expect(cb).not.toHaveBeenCalled();
+        });
+
+        it('lifecycle({ unmounted }) shorthand works', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.lifecycle({ unmounted: cb });
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            el.remove();
+            await tick();
+            expect(cb).toHaveBeenCalledOnce();
+        });
+    });
+
+    // -- destroy() ------------------------------------------------------------
+
+    describe('destroy()', () => {
+        it('nulls the internal $element reference', () => {
+            const { nd } = mkEl('hello');
+            nd.destroy();
+            expect(nd.$element).toBeNull();
+        });
+
+        it('does not throw when called multiple times', () => {
+            const { nd } = mkEl('hello');
+            nd.destroy();
+            expect(() => nd.destroy()).not.toThrow();
+        });
+
+        it('unsubscribes from lifecycle callbacks after destroy', async () => {
+            const { el, nd } = mkEl('hello');
+            const cb = vi.fn();
+            nd.mounted(cb);
+            nd.destroy();
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            expect(cb).not.toHaveBeenCalled();
+        });
+    });
+
+    // -- destroyOnUnmount() ---------------------------------------------------
+
+    describe('destroyOnUnmount()', () => {
+        it('nulls $element when element is removed from DOM', async () => {
+            const { el, nd } = mkEl('hello');
+            nd.destroyOnUnmount();
+            document.body.innerHTML = '';
+            document.body.appendChild(el);
+            await tick();
+            el.remove();
+            await tick();
+            expect(nd.$element).toBeNull();
+        });
+    });
+
+});

package/tests/integration/ui/show-if.test.js

@@ -0,0 +1,168 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Observable } from '../../../src/core/data/Observable';
+
+vi.mock('../../../src/core/utils/debug-manager', () => ({
+    default: { log: vi.fn(), warn: vi.fn(), error: vi.fn(), disable: vi.fn() },
+}));
+
+// Initialize NDElement prototypes (toNdElement, nd, etc.)
+import { Div, ShowIf, HideIf, HideIfNot } from '../../../elements';
+
+// Helper - create a NativeDocument Div element (requires toNdElement prototype)
+const el = (text = 'content') => Div({}, text);
+
+// Mount anchor into the document to enable DOM queries
+const mount = (anchor) => {
+    document.body.innerHTML = '';
+    document.body.appendChild(anchor);
+    return document.body;
+};
+
+describe('ShowIf', () => {
+
+    // -- static boolean -------------------------------------------------------
+
+    describe('static boolean condition', () => {
+        it('returns the element when condition is true', () => {
+            const result = ShowIf(true, el('hello'));
+            expect(result).not.toBeNull();
+        });
+
+        it('returns null when condition is false', () => {
+            const result = ShowIf(false, el('hello'));
+            expect(result).toBeNull();
+        });
+    });
+
+    // -- observable condition -------------------------------------------------
+
+    describe('observable condition', () => {
+        it('renders content when condition is initially true', () => {
+            const visible = Observable(true);
+            const anchor  = ShowIf(visible, el('hello'));
+            const body    = mount(anchor);
+            expect(body.textContent).toContain('hello');
+        });
+
+        it('does not render content when condition is initially false', () => {
+            const visible = Observable(false);
+            const anchor  = ShowIf(visible, el('hello'));
+            const body    = mount(anchor);
+            expect(body.textContent).not.toContain('hello');
+        });
+
+        it('mounts content when observable changes to true', () => {
+            const visible = Observable(false);
+            const anchor  = ShowIf(visible, el('hello'));
+            const body    = mount(anchor);
+            visible.set(true);
+            expect(body.textContent).toContain('hello');
+        });
+
+        it('unmounts content when observable changes to false', () => {
+            const visible = Observable(true);
+            const anchor  = ShowIf(visible, el('hello'));
+            const body    = mount(anchor);
+            visible.set(false);
+            expect(body.textContent).not.toContain('hello');
+        });
+
+        it('remounts content on second true', () => {
+            const visible = Observable(true);
+            const anchor  = ShowIf(visible, el('hello'));
+            const body    = mount(anchor);
+            visible.set(false);
+            visible.set(true);
+            expect(body.textContent).toContain('hello');
+        });
+    });
+
+    // -- factory child --------------------------------------------------------
+
+    describe('factory child', () => {
+        it('accepts a function as child', () => {
+            const visible = Observable(true);
+            const factory = () => el('from factory');
+            const anchor  = ShowIf(visible, factory);
+            const body    = mount(anchor);
+            expect(body.textContent).toContain('from factory');
+        });
+
+        it('shouldKeepInCache=false re-creates element on each mount', () => {
+            let callCount = 0;
+            const visible = Observable(false);
+            const factory = () => { callCount++; return el('dynamic'); };
+            ShowIf(visible, factory, { shouldKeepInCache: false });
+            visible.set(true);
+            visible.set(false);
+            visible.set(true);
+            expect(callCount).toBe(2);
+        });
+
+        it('shouldKeepInCache=true (default) creates element only once', () => {
+            let callCount = 0;
+            const visible = Observable(false);
+            const factory = () => { callCount++; return el('cached'); };
+            ShowIf(visible, factory, { shouldKeepInCache: true });
+            visible.set(true);
+            visible.set(false);
+            visible.set(true);
+            expect(callCount).toBe(1);
+        });
+    });
+
+    // -- non-observable condition ---------------------------------------------
+
+    describe('non-observable condition', () => {
+        it('does not throw for invalid condition type', () => {
+            // DebugManager.warn is already mocked via vi.mock at the top
+            expect(() => ShowIf('invalid', el())).not.toThrow();
+        });
+    });
+
+});
+
+// -- HideIf ------------------------------------------------------------------
+
+describe('HideIf', () => {
+    it('hides content when condition is true', () => {
+        const flag   = Observable(true);
+        const anchor = HideIf(flag, el('hidden'));
+        const body   = mount(anchor);
+        expect(body.textContent).not.toContain('hidden');
+    });
+
+    it('shows content when condition is false', () => {
+        const flag   = Observable(false);
+        const anchor = HideIf(flag, el('visible'));
+        const body   = mount(anchor);
+        expect(body.textContent).toContain('visible');
+    });
+
+    it('reacts when condition changes', () => {
+        const flag   = Observable(false);
+        const anchor = HideIf(flag, el('content'));
+        const body   = mount(anchor);
+        expect(body.textContent).toContain('content');
+        flag.set(true);
+        expect(body.textContent).not.toContain('content');
+    });
+});
+
+// -- HideIfNot ---------------------------------------------------------------
+
+describe('HideIfNot', () => {
+    it('shows content when condition is true (same as ShowIf)', () => {
+        const visible = Observable(true);
+        const anchor  = HideIfNot(visible, el('shown'));
+        const body    = mount(anchor);
+        expect(body.textContent).toContain('shown');
+    });
+
+    it('hides content when condition is false', () => {
+        const visible = Observable(false);
+        const anchor  = HideIfNot(visible, el('shown'));
+        const body    = mount(anchor);
+        expect(body.textContent).not.toContain('shown');
+    });
+});