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

packages/vue/__tests__/e2eUtils.ts

@@ -0,0 +1,126 @@
+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
+  }
+}

packages/vue/__tests__/transition.html

@@ -0,0 +1,51 @@
+<script src="../dist/vue.global.js"></script>
+
+<div id="app"></div>
+<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>