test(e2e): add e2e test for tree example (#529)

packages/vue/examples/__tests__/e2eUtils.ts

@@ -33,6 +33,14 @@ export function setupPuppeteer() {
     return await page.$eval(selector, (node: any) => node.value)
   }
 
+  async function classList(selector: string) {
+    return await page.$eval(selector, (node: any) => [...node.classList])
+  }
+
+  async function children(selector: string) {
+    return await page.$eval(selector, (node: any) => [...node.children])
+  }
+
   async function isVisible(selector: string) {
     const display = await page.$eval(selector, (node: HTMLElement) => {
       return window.getComputedStyle(node).display
@@ -44,10 +52,6 @@ export function setupPuppeteer() {
     return await page.$eval(selector, (node: any) => node.checked)
   }
 
-  async function classList(selector: string) {
-    return await page.$eval(selector, (node: any) => [...node.classList])
-  }
-
   async function isFocused(selector: string) {
     return await page.$eval(selector, node => node === document.activeElement)
   }
@@ -70,6 +74,7 @@ export function setupPuppeteer() {
     text,
     value,
     classList,
+    children,
     isVisible,
     isChecked,
     isFocused,

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

@@ -0,0 +1,107 @@
+import path from 'path'
+import { setupPuppeteer } from './e2eUtils'
+
+describe('e2e: tree', () => {
+  const { page, click, count, text, children, isVisible } = setupPuppeteer()
+
+  async function testTree(apiType: 'classic' | 'composition') {
+    const baseUrl = `file://${path.resolve(
+      __dirname,
+      `../${apiType}/tree.html`
+    )}`
+
+    await page().goto(baseUrl)
+    expect(await count('.item')).toBe(12)
+    expect(await count('.add')).toBe(4)
+    expect(await count('.item > ul')).toBe(4)
+    expect(await isVisible('#demo li ul')).toBe(false)
+    expect(await text('#demo li div span')).toBe('[+]')
+
+    // expand root
+    await click('.bold')
+    expect(await isVisible('#demo ul')).toBe(true)
+    expect((await children('#demo li ul')).length).toBe(4)
+    expect(await text('#demo li div span')).toContain('[-]')
+    expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
+      'hello'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
+      'wat'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
+      'child folder'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
+      '[+]'
+    )
+
+    // add items to root
+    await click('#demo > .item > ul > .add')
+    expect((await children('#demo li ul')).length).toBe(5)
+    expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
+      'hello'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
+      'wat'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
+      'child folder'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
+      '[+]'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(4)')).toContain(
+      'new stuff'
+    )
+
+    // add another item
+    await click('#demo > .item > ul > .add')
+    expect((await children('#demo li ul')).length).toBe(6)
+    expect(await text('#demo > .item > ul > .item:nth-child(1)')).toContain(
+      'hello'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(2)')).toContain(
+      'wat'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
+      'child folder'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(3)')).toContain(
+      '[+]'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(4)')).toContain(
+      'new stuff'
+    )
+    expect(await text('#demo > .item > ul > .item:nth-child(5)')).toContain(
+      'new stuff'
+    )
+
+    await click('#demo ul .bold')
+    expect(await isVisible('#demo ul ul')).toBe(true)
+    expect(await text('#demo ul > .item:nth-child(3)')).toContain('[-]')
+    expect((await children('#demo ul ul')).length).toBe(5)
+
+    await click('.bold')
+    expect(await isVisible('#demo ul')).toBe(false)
+    expect(await text('#demo li div span')).toContain('[+]')
+    await click('.bold')
+    expect(await isVisible('#demo ul')).toBe(true)
+    expect(await text('#demo li div span')).toContain('[-]')
+
+    await click('#demo ul > .item div', { clickCount: 2 })
+    expect(await count('.item')).toBe(15)
+    expect(await count('.item > ul')).toBe(5)
+    expect(await text('#demo ul > .item:nth-child(1)')).toContain('[-]')
+    expect((await children('#demo ul > .item:nth-child(1) > ul')).length).toBe(
+      2
+    )
+  }
+
+  test('classic', async () => {
+    await testTree('classic')
+  })
+
+  test('composition', async () => {
+    await testTree('composition')
+  })
+})