@gogocat/data-bind 1.12.0 → 2.0.0

package/test/specs/blurBinding.spec.ts

@@ -0,0 +1,60 @@
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('Given [data-bind-comp="blur-component"] initised', () => {
+    const namespace: any = {};
+    const testBlurValue = 'onBlur called';
+
+    beforeEach(async () => {
+        loadFixture('test/fixtures/blurBinding.html');
+
+        namespace.viewModel = {
+            heading: 'blur component test',
+            myData: 'blur component',
+            onFocusFn(_e: Event, _$element: any) {},
+            onBlurFn(_e: Event, _$element: any) {
+                this.myData = testBlurValue;
+                this.updateView();
+            },
+            updateView(opt?: any) {
+                this.APP.render(opt);
+            },
+        };
+
+        namespace.blurComponent = dataBind.init(document.querySelector('[data-bind-comp="blur-component"]'), namespace.viewModel);
+        await namespace.blurComponent.render();
+    });
+
+    afterEach(() => {
+        // clean up app
+        // clean up all app/components
+        for (const prop in namespace) {
+            if (Object.prototype.hasOwnProperty.call(namespace, prop)) {
+                delete namespace[prop];
+            }
+        }
+    });
+
+    it('should render heading defined in viewModel', async () => {
+        await waitFor(() => {
+            expect(document.getElementById('heading')!.textContent).toBe(namespace.viewModel.heading);
+            expect((document.getElementById('blurInput') as HTMLInputElement).value).toBe(namespace.viewModel.myData);
+        }, {timeout: 500});
+    });
+
+    it('should update "blurInput" value after onBlur', async () => {
+        await waitFor(() => {
+            const $blurInput = document.getElementById('blurInput');
+            expect($blurInput).not.toBeNull();
+        }, {timeout: 500});
+
+        const $blurInput = document.getElementById('blurInput')!;
+
+        // Use the test helper to simulate blur event
+        simulateBlur($blurInput);
+
+        await waitFor(() => {
+            expect(($blurInput as HTMLInputElement).value).toBe(testBlurValue);
+        }, {timeout: 500});
+    });
+});

package/test/specs/chainableUse.spec.ts

@@ -0,0 +1,125 @@
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+
+describe('Chainable use() API', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should support chaining use() with init()', () => {
+        document.body.innerHTML = `
+            <div id="app" data-bind-comp="test">
+                <span data-bind-text="value"></span>
+            </div>
+        `;
+
+        const viewModel = {
+            value: 'Hello',
+        };
+
+        // Chain use() with init()
+        const app = (window as any).dataBind
+            .use({reactive: false})
+            .init(document.getElementById('app'), viewModel);
+
+        expect(app).toBeDefined();
+        expect(app.isReactive).toBe(false);
+    });
+
+    it('should support multiple use() calls in chain', () => {
+        document.body.innerHTML = `
+            <div id="app" data-bind-comp="test">
+                <span data-bind-text="value"></span>
+            </div>
+        `;
+
+        const viewModel = {
+            value: 'Hello',
+        };
+
+        // Multiple chained use() calls (last one wins)
+        const app = (window as any).dataBind
+            .use({reactive: true})
+            .use({trackChanges: true})
+            .use({reactive: false})
+            .init(document.getElementById('app'), viewModel);
+
+        expect(app).toBeDefined();
+        expect(app.isReactive).toBe(false);
+    });
+
+    it('should work with traditional use() then init() pattern', () => {
+        document.body.innerHTML = `
+            <div id="app" data-bind-comp="test">
+                <span data-bind-text="value"></span>
+            </div>
+        `;
+
+        const viewModel = {
+            value: 'Hello',
+        };
+
+        // Traditional pattern (still works)
+        (window as any).dataBind.use({reactive: false});
+        const app = (window as any).dataBind.init(
+            document.getElementById('app'),
+            viewModel,
+        );
+
+        expect(app).toBeDefined();
+        expect(app.isReactive).toBe(false);
+    });
+
+    it('should allow instance options to override chained use() settings', () => {
+        document.body.innerHTML = `
+            <div id="app" data-bind-comp="test">
+                <span data-bind-text="value"></span>
+            </div>
+        `;
+
+        const viewModel = {
+            value: 'Hello',
+        };
+
+        // use() sets reactive: false, but instance option overrides to true
+        const app = (window as any).dataBind
+            .use({reactive: false})
+            .init(document.getElementById('app'), viewModel, {reactive: true});
+
+        expect(app).toBeDefined();
+        expect(app.isReactive).toBe(true);
+    });
+
+    it('should reset to default after using chained use()', () => {
+        document.body.innerHTML = `
+            <div id="app1" data-bind-comp="test1">
+                <span data-bind-text="value"></span>
+            </div>
+            <div id="app2" data-bind-comp="test2">
+                <span data-bind-text="value"></span>
+            </div>
+        `;
+
+        const viewModel = {value: 'Hello'};
+
+        // First component with chained use
+        const app1 = (window as any).dataBind
+            .use({reactive: false})
+            .init(document.getElementById('app1'), viewModel);
+
+        // Second component should inherit the global setting from use()
+        const app2 = (window as any).dataBind.init(
+            document.getElementById('app2'),
+            viewModel,
+        );
+
+        expect(app1.isReactive).toBe(false);
+        expect(app2.isReactive).toBe(false); // Global setting persists
+
+        // Reset to default
+        (window as any).dataBind.use({reactive: true});
+    });
+});

