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

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
  }

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)
  }
 

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(