@gogocat/data-bind 1.11.0 → 2.0.0

package/test/specs/formBinding.spec.ts

@@ -0,0 +1,272 @@
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('Given form-component initised', () => {
+    const getElementAttributesObj = function ($el: Element) {
+        const obj: any = {};
+        Array.from($el.attributes).forEach((attr) => {
+            if (attr.specified) {
+                obj[attr.name] = attr.value;
+            }
+        });
+        return obj;
+    };
+
+    const formComponentVM = {
+        title: 'form component title',
+        description: 'form component description',
+        carName: 'saab',
+        showContent: false,
+        markAllCompleted: false,
+        gender: 'female',
+        testDate: '2017-12-25',
+        testRange: '1',
+        message: 'This is message from viewModel',
+        taskName: '',
+        showTaskNameInput: false,
+        testAttr: {
+            id: 'testId',
+            rel: 'testRel',
+            class: 'show',
+        },
+        onAddTask(_e: Event, _$element: any, newValue: any, _oldValue: any) {
+            this.taskName = newValue;
+            this.updateView();
+        },
+        onMarkAllCompleted(_e: Event, _$element: any, _newValue: any, _oldValue: any) {
+            this.markAllCompleted = true;
+            this.updateView();
+        },
+        onSelected(e: Event, $element: any, newValue: any, oldValue: any) {
+            expect(newValue).not.toBe(oldValue);
+        },
+        onGenderChanged(e: Event, $element: any, newValue: any, oldValue: any) {
+            expect(newValue).not.toBe(oldValue);
+        },
+        onTestDateChanged(e: Event, $element: any, newValue: any, oldValue: any) {
+            expect(newValue).not.toBe(oldValue);
+        },
+        onTestRangeChanged(e: Event, $element: any, newValue: any, oldValue: any) {
+            expect(newValue).not.toBe(oldValue);
+            this.updateView();
+        },
+        onTestRangeInputChange(e: Event, $element: any, newValue: any, oldValue: any) {
+            expect(newValue).not.toBe(oldValue);
+            this.updateView();
+        },
+        onMessageChanged(e: Event, $element: any, newValue: any, oldValue: any) {
+            expect(newValue).not.toBe(oldValue);
+            this.updateView();
+        },
+        onEditTask(_e: Event, _$element: any) {
+            this.showTaskNameInput = true;
+            this.updateView();
+        },
+        onFocusEditTask(e: Event, $element: any) {
+            expect($element.id).toBe('taskName');
+        },
+        onBlurEditTask(e: Event, $element: any) {
+            expect($element.id).toBe('taskName');
+        },
+        onTestFormSubmit(e: Event, _$element: any, _formData: any) {
+            e.preventDefault();
+        },
+        updateView() {
+            namespace.formComponentApp.render();
+        },
+    };
+    const namespace: any = {};
+
+    beforeEach(async () => {
+        loadFixture('test/fixtures/formBindings.html');
+        namespace.formComponentApp = dataBind.init(document.querySelector('[data-bind-comp="form-component"]'), formComponentVM);
+        await namespace.formComponentApp.render();
+    });
+
+    afterEach(() => {
+        // clean up app
+        delete namespace.formComponentApp;
+    });
+
+    it('Then each bond input element should updated according to viewModel', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#test-form-title')!.textContent).toBe(formComponentVM.title);
+            expect(document.querySelector('#test-form-description')!.textContent).toBe(formComponentVM.description);
+            expect((document.querySelector('#test-form-description') as HTMLElement)!.style.display !== 'none').toBe(formComponentVM.showContent);
+            expect((document.querySelector('#toggle-all') as HTMLInputElement).checked).toBe(formComponentVM.markAllCompleted);
+            expect((document.querySelector('input[name="gender"]:checked') as HTMLInputElement).value).toBe(formComponentVM.gender);
+            expect((document.querySelector('#carName') as HTMLSelectElement).value).toBe(formComponentVM.carName);
+            expect((document.querySelector('#testDate') as HTMLInputElement).value).toBe(formComponentVM.testDate);
+            expect((document.querySelector('#testRange') as HTMLInputElement).value).toBe(formComponentVM.testRange);
+            expect(document.querySelector('#testRangeLabel')!.textContent).toBe((document.querySelector('#testRange') as HTMLInputElement).value);
+            expect((document.querySelector('#taskName') as HTMLInputElement).value).toBe(formComponentVM.taskName);
+            expect((document.querySelector('#taskName') as HTMLElement)!.style.display !== 'none').toBe(formComponentVM.showTaskNameInput);
+        }, {timeout: 500});
+    });
+
+
+    it('When change #new-todo input value then viewModel should have updated', async () => {
+        const task1 = 'new test task';
+
+        // Wait for element to be ready
+        await waitFor(() => {
+            const $newTodo = document.getElementById('new-todo');
+            expect($newTodo).not.toBeNull();
+        }, {timeout: 500});
+
+        const $newTodo = document.getElementById('new-todo') as HTMLInputElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        $newTodo.value = task1;
+        $newTodo.dispatchEvent(evt);
+
+        // defer to check after async render
+        await waitFor(() => {
+            expect(formComponentVM.taskName).toBe(task1);
+            expect((document.querySelector('#taskName') as HTMLInputElement).value).toBe(formComponentVM.taskName);
+        }, {timeout: 500});
+    });
+
+    it('When #toggle-all checked then viewModel should have updated', async () => {
+        const $toggleAll = document.getElementById('toggle-all') as HTMLInputElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        $toggleAll.checked = true;
+        $toggleAll.dispatchEvent(evt);
+
+        // defer to check after async render
+        await waitFor(() => {
+            expect(formComponentVM.markAllCompleted).toBe(true);
+        }, {timeout: 500});
+    });
+
+    it('When #carName dropdwon changed then viewModel should have updated', async () => {
+        const newCarName = 'volvo';
+        const $carName = document.getElementById('carName') as HTMLSelectElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        $carName.value = newCarName;
+        $carName.dispatchEvent(evt);
+
+        await waitFor(() => {
+            expect(formComponentVM.carName).toBe(newCarName);
+        }, {timeout: 500});
+    });
+
+    it('When #radioMale changed then viewModel should have updated', async () => {
+        const newGender = 'male';
+        const radioMale = document.getElementById('radioMale') as HTMLInputElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        radioMale.checked = true;
+        radioMale.dispatchEvent(evt);
+
+        await waitFor(() => {
+            expect(formComponentVM.gender).toBe(newGender);
+        }, {timeout: 500});
+    });
+
+    it('When #testDate date input changed then viewModel should have updated', async () => {
+        const newTestDate = '2017-12-31';
+        const $testDate = document.getElementById('testDate') as HTMLInputElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        $testDate.value = newTestDate;
+        $testDate.dispatchEvent(evt);
+
+        await waitFor(() => {
+            expect(formComponentVM.testDate).toBe(newTestDate);
+        }, {timeout: 500});
+    });
+
+    it('When #testRange range input changed then viewModel should have updated', async () => {
+        const newTestRange = '3';
+        const $testRange = document.getElementById('testRange') as HTMLInputElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        $testRange.value = newTestRange;
+        $testRange.dispatchEvent(evt);
+
+        await waitFor(() => {
+            expect(formComponentVM.testRange).toBe(newTestRange);
+            expect(document.querySelector('#testRangeLabel')!.textContent).toBe(newTestRange);
+        }, {timeout: 500});
+    });
+
+    it('When #testRange range input trigger onInput changed then viewModel should have updated', async () => {
+        const newTestRange = '4';
+        const $testRange = document.getElementById('testRange') as HTMLInputElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('input', true, true);
+        $testRange.value = newTestRange;
+        $testRange.dispatchEvent(evt);
+
+        await waitFor(() => {
+            expect(formComponentVM.testRange).toBe(newTestRange);
+            expect(document.querySelector('#testRangeLabel')!.textContent).toBe(newTestRange);
+        }, {timeout: 500});
+    });
+
+    it('When #message range input changed with xss html then viewModel data should have escaped value and updated', async () => {
+        const newMessage = '<img src=x onerror=alert(1)>';
+        const escapedMessage = '&lt;img src=x onerror=alert(1)&gt;';
+        const $message = document.getElementById('message') as HTMLTextAreaElement;
+        const evt = document.createEvent('HTMLEvents');
+
+        evt.initEvent('change', true, true);
+        $message.value = newMessage;
+        $message.dispatchEvent(evt);
+
+        await waitFor(() => {
+            expect(formComponentVM.message).toBe(escapedMessage);
+        }, {timeout: 500});
+    });
+
+    it('When #labelTaskeName label double clicked then viewModel should have updated and #taskName should show', async () => {
+        const $taskName = document.getElementById('taskName') as HTMLInputElement;
+
+        await waitFor(() => {
+            expect((document.querySelector('#taskName') as HTMLElement)!.style.display !== 'none').toBe(formComponentVM.showTaskNameInput);
+        }, {timeout: 500});
+
+        $taskName.focus();
+        $taskName.blur();
+    });
+
+    describe('Element with attribute binding', () => {
+        it('should display attribute from viewModel', async () => {
+            const $el = document.querySelector('[data-bind-attr="testAttr"]')!;
+            await waitFor(() => {
+                const attrObj = getElementAttributesObj($el);
+                Object.keys(formComponentVM.testAttr).forEach(k => {
+                    expect(attrObj[k]).toBe((formComponentVM.testAttr as any)[k]);
+                });
+            }, {timeout: 500});
+        });
+
+        it('should update attribute according to viewModel', async () => {
+            const $el = document.querySelector('[data-bind-attr="testAttr"]')!;
+            // Use component.viewModel for reactive updates (reactive mode is default)
+            namespace.formComponentApp.viewModel.testAttr = {
+                id: '8888',
+                class: 'hidden',
+            } as any;
+            // No need to call updateView() - reactive mode triggers automatic render
+
+            await waitFor(() => {
+                const attrObj = getElementAttributesObj($el);
+                Object.keys(namespace.formComponentApp.viewModel.testAttr).forEach(k => {
+                    expect(attrObj[k]).toBe((namespace.formComponentApp.viewModel.testAttr as any)[k]);
+                });
+                expect(attrObj.rel).toBeUndefined();
+            }, {timeout: 500});
+        });
+    });
+});

