test(e2e): add test for svg example (#551)

packages/vue/examples/__tests__/svg.spec.ts

@@ -0,0 +1,76 @@
+import path from 'path'
+import { setupPuppeteer } from './e2eUtils'
+
+declare const globalStats: {
+  label: string
+  value: number
+}[]
+
+declare function valueToPoint(
+  value: number,
+  index: number,
+  total: number
+): {
+  x: number
+  y: number
+}
+
+describe('e2e: svg', () => {
+  const { page, click, count, setValue } = setupPuppeteer()
+
+  async function assertStats(total: number) {
+    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]
+    )
+  }
+
+  async function testSvg(apiType: 'classic' | 'composition') {
+    const baseUrl = `file://${path.resolve(
+      __dirname,
+      `../${apiType}/svg.html`
+    )}`
+
+    await page().goto(baseUrl)
+    await page().waitFor('svg')
+    expect(await count('g')).toBe(1)
+    expect(await count('polygon')).toBe(1)
+    expect(await count('circle')).toBe(1)
+    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 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 setValue('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)
+  }
+
+  test('classic', async () => {
+    await testSvg('classic')
+  })
+
+  test('composition', async () => {
+    await testSvg('composition')
+  })
+})