@gogocat/data-bind 1.12.0 → 2.0.0

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

@@ -1,76 +1,75 @@
-/* eslint-disable max-len */
-describe('Given [data-bind-comp="filter-component"] inited', () => {
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(function(done) {
-        loadFixtures('./fixtures/filters.html');
-
-        namespace.viewModel = {
-            renderIntro: false,
-            heading: 'Test data-if-binding',
-            description: 'This is intro text',
-            discountRate: 0.8,
-            gstRate: 1.1,
-            story: {
-                title: 'Hansel and Gretel',
-                description:
-                    '"Hansel and Gretel" (also known as Hansel and Grettel, Hansel and Grethel, or Little Brother and Little Sister) is a well-known fairy tale of German origin.',
-                link: 'https://www.google.com.au/search?q=Hansel+and+Gretel',
-                price: 100,
-            },
-            toDiscount: function(value) {
-                return Number(value) * this.discountRate;
-            },
-            addGst: function(value) {
-                return Number(value) * this.gstRate;
-            },
-            updateView: function(opt) {
-                return this.APP.render(opt);
-            },
-        };
-
-        namespace.filterComponent = dataBind.init(document.querySelector('[data-bind-comp="filter-component"]'), namespace.viewModel);
-        namespace.filterComponent.render().then(() => done());
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="filter-component"] should render story with once filter and not intro', () => {
-        const $intro = document.getElementById('intro');
-        const $story = document.getElementById('story');
-
-        expect($intro).toBe(null);
-        expect($story).not.toBe(null);
-        expect($story.firstElementChild).not.toBe(null);
-    });
-
-    it('Should render intro but not story section after update viewModel', (done) => {
-        namespace.filterComponent.viewModel.renderIntro = true;
-        namespace.filterComponent.viewModel.updateView().then(() => {
-            const $intro = document.getElementById('intro');
-            const $story = document.getElementById('story');
-            expect($intro).toBe(null);
-            expect($story).toBe(null);
-            done();
-        });
-    });
-
-    it('Should render story and stroyPrice pass through filters | toDiscount | addGst', () => {
-        const $story = document.getElementById('story');
-        const stroyPrice = document.getElementById('stroyPrice').textContent;
-        const discountedPrice = namespace.viewModel.toDiscount(namespace.viewModel.story.price);
-        const finalPrice = namespace.viewModel.addGst(discountedPrice);
-
-        expect($story).not.toBe(null);
-        expect(Number(stroyPrice)).toBe(finalPrice);
-    });
-});
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+
+
+describe('Given [data-bind-comp="filter-component"] inited', () => {
+    const namespace: any = {};
+
+    beforeEach(async () => {
+        loadFixture('test/fixtures/filters.html');
+
+        namespace.viewModel = {
+            renderIntro: false,
+            heading: 'Test data-if-binding',
+            description: 'This is intro text',
+            discountRate: 0.8,
+            gstRate: 1.1,
+            story: {
+                title: 'Hansel and Gretel',
+                description:
+                    '"Hansel and Gretel" (also known as Hansel and Grettel, Hansel and Grethel, or Little Brother and Little Sister) is a well-known fairy tale of German origin.',
+                link: 'https://www.google.com.au/search?q=Hansel+and+Gretel',
+                price: 100,
+            },
+            toDiscount(value: any) {
+                return Number(value) * this.discountRate;
+            },
+            addGst(value: any) {
+                return Number(value) * this.gstRate;
+            },
+            updateView(opt?: any) {
+                return this.APP.render(opt);
+            },
+        };
+
+        namespace.filterComponent = dataBind.init(document.querySelector('[data-bind-comp="filter-component"]'), namespace.viewModel);
+        await namespace.filterComponent.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="filter-component"] should render story with once filter and not intro', () => {
+        const $intro = document.getElementById('intro');
+        const $story = document.getElementById('story');
+
+        expect($intro).toBe(null);
+        expect($story).not.toBe(null);
+        expect($story!.firstElementChild).not.toBe(null);
+    });
+
+    it('Should render intro but not story section after update viewModel', async () => {
+        namespace.filterComponent.viewModel.renderIntro = true;
+        await namespace.filterComponent.viewModel.updateView();
+
+        const $intro = document.getElementById('intro');
+        const $story = document.getElementById('story');
+        expect($intro).toBe(null);
+        expect($story).toBe(null);
+    });
+
+    it('Should render story and stroyPrice pass through filters | toDiscount | addGst', () => {
+        const $story = document.getElementById('story');
+        const stroyPrice = document.getElementById('stroyPrice')!.textContent!;
+        const discountedPrice = namespace.viewModel.toDiscount(namespace.viewModel.story.price);
+        const finalPrice = namespace.viewModel.addGst(discountedPrice);
+
+        expect($story).not.toBe(null);
+        expect(Number(stroyPrice)).toBe(finalPrice);
+    });
+});

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

