You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.1 KiB
71 lines
2.1 KiB
import Vue from 'vue'
|
|
|
|
describe('Options _scopeId', () => {
|
|
it('should add scopeId attributes', () => {
|
|
const vm = new Vue({
|
|
_scopeId: 'foo',
|
|
template: '<div><p><span></span></p></div>'
|
|
}).$mount()
|
|
expect(vm.$el.hasAttribute('foo')).toBe(true)
|
|
expect(vm.$el.children[0].hasAttribute('foo')).toBe(true)
|
|
expect(vm.$el.children[0].children[0].hasAttribute('foo')).toBe(true)
|
|
})
|
|
|
|
it('should add scopedId attributes from both parent and child on child root', () => {
|
|
const vm = new Vue({
|
|
_scopeId: 'foo',
|
|
template: '<div><child></child></div>',
|
|
components: {
|
|
child: {
|
|
_scopeId: 'bar',
|
|
template: '<div></div>'
|
|
}
|
|
}
|
|
}).$mount()
|
|
expect(vm.$el.children[0].hasAttribute('foo')).toBe(true)
|
|
expect(vm.$el.children[0].hasAttribute('bar')).toBe(true)
|
|
})
|
|
|
|
it('should add scopedId attributes from both parent and child on slot contents', () => {
|
|
const vm = new Vue({
|
|
_scopeId: 'foo',
|
|
template: '<div><child><p>hi</p></child></div>',
|
|
components: {
|
|
child: {
|
|
_scopeId: 'bar',
|
|
template: '<div><slot></slot></div>'
|
|
}
|
|
}
|
|
}).$mount()
|
|
expect(vm.$el.children[0].children[0].hasAttribute('foo')).toBe(true)
|
|
expect(vm.$el.children[0].children[0].hasAttribute('bar')).toBe(true)
|
|
})
|
|
|
|
// #4774
|
|
it('should not discard parent scopeId when component root element is replaced', done => {
|
|
const vm = new Vue({
|
|
_scopeId: 'data-1',
|
|
template: `<div><child ref="child" /></div>`,
|
|
components: {
|
|
child: {
|
|
_scopeId: 'data-2',
|
|
data: () => ({ show: true }),
|
|
template: '<div v-if="show"></div>'
|
|
}
|
|
}
|
|
}).$mount()
|
|
|
|
const child = vm.$refs.child
|
|
|
|
expect(child.$el.hasAttribute('data-1')).toBe(true)
|
|
expect(child.$el.hasAttribute('data-2')).toBe(true)
|
|
|
|
child.show = false
|
|
waitForUpdate(() => {
|
|
child.show = true
|
|
}).then(() => {
|
|
expect(child.$el.hasAttribute('data-1')).toBe(true)
|
|
expect(child.$el.hasAttribute('data-2')).toBe(true)
|
|
}).then(done)
|
|
})
|
|
})
|
|
|