vue/test/unit/specs/api/dom_spec.js

/**
 * We are not testing transition-related stuff here,
 * those are tested in transition_spec.js.
 */

var Vue = require('../../../../src/vue')
var _ = require('../../../../src/util')

if (_.inBrowser) {
  describe('DOM API', function () {

    var vm, vm2, parent, target, sibling, empty, spy
    beforeEach(function () {
      spy = jasmine.createSpy('dom')
      parent = document.createElement('div')
      target = document.createElement('div')
      sibling = document.createElement('div')
      empty = document.createElement('div')
      parent.appendChild(target)
      parent.appendChild(sibling)
      var el = document.createElement('div')
      vm = new Vue({ el: el })
      // block instance
      var frag = document.createDocumentFragment()
      frag.appendChild(document.createElement('p'))
      frag.appendChild(document.createElement('span'))
      vm2 = new Vue({
        el: frag
      })
    })

    describe('$appendTo', function () {

      it('normal instance', function () {
        vm.$appendTo(parent, spy)
        expect(parent.childNodes.length).toBe(3)
        expect(parent.lastChild).toBe(vm.$el)
        expect(spy.calls.count()).toBe(1)
      })

      it('block instance', function () {
        vm2.$appendTo(parent, spy)
        expect(parent.childNodes.length).toBe(6)
        expect(parent.childNodes[2]).toBe(vm2._fragmentStart)
        expect(parent.childNodes[2]).toBe(vm2.$el)
        expect(parent.childNodes[3].tagName).toBe('P')
        expect(parent.childNodes[4].tagName).toBe('SPAN')
        expect(parent.childNodes[5]).toBe(vm2._fragmentEnd)
        expect(spy.calls.count()).toBe(1)
      })

    })

    describe('$prependTo', function () {

      it('normal instance', function () {
        vm.$prependTo(parent, spy)
        expect(parent.childNodes.length).toBe(3)
        expect(parent.firstChild).toBe(vm.$el)
        expect(spy.calls.count()).toBe(1)
        vm.$prependTo(empty, spy)
        expect(empty.childNodes.length).toBe(1)
        expect(empty.firstChild).toBe(vm.$el)
        expect(spy.calls.count()).toBe(2)
      })

      it('block instance', function () {
        vm2.$prependTo(parent, spy)
        expect(parent.childNodes.length).toBe(6)
        expect(parent.childNodes[0]).toBe(vm2._fragmentStart)
        expect(parent.childNodes[0]).toBe(vm2.$el)
        expect(parent.childNodes[1].tagName).toBe('P')
        expect(parent.childNodes[2].tagName).toBe('SPAN')
        expect(parent.childNodes[3]).toBe(vm2._fragmentEnd)
        expect(spy.calls.count()).toBe(1)
        // empty
        vm2.$prependTo(empty, spy)
        expect(empty.childNodes.length).toBe(4)
        expect(empty.childNodes[0]).toBe(vm2._fragmentStart)
        expect(empty.childNodes[0]).toBe(vm2.$el)
        expect(empty.childNodes[1].tagName).toBe('P')
        expect(empty.childNodes[2].tagName).toBe('SPAN')
        expect(empty.childNodes[3]).toBe(vm2._fragmentEnd)
        expect(spy.calls.count()).toBe(2)
      })

    })

    describe('$before', function () {

      it('normal instance', function () {
        vm.$before(sibling, spy)
        expect(parent.childNodes.length).toBe(3)
        expect(parent.childNodes[1]).toBe(vm.$el)
        expect(spy.calls.count()).toBe(1)
      })

      it('block instance', function () {
        vm2.$before(sibling, spy)
        expect(parent.childNodes.length).toBe(6)
        expect(parent.childNodes[1]).toBe(vm2._fragmentStart)
        expect(parent.childNodes[1]).toBe(vm2.$el)
        expect(parent.childNodes[2].tagName).toBe('P')
        expect(parent.childNodes[3].tagName).toBe('SPAN')
        expect(parent.childNodes[4]).toBe(vm2._fragmentEnd)
        expect(spy.calls.count()).toBe(1)
      })

    })

    describe('$after', function () {

      it('normal instance', function () {
        vm.$after(target, spy)
        expect(parent.childNodes.length).toBe(3)
        expect(parent.childNodes[1]).toBe(vm.$el)
        expect(spy.calls.count()).toBe(1)
      })

      it('normal instance no next sibling', function () {
        vm.$after(sibling, spy)
        expect(parent.childNodes.length).toBe(3)
        expect(parent.lastChild).toBe(vm.$el)
        expect(spy.calls.count()).toBe(1)
      })

      it('block instance', function () {
        vm2.$after(target, spy)
        expect(parent.childNodes.length).toBe(6)
        expect(parent.childNodes[1]).toBe(vm2._fragmentStart)
        expect(parent.childNodes[1]).toBe(vm2.$el)
        expect(parent.childNodes[2].tagName).toBe('P')
        expect(parent.childNodes[3].tagName).toBe('SPAN')
        expect(parent.childNodes[4]).toBe(vm2._fragmentEnd)
        expect(spy.calls.count()).toBe(1)
      })

      it('block instance no next sibling', function () {
        vm2.$after(sibling, spy)
        expect(parent.childNodes.length).toBe(6)
        expect(parent.childNodes[2]).toBe(vm2._fragmentStart)
        expect(parent.childNodes[2]).toBe(vm2.$el)
        expect(parent.childNodes[3].tagName).toBe('P')
        expect(parent.childNodes[4].tagName).toBe('SPAN')
        expect(parent.childNodes[5]).toBe(vm2._fragmentEnd)
        expect(spy.calls.count()).toBe(1)
      })

    })

    describe('$remove', function () {

      it('normal instance', function () {
        vm.$before(sibling)
        expect(parent.childNodes.length).toBe(3)
        expect(parent.childNodes[1]).toBe(vm.$el)
        vm.$remove(spy)
        expect(parent.childNodes.length).toBe(2)
        expect(parent.childNodes[0]).toBe(target)
        expect(parent.childNodes[1]).toBe(sibling)
        expect(spy.calls.count()).toBe(1)
      })

      it('block instance', function () {
        vm2.$before(sibling)
        expect(parent.childNodes.length).toBe(6)
        expect(parent.childNodes[1]).toBe(vm2._fragmentStart)
        expect(parent.childNodes[1]).toBe(vm2.$el)
        expect(parent.childNodes[2].tagName).toBe('P')
        expect(parent.childNodes[3].tagName).toBe('SPAN')
        expect(parent.childNodes[4]).toBe(vm2._fragmentEnd)
        vm2.$remove(spy)
        expect(parent.childNodes.length).toBe(2)
        expect(parent.childNodes[0]).toBe(target)
        expect(parent.childNodes[1]).toBe(sibling)
        expect(spy.calls.count()).toBe(1)
      })

      it('detached', function () {
        vm.$remove(spy)
        expect(spy.calls.count()).toBe(1)
      })

    })

    describe('$nextTick', function () {

      it('should work', function (done) {
        var context
        var called = false
        vm.$nextTick(function () {
          called = true
          context = this
        })
        expect(called).toBe(false)
        _.nextTick(function () {
          expect(called).toBe(true)
          expect(context).toBe(vm)
          done()
        })
      })

    })

  })
}