it('as root', done => { const vm = new Vue({ template: '<test></test>', components: { test: resolve => { setTimeout(() => { resolve({ template: '<div>hi</div>' }) // wait for parent update Vue.nextTick(next) }, 0) } } }).$mount() expect(vm.$el.nodeType).toBe(8) expect(vm.$children.length).toBe(0) function next () { expect(vm.$el.nodeType).toBe(1) expect(vm.$el.outerHTML).toBe('<div>hi</div>') expect(vm.$children.length).toBe(1) done() } })
it(':is using raw component constructor', () => { const vm = new Vue({ template: '<div>' + '<component :is="$options.components.test"></component>' + '<component :is="$options.components.async"></component>' + '</div>', components: { test: { template: '<span>foo</span>' }, async: function (resolve) { resolve({ template: '<span>bar</span>' }) } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>') })
it('with v-for', done => { const vm = new Vue({ template: '<div><test v-for="n in list" :n="n"></test></div>', data: { list: [1, 2, 3] }, components: { test: resolve => { setTimeout(() => { resolve({ props: ['n'], template: '<div>{{n}}</div>' }) Vue.nextTick(next) }, 0) } } }).$mount() function next () { expect(vm.$el.innerHTML).toBe('<div>1</div><div>2</div><div>3</div>') done() } })
it('normal', done => { const vm = new Vue({ template: '<div><test></test></div>', components: { test: (resolve) => { setTimeout(() => { resolve({ template: '<div>hi</div>' }) // wait for parent update Vue.nextTick(next) }, 0) } } }).$mount() expect(vm.$el.innerHTML).toBe('<!---->') expect(vm.$children.length).toBe(0) function next () { expect(vm.$el.innerHTML).toBe('<div>hi</div>') expect(vm.$children.length).toBe(1) done() } })
it('normal', done => { const vm = new Vue({ template: '<div><test></test></div>', components: { test: (resolve) => { setTimeout(() => { resolve({ template: '<div>hi</div>' }) // wait for parent update Vue.nextTick(next) }, 0) } } }).$mount() expect(vm.$el.innerHTML).toBe('<!---->') expect(vm.$children.length).toBe(0) function next () { expect(vm.$el.innerHTML).toBe('<div>hi</div>') expect(vm.$children.length).toBe(1) done() } })
it(':is using raw component constructor', () => { const vm = new Vue({ template: '<div>' + '<component :is="$options.components.test"></component>' + '<component :is="$options.components.async"></component>' + '</div>', components: { test: { template: '<span>foo</span>' }, async: function (resolve) { resolve({ template: '<span>bar</span>' }) } } }).$mount() expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>') })
it('as root', done => { const vm = new Vue({ template: '<test></test>', components: { test: resolve => { setTimeout(() => { resolve({ template: '<div>hi</div>' }) // wait for parent update Vue.nextTick(next) }, 0) } } }).$mount() expect(vm.$el.nodeType).toBe(8) expect(vm.$children.length).toBe(0) function next () { expect(vm.$el.nodeType).toBe(1) expect(vm.$el.outerHTML).toBe('<div>hi</div>') expect(vm.$children.length).toBe(1) done() } })
it('with v-for', done => { const vm = new Vue({ template: '<div><test v-for="n in list" :n="n"></test></div>', data: { list: [1, 2, 3] }, components: { test: resolve => { setTimeout(() => { resolve({ props: ['n'], template: '<div>{{n}}</div>' }) Vue.nextTick(next) }, 0) } } }).$mount() function next () { expect(vm.$el.innerHTML).toBe('<div>1</div><div>2</div><div>3</div>') done() } })