99 lines
3.3 KiB
JavaScript
99 lines
3.3 KiB
JavaScript
import { test, expect } from '../fixtures.js'
|
|
|
|
test.describe('SVG common util helpers', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/tests/unit-harness.html')
|
|
await page.waitForFunction(() => Boolean(window.svgHarness))
|
|
})
|
|
|
|
test('computes positions and deep merges objects', async ({ page }) => {
|
|
const result = await page.evaluate(() => {
|
|
const { util } = window.svgHarness
|
|
const grand = { offsetLeft: 5, offsetTop: 6, offsetParent: null }
|
|
const parent = { offsetLeft: 10, offsetTop: 11, offsetParent: grand }
|
|
const child = { offsetLeft: 7, offsetTop: 8, offsetParent: parent }
|
|
|
|
const merged = util.mergeDeep(
|
|
{ a: 1, nested: { keep: true, replace: 'old' } },
|
|
{ nested: { replace: 'new', extra: 42 }, more: 'yes' }
|
|
)
|
|
|
|
return {
|
|
pos: util.findPos(child),
|
|
isObject: util.isObject({ hello: 'world' }),
|
|
merged
|
|
}
|
|
})
|
|
|
|
expect(result.pos).toEqual({ left: 22, top: 25 })
|
|
expect(result.isObject).toBe(true)
|
|
expect(result.merged).toEqual({
|
|
a: 1,
|
|
nested: { keep: true, replace: 'new', extra: 42 },
|
|
more: 'yes'
|
|
})
|
|
})
|
|
|
|
test('finds closest ancestors by selector', async ({ page }) => {
|
|
const result = await page.evaluate(() => {
|
|
const { util } = window.svgHarness
|
|
const root = document.getElementById('root')
|
|
root.innerHTML = ''
|
|
|
|
const wrapper = document.createElement('div')
|
|
wrapper.className = 'wrapper'
|
|
const section = document.createElement('section')
|
|
section.id = 'section'
|
|
const child = document.createElement('span')
|
|
child.dataset.role = 'target'
|
|
|
|
section.append(child)
|
|
wrapper.append(section)
|
|
root.append(wrapper)
|
|
|
|
return {
|
|
byClass: util.getClosest(child, '.wrapper')?.className,
|
|
byId: util.getClosest(child, '#section')?.id,
|
|
byData: util.getClosest(child, '[data-role=target]')?.dataset.role,
|
|
byTag: util.getClosest(child, 'div')?.tagName.toLowerCase()
|
|
}
|
|
})
|
|
|
|
expect(result.byClass).toBe('wrapper')
|
|
expect(result.byId).toBe('section')
|
|
expect(result.byData).toBe('target')
|
|
expect(result.byTag).toBe('div')
|
|
})
|
|
|
|
test('gathers parents with and without limits', async ({ page }) => {
|
|
const result = await page.evaluate(() => {
|
|
const { util } = window.svgHarness
|
|
const root = document.getElementById('root')
|
|
root.innerHTML = ''
|
|
|
|
const outer = document.createElement('div')
|
|
outer.className = 'outer'
|
|
const mid = document.createElement('section')
|
|
mid.id = 'mid'
|
|
const inner = document.createElement('span')
|
|
inner.className = 'inner'
|
|
|
|
mid.append(inner)
|
|
outer.append(mid)
|
|
root.append(outer)
|
|
|
|
return {
|
|
all: util.getParents(inner)?.map((el) => el.tagName.toLowerCase()),
|
|
byClass: util.getParents(inner, '.outer')?.map((el) => el.className),
|
|
untilMid: util.getParentsUntil(inner, '#mid')?.map((el) => el.tagName.toLowerCase()),
|
|
untilMidFiltered: util.getParentsUntil(inner, '#mid', '.inner')?.map((el) => el.tagName.toLowerCase())
|
|
}
|
|
})
|
|
|
|
expect(result.all).toEqual(['span', 'section', 'div', 'div', 'body', 'html'])
|
|
expect(result.byClass).toEqual(['outer'])
|
|
expect(result.untilMid).toEqual(['span'])
|
|
expect(result.untilMidFiltered).toEqual(['span'])
|
|
})
|
|
})
|