native-document 1.0.169 → 1.0.172

package/tests/integration/ui/for-each-array.test.js

@@ -0,0 +1,167 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Observable } from '../../../src/core/data/Observable';
+import ObservableArray from '../../../src/core/data/ObservableArray';
+
+vi.mock('../../../src/core/utils/debug-manager', () => ({
+    default: { log: vi.fn(), warn: vi.fn(), error: vi.fn(), disable: vi.fn() },
+}));
+
+import { Div, Span, ForEachArray } from '../../../elements';
+
+const mount = (anchor) => {
+    document.body.innerHTML = '';
+    document.body.appendChild(anchor);
+    return document.body;
+};
+
+const items = (arr = []) => new ObservableArray(arr);
+
+describe('ForEachArray', () => {
+
+    // -- static array ---------------------------------------------------------
+
+    describe('static array', () => {
+        it('renders one element per item', () => {
+            const anchor = ForEachArray(['a', 'b', 'c'], (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(3);
+        });
+
+        it('renders items in order', () => {
+            const anchor = ForEachArray(['x', 'y', 'z'], (item) => Div({}, item));
+            const body   = mount(anchor);
+            const divs   = body.querySelectorAll('div');
+            expect(divs[0].textContent).toBe('x');
+            expect(divs[1].textContent).toBe('y');
+            expect(divs[2].textContent).toBe('z');
+        });
+
+        it('renders empty array without error', () => {
+            const anchor = ForEachArray([], (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(0);
+        });
+    });
+
+    // -- ObservableArray initial render ---------------------------------------
+
+    describe('ObservableArray initial render', () => {
+        it('renders items from initial ObservableArray', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(3);
+        });
+
+        it('renders empty ObservableArray without error', () => {
+            const obs    = items([]);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            expect(body.querySelectorAll('div').length).toBe(0);
+        });
+    });
+
+    // -- push() ---------------------------------------------------------------
+
+    describe('push()', () => {
+        it('adds a rendered element to the DOM', () => {
+            const obs    = items(['a', 'b']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.push('c');
+            expect(body.querySelectorAll('div').length).toBe(3);
+        });
+
+        it('appended item appears last', () => {
+            const obs    = items(['a', 'b']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.push('c');
+            const divs = body.querySelectorAll('div');
+            expect(divs[divs.length - 1].textContent).toBe('c');
+        });
+    });
+
+    // -- removeItem() ---------------------------------------------------------
+
+    describe('removeItem()', () => {
+        it('removes the corresponding element', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.removeItem('b');
+            expect(body.querySelectorAll('div').length).toBe(2);
+            expect(body.textContent).not.toContain('b');
+        });
+    });
+
+    // -- clear() --------------------------------------------------------------
+
+    describe('clear()', () => {
+        it('removes all elements', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.clear();
+            expect(body.querySelectorAll('div').length).toBe(0);
+        });
+    });
+
+    // -- set() ----------------------------------------------------------------
+
+    describe('set()', () => {
+        it('replaces all elements', () => {
+            const obs    = items(['a', 'b']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.set(['x', 'y', 'z']);
+            const divs = body.querySelectorAll('div');
+            expect(divs.length).toBe(3);
+            expect(divs[0].textContent).toBe('x');
+        });
+    });
+
+    // -- swap() ---------------------------------------------------------------
+
+    describe('swap()', () => {
+        it('swaps two items in the DOM', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.swap(0, 2);
+            const divs = body.querySelectorAll('div');
+            expect(divs[0].textContent).toBe('c');
+            expect(divs[2].textContent).toBe('a');
+        });
+    });
+
+    // -- index observable -----------------------------------------------------
+
+    describe('index observable', () => {
+        it('passes index observable when callback has 2 params', () => {
+            const obs      = items(['a', 'b', 'c']);
+            const indices  = [];
+            const anchor   = ForEachArray(obs, (item, index) => {
+                indices.push(index);
+                return Div({}, item);
+            });
+            mount(anchor);
+            expect(indices.length).toBe(3);
+        });
+    });
+
+    // -- order preservation ---------------------------------------------------
+
+    describe('order preservation', () => {
+        it('preserves order after multiple mutations', () => {
+            const obs    = items(['a', 'b', 'c']);
+            const anchor = ForEachArray(obs, (item) => Div({}, item));
+            const body   = mount(anchor);
+            obs.push('d');
+            obs.removeItem('b');
+            const divs = body.querySelectorAll('div');
+            expect([...divs].map((d) => d.textContent)).toEqual(['a', 'c', 'd']);
+        });
+    });
+
+});

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