package/test/specs/clickBinding.spec.ts

@@ -0,0 +1,194 @@
+import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('Click Binding - Event Handler Deduplication', () => {
+    let namespace: any;
+
+    const loadFixture = (fixturePath: string) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', fixturePath, false);
+        xhr.send();
+        document.body.innerHTML = xhr.responseText;
+    };
+
+    beforeEach(() => {
+        namespace = (window as any).namespace || {};
+        (window as any).namespace = namespace;
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = '';
+        delete (window as any).namespace;
+    });
+
+    it('should only call click handler once per click, even after re-render', async () => {
+        // Create a simple fixture
+        document.body.innerHTML = `
+            <div data-bind-comp="test-component">
+                <button id="testButton" data-bind-click="handleClick">Click Me</button>
+                <span id="counter" data-bind-text="count"></span>
+            </div>
+        `;
+
+        const clickSpy = vi.fn();
+        const viewModel = {
+            count: 0,
+            handleClick() {
+                clickSpy();
+                this.count++;
+            },
+        };
+
+        const component = (window as any).dataBind.init(
+            document.querySelector('[data-bind-comp="test-component"]'),
+            viewModel,
+        );
+
+        await component.render();
+
+        const button = document.getElementById('testButton') as HTMLButtonElement;
+
+        // First click
+        button.click();
+
+        await waitFor(() => {
+            expect(clickSpy).toHaveBeenCalledTimes(1);
+            expect(component.viewModel.count).toBe(1);
+        });
+
+        // Wait for reactive render to complete
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Second click - should still only call once
+        clickSpy.mockClear();
+        button.click();
+
+        await waitFor(() => {
+            expect(clickSpy).toHaveBeenCalledTimes(1);
+            expect(component.viewModel.count).toBe(2);
+        });
+    });
+
+    it('should properly remove old handlers when re-rendering with template binding', async () => {
+        document.body.innerHTML = `
+            <div data-bind-comp="test-component">
+                <div data-bind-for="item in items">
+                    <button class="item-button" data-bind-click="$root.handleItemClick($index)">
+                        Item <span data-bind-text="$index"></span>
+                    </button>
+                </div>
+            </div>
+        `;
+
+        const clickSpy = vi.fn();
+        const viewModel = {
+            items: [1, 2, 3],
+            handleItemClick(e: Event, el: HTMLElement, index: number) {
+                clickSpy(index);
+            },
+        };
+
+        const component = (window as any).dataBind.init(
+            document.querySelector('[data-bind-comp="test-component"]'),
+            viewModel,
+        );
+
+        await component.render();
+
+        const buttons = document.querySelectorAll('.item-button') as NodeListOf<HTMLButtonElement>;
+        expect(buttons.length).toBe(3);
+
+        // Click first button
+        buttons[0].click();
+
+        await waitFor(() => {
+            expect(clickSpy).toHaveBeenCalledTimes(1);
+            expect(clickSpy).toHaveBeenCalledWith(0);
+        });
+
+        // Wait for any reactive updates
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Update items to trigger re-render
+        clickSpy.mockClear();
+        component.viewModel.items = [1, 2, 3, 4];
+
+        await waitFor(() => {
+            const newButtons = document.querySelectorAll('.item-button') as NodeListOf<HTMLButtonElement>;
+            expect(newButtons.length).toBe(4);
+        });
+
+        // Click first button again - should only fire once
+        const newButtons = document.querySelectorAll('.item-button') as NodeListOf<HTMLButtonElement>;
+        newButtons[0].click();
+
+        await waitFor(() => {
+            expect(clickSpy).toHaveBeenCalledTimes(1);
+            expect(clickSpy).toHaveBeenCalledWith(0);
+        });
+    });
+
+    it('should handle multiple event types without conflicts', async () => {
+        document.body.innerHTML = `
+            <div data-bind-comp="test-component">
+                <button
+                    id="multiEventButton"
+                    data-bind-click="handleClick"
+                    data-bind-dblclick="handleDblClick"
+                >Multi Event Button</button>
+                <span id="clickCount" data-bind-text="clickCount"></span>
+                <span id="dblClickCount" data-bind-text="dblClickCount"></span>
+            </div>
+        `;
+
+        const viewModel = {
+            clickCount: 0,
+            dblClickCount: 0,
+            handleClick() {
+                this.clickCount++;
+            },
+            handleDblClick() {
+                this.dblClickCount++;
+            },
+        };
+
+        const component = (window as any).dataBind.init(
+            document.querySelector('[data-bind-comp="test-component"]'),
+            viewModel,
+        );
+
+        await component.render();
+
+        const button = document.getElementById('multiEventButton') as HTMLButtonElement;
+
+        // Single click
+        button.click();
+
+        await waitFor(() => {
+            expect(component.viewModel.clickCount).toBe(1);
+            expect(component.viewModel.dblClickCount).toBe(0);
+        });
+
+        // Wait for reactive render
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Double click
+        button.dispatchEvent(new MouseEvent('dblclick', {bubbles: true}));
+
+        await waitFor(() => {
+            expect(component.viewModel.clickCount).toBe(1);
+            expect(component.viewModel.dblClickCount).toBe(1);
+        });
+
+        // Wait for reactive render
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Another click - should still only increment by 1
+        button.click();
+
+        await waitFor(() => {
+            expect(component.viewModel.clickCount).toBe(2);
+            expect(component.viewModel.dblClickCount).toBe(1);
+        });
+    });
+});

