From c7cd386194b2fac4db36c1d821d6c0986ce1e2ef Mon Sep 17 00:00:00 2001 From: CodinCat Date: Fri, 12 Jun 2020 23:32:27 +0900 Subject: [PATCH] test(e2e): enhance and fix test of svg example (#560) --- packages/vue/examples/__tests__/e2eUtils.ts | 12 +++ packages/vue/examples/__tests__/grid.spec.ts | 8 +- packages/vue/examples/__tests__/svg.spec.ts | 101 ++++++++++++++++--- 3 files changed, 103 insertions(+), 18 deletions(-) diff --git a/packages/vue/examples/__tests__/e2eUtils.ts b/packages/vue/examples/__tests__/e2eUtils.ts index 502dd547499..f014623d8fe 100644 --- a/packages/vue/examples/__tests__/e2eUtils.ts +++ b/packages/vue/examples/__tests__/e2eUtils.ts @@ -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 } diff --git a/packages/vue/examples/__tests__/grid.spec.ts b/packages/vue/examples/__tests__/grid.spec.ts index fe57806b6f1..6fde334fd49 100644 --- a/packages/vue/examples/__tests__/grid.spec.ts +++ b/packages/vue/examples/__tests__/grid.spec.ts @@ -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) } diff --git a/packages/vue/examples/__tests__/svg.spec.ts b/packages/vue/examples/__tests__/svg.spec.ts index 5ba9202c519..fce05ac0bd1 100644 --- a/packages/vue/examples/__tests__/svg.spec.ts +++ b/packages/vue/examples/__tests__/svg.spec.ts @@ -16,21 +16,58 @@ declare function valueToPoint( } describe('e2e: svg', () => { - const { page, click, count, setValue } = setupPuppeteer() + const { page, click, count, setValue, typeValue } = setupPuppeteer() - async function assertStats(total: number) { - await page().evaluate( + // assert the shape of the polygon is correct + 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 => { - 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 + 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(