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

     1  var _ = require('src/util')
     2  var Vue = require('src')
     3  var Directive = require('src/directive')
     4  var def = require('src/directives/internal/transition')
     5  
     6  describe('transition', function () {
     7    it('should instantiate a transition object with correct args', function () {
     8      var fns = {}
     9      var el = document.createElement('div')
    10      var vm = new Vue({
    11        transitions: {
    12          test: fns
    13        }
    14      })
    15      var dir = new Directive({
    16        name: 'transition',
    17        raw: 'test',
    18        def: def,
    19        modifiers: {
    20          literal: true
    21        }
    22      }, vm, el)
    23      dir._bind()
    24      var transition = dir.el.__v_trans
    25      expect(transition.el).toBe(dir.el)
    26      expect(transition.hooks).toBe(fns)
    27      expect(transition.enterClass).toBe('test-enter')
    28      expect(transition.leaveClass).toBe('test-leave')
    29      expect(dir.el.className === 'test-transition')
    30      dir.update('lol', 'test')
    31      transition = dir.el.__v_trans
    32      expect(transition.enterClass).toBe('lol-enter')
    33      expect(transition.leaveClass).toBe('lol-leave')
    34      expect(transition.fns).toBeUndefined()
    35      expect(dir.el.className === 'lol-transition')
    36    })
    37  
    38    it('dynamic transitions', function (done) {
    39      var el = document.createElement('div')
    40      document.body.appendChild(el)
    41      var calls = {
    42        a: { enter: 0, leave: 0 },
    43        b: { enter: 0, leave: 0 }
    44      }
    45      var vm = new Vue({
    46        el: el,
    47        template: '<div v-show="show" :transition="trans"></div>',
    48        data: {
    49          show: true,
    50          trans: 'a'
    51        },
    52        transitions: {
    53          a: {
    54            enter: function (el, done) {
    55              calls.a.enter++
    56              done()
    57            },
    58            leave: function (el, done) {
    59              calls.a.leave++
    60              done()
    61            }
    62          },
    63          b: {
    64            enter: function (el, done) {
    65              calls.b.enter++
    66              done()
    67            },
    68            leave: function (el, done) {
    69              calls.b.leave++
    70              done()
    71            }
    72          }
    73        }
    74      })
    75  
    76      assertCalls(0, 0, 0, 0)
    77      vm.show = false
    78      _.nextTick(function () {
    79        assertCalls(0, 1, 0, 0)
    80        vm.trans = 'b'
    81        vm.show = true
    82        _.nextTick(function () {
    83          assertCalls(0, 1, 1, 0)
    84          vm.show = false
    85          _.nextTick(function () {
    86            assertCalls(0, 1, 1, 1)
    87            vm.trans = 'a'
    88            vm.show = true
    89            _.nextTick(function () {
    90              assertCalls(1, 1, 1, 1)
    91              done()
    92            })
    93          })
    94        })
    95      })
    96  
    97      function assertCalls (a, b, c, d) {
    98        expect(el.firstChild.style.display).toBe(vm.show ? '' : 'none')
    99        expect(calls.a.enter).toBe(a)
   100        expect(calls.a.leave).toBe(b)
   101        expect(calls.b.enter).toBe(c)
   102        expect(calls.b.leave).toBe(d)
   103      }
   104    })
   105  })