@gogocat/data-bind 1.11.0 → 2.0.0

package/test/css/reporter.css

@@ -1,10 +1,10 @@
-.jasmine-summary > .jasmine-suite {
-	display: block;
-    border-bottom: 1px solid #999;
-    padding-bottom: 1em;
-    margin-bottom: 1em;
-}
-
-.jasmine-suite-detail {
-	font-size: 1.2em;
+.jasmine-summary > .jasmine-suite {
+	display: block;
+    border-bottom: 1px solid #999;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+}
+
+.jasmine-suite-detail {
+	font-size: 1.2em;
 }

package/test/fixtures/dataBindBootstrap.html

@@ -32,7 +32,7 @@
     <h4 class="text-center section-title" data-bind-text="searchResultTitle">Featured service providers</h4>
     <div id="search-result-columns" class="card-columns" data-bind-tmp="{id: 'searchResultItem', data: '$root', append: true}">
         <div class="card result-item" data-index="0">
-            <img class="card-img-top result-item__img" src="bootstrap/images/pic-home.jpg" alt="Card image">
+            <img class="card-img-top result-item__img" src="images/pic-home.jpg" alt="Card image">
             <div class="card-body">
                 <h4 class="card-title">Card title that wraps to a new line</h4>
                 <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -63,7 +63,7 @@
         </div>
 
         <div class="card result-item" data-index="2">
-            <img class="card-img-top result-item__img" src="bootstrap/images/pic-deck.jpg" alt="Card image">
+            <img class="card-img-top result-item__img" src="images/pic-deck.jpg" alt="Card image">
             <div class="card-body">
                 <h4 class="card-title">Card title</h4>
                 <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>

package/test/fixtures/formBindings.html

@@ -29,7 +29,15 @@
         </div>
         <div>
             <label for="testRange">Choose a range:</label>
-            <input id="testRange" type="range" min="0" max="5" step="1" data-bind-model="testRange" data-bind-change="onTestRangeChanged">
+            <input id="testRange" 
+                type="range" 
+                min="0" 
+                max="5" 
+                step="1" 
+                data-bind-model="testRange" 
+                data-bind-change="onTestRangeChanged"
+                data-bind-input="onTestRangeInputChange"
+            >
             <label id="testRangeLabel" data-bind-text="testRange"></label>
         </div>
         <div>

package/test/globals.d.ts

@@ -0,0 +1,19 @@
+// Global test helpers and dataBind types
+declare global {
+    // dataBind global
+    const dataBind: {
+        init: (element: Element | null, viewModel: any) => any;
+        use: (plugin: any) => void;
+    };
+
+    // Test helper functions
+    function loadFixture(fixturePath: string): void;
+    function simulateInput(element: HTMLElement, value: string): void;
+    function simulateClick(element: HTMLElement): void;
+    function simulateBlur(element: HTMLElement): void;
+
+    // jQuery (used in some test fixtures)
+    const $: any;
+}
+
+export {};

package/test/helpers/testHelper.js

@@ -1,11 +1,46 @@
-/*
- * overwrite requestAnimationFrame to use setTimout.
- * Otherewise sometime unpredictable in jasmine asyn test.
- * Since request animation frame callback run when browser decide it is free (we don't know exactly when)
- */
-window.requestAnimationFrame = function(fn) {
-    return window.setTimeout(fn, 15);
-};
-window.cancelAnimationFrame = function(id) {
-    return window.clearTimeout(id);
-};
+import {afterEach} from 'vitest';
+import {readFileSync} from 'fs';
+import {resolve} from 'path';
+import dataBind from '../../src/index';
+
+/*
+ * overwrite requestAnimationFrame to use setTimeout.
+ * Otherwise sometimes unpredictable in async tests.
+ * Since request animation frame callback runs when browser decides it is free (we don't know exactly when)
+ */
+global.requestAnimationFrame = (fn) => {
+    return setTimeout(fn, 15);
+};
+global.cancelAnimationFrame = (id) => {
+    return clearTimeout(id);
+};
+
+// Make dataBind globally available for tests (like it was in Jasmine)
+global.dataBind = dataBind;
+
+// Helper function to load HTML fixtures
+global.loadFixture = (fixturePath) => {
+    const fullPath = resolve(process.cwd(), fixturePath);
+    const html = readFileSync(fullPath, 'utf-8');
+    document.body.innerHTML = html;
+};
+
+// Helper functions for tests to replace jQuery
+global.simulateInput = (element, value) => {
+    element.value = value;
+    element.dispatchEvent(new Event('input', {bubbles: true}));
+    element.dispatchEvent(new Event('change', {bubbles: true}));
+};
+
+global.simulateClick = (element) => {
+    element.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));
+};
+
+global.simulateBlur = (element) => {
+    element.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
+};
+
+// Helper to clean up DOM after each test
+afterEach(() => {
+    document.body.innerHTML = '';
+});

