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

     1  var Vue = require('src')
     2  var _ = require('src/util')
     3  var compiler = require('src/compiler')
     4  
     5  describe('Partial', function () {
     6    var el
     7    beforeEach(function () {
     8      el = document.createElement('div')
     9    })
    10  
    11    it('static', function (done) {
    12      var vm = new Vue({
    13        el: el,
    14        template: '<partial name="p"></partial>',
    15        data: {
    16          msg: 'foo'
    17        },
    18        partials: {
    19          p: '{{msg}}'
    20        }
    21      })
    22      expect(el.textContent).toBe('foo')
    23      vm.msg = 'bar'
    24      _.nextTick(function () {
    25        expect(el.textContent).toBe('bar')
    26        done()
    27      })
    28    })
    29  
    30    it('dynamic', function (done) {
    31      var vm = new Vue({
    32        el: el,
    33        template: '<partial :name="\'test-\' + id"></partial>',
    34        data: {
    35          id: 'a'
    36        },
    37        partials: {
    38          'test-a': 'a {{id}}',
    39          'test-b': 'b {{id}}'
    40        }
    41      })
    42      expect(el.textContent).toBe('a a')
    43      vm.id = 'b'
    44      _.nextTick(function () {
    45        expect(el.textContent).toBe('b b')
    46        done()
    47      })
    48    })
    49  
    50    it('dynamic inside v-for', function () {
    51      new Vue({
    52        el: el,
    53        template: '<div v-for="id in list"><partial v-bind:name="\'test-\' + id"></partial></div>',
    54        data: {
    55          list: ['foo', 'bar']
    56        },
    57        partials: {
    58          'test-foo': 'foo {{id}}',
    59          'test-bar': 'bar {{id}}'
    60        }
    61      })
    62      expect(el.textContent).toBe('foo foobar bar')
    63    })
    64  
    65    it('caching', function () {
    66      var calls = 0
    67      var compile = compiler.compile
    68      compiler.compile = function () {
    69        calls++
    70        return compile.apply(this, arguments)
    71      }
    72      // Note: caching only works on components, not native Vue
    73      var Comp = Vue.extend({
    74        template:
    75          '<partial name="cache-test"></partial> ' +
    76          '<partial name="cache-test"></partial>',
    77        partials: {
    78          'cache-test': 'foo {{msg}}'
    79        }
    80      })
    81      new Comp({
    82        el: el,
    83        data: {
    84          msg: 'bar'
    85        }
    86      })
    87      expect(el.textContent).toBe('foo bar foo bar')
    88      // one call for instance, and one for partial
    89      expect(calls).toBe(2)
    90      // cleanup
    91      compiler.compile = compile
    92    })
    93  
    94    it('teardown', function () {
    95      var vm = new Vue({
    96        el: el,
    97        template: '<partial :name="\'test-\' + id"></partial>',
    98        data: {
    99          id: 'a'
   100        },
   101        partials: {
   102          'test-a': 'a {{id}}'
   103        }
   104      })
   105      expect(vm._directives.length).toBe(2)
   106      expect(vm._watchers.length).toBe(2)
   107      var partialDir
   108      vm._directives.some(function (d) {
   109        if (d.name === 'partial') {
   110          partialDir = d
   111          return true
   112        }
   113      })
   114      partialDir._teardown()
   115      // the text-directive should've been removed.
   116      expect(vm._directives.length).toBe(1)
   117      expect(vm._directives[0].name).toBe('partial')
   118      expect(vm._watchers.length).toBe(0)
   119    })
   120  })