@gogocat/data-bind 1.11.0 → 2.0.0

package/test/specs/formBinding.spec.js

@@ -1,292 +0,0 @@
-describe('Given form-component initised', () => {
-    const getElementAttributesObj = function($el) {
-        const obj = {};
-        $.each($el[0].attributes, function() {
-            if (this.specified) {
-                obj[this.name] = this.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: function(e, $element, newValue, oldValue) {
-            this.taskName = newValue;
-            this.updateView();
-        },
-        onMarkAllCompleted: function(e, $element, newValue, oldValue) {
-            this.markAllCompleted = true;
-            this.updateView();
-        },
-        onSelected: function(e, $element, newValue, oldValue) {
-            expect(newValue).not.toBe(oldValue);
-        },
-        onGenderChanged: function(e, $element, newValue, oldValue) {
-            expect(newValue).not.toBe(oldValue);
-        },
-        onTestDateChanged: function(e, $element, newValue, oldValue) {
-            expect(newValue).not.toBe(oldValue);
-        },
-        onTestRangeChanged: function(e, $element, newValue, oldValue) {
-            expect(newValue).not.toBe(oldValue);
-            this.updateView();
-        },
-        onMessageChanged: function(e, $element, newValue, oldValue) {
-            expect(newValue).not.toBe(oldValue);
-            this.updateView();
-        },
-        onEditTask: function(e, $element) {
-            this.showTaskNameInput = true;
-            this.updateView();
-        },
-        onFocusEditTask: function(e, $element) {
-            expect($element[0].id).toBe('taskName');
-        },
-        onBlurEditTask: function(e, $element) {
-            expect($element[0].id).toBe('taskName');
-        },
-        onTestFormSubmit: function(e, $element, formData) {
-            e.preventDefault();
-        },
-        updateView: function() {
-            namespace.formComponentApp.render();
-        },
-    };
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(() => {
-        loadFixtures('./fixtures/formBindings.html');
-        namespace.formComponentApp = dataBind.init(document.querySelector('[data-bind-comp="form-component"]'), formComponentVM);
-        namespace.formComponentApp.render();
-    });
-
-    afterEach(() => {
-        // clean up app
-        delete namespace.formComponentApp;
-    });
-
-    it('Then each bond input element should updated according to viewModel', (done) => {
-        // check on next tick because dataBind.render is aysn
-        setTimeout(() => {
-            expect($('#test-form-title').text()).toBe(formComponentVM.title);
-            expect($('#test-form-description').text()).toBe(formComponentVM.description);
-            expect($('#test-form-description').is(':visible')).toBe(formComponentVM.showContent);
-            expect($('#toggle-all').is(':checked')).toBe(formComponentVM.markAllCompleted);
-            expect($('input[name="gender"]:checked').val()).toBe(formComponentVM.gender);
-            expect($('#carName').val()).toBe(formComponentVM.carName);
-            expect($('#testDate').val()).toBe(formComponentVM.testDate);
-            expect($('#testRange').val()).toBe(formComponentVM.testRange);
-            expect($('#testRangeLabel').text()).toBe($('#testRange').val());
-            expect($('#taskName').val()).toBe(formComponentVM.taskName);
-            expect($('#taskName').is(':visible')).toBe(formComponentVM.showTaskNameInput);
-            done();
-        }, 200);
-    });
-
-    it('When change #new-todo input value then viewModel should have updated', (done) => {
-        const task1 = 'new test task';
-        setTimeout(function() {
-            const $newTodo = document.getElementById('new-todo');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            $newTodo.value = task1;
-            $newTodo.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(function() {
-                expect(formComponentVM.taskName).toBe(task1);
-                expect($('#taskName').val()).toBe(formComponentVM.taskName);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #toggle-all checked then viewModel should have updated', (done) => {
-        setTimeout(() => {
-            const $toggleAll = document.getElementById('toggle-all');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            $toggleAll.checked = true;
-            $toggleAll.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(() => {
-                expect(formComponentVM.markAllCompleted).toBe(true);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #carName dropdwon changed then viewModel should have updated', (done) => {
-        const newCarName = 'audi';
-
-        setTimeout(() => {
-            const $carName = document.getElementById('carName');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            $carName.value = newCarName;
-            $carName.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(() => {
-                expect(formComponentVM.carName).toBe(newCarName);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #radioMale changed then viewModel should have updated', (done) => {
-        const newGender = 'male';
-
-        setTimeout(() => {
-            const radioMale = document.getElementById('radioMale');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            radioMale.checked = true;
-            radioMale.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(() => {
-                expect(formComponentVM.gender).toBe(newGender);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #testDate date input changed then viewModel should have updated', (done) => {
-        const newTestDate = '2018-01-01';
-
-        setTimeout(() => {
-            const $testDate = document.getElementById('testDate');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            $testDate.value = newTestDate;
-            $testDate.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(() => {
-                expect(formComponentVM.testDate).toBe(newTestDate);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #testRange range input changed then viewModel should have updated', (done) => {
-        const newTestRange = '3';
-
-        setTimeout(() => {
-            const $testRange = document.getElementById('testRange');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            $testRange.value = newTestRange;
-            $testRange.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(() => {
-                expect(formComponentVM.testRange).toBe(newTestRange);
-                expect($('#testRangeLabel').text()).toBe(newTestRange);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #message range input changed with xss html then viewModel data should have escaped value and updated', (done) => {
-        const newMessage = 'This is a new message for test <script>alert(xss)</script>';
-
-        const escapedMessage = 'This is a new message for test &lt;script&gt;alert(xss)&lt;/script&gt;';
-
-        setTimeout(() => {
-            const $message = document.getElementById('message');
-            const evt = document.createEvent('HTMLEvents');
-
-            evt.initEvent('change', true, true);
-            $message.value = newMessage;
-            $message.dispatchEvent(evt);
-
-            // defer to check after asyn render
-            setTimeout(() => {
-                expect(formComponentVM.message).toBe(escapedMessage);
-                done();
-            }, 100);
-        }, 100);
-    });
-
-    it('When #labelTaskeName label double clicked then viewModel should have updated and #taskName should show', (done) => {
-        const $labelTaskeName = document.getElementById('labelTaskeName');
-        const evtDblclick = document.createEvent('MouseEvents');
-        const evtChange = document.createEvent('HTMLEvents');
-
-        evtDblclick.initEvent('dblclick', true, true);
-        evtChange.initEvent('change', true, true);
-
-        $labelTaskeName.dispatchEvent(evtDblclick);
-        $labelTaskeName.dispatchEvent(evtChange);
-
-        // defer to check after asyn render
-        setTimeout(() => {
-            const $taskName = document.getElementById('taskName');
-
-            expect($('#taskName').is(':visible')).toBe(formComponentVM.showTaskNameInput);
-
-            $taskName.focus();
-            $taskName.blur();
-            done();
-        }, 100);
-    });
-
-    describe('Element with attribute binding', () => {
-        it('should display attribute from viewModel', (done) => {
-            const $el = $('[data-bind-attr="testAttr"]');
-            let attrObj = {};
-            setTimeout(() => {
-                attrObj = getElementAttributesObj($el);
-                $.each(formComponentVM.testAttr, function(k, v) {
-                    expect(attrObj[k]).toBe(v);
-                });
-                done();
-            }, 100);
-        });
-
-        it('should update attribute according to viewModel', (done) => {
-            const $el = $('[data-bind-attr="testAttr"]');
-            let attrObj = {};
-            formComponentVM.testAttr = {
-                id: '8888',
-                class: 'hidden',
-            };
-            formComponentVM.updateView();
-            setTimeout(() => {
-                attrObj = getElementAttributesObj($el);
-                $.each(formComponentVM.testAttr, function(k, v) {
-                    expect(attrObj[k]).toBe(v);
-                });
-                expect(attrObj.rel).toBeUndefined();
-                done();
-            }, 100);
-        });
-    });
-});

package/test/specs/ifBinding.spec.js

@@ -1,169 +0,0 @@
-/* eslint-disable max-len */
-describe('Given [data-bind-comp="if-component"] inited', () => {
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(function() {
-        loadFixtures('./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: function($data) {
-                return typeof $data.viewModelPropFn === 'function';
-            },
-            undefinedViewModelPropFn: function($data) {
-                return;
-            },
-            setStroylinkAttr: function($data) {
-                return {
-                    href: this.story.link,
-                    title: this.story.title,
-                    target: '_blank',
-                    rel: 'noopener noreferrer',
-                };
-            },
-            onStoryClick: function(e, $el) {
-                e.preventDefault();
-            },
-            updateView: function(opt) {
-                this.APP.render(opt);
-            },
-        };
-
-        namespace.myIfComponent = dataBind.init(document.querySelector('[data-bind-comp="if-component"]'), namespace.viewModel);
-
-        namespace.myIfComponent.render();
-
-        // jasmine spies
-        spyOn(namespace.viewModel, 'onStoryClick');
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="myIfComponent"] should have render', (done) => {
-        setTimeout(() => {
-            expect($('#intro-heading').text()).toBe(namespace.viewModel.heading);
-            expect($('#intro-description').text()).toBe(namespace.viewModel.description);
-            done();
-        }, 200);
-    });
-
-    it('Then render if-binding elements with comment tag wrap around', (done) => {
-        setTimeout(() => {
-            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');
-            done();
-        }, 200);
-    });
-
-    it('should not render #story ', (done) => {
-        setTimeout(() => {
-            expect($('#story').length).toBe(0);
-            done();
-        }, 200);
-    });
-
-    it('should not render #testPropFn ', (done) => {
-        setTimeout(() => {
-            expect(document.getElementById('testPropFn')).not.toBe(null);
-            done();
-        }, 200);
-    });
-
-    it('should not render #testUnDefiniedProp ', (done) => {
-        setTimeout(() => {
-            expect(document.getElementById('testUnDefiniedProp')).toBe(null);
-            done();
-        }, 200);
-    });
-
-    it('should render inverse negated boolean block', (done) => {
-        setTimeout(() => {
-            expect(document.getElementById('NotTestUnDefiniedProp')).not.toBe(null);
-            done();
-        }, 200);
-    });
-
-    describe('When update viewModel renderIntro to false', () => {
-        it('should render story and remove intro', (done) => {
-            namespace.viewModel.renderIntro = false;
-            namespace.viewModel.updateView();
-
-            setTimeout(() => {
-                expect($('#story').length).toBe(1);
-                expect($('#intro').length).toBe(0);
-                expect($('#storyIntroHeading').text()).toBe(namespace.viewModel.story.title);
-                expect($('#storyDescription').text()).toBe(namespace.viewModel.story.description);
-                expect($('#storyLink').attr('href')).toBe(namespace.viewModel.story.link);
-                expect($('#storyLink').attr('title')).toBe(namespace.viewModel.story.title);
-                expect($('#storyLink').attr('target')).toBe('_blank');
-                expect($('#storyLink').attr('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.calls.reset();
-                done();
-            }, 200);
-        });
-    });
-
-    describe('When update viewModel renderIntro to true', () => {
-        it('should render intro and remove story', (done) => {
-            namespace.viewModel.renderIntro = true;
-            namespace.viewModel.updateView();
-
-            setTimeout(() => {
-                expect($('#story').length).toBe(0);
-                expect($('#intro').length).toBe(1);
-                done();
-            }, 200);
-        });
-    });
-
-    describe('When update viewModel renderIntro to false again', () => {
-        it('should render story and event handler rebind', (done) => {
-            namespace.viewModel.renderIntro = false;
-            namespace.viewModel.updateView();
-
-            setTimeout(() => {
-                const $storyLink = document.getElementById('storyLink');
-                const evt = document.createEvent('HTMLEvents');
-                evt.initEvent('click', true, true);
-
-                expect($('#story').length).toBe(1);
-                expect($('#intro').length).toBe(0);
-
-                $storyLink.dispatchEvent(evt);
-                expect(namespace.viewModel.onStoryClick).toHaveBeenCalled();
-                namespace.viewModel.onStoryClick.calls.reset();
-                done();
-            }, 200);
-        });
-    });
-});

package/test/specs/templateBinding.spec.js

@@ -1,117 +0,0 @@
-describe('Given [data-bind-comp="temp-component"] inited', () => {
-    const namespace = {};
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(function() {
-        loadFixtures('./fixtures/templateBinding.html');
-
-        namespace.finishTemplateRender = 0;
-
-        namespace.viewModel = {
-            heading: 'Test data-bind-temp binding',
-            description: 'This is template binding that also support underscore syntax',
-            content: 'test text',
-            contentNest1: {
-                info: 'Nested content 1',
-            },
-            contentNest2: {
-                info: 'Nested content 2',
-            },
-            contentNest3: {
-                info: 'Nested content 3',
-            },
-            afterTemplateRender: function() {
-                namespace.finishTemplateRender += 1;
-            },
-            updateView: function(opt) {
-                this.APP.render(opt);
-            },
-        };
-
-        namespace.myComponent = dataBind.init(document.querySelector('[data-bind-comp="temp-component"]'), namespace.viewModel);
-
-        namespace.myComponent.render();
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="temp-component"] should have render', (done) => {
-        setTimeout(() => {
-            expect(document.getElementById('heading').textContent).toBe(namespace.viewModel.heading);
-            expect(namespace.finishTemplateRender).toBe(1);
-            done();
-        }, 200);
-    });
-
-    it('Should render template1 with viewModel data', (done) => {
-        setTimeout(() => {
-            const viewModel = namespace.viewModel;
-            const $compSection = document.getElementById('compSection');
-            const $heading = document.getElementById('heading');
-            const $description = document.getElementById('description');
-            const $content = document.getElementById('content');
-            const $contentNest1 = document.getElementById('contentNest1');
-
-            expect($compSection.children.length).not.toBe(0);
-            expect($heading.textContent).toBe(viewModel.heading);
-            expect($description.textContent).toBe(viewModel.description);
-            expect($content.textContent).toBe(viewModel.content);
-            expect($contentNest1.children.length).not.toBe(0);
-            done();
-        }, 200);
-    });
-
-    it('Should render nested templates with standard dataBindings', (done) => {
-        setTimeout(() => {
-            const viewModel = namespace.viewModel;
-            const $contentNest1 = document.getElementById('contentNest1');
-            const $contentNest1Info = document.getElementById('contentNest1Info');
-            const $nestPrepend = document.getElementById('nestPrepend');
-            const $nestAppend = document.getElementById('nestAppend');
-
-            expect($contentNest1.children.length).not.toBe(0);
-            expect($contentNest1Info.textContent).toBe(viewModel.contentNest1.info);
-            expect($nestPrepend.children.length).toBeGreaterThan(1);
-            expect($nestAppend.children.length).toBeGreaterThan(1);
-            done();
-        }, 200);
-    });
-
-    it('Should render nested template prepend option', (done) => {
-        setTimeout(() => {
-            const viewModel = namespace.viewModel;
-            const $nestPrepend = document.getElementById('nestPrepend');
-            const $nestPrependHeading = document.getElementById('nestPrependHeading');
-            const $contentNest2Info = document.getElementById('contentNest2Info');
-
-            expect($nestPrepend.children.length).toBeGreaterThan(1);
-            expect($nestPrependHeading).not.toBe(null);
-            expect($nestPrependHeading.previousElementSibling).toBe(contentNest2Info);
-            expect($contentNest2Info.textContent).toBe(viewModel.contentNest2.info);
-            done();
-        }, 200);
-    });
-
-    it('Should render nested template append option', (done) => {
-        setTimeout(() => {
-            const viewModel = namespace.viewModel;
-            const $nestAppend = document.getElementById('nestAppend');
-            const $nestAppendHeading = document.getElementById('nestAppendHeading');
-            const $contentNest3Info = document.getElementById('contentNest3Info');
-
-            expect($nestAppend.children.length).toBeGreaterThan(1);
-            expect($nestAppendHeading).not.toBe(null);
-            expect($nestAppendHeading.nextElementSibling).toBe(contentNest3Info);
-            expect($contentNest3Info.textContent).toBe(viewModel.contentNest3.info);
-            done();
-        }, 200);
-    });
-});