package/test/mocks/featureAdsResult.json

@@ -1,66 +1,66 @@
-[{
-        "id": "001",
-        "title": "Card title that wraps to a new line",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-home.jpg",
-        "bookmarked": false,
-        "numLikes": 110
-    },
-    {
-        "id": "002",
-        "title": "Card title",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 9
-    },
-    {
-        "id": "003",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "bootstrap/images/pic-deck.jpg",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "004",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "bootstrap/images/pic-carpenter.jpg",
-        "bookmarked": false,
-        "numLikes": 8,
-        "highlight": true
-    },
-    {
-        "id": "005",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 68
-    },
-    {
-        "id": "006",
-        "title": "Card title that wraps to a new line",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-bathrooms.jpg",
-        "bookmarked": true,
-        "numLikes": 99
-    },
-    {
-        "id": "007",
-        "title": "Card title",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 9
-    },
-    {
-        "id": "008",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "bootstrap/images/pic-backyard.jpg",
-        "bookmarked": false,
-        "numLikes": 24
-    }
+[{
+        "id": "001",
+        "title": "Card title that wraps to a new line",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-home.jpg",
+        "bookmarked": false,
+        "numLikes": 110
+    },
+    {
+        "id": "002",
+        "title": "Card title",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 9
+    },
+    {
+        "id": "003",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "bootstrap/images/pic-deck.jpg",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "004",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "bootstrap/images/pic-carpenter.jpg",
+        "bookmarked": false,
+        "numLikes": 8,
+        "highlight": true
+    },
+    {
+        "id": "005",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 68
+    },
+    {
+        "id": "006",
+        "title": "Card title that wraps to a new line",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-bathrooms.jpg",
+        "bookmarked": true,
+        "numLikes": 99
+    },
+    {
+        "id": "007",
+        "title": "Card title",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 9
+    },
+    {
+        "id": "008",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "bootstrap/images/pic-backyard.jpg",
+        "bookmarked": false,
+        "numLikes": 24
+    }
 ]

package/test/mocks/searchResult.json

@@ -1,58 +1,58 @@
-[{
-        "id": "001",
-        "title": "Card title that wraps to a new line",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-home.jpg",
-        "bookmarked": false,
-        "numLikes": 110
-    },
-    {
-        "id": "456",
-        "title": "Card title",
-        "description": "This card has supporting text below as a natural lead-in to additional content.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "789",
-        "title": "Sample carpemter service",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "bootstrap/images/pic-carpenter.jpg",
-        "bookmarked": false,
-        "numLikes": 8,
-        "highlight": true
-    },
-    {
-        "id": "888",
-        "title": "Sample timber floor service",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-deck.jpg",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "222",
-        "title": "Sample timber floor service",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "",
-        "bookmarked": false,
-        "numLikes": 8
-    },
-    {
-        "id": "333",
-        "title": "Sample boothroom service",
-        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
-        "image": "bootstrap/images/pic-bathrooms.jpg",
-        "bookmarked": true,
-        "numLikes": 8
-    },
-    {
-        "id": "444",
-        "title": "Sample gardening service",
-        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
-        "image": "bootstrap/images/pic-backyard.jpg",
-        "bookmarked": false,
-        "numLikes": 8
-    }
+[{
+        "id": "001",
+        "title": "Card title that wraps to a new line",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-home.jpg",
+        "bookmarked": false,
+        "numLikes": 110
+    },
+    {
+        "id": "456",
+        "title": "Card title",
+        "description": "This card has supporting text below as a natural lead-in to additional content.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "789",
+        "title": "Sample carpemter service",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "bootstrap/images/pic-carpenter.jpg",
+        "bookmarked": false,
+        "numLikes": 8,
+        "highlight": true
+    },
+    {
+        "id": "888",
+        "title": "Sample timber floor service",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-deck.jpg",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "222",
+        "title": "Sample timber floor service",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "",
+        "bookmarked": false,
+        "numLikes": 8
+    },
+    {
+        "id": "333",
+        "title": "Sample boothroom service",
+        "description": "This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.",
+        "image": "bootstrap/images/pic-bathrooms.jpg",
+        "bookmarked": true,
+        "numLikes": 8
+    },
+    {
+        "id": "444",
+        "title": "Sample gardening service",
+        "description": "This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.",
+        "image": "bootstrap/images/pic-backyard.jpg",
+        "bookmarked": false,
+        "numLikes": 8
+    }
 ]

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

@@ -1,106 +1,103 @@
-describe('Given [data-bind-comp="attr-component"] inited', () => {
-    const namespace = {};
-    const testAttr2Obj = {
-        id: 'newId',
-        ref: 'newRef2',
-    };
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(() => {
-        loadFixtures('./fixtures/attrBinding.html');
-
-        namespace.viewModel = {
-            heading: 'Test data-if-binding',
-            attr1: {
-                style: 'width:300px',
-                ref: 'newRef',
-            },
-            attr2: function($data) {
-                return testAttr2Obj;
-            },
-            updateView: function(opt) {
-                this.APP.render(opt);
-            },
-        };
-
-        namespace.myAttrComponent = dataBind.init(document.querySelector('[data-bind-comp="attr-component"]'), namespace.viewModel);
-
-        namespace.myAttrComponent.render();
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="myAttrComponent"] should have render', (done) => {
-        setTimeout(() => {
-            const $testAttr1 = document.getElementById('testAttr1');
-            expect($testAttr1.textContent).toBe(namespace.viewModel.heading);
-            done();
-        }, 200);
-    });
-
-    it('Should update testAttr1 attributes', (done) => {
-        setTimeout(function() {
-            const $testAttr1 = document.getElementById('testAttr1');
-            expect($testAttr1.getAttribute('ref')).toBe(namespace.viewModel.attr1.ref);
-            expect($testAttr1.getAttribute('style')).toBe(namespace.viewModel.attr1.style);
-            // check existing attribute untouch
-            expect($testAttr1.getAttribute('id')).toBe('testAttr1');
-            expect($testAttr1.getAttribute('class')).toBe('test');
-            done();
-        }, 200);
-    });
-
-    it('Should update testAttr2 attributes as viewModel function property', (done) => {
-        setTimeout(() => {
-            const $testAttr2 = document.getElementById(testAttr2Obj.id);
-            expect($testAttr2.getAttribute('ref')).toBe(testAttr2Obj.ref);
-            expect($testAttr2.getAttribute('id')).toBe(testAttr2Obj.id);
-            done();
-        }, 200);
-    });
-
-    it('Should update attribute when viewModel updated', (done) => {
-        const updatedRef = 'updatedRef';
-        const disabled = 'disabled';
-
-        namespace.viewModel.attr1.ref = updatedRef;
-        namespace.viewModel.attr1.disabled = disabled;
-        namespace.myAttrComponent.render();
-
-        setTimeout(() => {
-            const $testAttr1 = document.getElementById('testAttr1');
-            expect($testAttr1.getAttribute('ref')).toBe(updatedRef);
-            expect($testAttr1.getAttribute('disabled')).toBe(disabled);
-            expect($testAttr1.getAttribute('style')).toBe(namespace.viewModel.attr1.style);
-            // check existing attribute untouch
-            expect($testAttr1.getAttribute('id')).toBe('testAttr1');
-            expect($testAttr1.getAttribute('class')).toBe('test');
-            done();
-        }, 200);
-    });
-
-    it('Should remove attribute when viewModel updated', (done) => {
-        const updatedRef2 = 'updatedRef2';
-        namespace.viewModel.attr1 = {
-            ref: updatedRef2,
-        };
-
-        setTimeout(() => {
-            const $testAttr1 = document.getElementById('testAttr1');
-            expect($testAttr1.getAttribute('ref')).toBe(updatedRef2);
-            expect($testAttr1.getAttribute('style')).toBe(null);
-            // check existing attribute untouch
-            expect($testAttr1.getAttribute('id')).toBe('testAttr1');
-            expect($testAttr1.getAttribute('class')).toBe('test');
-            done();
-        }, 200);
-    });
-});
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('Given [data-bind-comp="attr-component"] inited', () => {
+    const namespace: any = {};
+    const testAttr2Obj = {
+        id: 'newId',
+        ref: 'newRef2',
+    };
+
+    beforeEach(() => {
+        loadFixture('test/fixtures/attrBinding.html');
+
+        namespace.viewModel = {
+            heading: 'Test data-if-binding',
+            attr1: {
+                style: 'width:300px',
+                ref: 'newRef',
+            },
+            attr2(_$data: any) {
+                return testAttr2Obj;
+            },
+            updateView(opt?: any) {
+                this.APP.render(opt);
+            },
+        };
+
+        namespace.myAttrComponent = dataBind.init(document.querySelector('[data-bind-comp="attr-component"]'), namespace.viewModel);
+
+        namespace.myAttrComponent.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="myAttrComponent"] should have render', async () => {
+        await waitFor(() => {
+            const $testAttr1 = document.getElementById('testAttr1')!;
+            expect($testAttr1.textContent).toBe(namespace.viewModel.heading);
+        }, {timeout: 500});
+    });
+
+    it('Should update testAttr1 attributes', async () => {
+        await waitFor(() => {
+            const $testAttr1 = document.getElementById('testAttr1')!;
+            expect($testAttr1.getAttribute('ref')).toBe(namespace.viewModel.attr1.ref);
+            expect($testAttr1.getAttribute('style')).toBe(namespace.viewModel.attr1.style);
+            // check existing attribute untouch
+            expect($testAttr1.getAttribute('id')).toBe('testAttr1');
+            expect($testAttr1.getAttribute('class')).toBe('test');
+        }, {timeout: 500});
+    });
+
+    it('Should update testAttr2 attributes as viewModel function property', async () => {
+        await waitFor(() => {
+            const $testAttr2 = document.getElementById(testAttr2Obj.id)!;
+            expect($testAttr2.getAttribute('ref')).toBe(testAttr2Obj.ref);
+            expect($testAttr2.getAttribute('id')).toBe(testAttr2Obj.id);
+        }, {timeout: 500});
+    });
+
+    it('Should update attribute when viewModel updated', async () => {
+        const updatedRef = 'updatedRef';
+        const disabled = 'disabled';
+        namespace.viewModel.attr1 = {
+            ref: updatedRef,
+            disabled,
+            style: namespace.viewModel.attr1.style,
+        };
+
+        await waitFor(() => {
+            const $testAttr1 = document.getElementById('testAttr1')!;
+            expect($testAttr1.getAttribute('ref')).toBe(updatedRef);
+            expect($testAttr1.getAttribute('disabled')).toBe(disabled);
+            expect($testAttr1.getAttribute('style')).toBe(namespace.viewModel.attr1.style);
+            // check existing attribute untouch
+            expect($testAttr1.getAttribute('id')).toBe('testAttr1');
+            expect($testAttr1.getAttribute('class')).toBe('test');
+        }, {timeout: 500});
+    });
+
+    it('Should remove attribute when viewModel updated', async () => {
+        const updatedRef2 = 'updatedRef2';
+        namespace.viewModel.attr1 = {
+            ref: updatedRef2,
+        };
+
+        await waitFor(() => {
+            const $testAttr1 = document.getElementById('testAttr1')!;
+            expect($testAttr1.getAttribute('ref')).toBe(updatedRef2);
+            expect($testAttr1.getAttribute('style')).toBe(null);
+            // check existing attribute untouch
+            expect($testAttr1.getAttribute('id')).toBe('testAttr1');
+            expect($testAttr1.getAttribute('class')).toBe('test');
+        }, {timeout: 500});
+    });
+});