package/test/specs/{cssBinding.spec.js → cssBinding.spec.ts}

@@ -1,79 +1,72 @@
-describe('Given [data-bind-comp="css-component"] inited', () => {
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(() => {
-        loadFixtures('./fixtures/cssBinding.html');
-
-        namespace.viewModel = {
-            heading: 'myCssComponent',
-            testOneCss: {
-                a: true,
-                b: true,
-                c: true,
-            },
-            getTestTwoCss: function($data, oldValue, el) {
-                return {
-                    e: true,
-                    f: true,
-                };
-            },
-            updateView: function(opt) {
-                this.APP.render(opt);
-            },
-        };
-
-        namespace.myCssComponent = dataBind.init(document.querySelector('[data-bind-comp="css-component"]'), namespace.viewModel);
-
-        namespace.myCssComponent.render();
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="myCssComponent"] should have render', (done) => {
-        setTimeout(() => {
-            const $heading = document.getElementById('myCssComponentHeading');
-            expect($heading.textContent).toBe(namespace.viewModel.heading);
-            done();
-        }, 200);
-    });
-
-    it('should apply css bindings', (done) => {
-        setTimeout(() => {
-            const $testCssOne = document.getElementById('testCssOne');
-            const testCssOneClassName = $testCssOne.className;
-            const $testCssTwo = document.getElementById('testCssTwo');
-            const testCssTwoClassName = $testCssTwo.className;
-
-            expect(testCssOneClassName).toBe('testCssOne a b c');
-            expect(testCssTwoClassName).toBe('testCssTwo x y z e f');
-            done();
-        }, 200);
-    });
-
-    it('should remove duplicated css', (done) => {
-        namespace.viewModel.testOneCss = {
-            a: true,
-            b: false,
-            c: true,
-            testCssOne: true,
-        };
-        namespace.viewModel.updateView();
-
-        setTimeout(() => {
-            const $testCssOne = document.getElementById('testCssOne');
-            const testCssOneClassName = $testCssOne.className;
-
-            expect(testCssOneClassName).toBe('testCssOne a c');
-            done();
-        }, 200);
-    });
-});
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('Given [data-bind-comp="css-component"] inited', () => {
+    const namespace: any = {};
+
+    beforeEach(() => {
+        loadFixture('test/fixtures/cssBinding.html');
+
+        namespace.viewModel = {
+            heading: 'myCssComponent',
+            testOneCss: {
+                a: true,
+                b: true,
+                c: true,
+            },
+            getTestTwoCss(_$data: any, _oldValue: any, _el: any) {
+                return {
+                    e: true,
+                    f: true,
+                };
+            },
+            updateView(opt?: any) {
+                this.APP.render(opt);
+            },
+        };
+
+        namespace.myCssComponent = dataBind.init(document.querySelector('[data-bind-comp="css-component"]'), namespace.viewModel);
+
+        namespace.myCssComponent.render();
+    });
+
+    afterEach(() => {
+        // clean up all app/components
+        for (const prop in namespace) {
+            if (Object.prototype.hasOwnProperty.call(namespace, prop)) {
+                delete namespace[prop];
+            }
+        }
+    });
+
+    it('Then [data-bind-comp="myCssComponent"] should have render', async () => {
+        await waitFor(() => {
+            const $heading = document.getElementById('myCssComponentHeading')!;
+            expect($heading.textContent).toBe(namespace.viewModel.heading);
+        }, {timeout: 500});
+    });
+
+    it('should apply css bindings', async () => {
+        await waitFor(() => {
+            const $testCssOne = document.getElementById('testCssOne')!;
+            const testCssOneClassName = $testCssOne.className;
+            const $testCssTwo = document.getElementById('testCssTwo')!;
+            const testCssTwoClassName = $testCssTwo.className;
+
+            expect(testCssOneClassName).toBe('testCssOne a b c');
+            expect(testCssTwoClassName).toBe('testCssTwo x y z e f');
+        }, {timeout: 500});
+    });
+
+    it('should remove duplicated css', async () => {
+        namespace.viewModel.testOneCss.b = false;
+        namespace.viewModel.updateView();
+
+        await waitFor(() => {
+            const $testCssOne = document.getElementById('testCssOne')!;
+            const testCssOneClassName = $testCssOne.className;
+
+            expect(testCssOneClassName).toBe('testCssOne a c');
+        }, {timeout: 500});
+    });
+});