vue/test/unit/specs/misc.js

describe('Misc Features', function () {

    var nextTick = require('vue/src/utils').nextTick
    
    describe('inline expression', function () {
        it('should evaluate the correct value', function (done) {
            var v = new Vue({
                template: '{{a + "123" + b}} and {{c}}'
            })
            v.a = 'A'
            v.b = 'B'
            v.c = 'C'
            nextTick(function () {
                assert.strictEqual(v.$el.textContent, 'A123B and C')
                done()
            })
        })
    })

    describe('expression inside attributes', function () {
        it('should interpolate the attribute', function (done) {
            var v = new Vue({
                attributes: {
                    test: 'one {{msg}} three'
                },
                data: {
                    msg: 'two'
                }
            })
            assert.strictEqual(v.$el.getAttribute('test'), 'one two three')
            v.msg = '2'
            nextTick(function () {
                assert.strictEqual(v.$el.getAttribute('test'), 'one 2 three')
                done()
            })
        })
    })

    describe('triple mustache', function () {
        it('should set unescaped HTML', function () {
            var v = new Vue({
                template: '{{{html}}}',
                data: {
                    html: '<span>a</span><a>hi</a>'
                }
            })
            assert.strictEqual(v.$el.innerHTML, '<span>a</span><a>hi</a><!--v-html-->')
        })
    })

    describe('computed properties', function () {

        it('should be accessible like a normal attribtue', function () {
            var b = 2
            var v = new Vue({
                template: '{{nested.value.a}}',
                data: {
                    a: 1,
                },
                computed: {
                    test: {
                        $get: function () {
                            return this.a + b
                        },
                        $set: function (v) {
                            b = v - this.a
                        }
                    },
                    getOnly: function () {
                        return this.a + 1
                    }
                }
            })

            assert.strictEqual(v.test, 3)
            assert.strictEqual(v.getOnly, 2)
            v.a = 2
            assert.strictEqual(v.test, 4)
            assert.strictEqual(v.getOnly, 3)
            b = 3
            assert.strictEqual(v.test, 5)
            v.test = 10
            assert.strictEqual(b, 8)
        })

        it('should be bindable in templates, even nested', function (done) {
            var v = new Vue({
                template: '{{nested.value.a}}',
                data: { a: 1 },
                computed: {
                    nested: function () {
                        return {
                            value: {
                                a: this.a + 2
                            }
                        }
                    }
                }
            })
            assert.strictEqual(v.$el.textContent, '3')

            v.a = 2
            nextTick(function () {
                assert.strictEqual(v.$el.textContent, '4')
                done()
            })
        })

    })

    describe('setting an object to empty', function () {
        it('should emit undefined for paths in the old object', function (done) {
            var v = new Vue({
                data: {
                    a: {
                        b: { c: 1 }
                    }
                }
            })
            var emitted = false
            v.$watch('a.b.c', function (v) {
                assert.strictEqual(v, undefined)
                emitted = true
            })
            v.a = {}
            nextTick(function () {
                assert.ok(emitted)
                done()
            })
        })
    })

    describe('event delegation', function () {

        var inCalled = 0,
            outCalled = 0,
            innerHandler = function () {}
        var v = new Vue({
            template: '<div v-on="click:out"><div class="inner" v-on="click:in"></div></div>',
            methods: {
                'in': function (e) {
                    inCalled++
                    innerHandler(e)
                },
                out: function () {
                    outCalled++
                }
            }
        })
        v.$appendTo('#test')

        it('should work', function () {
            var e = mockMouseEvent('click')
            v.$el.querySelector('.inner').dispatchEvent(e)
            assert.strictEqual(inCalled, 1)
            assert.strictEqual(outCalled, 1)
        })
        
        it('should allow stopPropagation()', function () {
            innerHandler = function (e) {
                e.stopPropagation()
            }
            var e = mockMouseEvent('click')
            v.$el.querySelector('.inner').dispatchEvent(e)
            assert.strictEqual(inCalled, 2)
            assert.strictEqual(outCalled, 1)
        })

    })

})