vue3-yuanma/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

129 lines
2.9 KiB
TypeScript
Raw Normal View History

2020-07-10 21:44:00 +08:00
import {
render,
2020-07-13 06:04:09 +08:00
useCssVars,
2020-07-10 21:44:00 +08:00
h,
reactive,
nextTick,
ComponentOptions,
Suspense
2020-07-10 21:44:00 +08:00
} from '@vue/runtime-dom'
describe('useCssVars', () => {
async function assertCssVars(
getApp: (state: any) => ComponentOptions,
scopeId?: string
) {
const state = reactive({ color: 'red' })
const App = getApp(state)
const root = document.createElement('div')
const prefix = scopeId ? `${scopeId.replace(/^data-v-/, '')}-` : ``
2020-07-10 21:44:00 +08:00
render(h(App), root)
for (const c of [].slice.call(root.children as any)) {
expect(
(c as HTMLElement).style.getPropertyValue(`--${prefix}color`)
).toBe(`red`)
2020-07-10 21:44:00 +08:00
}
state.color = 'green'
await nextTick()
for (const c of [].slice.call(root.children as any)) {
expect(
(c as HTMLElement).style.getPropertyValue(`--${prefix}color`)
).toBe('green')
2020-07-10 21:44:00 +08:00
}
}
test('basic', async () => {
await assertCssVars(state => ({
setup() {
// test receiving render context
2020-07-13 06:04:09 +08:00
useCssVars((ctx: any) => ({
2020-07-10 21:44:00 +08:00
color: ctx.color
}))
return state
},
render() {
return h('div')
}
}))
})
test('on fragment root', async () => {
await assertCssVars(state => ({
setup() {
2020-07-13 06:04:09 +08:00
useCssVars(() => state)
2020-07-10 21:44:00 +08:00
return () => [h('div'), h('div')]
}
}))
})
test('on HOCs', async () => {
const Child = () => [h('div'), h('div')]
await assertCssVars(state => ({
setup() {
2020-07-13 06:04:09 +08:00
useCssVars(() => state)
2020-07-10 21:44:00 +08:00
return () => h(Child)
}
}))
})
test('on suspense root', async () => {
const state = reactive({ color: 'red' })
const root = document.createElement('div')
const AsyncComp = {
async setup() {
return () => h('p', 'default')
}
}
const App = {
setup() {
useCssVars(() => state)
return () =>
h(Suspense, null, {
default: h(AsyncComp),
fallback: h('div', 'fallback')
})
}
}
render(h(App), root)
// css vars use with fallback tree
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
}
// AsyncComp resolve
await nextTick()
// Suspense effects flush
await nextTick()
// css vars use with default tree
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe(`red`)
}
state.color = 'green'
await nextTick()
for (const c of [].slice.call(root.children as any)) {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('green')
}
})
test('with <style scoped>', async () => {
const id = 'data-v-12345'
2020-07-10 21:44:00 +08:00
await assertCssVars(
state => ({
__scopeId: id,
2020-07-10 21:44:00 +08:00
setup() {
2020-07-13 06:04:09 +08:00
useCssVars(() => state, true)
2020-07-10 21:44:00 +08:00
return () => h('div')
}
}),
id
)
})
})