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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 1645 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1636
packages/vue/__tests__/Transition.spec.ts Normal file
View File

File diff suppressed because it is too large Load Diff

2
packages/vue/examples/__tests__/e2eUtils.ts → packages/vue/__tests__/e2eUtils.ts
View File

@ -79,7 +79,7 @@ export function setupPuppeteer() {
await page.$eval(
selector,
(node, value) => {
(node as HTMLInputElement).value = value
;(node as HTMLInputElement).value = value
node.dispatchEvent(new Event('input'))
},
value

17
packages/vue/examples/transition/index.html → packages/vue/__tests__/transition.html
View File

@ -1,19 +1,6 @@
<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>
<script src="../dist/vue.global.js"></script>
<div id="app"></div>
<style>
.test {
-webkit-transition: opacity 50ms ease;

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', () => {

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()