Plato - ampersand-view/test/main.js

var test = require('tape');
var AmpersandModel = require('ampersand-model');
var AmpersandView = require('../ampersand-view');

var contains = function (str1, str2) {
    return str1.indexOf(str2) !== -1;
};

var Model = AmpersandModel.extend({
    props: {
        id: 'number',
        name: ['string', true],
        html: 'string',
        url: 'string',
        something: 'string',
        fireDanger: 'string'
    },
    session: {
        active: 'boolean'
    },
    derived: {
        classes: {
            deps: ['something', 'fireDanger', 'active'],
            fn: function () {
                return this.something + this.active;
            }
        }
    }
});

test('registerSubview', function (t) {
    var removeCalled = 0;
    var SubView = AmpersandView.extend({
        template: '<div></div>',
        render: function () {
            this.renderWithTemplate();
            this.el.className = 'subview';
        },
        remove: function () {
            removeCalled++;
        }
    });
    var View = AmpersandView.extend({
        template: '<section><div id="parent"></div></section>',
        render: function () {
            this.renderWithTemplate();
            // all of these should work
            this.renderSubview(new SubView(), this.query('#parent'));
            this.renderSubview(new SubView(), '#parent');

// some other thing with a remove method
            this.registerSubview({remove: function () {
                removeCalled++;
            }});
        }
    });

var main = new View({
        el: document.createElement('div')
    });

main.render();
    t.equal(main.queryAll('.subview').length, 2);
    main.remove();
    t.equal(removeCalled, 3);
    t.end();
});

test('registerSubview: default container to this.el', function (t) {
    var removeCalled = 0;
    var SubView = AmpersandView.extend({
        template: '<div></div>',
        render: function () {
            this.renderWithTemplate();
            this.el.className = 'subview';
        },
        remove: function () {
            removeCalled++;
        }
    });
    var View = AmpersandView.extend({
        template: '<section></section>',
        render: function () {
            this.renderWithTemplate();
            this.renderSubview(new SubView());
            this.renderSubview(new SubView());
        }
    });

var main = new View({
        el: document.createElement('div')
    });

main.render();
    t.equal(main.queryAll('.subview').length, 2);
    t.equal(main.el.childNodes.length, 2);
    main.remove();
    t.equal(removeCalled, 2);
    t.end();
});

test('caching elements', function(t) {
  var View = AmpersandView.extend({
    template: '<p><span></span></p>',
    render: function () {
      this.renderWithTemplate();
      return this.cacheElements(({span:'span'}));
    }
  });
  var instance = new View(),
     rendered  = instance.render();
  t.equal(instance, rendered);
  t.equal(typeof rendered.span, 'object');
  t.end();
});

test('listen to and run', function (t) {
    t.plan(1);
    var model = new Model({
        props: {
            name: 'string'
        }
    });
    var View = AmpersandView.extend({
        initialize: function () {
            this.model = model;
            this.listenToAndRun(this.model, 'something', this.handler);
            t.end();
        },
        handler: function () {
            t.pass('handler ran');
        }
    });
    new View();
});

test('text bindings', function (t) {
    var view = getView({
        bindings: {
            'model.name': 'span'
        }
    });
    t.equal(view.query('span').textContent, '');
    view.model.set('name', 'henrik');
    t.equal(view.query('span').textContent, 'henrik');
    t.end();
});

test('src bindings', function (t) {
    var view = getView({
        bindings: {
            'model.url': {
                type: 'attribute',
                name: 'src',
                selector: 'img'
            }
        }
    });
    var img = view.query('img');
    t.equal(img.getAttribute('src'), '');
    view.model.set('url', 'http://robohash.com/whammo');
    t.equal(img.getAttribute('src'), 'http://robohash.com/whammo');
    t.end();
});

test('href bindings', function (t) {
    var view = getView({
        template: '<a href=""></a>',
        bindings: {
            'model.url': {
                type: 'attribute',
                name: 'href',
                selector: ''
            }
        }
    });
    var el = view.el;
    t.equal(el.getAttribute('href'), '');
    view.model.set('url', 'http://robohash.com/whammo');
    t.equal(el.getAttribute('href'), 'http://robohash.com/whammo');
    t.end();
});

