Skip to content

Commit

Permalink
test: update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@edison1105
edison1105 committed Dec 6, 2024
1 parent 24fa426 commit d9bb2fd
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 41 deletions.
8 changes: 6 additions & 2 deletions packages/runtime-vapor/__tests__/apiSetupContext.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@ describe('api: setup context', () => {
inheritAttrs: false,
setup(props, { attrs }) {
const el = document.createElement('div')
renderEffect(() => setDynamicProps(el, [attrs]))
let prev: any
renderEffect(() => (prev = setDynamicProps(el, prev, [attrs])))
return el
},
})
Expand Down Expand Up @@ -115,7 +116,10 @@ describe('api: setup context', () => {
const n0 = createComponent(Wrapper, null, {
default: () => {
const n0 = template('<div>')() as HTMLDivElement
renderEffect(() => setDynamicProps(n0, [attrs], true))
let prev: any
renderEffect(
() => (prev = setDynamicProps(n0, prev, [attrs], true)),
)
return n0
},
})
Expand Down
77 changes: 44 additions & 33 deletions packages/runtime-vapor/__tests__/dom/prop.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,97 +78,104 @@ describe('patchProp', () => {
describe('setStyle', () => {
test('should set style', () => {
const el = document.createElement('div')
setStyle(el, 'color: red')
setStyle(el, '', 'color: red')
expect(el.style.cssText).toBe('color: red;')
})

test('should work with camelCase', () => {
const el = document.createElement('div')
setStyle(el, { fontSize: '12px' })
setStyle(el, null, { fontSize: '12px' })
expect(el.style.cssText).toBe('font-size: 12px;')
})

test('shoud set style with object and array property', () => {
const el = document.createElement('div')
setStyle(el, { color: 'red' })
let prev: any
prev = setStyle(el, prev, { color: 'red' })
expect(el.style.cssText).toBe('color: red;')
setStyle(el, [{ color: 'blue' }, { fontSize: '12px' }])
setStyle(el, prev, [{ color: 'blue' }, { fontSize: '12px' }])
expect(el.style.cssText).toBe('color: blue; font-size: 12px;')
})

test('should remove if falsy value', () => {
const el = document.createElement('div')
setStyle(el, { color: undefined, borderRadius: null })
let prev
prev = setStyle(el, prev, { color: undefined, borderRadius: null })
expect(el.style.cssText).toBe('')
setStyle(el, { color: 'red' })
prev = setStyle(el, prev, { color: 'red' })
expect(el.style.cssText).toBe('color: red;')
setStyle(el, { color: undefined, borderRadius: null })
setStyle(el, prev, { color: undefined, borderRadius: null })
expect(el.style.cssText).toBe('')
})

test('should work with !important', () => {
const el = document.createElement('div')
setStyle(el, { color: 'red !important' })
setStyle(el, null, { color: 'red !important' })
expect(el.style.cssText).toBe('color: red !important;')
})

test('should work with camelCase and !important', () => {
const el = document.createElement('div')
setStyle(el, { fontSize: '12px !important' })
setStyle(el, null, { fontSize: '12px !important' })
expect(el.style.cssText).toBe('font-size: 12px !important;')
})

test('should work with multiple entries', () => {
const el = document.createElement('div')
setStyle(el, { color: 'red', marginRight: '10px' })
setStyle(el, null, { color: 'red', marginRight: '10px' })
expect(el.style.getPropertyValue('color')).toBe('red')
expect(el.style.getPropertyValue('margin-right')).toBe('10px')
})

test('should patch with falsy style value', () => {
const el = document.createElement('div')
setStyle(el, { width: '100px' })
let prev: any
prev = setStyle(el, prev, { width: '100px' })
expect(el.style.cssText).toBe('width: 100px;')
setStyle(el, { width: 0 })
prev = setStyle(el, prev, { width: 0 })
expect(el.style.cssText).toBe('width: 0px;')
})

test('should remove style attribute on falsy value', () => {
const el = document.createElement('div')
setStyle(el, { width: '100px' })
let prev: any
prev = setStyle(el, prev, { width: '100px' })
expect(el.style.cssText).toBe('width: 100px;')
setStyle(el, { width: undefined })
prev = setStyle(el, prev, { width: undefined })
expect(el.style.cssText).toBe('')

setStyle(el, { width: '100px' })
prev = setStyle(el, prev, { width: '100px' })
expect(el.style.cssText).toBe('width: 100px;')
setStyle(el, null)
setStyle(el, prev, null)
expect(el.hasAttribute('style')).toBe(false)
expect(el.style.cssText).toBe('')
})

test('should warn for trailing semicolons', () => {
const el = document.createElement('div')
setStyle(el, { color: 'red;' })
setStyle(el, null, { color: 'red;' })
expect(
`Unexpected semicolon at the end of 'color' style value: 'red;'`,
).toHaveBeenWarned()

setStyle(el, { '--custom': '100; ' })
setStyle(el, null, { '--custom': '100; ' })
expect(
`Unexpected semicolon at the end of '--custom' style value: '100; '`,
).toHaveBeenWarned()
})

test('should not warn for trailing semicolons', () => {
const el = document.createElement('div')
setStyle(el, { '--custom': '100\\;' })
setStyle(el, null, { '--custom': '100\\;' })
expect(el.style.getPropertyValue('--custom')).toBe('100\\;')
})

test('should work with shorthand properties', () => {
const el = document.createElement('div')
setStyle(el, { borderBottom: '1px solid red', border: '1px solid green' })
setStyle(el, null, {
borderBottom: '1px solid red',
border: '1px solid green',
})
expect(el.style.border).toBe('1px solid green')
expect(el.style.borderBottom).toBe('1px solid green')
})
Expand All @@ -193,19 +200,21 @@ describe('patchProp', () => {

test('should work with css custom properties', () => {
const el = mockElementWithStyle()
setStyle(el as any, { '--theme': 'red' })
setStyle(el as any, null, { '--theme': 'red' })
expect(el.style.getPropertyValue('--theme')).toBe('red')
})

test('should auto vendor prefixing', () => {
const el = mockElementWithStyle()
setStyle(el as any, { transition: 'all 1s' })
setStyle(el as any, null, { transition: 'all 1s' })
expect(el.style.WebkitTransition).toBe('all 1s')
})

test('should work with multiple values', () => {
const el = mockElementWithStyle()
setStyle(el as any, { display: ['-webkit-box', '-ms-flexbox', 'flex'] })
setStyle(el as any, null, {
display: ['-webkit-box', '-ms-flexbox', 'flex'],
})
expect(el.style.display).toBe('flex')
})
})
Expand Down Expand Up @@ -335,12 +344,13 @@ describe('patchProp', () => {

describe('setDynamicProp', () => {
const element = document.createElement('div')
let prev: any
function setDynamicProp(
key: string,
value: any,
el = element.cloneNode(true) as HTMLElement,
) {
_setDynamicProp(el, key, value)
prev = _setDynamicProp(el, key, prev, value)
return el
}

Expand Down Expand Up @@ -397,25 +407,25 @@ describe('patchProp', () => {
describe('setDynamicProps', () => {
test('basic set dynamic props', () => {
const el = document.createElement('div')
setDynamicProps(el, [{ foo: 'val' }, { bar: 'val' }])
setDynamicProps(el, null, [{ foo: 'val' }, { bar: 'val' }])
expect(el.getAttribute('foo')).toBe('val')
expect(el.getAttribute('bar')).toBe('val')
})

test('should merge props', () => {
const el = document.createElement('div')
setDynamicProps(el, [{ foo: 'val' }, { foo: 'newVal' }])
setDynamicProps(el, null, [{ foo: 'val' }, { foo: 'newVal' }])
expect(el.getAttribute('foo')).toBe('newVal')
})

test('should reset old props', () => {
const el = document.createElement('div')

setDynamicProps(el, [{ foo: 'val' }])
let prev: any
prev = setDynamicProps(el, prev, [{ foo: 'val' }])
expect(el.attributes.length).toBe(1)
expect(el.getAttribute('foo')).toBe('val')

setDynamicProps(el, [{ bar: 'val' }])
prev = setDynamicProps(el, prev, [{ bar: 'val' }])
expect(el.attributes.length).toBe(1)
expect(el.getAttribute('bar')).toBe('val')
expect(el.getAttribute('foo')).toBeNull()
Expand All @@ -424,18 +434,19 @@ describe('patchProp', () => {
test('should reset old modifier props', () => {
const el = document.createElement('div')

setDynamicProps(el, [{ ['.foo']: 'val' }])
let prev: any
prev = setDynamicProps(el, prev, [{ ['.foo']: 'val' }])
expect((el as any).foo).toBe('val')

setDynamicProps(el, [{ ['.bar']: 'val' }])
prev = setDynamicProps(el, prev, [{ ['.bar']: 'val' }])
expect((el as any).bar).toBe('val')
expect((el as any).foo).toBe('')

setDynamicProps(el, [{ ['^foo']: 'val' }])
prev = setDynamicProps(el, prev, [{ ['^foo']: 'val' }])
expect(el.attributes.length).toBe(1)
expect(el.getAttribute('foo')).toBe('val')

setDynamicProps(el, [{ ['^bar']: 'val' }])
prev = setDynamicProps(el, prev, [{ ['^bar']: 'val' }])
expect(el.attributes.length).toBe(1)
expect(el.getAttribute('bar')).toBe('val')
expect(el.getAttribute('foo')).toBeNull()
Expand Down
3 changes: 2 additions & 1 deletion packages/runtime-vapor/src/componentAttrs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export function fallThroughAttrs(
}
}

let prevAttrs = instance.attrs
renderEffect(() => {
for (const key in instance.attrs) {
if (dynamicAttrs && dynamicAttrs.includes(key)) continue
Expand All @@ -130,7 +131,7 @@ export function fallThroughAttrs(
value = instance.attrs[key]
}

setDynamicProp(element, key, value)
setDynamicProp(element, key, prevAttrs[key], value)
}
})
}
Expand Down
9 changes: 7 additions & 2 deletions packages/runtime-vapor/src/componentFallback.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export function fallbackComponent(
if (rawProps || Object.keys(instance.attrs).length) {
rawProps = [() => instance.attrs, ...normalizeRawProps(rawProps)]

let prevValue: any, prevStyle: any
renderEffect(() => {
let classes: unknown[] | undefined
let styles: unknown[] | undefined
Expand All @@ -34,12 +35,16 @@ export function fallbackComponent(
const value = getter ? valueOrGetter() : valueOrGetter
if (key === 'class') (classes ||= []).push(value)
else if (key === 'style') (styles ||= []).push(value)
else setDynamicProp(el, key, value)
else {
prevValue = setDynamicProp(el, key, prevValue, value)
}
},
)

if (classes) setClass(el, classes)
if (styles) setStyle(el, styles)
if (styles) {
prevStyle = setStyle(el, prevStyle, styles)
}
})
}

Expand Down
4 changes: 2 additions & 2 deletions packages/runtime-vapor/src/dom/prop.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,13 @@ export function setDynamicProp(
key: string,
prev: any,
value: any,
): void {
): any {
// TODO
const isSVG = false
if (key === 'class') {
setClass(el, value)
} else if (key === 'style') {
setStyle(el as HTMLElement, prev, value)
return setStyle(el as HTMLElement, prev, value)
} else if (isOn(key)) {
on(el, key[2].toLowerCase() + key.slice(3), () => value, { effect: true })
} else if (
Expand Down
3 changes: 2 additions & 1 deletion packages/runtime-vapor/src/dom/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ export function setStyle(
prev: any,
value: any,
root?: boolean,
): void {
): any {
value = normalizeStyle(root ? mergeInheritAttr('style', value) : value)
patchStyle(el, prev, value)
return value
}

// TODO copied from packages/runtime-dom/src/modules/style.ts
Expand Down

0 comments on commit d9bb2fd

Please sign in to comment.