test(e2e): add e2e test for tree example (#529)
This commit is contained in:
parent
55e234816e
commit
12ec62e688
@ -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,
|
||||
|
107
packages/vue/examples/__tests__/tree.spec.ts
Normal file
107
packages/vue/examples/__tests__/tree.spec.ts
Normal 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')
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue
Block a user