test('input bindings', function (t) {
    var view = getView({
        template: '<li><input></li>',
        bindings: {
            'model.something': {
                type: 'attribute',
                selector: 'input',
                name: 'value'
            }
        }
    });
    var input = view.query('input');
    t.equal(input.value, '');
    view.model.set('something', 'yo');
    t.equal(input.value, 'yo');
    t.end();
});

test('class bindings', function (t) {
    var model = new Model();
    model.set({
        fireDanger: 'high',
        active: true
    });
    var view = getView({
        template: '<li></li>',
        bindings: {
            'model.fireDanger': {
                type: 'class'
            },
            'model.active': {
                type: 'booleanClass'
            }
        }
    }, model);
    var className = view.el.className;
    t.ok(contains(className, 'active'));
    t.ok(contains(className, 'high'));
    model.set('fireDanger', 'low');
    className = view.el.className;
    t.ok(!contains(className, 'high'));
    t.ok(contains(className, 'low'));
    model.set('active', false);
    className = view.el.className;
    t.ok(!contains(className, 'active'));
    t.ok(contains(className, 'low'));
    t.end();
});

test('nested binding definitions', function (t) {
    var model = new Model();
    model.set({
        active: true
    });
    var View = AmpersandView.extend({
        autoRender: true,
        template: '<li><div></div></li>',
        bindings: {
            'model.active': [
                {
                    type: 'booleanAttribute',
                    name: 'data-active',
                    selector: 'div'
                },
                {
                    type: 'booleanAttribute',
                    name: 'data-something',
                    selector: 'div'
                },
                {
                    selector: 'div'
                },
                {
                    type: 'booleanClass'
                }
            ]
        }
    });
    var view = new View({model: model});
    var li = view.el;
    var div = li.firstChild;
    t.ok(div.hasAttribute('data-active'));
    t.ok(div.hasAttribute('data-something'));
    t.equal(div.textContent, 'true');
    t.ok(contains(li.className, 'active'));
    t.end();
});

test('renderAndBind with no model', function (t) {
    var View = AmpersandView.extend({
        template: '<li><span></span><img></li>'
    });
    var view = new View();
    t.ok(view.renderWithTemplate()); //Should not throw error
    t.end();
});

test('queryByHook', function (t) {
    var View = AmpersandView.extend({
        template: '<li data-hook="list-item"><span data-hook="username"></span><img data-hook="user-avatar"></li>'
    });
    var view = new View();
    view.renderWithTemplate();
    t.ok(view.queryByHook('username') instanceof Element, 'should find username element');
    t.ok(view.queryByHook('user-avatar') instanceof Element, 'should find username');
    t.ok(view.queryByHook('nothing') === undefined, 'should find username');
    t.ok(view.queryByHook('list-item') instanceof Element, 'should also work for root element');
    t.end();
});

test('queryAllByHook', function (t) {
    var View = AmpersandView.extend({
        template: '<li data-hook="list-item"><span data-hook="username info"></span><img data-hook="user-avatar info"></li>'
    });
    var view = new View();
    view.renderWithTemplate();
    t.ok(view.queryAllByHook('info') instanceof Array, 'should return array of results');
    t.equal(view.queryAllByHook('info').length, 2, 'should find all relevant elements');
    t.ok(view.queryAllByHook('info')[0] instanceof Element, 'should be able to access found elements');
    t.ok(view.queryAllByHook('info')[1] instanceof Element, 'should be able to access found elements');
    t.deepEqual(view.queryAllByHook('nothing'), [], 'should return empty array if no results found');
    t.end();
});

test('throw on multiple root elements', function (t) {
    var View = AmpersandView.extend({
        template: '<li></li><div></div>'
    });
    var view = new View();
    t.throws(view.renderWithTemplate, Error, 'Throws error on multiple root elements');
    t.end();
});

test('queryAll should return an array', function (t) {
    var View = AmpersandView.extend({
        autoRender: true,
        template: '<ul><li></li><li></li><li></li></ul>'
    });
    var view = new View();
    var all = view.queryAll('li');
    t.ok(all instanceof Array);
    t.ok(all.forEach);
    t.equal(all.length, 3);
    t.end();
});

test('get should return undefined if no match', function (t) {
    var View = AmpersandView.extend({
        autoRender: true,
        template: '<ul></ul>'
    });
    var view = new View();
    var el = view.query('div');
    t.equal(typeof el, 'undefined');
    t.strictEqual(view.query(''), view.el);
    t.strictEqual(view.query(), view.el);
    t.strictEqual(view.query(view.el), view.el);
    t.end();
});

