/**
* Created by Capricorncd.
* https://github.com/capricorncd
* Date: 2022/06/11 11:40:27 (GMT+0900)
*/
import { JSDOM } from 'jsdom'
import { describe, it, expect, vi } from 'vitest'
import {
createElement,
$,
$$,
toStrStyles,
getMaxZIndex,
getStyleValue,
getScrollParents,
} from './dom'
describe('dom', () => {
it('$', () => {
const el = createElement(
'div',
{ id: 'test', dataName: 20 },
'1
2'
)
expect($('p', el)?.textContent).toBe('1')
expect($('span', el)?.textContent).toBe('2')
expect(el.getAttribute('data-name')).toBe('20')
expect(el.getAttribute('dataName')).toBeNull()
})
it('$$', () => {
const el = createElement('div', {}, '1
23
')
expect($$('p', el).length).toBe(2)
expect($$('div', el).length).toBe(0)
expect($$('span', el).length).toBe(1)
})
it('createElement', () => {
const el1 = createElement('div', {}, '1
23
')
const el2 = createElement('div', {}, [
'1
',
createElement('span', {}, '2'),
createElement('p', undefined, ['3']),
])
expect(el1.isEqualNode(el2)).toBeTruthy()
})
it('toStrStyles', () => {
expect(toStrStyles({ 'line-height': 1.5, width: '50%' })).toBe(
`line-height:1.5;width:50%`
)
expect(toStrStyles({ lineHeight: 1.5, width: '50%' })).toBe(
`line-height:1.5;width:50%`
)
expect(
toStrStyles({ lineHeight: 1.5, width: '50%' }, { 'line-height': '24px' })
).toBe(`line-height:24px;width:50%`)
})
it('getMaxZIndex', () => {
const { window } = new JSDOM(
''
)
vi.stubGlobal('document', window.document)
expect(getMaxZIndex()).toBe(10)
})
it('getStyleValue', () => {
const { window } = new JSDOM(
''
)
vi.stubGlobal('document', window.document)
const el = $('div')
expect(getStyleValue(el!, 'z-index')).toBe('3')
expect(getStyleValue(el!, 'zIndex')).toBe('3')
expect(getStyleValue(el!, 'z-index', true)).toBe(3)
expect(getStyleValue(el!, 'height')).toBe('200px')
expect(getStyleValue($('p')!, 'z-index', true)).toBe(10)
})
it('getScrollParents', () => {
const { window } = new JSDOM(
[
'',
'',
'',
'',
'',
].join('')
)
vi.stubGlobal('document', window.document)
const s1 = $('#s1')
const s2 = $('#s2')
const s3 = $('#s3')
const s4 = $('#s4')
const s5 = $('#s5')
const s6 = $('#s6')
const p1 = $('#p1')
const p2 = $('#p2')
expect(getScrollParents(s1!).length).toBe(0)
expect(getScrollParents(s2!).length).toBe(1)
expect(getScrollParents(s3!).length).toBe(2)
expect(getScrollParents(s4!).length).toBe(3)
expect(getScrollParents(s5!).length).toBe(4)
expect(getScrollParents(s6!).length).toBe(5)
expect(getScrollParents(p1!).length).toBe(6)
expect(getScrollParents(p2!).length).toBe(1)
expect(getScrollParents(s1!, 'x').length).toBe(0)
expect(getScrollParents(s2!, 'x').length).toBe(1)
expect(getScrollParents(s3!, 'x').length).toBe(2)
expect(getScrollParents(s4!, 'x').length).toBe(2)
expect(getScrollParents(s5!, 'x').length).toBe(3)
expect(getScrollParents(s6!, 'x').length).toBe(4)
expect(getScrollParents(p1!, 'x').length).toBe(4)
expect(getScrollParents(p2!, 'x').length).toBe(0)
expect(getScrollParents(s1!, 'y').length).toBe(0)
expect(getScrollParents(s2!, 'y').length).toBe(1)
expect(getScrollParents(s3!, 'y').length).toBe(1)
expect(getScrollParents(s4!, 'y').length).toBe(2)
expect(getScrollParents(s5!, 'y').length).toBe(3)
expect(getScrollParents(s6!, 'y').length).toBe(3)
expect(getScrollParents(p1!, 'y').length).toBe(4)
expect(getScrollParents(p2!, 'y').length).toBe(1)
})
})