theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test(Transition): more complete transition e2e tests (#1151)

Browse Source
This commit is contained in:
underfin
2020-06-26 02:04:23 +08:00
committed by GitHub
parent f54be6a462
commit b3bdd7046f
10 changed files with 1645 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vue/examples/__tests__/commits.spec.ts
View File

@@ -1,5 +1,5 @@
import path from 'path'
import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
import mocks from './commits.mock'
describe('e2e: commits', () => {

126
packages/vue/examples/__tests__/e2eUtils.ts
View File

@@ -1,126 +0,0 @@
import puppeteer from 'puppeteer'
export const E2E_TIMEOUT = 30 * 1000
const puppeteerOptions = process.env.CI
? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
: {}
export function setupPuppeteer() {
let browser: puppeteer.Browser
let page: puppeteer.Page
beforeEach(async () => {
browser = await puppeteer.launch(puppeteerOptions)
page = await browser.newPage()
page.on('console', e => {
if (e.type() === 'error') {
const err = e.args()[0] as any
console.error(
`Error from Puppeteer-loaded page:\n`,
err._remoteObject.description
)
}
})
})
afterEach(async () => {
await browser.close()
})
async function click(selector: string, options?: puppeteer.ClickOptions) {
await page.click(selector, options)
}
async function count(selector: string) {
return (await page.$$(selector)).length
}
async function text(selector: string) {
return await page.$eval(selector, node => node.textContent)
}
async function value(selector: string) {
return await page.$eval(selector, node => (node as HTMLInputElement).value)
}
async function html(selector: string) {
return await page.$eval(selector, node => node.innerHTML)
}
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 => {
return window.getComputedStyle(node).display
})
return display !== 'none'
}
async function isChecked(selector: string) {
return await page.$eval(
selector,
node => (node as HTMLInputElement).checked
)
}
async function isFocused(selector: string) {
return await page.$eval(selector, node => node === document.activeElement)
}
async function setValue(selector: string, value: string) {
await page.$eval(
selector,
(node, value) => {
(node as HTMLInputElement).value = value
node.dispatchEvent(new Event('input'))
},
value
)
}
async function typeValue(selector: string, value: string) {
const el = (await page.$(selector))!
await el.evaluate(node => ((node as HTMLInputElement).value = ''))
await el.type(value)
}
async function enterValue(selector: string, value: string) {
const el = (await page.$(selector))!
await el.evaluate(node => ((node as HTMLInputElement).value = ''))
await el.type(value)
await el.press('Enter')
}
async function clearValue(selector: string) {
return await page.$eval(
selector,
node => ((node as HTMLInputElement).value = '')
)
}
return {
page: () => page,
click,
count,
text,
value,
html,
classList,
children,
isVisible,
isChecked,
isFocused,
setValue,
typeValue,
enterValue,
clearValue
}
}

2
packages/vue/examples/__tests__/grid.spec.ts
View File

@@ -1,5 +1,5 @@
import path from 'path'
import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
interface TableData {
name: string

2
packages/vue/examples/__tests__/markdown.spec.ts
View File

@@ -1,5 +1,5 @@
import path from 'path'
import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
describe('e2e: markdown', () => {
const { page, isVisible, value, html } = setupPuppeteer()

2
packages/vue/examples/__tests__/svg.spec.ts
View File

@@ -1,5 +1,5 @@
import path from 'path'
import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
declare const globalStats: {
label: string

2
packages/vue/examples/__tests__/todomvc.spec.ts
View File

@@ -1,5 +1,5 @@
import path from 'path'
import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
describe('e2e: todomvc', () => {
const {

85
packages/vue/examples/__tests__/transition/Transition.spec.ts
View File

@@ -1,85 +0,0 @@
import { E2E_TIMEOUT, setupPuppeteer } from '../e2eUtils'
import path from 'path'
describe('e2e: Transition', () => {
const { page, html, classList } = setupPuppeteer()
const baseUrl = `file://${path.resolve(
__dirname,
'../../transition/index.html'
)}`
const container = '#test'
const duration = 50
const buffer = 10
const transitionFinish = () =>
new Promise(r => {
setTimeout(r, duration + buffer)
})
const nextFrame = () => {
return page().evaluate(() => {
return new Promise(resolve => {
requestAnimationFrame(() => {
requestAnimationFrame(resolve)
})
})
})
}
test(
'basic transition',
async () => {
await page().goto(baseUrl)
await page().waitFor('#app')
expect(await html(container)).toBe('<div class="test">content</div>')
const leaveStartClasses = await page().evaluate(() => {
document.querySelector('button')!.click()
return Promise.resolve().then(() => {
return document.querySelector('#test div')!.className.split(/\s+/g)
})
})
expect(leaveStartClasses).toStrictEqual([
'test',
'v-leave-active',
'v-leave-from'
])
await nextFrame()
expect(await classList('#test div')).toStrictEqual([
'test',
'v-leave-active',
'v-leave-to'
])
await transitionFinish()
expect(await html('#test')).toBe('<!--v-if-->')
const enterStartClasses = await page().evaluate(() => {
document.querySelector('button')!.click()
return Promise.resolve().then(() => {
return document.querySelector('#test div')!.className.split(/\s+/g)
})
})
expect(enterStartClasses).toStrictEqual([
'test',
'v-enter-active',
'v-enter-from'
])
await nextFrame()
expect(await classList('#test div')).toStrictEqual([
'test',
'v-enter-active',
'v-enter-to'
])
await transitionFinish()
expect(await html('#test')).toBe('<div class="test">content</div>')
},
E2E_TIMEOUT
)
})

2
packages/vue/examples/__tests__/tree.spec.ts
View File

@@ -1,5 +1,5 @@
import path from 'path'
import { setupPuppeteer, E2E_TIMEOUT } from './e2eUtils'
import { setupPuppeteer, E2E_TIMEOUT } from '../../__tests__/e2eUtils'
describe('e2e: tree', () => {
const { page, click, count, text, children, isVisible } = setupPuppeteer()

64
packages/vue/examples/transition/index.html
View File

@@ -1,64 +0,0 @@
<script src="../../dist/vue.global.js"></script>
<div id="app"></div>
<script>
Vue.createApp({
template: `
<div id="test"><transition><div v-if="toggle" class="test">content</div></transition></div>
<button @click="click">button</button>
`,
setup:() => {
const toggle = Vue.ref(true)
const click = () => toggle.value = !toggle.value
return { toggle, click }
}
}).mount('#app')
</script>
<style>
.test {
-webkit-transition: opacity 50ms ease;
transition: opacity 50ms ease;
}
.group-move {
-webkit-transition: -webkit-transform 50ms ease;
transition: transform 50ms ease;
}
.v-appear, .v-enter, .v-leave-active,
.test-appear, .test-enter, .test-leave-active,
.hello, .bye.active,
.changed-enter {
opacity: 0;
}
.test-anim-enter-active {
animation: test-enter 50ms;
-webkit-animation: test-enter 50ms;
}
.test-anim-leave-active {
animation: test-leave 50ms;
-webkit-animation: test-leave 50ms;
}
.test-anim-long-enter-active {
animation: test-enter 100ms;
-webkit-animation: test-enter 100ms;
}
.test-anim-long-leave-active {
animation: test-leave 100ms;
-webkit-animation: test-leave 100ms;
}
@keyframes test-enter {
from { opacity: 0 }
to { opacity: 1 }
}
@-webkit-keyframes test-enter {
from { opacity: 0 }
to { opacity: 1 }
}
@keyframes test-leave {
from { opacity: 1 }
to { opacity: 0 }
}
@-webkit-keyframes test-leave {
from { opacity: 1 }
to { opacity: 0 }
}
</style>