test('get should work for root element too', function (t) {
    var View = AmpersandView.extend({
        autoRender: true,
        template: '<ul></ul>'
    });
    var view = new View();
    t.equal(view.query('ul'), view.el);
    t.end();
});

test('queryAll should include root element if matches', function (t) {
    var View = AmpersandView.extend({
        autoRender: true,
        template: '<div class="test"><div class="test deep"><div class="test deep"></div></div></div>'
    });
    var view = new View();
    var hasTestClass = view.queryAll('.test');
    var hasDeepClass = view.queryAll('.deep');
    t.equal(hasTestClass.length, 3);
    t.equal(hasDeepClass.length, 2);
    t.ok(hasTestClass instanceof Array);
    t.ok(hasDeepClass instanceof Array);
    t.ok(view.queryAll('bogus') instanceof Array);
    t.end();
});

//test('focus/blur events should work in events hash. Issue #8', function (t) {
//    t.plan(2);
//    var View = AmpersandView.extend({
//        events: {
//            'focus #thing': 'handleFocus',
//            'blur #thing': 'handleBlur'
//        },
//        autoRender: true,
//        template: '<div><input id="thing"></div></div>',
//        handleFocus: function () {
//            t.pass('focus called');
//        },
//        handleBlur: function () {
//            t.pass('blur called');
//            t.end();
//        }
//    });
//    var view = new View();
//    // should be able to do this without
//    // ending up with too many handlers
//    view.delegateEvents();
//    view.delegateEvents();
//    view.delegateEvents();
//
//    document.body.appendChild(view.el);
//    view.el.firstChild.focus();
//    view.el.firstChild.blur();
//    document.body.removeChild(view.el);
//});

test('ability to mix in state properties', function (t) {
    var View = AmpersandView.extend({
        template: '<div></div>',
        render: function () {
            this.el = document.createElement('div');
        }
    });
    var view = new View();
    view.on('change:el', function () {
        t.pass('woohoo!');
        t.end();
    });
    view.render();
});

test('Ability to add other state properties', function (t) {
    var View = AmpersandView.extend({
        props: {
            thing: 'boolean'
        },
        template: '<div></div>'
    });
    var view = new View();
    view.on('change:thing', function () {
        t.pass('woohoo!');
        t.end();
    });
    view.thing = true;
});

test('Multi-inheritance of state properties works too', function (t) {
    t.plan(2);
    var View = AmpersandView.extend({
        props: {
            thing: 'boolean'
        },
        template: '<div></div>'
    });
    var SecondView = View.extend({
        props: {
            otherThing: 'boolean'
        }
    });
    var view = window.view = new SecondView();
    view.on('change:thing', function () {
        t.pass('woohoo!');
    });
    view.on('change:otherThing', function () {
        t.pass('woohoo!');
        t.end();
    });
    view.thing = true;
    view.otherThing = true;
});

test('Setting an `el` should only fire change if new instance of element', function (t) {
    t.plan(1);
    var View = AmpersandView.extend({
        template: '<div></div>',
        autoRender: true
    });
    var view = new View();
    t.ok(view.el);
    t.once('change:el', function () {
        t.pass('this should fire');
    });
    t.el = document.createElement('div');
    t.once('change:el', function () {
        t.fail('this should *not* fire');
    });
    var el = t.el;
    el.innerHTML = '<span></span>';
    t.el = el;
    t.end();
});

test('Should be able to bind multiple models in bindings hash', function (t) {
    var Person = Model.extend({
        props: {
            name: 'string'
        }
    });
    var View = AmpersandView.extend({
        template: '<div><span id="model1"></span><span id="model2"></span></div>',
        autoRender: true,
        props: {
            model1: 'model',
            model2: 'model'
        },
        bindings: {
            'model1.name': '#model1',
            'model2.name': {
                type: 'class',
                selector: '#model2'
            }
        }
    });
    var view = new View({
        model1: new Person({name: 'henrik'}),
        model2: new Person({name: 'larry'})
    });
    t.equal(view.el.firstChild.textContent, 'henrik');
    t.equal(view.el.children[1].className.trim(), 'larry');
    t.end();
});

