test(e2e): enhance and fix test of svg example (#560)
This commit is contained in:
parent
c463a71bb3
commit
c7cd386194
@ -76,6 +76,17 @@ export function setupPuppeteer() {
|
||||
}
|
||||
|
||||
async function setValue(selector: string, value: string) {
|
||||
await page.$eval(
|
||||
selector,
|
||||
(node, value) => {
|
||||
(node as HTMLInputElement).value = value
|
||||
node.dispatchEvent(new Event('input'))
|
||||
},
|
||||
value
|
||||
)
|
||||
}
|
||||
|
||||
async function typeValue(selector: string, value: string) {
|
||||
const el = (await page.$(selector))!
|
||||
await el.evaluate(node => ((node as HTMLInputElement).value = ''))
|
||||
await el.type(value)
|
||||
@ -108,6 +119,7 @@ export function setupPuppeteer() {
|
||||
isChecked,
|
||||
isFocused,
|
||||
setValue,
|
||||
typeValue,
|
||||
enterValue,
|
||||
clearValue
|
||||
}
|
||||
|
@ -7,7 +7,7 @@ interface TableData {
|
||||
}
|
||||
|
||||
describe('e2e: grid', () => {
|
||||
const { page, click, text, count, setValue, clearValue } = setupPuppeteer()
|
||||
const { page, click, text, count, typeValue, clearValue } = setupPuppeteer()
|
||||
const columns = ['name', 'power'] as const
|
||||
|
||||
async function assertTable(data: TableData[]) {
|
||||
@ -88,18 +88,18 @@ describe('e2e: grid', () => {
|
||||
{ name: 'Jet Li', power: 8000 }
|
||||
])
|
||||
|
||||
await setValue('input[name="query"]', 'j')
|
||||
await typeValue('input[name="query"]', 'j')
|
||||
await assertTable([
|
||||
{ name: 'Jackie Chan', power: 7000 },
|
||||
{ name: 'Jet Li', power: 8000 }
|
||||
])
|
||||
|
||||
await setValue('input[name="query"]', 'infinity')
|
||||
await typeValue('input[name="query"]', 'infinity')
|
||||
await assertTable([{ name: 'Chuck Norris', power: Infinity }])
|
||||
|
||||
await clearValue('input[name="query"]')
|
||||
expect(await count('p')).toBe(0)
|
||||
await setValue('input[name="query"]', 'stringthatdoesnotexistanywhere')
|
||||
await typeValue('input[name="query"]', 'stringthatdoesnotexistanywhere')
|
||||
expect(await count('p')).toBe(1)
|
||||
}
|
||||
|
||||
|
@ -16,9 +16,11 @@ declare function valueToPoint(
|
||||
}
|
||||
|
||||
describe('e2e: svg', () => {
|
||||
const { page, click, count, setValue } = setupPuppeteer()
|
||||
const { page, click, count, setValue, typeValue } = setupPuppeteer()
|
||||
|
||||
async function assertStats(total: number) {
|
||||
// assert the shape of the polygon is correct
|
||||
async function assertPolygon(total: number) {
|
||||
expect(
|
||||
await page().evaluate(
|
||||
total => {
|
||||
const points = globalStats
|
||||
@ -27,10 +29,45 @@ describe('e2e: svg', () => {
|
||||
return point.x + ',' + point.y
|
||||
})
|
||||
.join(' ')
|
||||
return document.querySelector('polygon')!.attributes[0].value === points
|
||||
return (
|
||||
document.querySelector('polygon')!.attributes[0].value === points
|
||||
)
|
||||
},
|
||||
[total]
|
||||
)
|
||||
).toBe(true)
|
||||
}
|
||||
|
||||
// assert the position of each label is correct
|
||||
async function assertLabels(total: number) {
|
||||
const positions = await page().evaluate(
|
||||
total => {
|
||||
return globalStats.map((stat, i) => {
|
||||
const point = valueToPoint(+stat.value + 10, i, total)
|
||||
return [point.x, point.y]
|
||||
})
|
||||
},
|
||||
[total]
|
||||
)
|
||||
for (let i = 0; i < total; i++) {
|
||||
const textPosition = await page().$eval(
|
||||
`text:nth-child(${i + 3})`,
|
||||
node => [+node.attributes[0].value, +node.attributes[1].value]
|
||||
)
|
||||
expect(textPosition).toEqual(positions[i])
|
||||
}
|
||||
}
|
||||
|
||||
// assert each value of stats is correct
|
||||
async function assertStats(expected: number[]) {
|
||||
const statsValue = await page().evaluate(() => {
|
||||
return globalStats.map(stat => +stat.value)
|
||||
})
|
||||
expect(statsValue).toEqual(expected)
|
||||
}
|
||||
|
||||
function nthRange(n: number) {
|
||||
return `#demo div:nth-child(${n + 1}) input[type="range"]`
|
||||
}
|
||||
|
||||
async function testSvg(apiType: 'classic' | 'composition') {
|
||||
@ -48,22 +85,58 @@ describe('e2e: svg', () => {
|
||||
expect(await count('label')).toBe(6)
|
||||
expect(await count('button')).toBe(7)
|
||||
expect(await count('input[type="range"]')).toBe(6)
|
||||
await assertStats(6)
|
||||
await assertPolygon(6)
|
||||
await assertLabels(6)
|
||||
await assertStats([100, 100, 100, 100, 100, 100])
|
||||
|
||||
await setValue(nthRange(1), '10')
|
||||
await assertPolygon(6)
|
||||
await assertLabels(6)
|
||||
await assertStats([10, 100, 100, 100, 100, 100])
|
||||
|
||||
await click('button.remove')
|
||||
expect(await count('text')).toBe(5)
|
||||
expect(await count('label')).toBe(5)
|
||||
expect(await count('button')).toBe(6)
|
||||
expect(await count('input[type="range"]')).toBe(5)
|
||||
await assertStats(5)
|
||||
await assertPolygon(5)
|
||||
await assertLabels(5)
|
||||
await assertStats([100, 100, 100, 100, 100])
|
||||
|
||||
await setValue('input[name="newlabel"]', 'foo')
|
||||
await typeValue('input[name="newlabel"]', 'foo')
|
||||
await click('#add > button')
|
||||
expect(await count('text')).toBe(6)
|
||||
expect(await count('label')).toBe(6)
|
||||
expect(await count('button')).toBe(7)
|
||||
expect(await count('input[type="range"]')).toBe(6)
|
||||
await assertStats(6)
|
||||
await assertPolygon(6)
|
||||
await assertLabels(6)
|
||||
await assertStats([100, 100, 100, 100, 100, 100])
|
||||
|
||||
await setValue(nthRange(1), '10')
|
||||
await assertPolygon(6)
|
||||
await assertLabels(6)
|
||||
await assertStats([10, 100, 100, 100, 100, 100])
|
||||
|
||||
await setValue(nthRange(2), '20')
|
||||
await assertPolygon(6)
|
||||
await assertLabels(6)
|
||||
await assertStats([10, 20, 100, 100, 100, 100])
|
||||
|
||||
await setValue(nthRange(6), '60')
|
||||
await assertPolygon(6)
|
||||
await assertLabels(6)
|
||||
await assertStats([10, 20, 100, 100, 100, 60])
|
||||
|
||||
await click('button.remove')
|
||||
await assertPolygon(5)
|
||||
await assertLabels(5)
|
||||
await assertStats([20, 100, 100, 100, 60])
|
||||
|
||||
await setValue(nthRange(1), '10')
|
||||
await assertPolygon(5)
|
||||
await assertLabels(5)
|
||||
await assertStats([10, 100, 100, 100, 60])
|
||||
}
|
||||
|
||||
test(
|
||||
|
Loading…
Reference in New Issue
Block a user