package/test/specs/ifBinding.spec.ts

@@ -0,0 +1,165 @@
+import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+
+describe('Given [data-bind-comp="if-component"] inited', () => {
+    const namespace: any = {};
+
+    beforeEach(async () => {
+        loadFixture('test/fixtures/ifBinding.html');
+
+        namespace.viewModel = {
+            renderIntro: true,
+            heading: 'Test data-if-binding',
+            description: 'This is intro text',
+            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',
+            },
+            viewModelPropFn($data: any) {
+                return typeof $data.viewModelPropFn === 'function';
+            },
+            undefinedViewModelPropFn(_$data: any) {
+                return;
+            },
+            setStroylinkAttr(_$data: any) {
+                return {
+                    href: this.story.link,
+                    title: this.story.title,
+                    target: '_blank',
+                    rel: 'noopener noreferrer',
+                };
+            },
+            onStoryClick(e: Event, _$el: any) {
+                e.preventDefault();
+            },
+            updateView(opt?: any) {
+                this.APP.render(opt);
+            },
+        };
+
+        namespace.myIfComponent = dataBind.init(document.querySelector('[data-bind-comp="if-component"]'), namespace.viewModel);
+
+        await namespace.myIfComponent.render();
+
+        // vitest spies
+        vi.spyOn(namespace.viewModel, 'onStoryClick');
+    });
+
+    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="myIfComponent"] should have render', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#intro-heading')!.textContent).toBe(namespace.viewModel.heading);
+            expect(document.querySelector('#intro-description')!.textContent).toBe(namespace.viewModel.description);
+        }, {timeout: 500});
+    });
+
+    it('Then render if-binding elements with comment tag wrap around', async () => {
+        await waitFor(() => {
+            const introOpenCommentWrap = document.getElementById('intro')!.previousSibling;
+            const introCloseCommentWrap = document.getElementById('intro')!.nextSibling;
+
+            expect(introOpenCommentWrap!.nodeType).toBe(8);
+            expect(introCloseCommentWrap!.nodeType).toBe(8);
+            expect(introOpenCommentWrap!.textContent).toContain('data-if');
+            expect(introCloseCommentWrap!.textContent).toContain('data-if');
+        }, {timeout: 500});
+    });
+
+
+    it('should not render #story ', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#story')).toBe(null);
+        }, {timeout: 500});
+    });
+
+
+    it('should not render #testPropFn ', async () => {
+        await waitFor(() => {
+            expect(document.getElementById('testPropFn')).not.toBe(null);
+        }, {timeout: 500});
+    });
+
+
+    it('should not render #testUnDefiniedProp ', async () => {
+        await waitFor(() => {
+            expect(document.getElementById('testUnDefiniedProp')).toBe(null);
+        }, {timeout: 500});
+    });
+
+
+    it('should render inverse negated boolean block', async () => {
+        await waitFor(() => {
+            expect(document.getElementById('NotTestUnDefiniedProp')).not.toBe(null);
+        }, {timeout: 500});
+    });
+
+    describe('When update viewModel renderIntro to false', () => {
+        it('should render story and remove intro', async () => {
+            namespace.viewModel.renderIntro = false;
+            await namespace.myIfComponent.render();
+
+            await waitFor(() => {
+                expect(document.querySelector('#story')).not.toBe(null);
+                expect(document.querySelector('#intro')).toBe(null);
+                expect(document.querySelector('#storyIntroHeading')!.textContent).toBe(namespace.viewModel.story.title);
+                expect(document.querySelector('#storyDescription')!.textContent).toBe(namespace.viewModel.story.description);
+                expect(document.querySelector('#storyLink')!.getAttribute('href')).toBe(namespace.viewModel.story.link);
+                expect(document.querySelector('#storyLink')!.getAttribute('title')).toBe(namespace.viewModel.story.title);
+                expect(document.querySelector('#storyLink')!.getAttribute('target')).toBe('_blank');
+                expect(document.querySelector('#storyLink')!.getAttribute('rel')).toBe('noopener noreferrer');
+
+                const evt = document.createEvent('HTMLEvents');
+                evt.initEvent('click', true, true);
+
+                const $searchInput = document.getElementById('storyLink')!;
+                $searchInput.dispatchEvent(evt);
+
+                expect(namespace.viewModel.onStoryClick).toHaveBeenCalled();
+                namespace.viewModel.onStoryClick.mockClear();
+            }, {timeout: 500});
+        });
+    });
+
+    describe('When update viewModel renderIntro to true', () => {
+        it('should render intro and remove story', async () => {
+            namespace.viewModel.renderIntro = true;
+            await namespace.myIfComponent.render();
+
+            await waitFor(() => {
+                expect(document.querySelector('#story')).toBe(null);
+                expect(document.querySelector('#intro')).not.toBe(null);
+            }, {timeout: 500});
+        });
+    });
+
+    describe('When update viewModel renderIntro to false again', () => {
+        it('should render story and event handler rebind', async () => {
+            namespace.viewModel.renderIntro = false;
+            await namespace.myIfComponent.render();
+
+            await waitFor(() => {
+                const $storyLink = document.getElementById('storyLink')!;
+                const evt = document.createEvent('HTMLEvents');
+                evt.initEvent('click', true, true);
+
+                expect(document.querySelector('#story')).not.toBe(null);
+                expect(document.querySelector('#intro')).toBe(null);
+
+                $storyLink.dispatchEvent(evt);
+                expect(namespace.viewModel.onStoryClick).toHaveBeenCalled();
+                namespace.viewModel.onStoryClick.mockClear();
+            }, {timeout: 500});
+        });
+    });
+});

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

