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(