test('Should be able to declare bindings first, before model is added', function (t) {
    var Person = Model.extend({props: {name: 'string'}});
    var View = AmpersandView.extend({
        template: '<div></div>',
        autoRender: true,
        bindings: {
            'model.name': ''
        }
    });
    var view = new View();
    t.equal(view.el.textContent, '');
    view.model = new Person({name: 'henrik'});
    t.equal(view.el.textContent, 'henrik');
    view.model.name = 'something new';
    t.equal(view.el.textContent, 'something new');
    t.end();
});

test('Should be able to swap out models and bindings should still work', function (t) {
    var Person = Model.extend({props: {name: 'string'}});
    var View = AmpersandView.extend({
        template: '<div></div>',
        autoRender: true,
        bindings: {
            'model.name': ''
        }
    });
    var p1 = new Person({name: 'first'});
    var p2 = new Person({name: 'second'});
    var view = new View();
    t.equal(view.el.textContent, '');
    view.model = p1;
    t.equal(view.el.textContent, 'first');
    view.model = p2;
    t.equal(view.el.textContent, 'second');
    // make sure it's not still bound to first
    p1.name = 'third';
    t.equal(view.el.textContent, 'second');
    t.end();
});

test('Should be able to re-render and maintain bindings', function (t) {
    var Person = Model.extend({props: {name: 'string'}});
    var View = AmpersandView.extend({
        template: '<div></div>',
        autoRender: true,
        bindings: {
            'model.name': ''
        }
    });
    var p1 = new Person({name: 'first'});
    var view = new View({model: p1});
    var el1 = view.el;
    t.equal(view.el.textContent, 'first');
    view.renderWithTemplate();
    var el2 = view.el;
    t.ok(el1 !== el2, 'sanity check to make sure it\'s a new element');
    t.equal(el2.textContent, 'first', 'new one should have the binding still');
    p1.name = 'third';
    t.equal(el2.textContent, 'third', 'new element should also get the change');
    t.end();
});

test('trigger `remove` when view is removed', function (t) {
    var View = AmpersandView.extend({
        template: '<div></div>',
        autoRender: true
    });
    var view = new View();
    view.on('remove', function () {
        t.pass('remove fired');
        t.end();
    });
    view.remove();
});

test('declarative subViews basics', function (t) {
    var Sub = AmpersandView.extend({
        template: '<span></span>'
    });

var View = AmpersandView.extend({
        template: '<div><div class="container"></div></div>',
        autoRender: true,
        subviews: {
            sub1: {
                container: '.container',
                constructor: Sub
            }
        }
    });
    var view = new View();

t.equal(view.el.innerHTML, '<span></span>');

t.end();
});

test('subview hook can include special characters', function (t) {
    var Sub = AmpersandView.extend({
        template: '<span></span>'
    });

var View = AmpersandView.extend({
        template: '<div><div data-hook="test.hi-there"></div></div>',
        autoRender: true,
        subviews: {
            sub1: {
                hook: 'test.hi-there',
                constructor: Sub
            }
        }
    });
    var view = new View();

t.equal(view.el.innerHTML, '<span></span>');

t.end();
});

test('make sure subviews dont fire until their `waitFor` is done', function (t) {
    var Sub = AmpersandView.extend({
        template: '<span>yes</span>'
    });

t.end();
});

test('make sure template can return a dom node', function (t) {
    var Sub = AmpersandView.extend({
        template: function () {
            return document.createElement('div');
        }
    });

var view = new Sub();
    view.render();

t.end();
});

test('template can be passed as viewOption', function (t) {
    t.plan(1);

var View = AmpersandView.extend({
        autoRender: true
    });

var view = new View({
        template: '<span></span>'
    });

t.equal(view.el.outerHTML, '<span></span>');

t.end();
});

test('events are bound if there is an el in the constructor', function (t) {
    t.plan(1);
    var event = document.createEvent("MouseEvent");
    var View = AmpersandView.extend({
        template: function () {
            return document.createElement('div');
        },
        events: {
            'click div': 'divClicked'
        },
        divClicked: function (e) {
            t.ok(true, 'event fired');
            t.end();
        }
    });
    var view = new View({el: document.createElement('div')});
    event.initMouseEvent('click');
    view.el.dispatchEvent(event);
});

ampersand-view/test/main.js

Maintainability

Lines of code

Difficulty

Estimated Errors

Function weight

By Complexity

By SLOC