github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/vue-1.0.24/test/unit/specs/api/lifecycle_spec.js (about)

     1  var Vue = require('src')
     2  var compiler = require('src/compiler')
     3  
     4  describe('Lifecycle API', function () {
     5    describe('$mount', function () {
     6      var el, frag
     7      beforeEach(function () {
     8        el = document.createElement('div')
     9        el.textContent = '{{test}}'
    10        frag = document.createDocumentFragment()
    11        frag.appendChild(el)
    12      })
    13  
    14      it('normal', function () {
    15        var vm = new Vue({
    16          data: {
    17            test: 'foo'
    18          }
    19        })
    20        vm.$mount(el)
    21        expect(vm.$el).toBe(el)
    22        expect(el.__vue__).toBe(vm)
    23        expect(el.textContent).toBe('foo')
    24      })
    25  
    26      it('auto-create', function () {
    27        var vm = new Vue({
    28          template: '{{a}}',
    29          data: {
    30            a: 123
    31          }
    32        })
    33        vm.$mount()
    34        expect(vm.$el).toBeTruthy()
    35        expect(vm.$el.tagName).toBe('DIV')
    36        expect(vm.$el.textContent).toBe('123')
    37      })
    38  
    39      it('selector', function () {
    40        el.id = 'mount-test'
    41        document.body.appendChild(el)
    42        var vm = new Vue({
    43          data: { test: 'foo' }
    44        })
    45        vm.$mount('#mount-test')
    46        expect(vm.$el).toBe(el)
    47        expect(el.__vue__).toBe(vm)
    48        expect(el.textContent).toBe('foo')
    49        document.body.removeChild(el)
    50      })
    51  
    52      it('warn invalid selector', function () {
    53        var vm = new Vue()
    54        vm.$mount('#none-exist')
    55        expect('Cannot find element').toHaveBeenWarned()
    56      })
    57  
    58      it('replace', function () {
    59        el.className = 'replace-test'
    60        document.body.appendChild(el)
    61        var vm = new Vue({
    62          replace: true,
    63          data: { test: 'foo' },
    64          template: '<div>{{test}}</div>'
    65        })
    66        vm.$mount(el)
    67        expect(vm.$el).not.toBe(el)
    68        expect(vm.$el.textContent).toBe('foo')
    69        expect(document.body.contains(el)).toBe(false)
    70        expect(document.body.lastChild).toBe(vm.$el)
    71        expect(vm.$el.className).toBe('replace-test')
    72        document.body.removeChild(vm.$el)
    73      })
    74  
    75      it('precompiled linker', function () {
    76        var linker = compiler.compile(el, Vue.options)
    77        var vm = new Vue({
    78          _linker: linker,
    79          data: {
    80            test: 'foo'
    81          }
    82        })
    83        vm.$mount(el)
    84        expect(vm.$el).toBe(el)
    85        expect(el.__vue__).toBe(vm)
    86        expect(el.textContent).toBe('foo')
    87      })
    88  
    89      it('mount to fragment', function () {
    90        var vm = new Vue({
    91          data: { test: 'frag' }
    92        })
    93        vm.$mount(frag)
    94        expect(vm._fragment).toBe(frag)
    95        expect(vm.$el.nextSibling.textContent).toBe('frag')
    96      })
    97  
    98      it('replace fragment', function () {
    99        document.body.appendChild(el)
   100        var vm = new Vue({
   101          replace: true,
   102          data: { test: 'foo' },
   103          template: '<div>{{test}}</div><div>{{test + "bar"}}</div>'
   104        })
   105        vm.$mount(el)
   106        expect(vm.$el).not.toBe(el)
   107        expect(vm.$el.nextSibling.textContent).toBe('foo')
   108        expect(vm.$el.nextSibling.nextSibling.textContent).toBe('foobar')
   109        expect(document.body.contains(el)).toBe(false)
   110        expect(document.body.lastChild).toBe(vm._fragmentEnd)
   111        vm.$remove()
   112      })
   113  
   114      it('hooks', function () {
   115        var hooks = ['created', 'beforeCompile', 'compiled', 'attached', 'ready']
   116        var options = {
   117          data: {
   118            test: 'foo'
   119          }
   120        }
   121        hooks.forEach(function (hook) {
   122          options[hook] = jasmine.createSpy(hook)
   123        })
   124        var vm = new Vue(options)
   125        expect(options.created).toHaveBeenCalled()
   126        expect(options.beforeCompile).not.toHaveBeenCalled()
   127        vm.$mount(el)
   128        expect(options.beforeCompile).toHaveBeenCalled()
   129        expect(options.compiled).toHaveBeenCalled()
   130        expect(options.attached).not.toHaveBeenCalled()
   131        expect(options.ready).not.toHaveBeenCalled()
   132        vm.$appendTo(document.body)
   133        expect(options.attached).toHaveBeenCalled()
   134        expect(options.ready).toHaveBeenCalled()
   135        vm.$remove()
   136      })
   137  
   138      it('warn against multiple calls', function () {
   139        var vm = new Vue({
   140          el: el
   141        })
   142        vm.$mount(el)
   143        expect('$mount() should be called only once').toHaveBeenWarned()
   144      })
   145    })
   146  
   147    describe('$destroy', function () {
   148      it('normal', function () {
   149        var vm = new Vue()
   150        expect(vm._isDestroyed).toBe(false)
   151        var data = vm._data
   152        expect(data.__ob__.vms.length).toBe(1)
   153        vm.$destroy()
   154        expect(data.__ob__.vms.length).toBe(0)
   155        expect(vm._isDestroyed).toBe(true)
   156        expect(vm._watchers).toBeNull()
   157        expect(vm.$el).toBeNull()
   158        expect(vm.$parent).toBeNull()
   159        expect(vm.$root).toBeNull()
   160        expect(vm.$children).toBeNull()
   161        expect(vm._directives).toBeNull()
   162        expect(Object.keys(vm._events).length).toBe(0)
   163      })
   164  
   165      it('remove element', function () {
   166        var el = document.createElement('div')
   167        var parent = document.createElement('div')
   168        parent.appendChild(el)
   169        var vm = new Vue({ el: el })
   170        vm.$destroy(true)
   171        expect(parent.childNodes.length).toBe(0)
   172        expect(el.__vue__).toBeNull()
   173      })
   174  
   175      it('hooks', function () {
   176        var opts = {
   177          beforeDestroy: jasmine.createSpy(),
   178          destroyed: jasmine.createSpy(),
   179          detached: jasmine.createSpy()
   180        }
   181        var el = opts.el = document.createElement('div')
   182        document.body.appendChild(el)
   183        var vm = new Vue(opts)
   184        vm.$destroy(true)
   185        expect(opts.beforeDestroy).toHaveBeenCalled()
   186        expect(opts.destroyed).toHaveBeenCalled()
   187        expect(opts.detached).toHaveBeenCalled()
   188      })
   189  
   190      // #1966
   191      it('grandchild hooks', function () {
   192        var grandChildBeforeDestroy = jasmine.createSpy()
   193        var grandChildDestroyed = jasmine.createSpy()
   194        var grandChildDetached = jasmine.createSpy()
   195  
   196        var opts = {
   197          template: '<div><test></test></div>',
   198          components: {
   199            test: {
   200              template: '<div><test-inner></test-inner></div>',
   201              components: {
   202                'test-inner': {
   203                  beforeDestroy: grandChildBeforeDestroy,
   204                  destroyed: grandChildDestroyed,
   205                  detached: grandChildDetached
   206                }
   207              }
   208            }
   209          }
   210        }
   211        var el = opts.el = document.createElement('div')
   212        document.body.appendChild(el)
   213        var vm = new Vue(opts)
   214        vm.$destroy(true)
   215  
   216        expect(grandChildBeforeDestroy).toHaveBeenCalled()
   217        expect(grandChildDestroyed).toHaveBeenCalled()
   218        expect(grandChildDetached).toHaveBeenCalled()
   219      })
   220  
   221      it('parent', function () {
   222        var parent = new Vue()
   223        var child = new Vue({ parent: parent })
   224        var child2 = new Vue({ parent: parent })
   225        expect(parent.$children.length).toBe(2)
   226        child.$destroy()
   227        expect(parent.$children.length).toBe(1)
   228        child2.$destroy()
   229        expect(parent.$children.length).toBe(0)
   230      })
   231  
   232      it('children', function () {
   233        var parent = new Vue()
   234        var child = new Vue({ parent: parent })
   235        parent.$destroy()
   236        expect(child._isDestroyed).toBe(true)
   237      })
   238  
   239      it('directives', function () {
   240        var spy = jasmine.createSpy('directive unbind')
   241        var vm = new Vue({
   242          el: document.createElement('div'),
   243          template: '<div v-test></div>',
   244          directives: {
   245            test: {
   246              unbind: spy
   247            }
   248          }
   249        })
   250        vm.$destroy()
   251        expect(spy).toHaveBeenCalled()
   252      })
   253  
   254      it('watchers', function () {
   255        var vm = new Vue({
   256          el: document.createElement('div'),
   257          template: '{{a}}',
   258          data: { a: 1 }
   259        })
   260        vm.$watch('a', function () {})
   261        var dirWatcher = vm._watchers[0]
   262        var userWatcher = vm._watchers[1]
   263        vm.$destroy()
   264        expect(dirWatcher.active).toBe(false)
   265        expect(userWatcher.active).toBe(false)
   266      })
   267  
   268      it('refuse multiple calls', function () {
   269        var spy = jasmine.createSpy()
   270        var vm = new Vue({
   271          beforeDestroy: spy
   272        })
   273        vm.$destroy()
   274        vm.$destroy()
   275        expect(spy.calls.count()).toBe(1)
   276      })
   277  
   278      it('safely teardown partial compilation', function () {
   279        var vm = new Vue({
   280          template: '<test><partial name="hello"></partial></test>',
   281          partials: {
   282            hello: 'Hello {{name}}'
   283          },
   284          components: {
   285            test: {
   286              template: '<slot></slot>'
   287            }
   288          }
   289        }).$mount()
   290        expect(function () {
   291          vm.$destroy()
   292        }).not.toThrow()
   293      })
   294    })
   295  
   296    describe('$compile', function () {
   297      it('should partial compile and teardown stuff', function (done) {
   298        var el = document.createElement('div')
   299        var vm = new Vue({
   300          el: el,
   301          template: '{{a}}',
   302          data: {
   303            a: 'foo'
   304          }
   305        })
   306        expect(vm._directives.length).toBe(1)
   307        var partial = document.createElement('span')
   308        partial.textContent = '{{a}}'
   309        var decompile = vm.$compile(partial)
   310        expect(partial.textContent).toBe('foo')
   311        expect(vm._directives.length).toBe(2)
   312        decompile()
   313        expect(vm._directives.length).toBe(1)
   314        vm.a = 'bar'
   315        Vue.nextTick(function () {
   316          expect(el.textContent).toBe('bar')
   317          expect(partial.textContent).toBe('foo')
   318          done()
   319        })
   320      })
   321    })
   322  })