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

packages/vue/examples/classic/svg.html

@@ -66,21 +66,6 @@ const Polygraph = {
     AxisLabel
   }
 }
-
-// math helper...
-function valueToPoint (value, index, total) {
-  var x     = 0
-  var y     = -value * 0.8
-  var angle = Math.PI * 2 / total * index
-  var cos   = Math.cos(angle)
-  var sin   = Math.sin(angle)
-  var tx    = x * cos - y * sin + 100
-  var ty    = x * sin + y * cos + 100
-  return {
-    x: tx,
-    y: ty
-  }
-}
 </script>
 
 <!-- demo root element -->
@@ -104,20 +89,21 @@ function valueToPoint (value, index, total) {
 </div>
 
 <script>
+const globalStats = [
+  { label: 'A', value: 100 },
+  { label: 'B', value: 100 },
+  { label: 'C', value: 100 },
+  { label: 'D', value: 100 },
+  { label: 'E', value: 100 },
+  { label: 'F', value: 100 }
+]
 const App = {
   components: {
     Polygraph
   },
   data: {
     newLabel: '',
-    stats: [
-      { label: 'A', value: 100 },
-      { label: 'B', value: 100 },
-      { label: 'C', value: 100 },
-      { label: 'D', value: 100 },
-      { label: 'E', value: 100 },
-      { label: 'F', value: 100 }
-    ]
+    stats: globalStats
   },
   methods: {
     add(e) {

packages/vue/examples/composition/svg.html

@@ -92,20 +92,21 @@ const Polygraph = {
 </div>
 
 <script>
+const globalStats = [
+  { label: 'A', value: 100 },
+  { label: 'B', value: 100 },
+  { label: 'C', value: 100 },
+  { label: 'D', value: 100 },
+  { label: 'E', value: 100 },
+  { label: 'F', value: 100 }
+]
 const App = {
   components: {
     Polygraph
   },
   setup() {
     const newLabel = ref('')
-    const stats = reactive([
-      { label: 'A', value: 100 },
-      { label: 'B', value: 100 },
-      { label: 'C', value: 100 },
-      { label: 'D', value: 100 },
-      { label: 'E', value: 100 },
-      { label: 'F', value: 100 }
-    ])
+    const stats = reactive(globalStats)
 
     function add(e) {
       e.preventDefault()