test(e2e): enhance and fix test of svg example (#560)

This commit is contained in:
CodinCat 2020-06-12 23:32:27 +09:00 committed by GitHub
parent c463a71bb3
commit c7cd386194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 18 deletions

View File

@ -76,6 +76,17 @@ export function setupPuppeteer() {
} }
async function setValue(selector: string, value: string) { 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))! const el = (await page.$(selector))!
await el.evaluate(node => ((node as HTMLInputElement).value = '')) await el.evaluate(node => ((node as HTMLInputElement).value = ''))
await el.type(value) await el.type(value)
@ -108,6 +119,7 @@ export function setupPuppeteer() {
isChecked, isChecked,
isFocused, isFocused,
setValue, setValue,
typeValue,
enterValue, enterValue,
clearValue clearValue
} }

View File

@ -7,7 +7,7 @@ interface TableData {
} }
describe('e2e: grid', () => { 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 const columns = ['name', 'power'] as const
async function assertTable(data: TableData[]) { async function assertTable(data: TableData[]) {
@ -88,18 +88,18 @@ describe('e2e: grid', () => {
{ name: 'Jet Li', power: 8000 } { name: 'Jet Li', power: 8000 }
]) ])
await setValue('input[name="query"]', 'j') await typeValue('input[name="query"]', 'j')
await assertTable([ await assertTable([
{ name: 'Jackie Chan', power: 7000 }, { name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 } { 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 assertTable([{ name: 'Chuck Norris', power: Infinity }])
await clearValue('input[name="query"]') await clearValue('input[name="query"]')
expect(await count('p')).toBe(0) expect(await count('p')).toBe(0)
await setValue('input[name="query"]', 'stringthatdoesnotexistanywhere') await typeValue('input[name="query"]', 'stringthatdoesnotexistanywhere')
expect(await count('p')).toBe(1) expect(await count('p')).toBe(1)
} }

View File

@ -16,21 +16,58 @@ declare function valueToPoint(
} }
describe('e2e: svg', () => { 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
await page().evaluate( async function assertPolygon(total: number) {
expect(
await page().evaluate(
total => {
const points = globalStats
.map((stat, i) => {
const point = valueToPoint(stat.value, i, total)
return point.x + ',' + point.y
})
.join(' ')
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 => { total => {
const points = globalStats return globalStats.map((stat, i) => {
.map((stat, i) => { const point = valueToPoint(+stat.value + 10, i, total)
const point = valueToPoint(stat.value, i, total) return [point.x, point.y]
return point.x + ',' + point.y })
})
.join(' ')
return document.querySelector('polygon')!.attributes[0].value === points
}, },
[total] [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') { async function testSvg(apiType: 'classic' | 'composition') {
@ -48,22 +85,58 @@ describe('e2e: svg', () => {
expect(await count('label')).toBe(6) expect(await count('label')).toBe(6)
expect(await count('button')).toBe(7) expect(await count('button')).toBe(7)
expect(await count('input[type="range"]')).toBe(6) 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') await click('button.remove')
expect(await count('text')).toBe(5) expect(await count('text')).toBe(5)
expect(await count('label')).toBe(5) expect(await count('label')).toBe(5)
expect(await count('button')).toBe(6) expect(await count('button')).toBe(6)
expect(await count('input[type="range"]')).toBe(5) 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') await click('#add > button')
expect(await count('text')).toBe(6) expect(await count('text')).toBe(6)
expect(await count('label')).toBe(6) expect(await count('label')).toBe(6)
expect(await count('button')).toBe(7) expect(await count('button')).toBe(7)
expect(await count('input[type="range"]')).toBe(6) 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( test(