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

This commit is contained in:
CodinCat 2019-12-10 04:20:56 +09:00 committed by Evan You
parent 55e234816e
commit 12ec62e688
2 changed files with 116 additions and 4 deletions

View File

@ -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,

View File

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