github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/vue-1.0.24/test/unit/specs/async_component_spec.js (about)

     1  var Vue = require('src')
     2  var _ = Vue.util
     3  
     4  describe('Async components', function () {
     5    var el
     6    beforeEach(function () {
     7      el = document.createElement('div')
     8      document.body.appendChild(el)
     9    })
    10  
    11    afterEach(function () {
    12      document.body.removeChild(el)
    13    })
    14  
    15    it('normal', function (done) {
    16      var go = jasmine.createSpy()
    17      new Vue({
    18        el: el,
    19        template: '<test foo="bar" @ready="go"></test>',
    20        methods: {
    21          go: go
    22        },
    23        components: {
    24          test: function (resolve) {
    25            setTimeout(function () {
    26              resolve({
    27                props: ['foo'],
    28                template: '{{ foo }}',
    29                ready: function () {
    30                  this.$emit('ready')
    31                }
    32              })
    33              next()
    34            }, 0)
    35          }
    36        }
    37      })
    38      function next () {
    39        expect(el.textContent).toBe('bar')
    40        expect(go).toHaveBeenCalled()
    41        done()
    42      }
    43    })
    44  
    45    it('dynamic', function (done) {
    46      var vm = new Vue({
    47        el: el,
    48        template: '<component :is="view"></component>',
    49        data: {
    50          view: 'view-a'
    51        },
    52        components: {
    53          'view-a': function (resolve) {
    54            setTimeout(function () {
    55              resolve({
    56                template: 'A'
    57              })
    58              step1()
    59            }, 0)
    60          },
    61          'view-b': function (resolve) {
    62            setTimeout(function () {
    63              resolve({
    64                template: 'B'
    65              })
    66              step2()
    67            }, 0)
    68          }
    69        }
    70      })
    71      var aCalled = false
    72      function step1 () {
    73        // ensure A is resolved only once
    74        expect(aCalled).toBe(false)
    75        aCalled = true
    76        expect(el.textContent).toBe('A')
    77        vm.view = 'view-b'
    78      }
    79      function step2 () {
    80        expect(el.textContent).toBe('B')
    81        vm.view = 'view-a'
    82        _.nextTick(function () {
    83          expect(el.textContent).toBe('A')
    84          done()
    85        })
    86      }
    87    })
    88  
    89    it('invalidate pending on dynamic switch', function (done) {
    90      var vm = new Vue({
    91        el: el,
    92        template: '<component :is="view"></component>',
    93        data: {
    94          view: 'view-a'
    95        },
    96        components: {
    97          'view-a': function (resolve) {
    98            setTimeout(function () {
    99              resolve({
   100                template: 'A'
   101              })
   102              step1()
   103            }, 100)
   104          },
   105          'view-b': function (resolve) {
   106            setTimeout(function () {
   107              resolve({
   108                template: 'B'
   109              })
   110              step2()
   111            }, 200)
   112          }
   113        }
   114      })
   115      expect(el.textContent).toBe('')
   116      vm.view = 'view-b'
   117      function step1 () {
   118        // called after A resolves, but A should have been
   119        // invalidated so no Ctor should be set
   120        expect(vm._directives[0].Component).toBe(null)
   121      }
   122      function step2 () {
   123        // B should resolve successfully
   124        expect(el.textContent).toBe('B')
   125        done()
   126      }
   127    })
   128  
   129    it('invalidate pending on teardown', function (done) {
   130      var vm = new Vue({
   131        el: el,
   132        template: '<test></test>',
   133        data: {
   134          view: 'view-a'
   135        },
   136        components: {
   137          test: function (resolve) {
   138            setTimeout(function () {
   139              resolve({
   140                template: 'A'
   141              })
   142              next()
   143            }, 100)
   144          }
   145        }
   146      })
   147      expect(el.textContent).toBe('')
   148      // cache directive isntance before destroy
   149      var dir = vm._directives[0]
   150      vm.$destroy()
   151      function next () {
   152        // called after A resolves, but A should have been
   153        // invalidated so no Ctor should be set
   154        expect(dir.Component).toBe(null)
   155        done()
   156      }
   157    })
   158  
   159    it('avoid duplicate requests', function (done) {
   160      var factoryCallCount = 0
   161      var instanceCount = 0
   162      new Vue({
   163        el: el,
   164        template:
   165          '<test></test>' +
   166          '<test></test>',
   167        components: {
   168          test: factory
   169        }
   170      })
   171      function factory (resolve) {
   172        factoryCallCount++
   173        setTimeout(function () {
   174          resolve({
   175            template: 'A',
   176            created: function () {
   177              instanceCount++
   178            }
   179          })
   180          next()
   181        }, 0)
   182      }
   183      function next () {
   184        expect(factoryCallCount).toBe(1)
   185        expect(el.textContent).toBe('AA')
   186        expect(instanceCount).toBe(2)
   187        done()
   188      }
   189    })
   190  
   191    it('warn reject', function () {
   192      new Vue({
   193        el: el,
   194        template: '<test></test>',
   195        components: {
   196          test: function (resolve, reject) {
   197            reject('nooooo')
   198          }
   199        }
   200      })
   201      expect('Reason: nooooo').toHaveBeenWarned()
   202    })
   203  
   204    it('v-for', function (done) {
   205      new Vue({
   206        el: el,
   207        template: '<test v-for="n in list" :n="n"></test>',
   208        data: {
   209          list: [1, 2, 3]
   210        },
   211        components: {
   212          test: function (resolve) {
   213            setTimeout(function () {
   214              resolve({
   215                props: ['n'],
   216                template: '{{n}}'
   217              })
   218              next()
   219            }, 0)
   220          }
   221        }
   222      })
   223      function next () {
   224        expect(el.textContent).toBe('123')
   225        done()
   226      }
   227    })
   228  })