it('treat boolean props properly', () => { const vm = new Vue({ template: '<comp ref="child" prop-a prop-b="prop-b"></comp>', components: { comp: { template: '<div></div>', props: { propA: Boolean, propB: Boolean, propC: Boolean } } } }).$mount() expect(vm.$refs.child.propA).toBe(true) expect(vm.$refs.child.propB).toBe(true) expect(vm.$refs.child.propC).toBe(false) })
it('array syntax', done => { const vm = new Vue({ data: { b: 'bar' }, template: '<test v-bind:b="b" ref="child"></test>', components: { test: { props: ['b'], template: '<div>{{b}}</div>' } } }).$mount() expect(vm.$el.innerHTML).toBe('bar') vm.b = 'baz' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('baz') vm.$refs.child.b = 'qux' }).then(() => { expect(vm.$el.innerHTML).toBe('qux') expect('Avoid mutating a prop directly').toHaveBeenWarned() }).then(done) })
it('treat boolean props properly', () => { const vm = new Vue({ template: '<comp ref="child" prop-a prop-b="prop-b"></comp>', components: { comp: { template: '<div></div>', props: { propA: Boolean, propB: Boolean, propC: Boolean } } } }).$mount() expect(vm.$refs.child.propA).toBe(true) expect(vm.$refs.child.propB).toBe(true) expect(vm.$refs.child.propC).toBe(false) })
it('object syntax', done => { const vm = new Vue({ data: { b: 'bar' }, template: '<test v-bind:b="b" ref="child"></test>', components: { test: { props: { b: String }, template: '<div>{{b}}</div>' } } }).$mount() expect(vm.$el.innerHTML).toBe('bar') vm.b = 'baz' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('baz') vm.$refs.child.b = 'qux' }).then(() => { expect(vm.$el.innerHTML).toBe('qux') expect('Avoid mutating a prop directly').toHaveBeenWarned() }).then(done) })
it('object syntax', done => { const vm = new Vue({ data: { b: 'bar' }, template: '<test v-bind:b="b" ref="child"></test>', components: { test: { props: { b: String }, template: '<div>{{b}}</div>' } } }).$mount() expect(vm.$el.innerHTML).toBe('bar') vm.b = 'baz' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('baz') vm.$refs.child.b = 'qux' }).then(() => { expect(vm.$el.innerHTML).toBe('qux') expect('Avoid mutating a prop directly').toHaveBeenWarned() }).then(done) })
it('array syntax', done => { const vm = new Vue({ data: { b: 'bar' }, template: '<test v-bind:b="b" ref="child"></test>', components: { test: { props: ['b'], template: '<div>{{b}}</div>' } } }).$mount() expect(vm.$el.innerHTML).toBe('bar') vm.b = 'baz' waitForUpdate(() => { expect(vm.$el.innerHTML).toBe('baz') vm.$refs.child.b = 'qux' }).then(() => { expect(vm.$el.innerHTML).toBe('qux') expect('Avoid mutating a prop directly').toHaveBeenWarned() }).then(done) })