@@ -1,219 +1,208 @@
-/* eslint-disable max-len */
-// It seems PhantomJS has issue with createComment and createRange
-const isEnvSupportDocRange = ((document) => {
-    let docRange;
-    let commentNode;
-    const commentText = 'x';
-    let ret = true;
-
-    if (typeof document.createRange !== 'function') {
-        return (ret = false);
-    }
-    try {
-        docRange = document.createRange();
-        docRange.deleteContents();
-        commentNode = document.createComment(commentText);
-        if (commentNode.nodeType !== 8 || commentNode.textContent !== commentText) {
-            return (ret = false);
-        }
-    } catch (err) {
-        return (ret = false);
-    }
-    return ret;
-})(document);
-
-describe('When search-results-component with forOf binding inited', () => {
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(() => {
-        loadFixtures('./fixtures/forOfBinding.html');
-
-        namespace.viewModel = {
-            searchResultTitle: 'Featured service providers',
-            messageTriggerCss: '',
-            bookmarkCss: '',
-            searchResults: [
-                {
-                    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,
-                    options: [{text: '1', value: '1'}, {text: '2', value: '2'}, {text: '3', value: '3'}],
-                },
-                {
-                    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,
-                    selected: true,
-                    options: [{text: '4', value: '4'}, {text: '5', value: '5'}, {text: '6', value: '6'}],
-                },
-                {
-                    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,
-                    highlightCss: 'result-item--highlight',
-                    options: [{text: '7', value: '7'}, {text: '8', value: '8'}, {text: '9', value: '9'}],
-                },
-            ],
-            getResultItemAttr: function(index, oldAttrObj, $el) {
-                const self = this;
-                if (self.searchResults[index].image) {
-                    return {
-                        src: self.searchResults[index].image,
-                        alt: self.searchResults[index].title || '',
-                    };
-                }
-            },
-            setResultOptionAttr: function($data, oldAttrObj, $el) {
-                if ($data && $data.value) {
-                    // todo: the index here is the outter loop index
-                    return {
-                        value: $data.value,
-                    };
-                }
-            },
-            onAdMessageCheck: function(e, $el, newValue, oldValue, index) {
-                console.log('onAdMessageCheck: ', $el, newValue, oldValue, index);
-            },
-            onAdBookmarkClick: function(e, $el, index) {
-                e.preventDefault();
-                console.log('onAdBookmarkClick: ', $el, index);
-            },
-        };
-
-        namespace.searchResultsComponent = dataBind.init(
-            document.querySelector('[data-bind-comp="search-results-component"]'),
-            namespace.viewModel,
-        );
-
-        namespace.searchResultsComponent.render();
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="search-results-component"] should have render', (done) => {
-        // skip if test environment doesn't support document.createRange
-        if (!isEnvSupportDocRange) {
-            expect(isEnvSupportDocRange).toBe(false);
-            done();
-            return;
-        }
-        setTimeout(() => {
-            expect($('#searchResultTitle').text()).toBe(namespace.viewModel.searchResultTitle);
-            // expect($('#search-result-columns').children().length).not.toBe(0);
-            done();
-        }, 200);
-    });
-
-    it('Then render forOf binding elements with comment tag wrap around', (done) => {
-        setTimeout(() => {
-            const $searchColumn = document.getElementById('search-result-columns');
-            // not sure why jasmine first execution before render complete, that's why element doesn't exsits
-            // but when run just this spec it will works
-            if (!$searchColumn.firstElementChild) {
-                expect($searchColumn.firstElementChild).toBe(null);
-                done();
-                return;
-            }
-            const firstCommentWrap = $searchColumn.firstElementChild.previousSibling;
-            const lastCommentWrap = $searchColumn.lastElementChild.nextSibling;
-
-            expect(firstCommentWrap.nodeType).toBe(8);
-            expect(lastCommentWrap.nodeType).toBe(8);
-            expect(firstCommentWrap.textContent).toContain('data-forOf');
-            expect(lastCommentWrap.textContent).toContain('data-forOf');
-            done();
-        }, 200);
-    });
-
-    it('Then render same amount of items in viewModel.searchResults', (done) => {
-        setTimeout(() => {
-            const $searchColumn = document.getElementById('search-result-columns');
-            // not sure why jasmine first execution before render complete, that's why element doesn't exsits
-            // but when run just this spec it will works
-            if (!$searchColumn.firstElementChild) {
-                expect($searchColumn.firstElementChild).toBe(null);
-                done();
-                return;
-            }
-            expect($searchColumn.children.length).toBe(namespace.viewModel.searchResults.length);
-            done();
-        }, 200);
-    });
-
-    describe('When each search item rendered', () => {
-        it('should render bindings according to searchResults data', (done) => {
-            if (!isEnvSupportDocRange) {
-                expect(isEnvSupportDocRange).toBe(false);
-                done();
-                return;
-            }
-            setTimeout(() => {
-                const $results = $('#search-result-columns').children();
-                // not sure why jasmine first execution before render complete, that's why element doesn't exsits
-                // but when run just this spec it will works
-                if (!$results.length) {
-                    expect($results.length).toBe(0);
-                    done();
-                    return;
-                }
-
-                expect($results.length).not.toBe(0);
-
-                $results.each(function(index) {
-                    const indexString = String(index);
-                    const $result = $(this);
-                    const $img = $result.find('.result-item__img');
-                    const $body = $result.find('.card-body');
-                    const $footer = $result.find('.result-item__footer');
-                    const $checkbox = $footer.find('.result-item__icon-checkbox');
-                    const $options = $footer.find('select.form-control option');
-                    const imgSrc = $img.attr('src') || '';
-                    let bodyIndex = $body.find('.bodyIndex').text();
-                    let footerIndex = $footer.find('.footerIndex').text();
-                    let bookMarkIndex = $result.find('.bookMarkIndex').text();
-                    const searchResult = namespace.viewModel.searchResults[index];
-
-                    bodyIndex = bodyIndex.charAt(bodyIndex.length - 1);
-                    footerIndex = footerIndex.charAt(footerIndex.length - 1);
-                    bookMarkIndex = bookMarkIndex.charAt(bookMarkIndex.length - 1);
-
-                    expect($img.length).not.toBe(0);
-                    expect(imgSrc).toBe(namespace.viewModel.searchResults[index].image);
-                    expect($body.children().length).not.toBe(0);
-                    expect(bodyIndex).toEqual(indexString);
-                    expect($footer.length).not.toBe(0);
-                    expect(footerIndex).toEqual(indexString);
-                    expect(bookMarkIndex).toEqual(indexString);
-                    expect($checkbox[0].checked).toEqual(Boolean(searchResult.selected));
-                    // first option is not from data
-                    expect($options.length).toEqual(searchResult.options.length + 1);
-                    expect($options.eq(index + 1).text()).toEqual(searchResult.options[index].text);
-                    expect($options.eq(index + 1).val()).toEqual(searchResult.options[index].value);
-                });
-
-                done();
-            }, 200);
-        });
-    });
-});
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+
+// It seems PhantomJS has issue with createComment and createRange
+const isEnvSupportDocRange = ((document) => {
+    let docRange;
+    let commentNode;
+    const commentText = 'x';
+    let ret = true;
+
+    if (typeof document.createRange !== 'function') {
+        return (ret = false);
+    }
+    try {
+        docRange = document.createRange();
+        docRange.deleteContents();
+        commentNode = document.createComment(commentText);
+        if (commentNode.nodeType !== 8 || commentNode.textContent !== commentText) {
+            return (ret = false);
+        }
+    } catch {
+        return (ret = false);
+    }
+    return ret;
+})(document);
+
+describe('When search-results-component with forOf binding inited', () => {
+    const namespace: any = {};
+
+    beforeEach(() => {
+        loadFixture('test/fixtures/forOfBinding.html');
+
+        namespace.viewModel = {
+            searchResultTitle: 'Featured service providers',
+            messageTriggerCss: '',
+            bookmarkCss: '',
+            searchResults: [
+                {
+                    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,
+                    options: [{text: '1', value: '1'}, {text: '2', value: '2'}, {text: '3', value: '3'}],
+                },
+                {
+                    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,
+                    selected: true,
+                    options: [{text: '4', value: '4'}, {text: '5', value: '5'}, {text: '6', value: '6'}],
+                },
+                {
+                    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,
+                    highlightCss: 'result-item--highlight',
+                    options: [{text: '7', value: '7'}, {text: '8', value: '8'}, {text: '9', value: '9'}],
+                },
+            ],
+            getResultItemAttr(index: number, _oldAttrObj: any, _$el: any) {
+                const self = this;
+                if (self.searchResults[index].image) {
+                    return {
+                        src: self.searchResults[index].image,
+                        alt: self.searchResults[index].title || '',
+                    };
+                }
+            },
+            setResultOptionAttr($data: any, _oldAttrObj: any, _$el: any) {
+                if ($data && $data.value) {
+                    // todo: the index here is the outter loop index
+                    return {
+                        value: $data.value,
+                    };
+                }
+            },
+            onAdMessageCheck(e: Event, $el: any, newValue: any, oldValue: any, index: number) {
+                console.log('onAdMessageCheck: ', $el, newValue, oldValue, index);
+            },
+            onAdBookmarkClick(e: Event, $el: any, index: number) {
+                e.preventDefault();
+                console.log('onAdBookmarkClick: ', $el, index);
+            },
+        };
+
+        namespace.searchResultsComponent = dataBind.init(
+            document.querySelector('[data-bind-comp="search-results-component"]'),
+            namespace.viewModel,
+        );
+
+        namespace.searchResultsComponent.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="search-results-component"] should have render', async () => {
+        // skip if test environment doesn't support document.createRange
+        if (!isEnvSupportDocRange) {
+            expect(isEnvSupportDocRange).toBe(false);
+            return;
+        }
+        await waitFor(() => {
+            expect(document.querySelector('#searchResultTitle')!.textContent).toBe(namespace.viewModel.searchResultTitle);
+        }, {timeout: 500});
+    });
+
+    it('Then render forOf binding elements with comment tag wrap around', async () => {
+        const $searchColumn = document.getElementById('search-result-columns');
+        // not sure why jasmine first execution before render complete, that's why element doesn't exist
+        // but when run just this spec it will works
+        if (!$searchColumn || !$searchColumn.firstElementChild) {
+            expect($searchColumn?.firstElementChild).toBeFalsy();
+            return;
+        }
+
+        await waitFor(() => {
+            const firstComment = $searchColumn.firstChild;
+            const lastComment = $searchColumn.lastChild;
+            expect(firstComment!.nodeType).toBe(Node.COMMENT_NODE);
+            expect(lastComment!.nodeType).toBe(Node.COMMENT_NODE);
+        }, {timeout: 500});
+    });
+
+    it('Then render same amount of items in viewModel.searchResults', async () => {
+        const $searchColumn = document.getElementById('search-result-columns');
+        // not sure why jasmine first execution before render complete, that's why element doesn't exist
+        // but when run just this spec it will works
+        if (!$searchColumn || !$searchColumn.firstElementChild) {
+            expect($searchColumn?.firstElementChild).toBeFalsy();
+            return;
+        }
+
+        await waitFor(() => {
+            const $results = Array.from($searchColumn.children);
+            expect($results.length).toBe(namespace.viewModel.searchResults.length);
+        }, {timeout: 500});
+    });
+
+    describe('When each search item rendered', () => {
+        it('should render bindings according to searchResults data', async () => {
+            const $searchColumn = document.querySelector('#search-result-columns');
+            const $results = $searchColumn ? Array.from($searchColumn.children) : [];
+
+            // not sure why jasmine first execution before render complete, that's why element doesn't exist
+            // but when run just this spec it will works
+            if (!$results.length) {
+                expect($results.length).toBe(0);
+                return;
+            }
+
+            await waitFor(() => {
+                expect($results.length).not.toBe(0);
+
+                $results.forEach(($result, index) => {
+                    const indexString = String(index);
+                    const $img = $result.querySelector('.result-item__img');
+                    const $body = $result.querySelector('.card-body')!;
+                    const $footer = $result.querySelector('.result-item__footer')!;
+                    const $checkbox = $footer.querySelector('.result-item__icon-checkbox') as HTMLInputElement;
+                    const $options = $footer.querySelectorAll('select.form-control option');
+                    const imgSrc = $img ? $img.getAttribute('src') || '' : '';
+                    let bodyIndex = $body.querySelector('.bodyIndex')?.textContent || '';
+                    let footerIndex = $footer.querySelector('.footerIndex')?.textContent || '';
+                    let bookMarkIndex = $result.querySelector('.bookMarkIndex')?.textContent || '';
+                    const searchResult = namespace.viewModel.searchResults[index];
+
+                    bodyIndex = bodyIndex.charAt(bodyIndex.length - 1);
+                    footerIndex = footerIndex.charAt(footerIndex.length - 1);
+                    bookMarkIndex = bookMarkIndex.charAt(bookMarkIndex.length - 1);
+
+                    expect($img).not.toBeNull();
+                    expect(imgSrc).toBe(namespace.viewModel.searchResults[index].image);
+                    expect($body.children.length).not.toBe(0);
+                    expect(bodyIndex).toEqual(indexString);
+                    expect($footer).not.toBeNull();
+                    expect(footerIndex).toEqual(indexString);
+                    expect(bookMarkIndex).toEqual(indexString);
+                    expect($checkbox.checked).toEqual(Boolean(searchResult.selected));
+                    // first option is not from data
+                    expect($options.length).toEqual(searchResult.options.length + 1);
+                    if ($options[index + 1]) {
+                        expect($options[index + 1].textContent).toEqual(searchResult.options[index].text);
+                        expect(($options[index + 1] as HTMLOptionElement).value).toEqual(searchResult.options[index].value);
+                    }
+                });
+            }, {timeout: 500});
+        });
+    });
+});