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

     1  var transclude = require('src/compiler').transclude
     2  var Vue = require('src')
     3  var _ = require('src/util')
     4  
     5  describe('Transclude', function () {
     6    var el, options
     7    beforeEach(function () {
     8      el = document.createElement('div')
     9      options = _.extend({}, Vue.options)
    10    })
    11  
    12    it('normal', function () {
    13      var res = transclude(el, options)
    14      expect(res).toBe(el)
    15    })
    16  
    17    it('template', function () {
    18      options.template = '{{hi}}'
    19      var res = transclude(el, options)
    20      expect(res).toBe(el)
    21      expect(res.innerHTML).toBe('{{hi}}')
    22    })
    23  
    24    it('template invalid', function () {
    25      options.template = '#non-existent-stuff'
    26      var res = transclude(el, options)
    27      expect(res).toBeUndefined()
    28      expect('Invalid template option').toHaveBeenWarned()
    29    })
    30  
    31    it('template replace', function () {
    32      el.className = 'hello'
    33      options.template = '<div>{{hi}}</div>'
    34      options.replace = true
    35      var res = transclude(el, options)
    36      expect(res).not.toBe(el)
    37      expect(res.tagName).toBe('DIV')
    38      expect(res.className).toBe('hello')
    39      expect(res.innerHTML).toBe('{{hi}}')
    40    })
    41  
    42    it('template replace -> fragment instance', function () {
    43      var res
    44      options.replace = true
    45  
    46      // multiple root
    47      options.template = '<div></div><div></div>'
    48      res = transclude(el, options)
    49      expect(res.nodeType).toBe(11)
    50  
    51      // non-element
    52      options.template = '{{hi}}'
    53      res = transclude(el, options)
    54      expect(res.nodeType).toBe(11)
    55  
    56      // single component: <component>
    57      options.template = '<component bind-is="hi"></component>'
    58      res = transclude(el, options)
    59      expect(res.nodeType).toBe(11)
    60  
    61      // single component: custom element
    62      options.template = '<test></test>'
    63      options.components = { test: {}}
    64      res = transclude(el, options)
    65      expect(res.nodeType).toBe(11)
    66  
    67      // single component: is
    68      options.template = '<div is="test"></div>'
    69      res = transclude(el, options)
    70      expect(res.nodeType).toBe(11)
    71  
    72      // element directive
    73      options.template = '<el-dir></el-dir>'
    74      options.elementDirectives = { 'el-dir': {}}
    75      res = transclude(el, options)
    76      expect(res.nodeType).toBe(11)
    77  
    78      // v-for
    79      options.template = '<div v-for="item in list"></div>'
    80      res = transclude(el, options)
    81      expect(res.nodeType).toBe(11)
    82  
    83      // v-if
    84      options.template = '<div v-if="ok"></div>'
    85      res = transclude(el, options)
    86      expect(res.nodeType).toBe(11)
    87    })
    88  
    89    it('direct fragment instance', function () {
    90      var frag = document.createDocumentFragment()
    91      frag.appendChild(el)
    92      var res = transclude(frag, options)
    93      expect(res).toBe(frag)
    94      expect(res.childNodes.length).toBe(3)
    95      expect(res.childNodes[0].nodeType).toBe(3)
    96      expect(res.childNodes[1]).toBe(el)
    97      expect(res.childNodes[2].nodeType).toBe(3)
    98    })
    99  
   100    it('template element', function () {
   101      var tpl = document.createElement('template')
   102      tpl.innerHTML = '<div>123</div>'
   103      var res = transclude(tpl, options)
   104      expect(res.nodeType).toBe(11)
   105      expect(res.childNodes.length).toBe(3)
   106      expect(res.childNodes[0].nodeType).toBe(3)
   107      expect(res.childNodes[1].textContent).toBe('123')
   108      expect(res.childNodes[2].nodeType).toBe(3)
   109    })
   110  
   111    it('replacer attr should overwrite container attr of same name, except class should be merged', function () {
   112      el.setAttribute('class', 'test other')
   113      el.setAttribute('title', 'parent')
   114      options.template = '<div class="other ok" title="child"></div>'
   115      options.replace = true
   116      options._asComponent = true
   117      var res = transclude(el, options)
   118      expect(res.getAttribute('class')).toBe('other ok test')
   119      expect(res.getAttribute('title')).toBe('child')
   120    })
   121  
   122    // #2789
   123    it('empty class merge', function () {
   124      el.setAttribute('class', '')
   125      options.template = '<div class="test"></div>'
   126      options.replace = true
   127      options._asComponent = true
   128      var res = transclude(el, options)
   129      expect(res.getAttribute('class')).toBe('test')
   130    })
   131  
   132    it('class merge for svg elements', function () {
   133      el.setAttribute('class', 'test')
   134      options.template = '<circle class="other"></circle>'
   135      options.replace = true
   136      options._asComponent = true
   137      var res = transclude(el, options)
   138      expect(res.namespaceURI).toBe('http://www.w3.org/2000/svg')
   139      expect(res.getAttribute('class')).toBe('other test')
   140    })
   141  })