|
|
@ -19,7 +19,7 @@ describe('Directive v-if', () => { |
|
|
|
expect(vm.$el.innerHTML).toBe('') |
|
|
|
}) |
|
|
|
|
|
|
|
it('should update if value changed', (done) => { |
|
|
|
it('should update if value changed', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
el: '#app', |
|
|
|
template: '<div><span v-if="foo">hello</span></div>', |
|
|
@ -57,10 +57,15 @@ describe('Directive v-if', () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
it('should work well with v-else', (done) => { |
|
|
|
it('should work well with v-else', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
el: '#app', |
|
|
|
template: '<div><span v-if="foo">hello</span><span v-else>bye</span></div>', |
|
|
|
template: ` |
|
|
|
<div> |
|
|
|
<span v-if="foo">hello</span> |
|
|
|
<span v-else>bye</span> |
|
|
|
</div> |
|
|
|
`,
|
|
|
|
data: { foo: true } |
|
|
|
}) |
|
|
|
expect(vm.$el.innerHTML).toBe('<span>hello</span>') |
|
|
@ -95,11 +100,21 @@ describe('Directive v-if', () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
it('should work well with v-for', (done) => { |
|
|
|
it('should work well with v-for', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
el: '#app', |
|
|
|
template: '<div><span v-for="item,i in list" v-if="item.value">{{i}}</span></div>', |
|
|
|
data: {list: [{value: true}, {value: false}, {value: true}]} |
|
|
|
template: ` |
|
|
|
<div> |
|
|
|
<span v-for="item,i in list" v-if="item.value">{{i}}</span> |
|
|
|
</div> |
|
|
|
`,
|
|
|
|
data: { |
|
|
|
list: [ |
|
|
|
{ value: true }, |
|
|
|
{ value: false }, |
|
|
|
{ value: true } |
|
|
|
] |
|
|
|
} |
|
|
|
}) |
|
|
|
expect(vm.$el.innerHTML).toBe('<span>0</span><span>2</span>') |
|
|
|
vm.list[0].value = false |
|
|
@ -118,11 +133,22 @@ describe('Directive v-if', () => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
it('should work well with v-for and v-else', (done) => { |
|
|
|
it('should work well with v-for and v-else', done => { |
|
|
|
const vm = new Vue({ |
|
|
|
el: '#app', |
|
|
|
template: '<div><span v-for="item,i in list" v-if="item.value">hello</span><span v-else>bye</span></div>', |
|
|
|
data: {list: [{value: true}, {value: false}, {value: true}]} |
|
|
|
template: ` |
|
|
|
<div> |
|
|
|
<span v-for="item,i in list" v-if="item.value">hello</span> |
|
|
|
<span v-else>bye</span> |
|
|
|
</div> |
|
|
|
`,
|
|
|
|
data: { |
|
|
|
list: [ |
|
|
|
{ value: true }, |
|
|
|
{ value: false }, |
|
|
|
{ value: true } |
|
|
|
] |
|
|
|
} |
|
|
|
}) |
|
|
|
expect(vm.$el.innerHTML).toBe('<span>hello</span><span>bye</span><span>hello</span>') |
|
|
|
vm.list[0].value = false |
|
|
|