@@ -1,88 +1,88 @@
-describe('When nested data-bind-comp initised', () => {
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(function() {
-        loadFixtures('./fixtures/nestedComponents.html');
-
-        namespace.parentComponentVM = {
-            title: 'parent component title',
-            description: 'parent component description',
-        };
-
-        namespace.childComponentVM = {
-            title: 'child component title',
-            description: 'child component description',
-        };
-
-        namespace.grandChildComponentVM = {
-            title: 'grand child component title',
-            description: 'grand child component description',
-        };
-
-        namespace.slibingChildComponentVM = {
-            title: 'slibing child component title',
-            description: 'slibing child component description',
-        };
-
-        const parentComponent = dataBind.init(document.querySelector('[data-bind-comp="parent-component"]'), namespace.parentComponentVM);
-        const childComponent = dataBind.init(document.querySelector('[data-bind-comp="child-component"]'), namespace.childComponentVM);
-        const grandChildComponent = dataBind.init(
-            document.querySelector('[data-bind-comp="grand-child-component"]'),
-            namespace.grandChildComponentVM,
-        );
-        const slibingChildComponent = dataBind.init(
-            document.querySelector('[data-bind-comp="slibing-child-component"]'),
-            namespace.slibingChildComponentVM,
-        );
-
-        parentComponent.render();
-        childComponent.render();
-        grandChildComponent.render();
-        slibingChildComponent.render();
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then #parent-component-title and #parent-component-description should render according parentComponentVM', (done) => {
-        setTimeout(() => {
-            expect($('#parent-component-title').text()).toBe(namespace.parentComponentVM.title);
-            expect($('#parent-component-description').text()).toBe(namespace.parentComponentVM.description);
-            done();
-        }, 200);
-    });
-
-    it('Then #child-component-title and #child-component-description should render according childComponentVM', (done) => {
-        setTimeout(() => {
-            expect($('#child-component-title').text()).toBe(namespace.childComponentVM.title);
-            expect($('#child-component-description').text()).toBe(namespace.childComponentVM.description);
-            done();
-        }, 200);
-    });
-
-    it('Then #grand-child-component-title and #grand-child-component-description should render according grandChildComponentVM', (done) => {
-        setTimeout(() => {
-            expect($('#grand-child-component-title').text()).toBe(namespace.grandChildComponentVM.title);
-            expect($('#grand-child-component-description').text()).toBe(namespace.grandChildComponentVM.description);
-            done();
-        }, 200);
-    });
-
-    it('Then #slibing-child-component-title and #slibing-child-component-description should render according slibingChildComponentVM', (done) => {
-        setTimeout(() => {
-            expect($('#slibing-child-component-title').text()).toBe(namespace.slibingChildComponentVM.title);
-            expect($('#slibing-child-component-description').text()).toBe(
-                namespace.slibingChildComponentVM.description,
-            );
-            done();
-        }, 200);
-    });
-});
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('When nested data-bind-comp initised', () => {
+    const namespace: any = {};
+
+    beforeEach(() => {
+        loadFixture('test/fixtures/nestedComponents.html');
+
+        namespace.parentComponentVM = {
+            title: 'parent component title',
+            description: 'parent component description',
+        };
+
+        namespace.childComponentVM = {
+            title: 'child component title',
+            description: 'child component description',
+        };
+
+        namespace.grandChildComponentVM = {
+            title: 'grand child component title',
+            description: 'grand child component description',
+        };
+
+        namespace.slibingChildComponentVM = {
+            title: 'slibing child component title',
+            description: 'slibing child component description',
+        };
+
+        const parentComponent = dataBind.init(document.querySelector('[data-bind-comp="parent-component"]'), namespace.parentComponentVM);
+        const childComponent = dataBind.init(document.querySelector('[data-bind-comp="child-component"]'), namespace.childComponentVM);
+        const grandChildComponent = dataBind.init(
+            document.querySelector('[data-bind-comp="grand-child-component"]'),
+            namespace.grandChildComponentVM,
+        );
+        const slibingChildComponent = dataBind.init(
+            document.querySelector('[data-bind-comp="slibing-child-component"]'),
+            namespace.slibingChildComponentVM,
+        );
+
+        parentComponent.render();
+        childComponent.render();
+        grandChildComponent.render();
+        slibingChildComponent.render();
+    });
+
+    afterEach(() => {
+        // clean up all app/components
+        for (const prop in namespace) {
+            if (Object.prototype.hasOwnProperty.call(namespace, prop)) {
+                delete namespace[prop];
+            }
+        }
+    });
+
+    it('Then #parent-component-title and #parent-component-description should render according parentComponentVM', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#parent-component-title')!.textContent).toBe(namespace.parentComponentVM.title);
+            expect(document.querySelector('#parent-component-description')!.textContent).toBe(namespace.parentComponentVM.description);
+        }, {timeout: 500});
+    });
+
+
+    it('Then #child-component-title and #child-component-description should render according childComponentVM', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#child-component-title')!.textContent).toBe(namespace.childComponentVM.title);
+            expect(document.querySelector('#child-component-description')!.textContent).toBe(namespace.childComponentVM.description);
+        }, {timeout: 500});
+    });
+
+
+    it('Then #grand-child-component-title and #grand-child-component-description should render according grandChildComponentVM', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#grand-child-component-title')!.textContent).toBe(namespace.grandChildComponentVM.title);
+            expect(document.querySelector('#grand-child-component-description')!.textContent).toBe(namespace.grandChildComponentVM.description);
+        }, {timeout: 500});
+    });
+
+
+    it('Then #slibing-child-component-title and #slibing-child-component-description should render according slibingChildComponentVM', async () => {
+        await waitFor(() => {
+            expect(document.querySelector('#slibing-child-component-title')!.textContent).toBe(namespace.slibingChildComponentVM.title);
+            expect(document.querySelector('#slibing-child-component-description')!.textContent).toBe(
+                namespace.slibingChildComponentVM.description,
+            );
+        }, {timeout: 500});
+    });
+});