test: add e2e tests

.circleci/config.yml

@@ -7,6 +7,14 @@ defaults: &defaults
   environment:
     NODE_ENV: test
 
+e2e_browsers: &e2e_browsers
+  working_directory: ~/project
+  docker:
+    - image: circleci/node:latest-browsers
+  environment:
+    NODE_ENV: test
+
+
 jobs:
   setup:
     <<: *defaults
@@ -65,16 +73,75 @@ jobs:
           name: Unit Tests
           command: yarn test:unit --coverage && yarn coverage
 
-  test-e2e:
+  test-e2e-ssr:
-    docker:
+    <<: *defaults
-        - image: circleci/node:latest-browsers
     steps:
       - checkout
       - attach_workspace:
           at: ~/project
       - run:
           name: E2E Tests
-          command: yarn test:e2e
+          command: yarn test:e2e-ssr
+
+  test-e2e-firefox:
+    <<: *e2e_browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e-ssr
+          environment:
+            BROWSER_STRING: firefox
+
+  test-e2e-chrome:
+    <<: *e2e_browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e-ssr
+          environment:
+            BROWSER_STRING: chrome
+
+  test-e2e-ie:
+    <<: *e2e_browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e-ssr
+          environment:
+            BROWSER_STRING: browserstack/local/ie:9
+
+  test-e2e-edge:
+    <<: *e2e_browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e-ssr
+          environment:
+            BROWSER_STRING: browserstack/local/edge:15
+
+  test-e2e-safari:
+    <<: *e2e_browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: E2E Tests
+          command: yarn test:e2e-ssr
+          environment:
+            BROWSER_STRING: browserstack/local/os x=snow leopard/safari:5.1
             
 workflows:
   version: 2
@@ -82,7 +149,11 @@ workflows:
   commit:
     jobs:
       - setup
-      - lint:       { requires: [setup] }
+      - lint:           { requires: [setup] }
-      - audit:      { requires: [setup] }
+      - audit:          { requires: [setup] }
-      - test-unit:  { requires: [lint] }
+      - test-unit:      { requires: [lint] }
-      - test-e2e:   { requires: [lint] }
+      - test-e2e-ssr:   { requires: [lint] }
+      - test-e2e-chrome { requires: [test-e2e-ssr] }
+      - test-e2e-ie     { requires: [test-e2e-ssr] }
+      - test-e2e-edge   { requires: [test-e2e-ssr] }
+      - test-e2e-safari { requires: [test-e2e-ssr] }

.gitignore

@@ -1,6 +1,7 @@
 # Logs
 logs
 *.log
+*.err
 npm-debug.log*
 
 # Runtime data
@@ -44,3 +45,6 @@ es
 
 # examples yarn lock
 examples/yarn.lock
+
+# env vars
+.env*

babel.config.js

@@ -1,11 +1,13 @@
-{
+module.exports = {
   "plugins": ["@babel/plugin-syntax-dynamic-import"],
   "env": {
     "test": {
       "plugins": ["dynamic-import-node"],
       "presets": [
         [ "@babel/env", {
-          "targets": { "node": "current" }
+          targets: {
+            node: "current"
+          }
         }]
       ]
     }

package.json

@@ -46,66 +46,70 @@
     "lint": "eslint src test",
     "prerelease": "npm run build",
     "release": "npm publish",
-    "test": "yarn test:unit && yarn test:e2e",
+    "test": "yarn test:unit && yarn test:e2e-ssr && yarn test:e2e-browser",
-    "test:e2e": "jest test/e2e",
+    "test:e2e-ssr": "jest test/e2e/ssr",
-    "test:unit": "jest test/unit",
+    "test:e2e-browser": "jest test/e2e/browser",
-    "toc": "doctoc README.md --title '# Table of Contents'",
+    "test:unit": "jest test/unit"
-    "update-cdn": "babel-node scripts/update-cdn.js",
-    "preversion": "npm run toc",
-    "postversion": "npm run update-cdn && git add . && git commit -m \":ship: CDN update\""
   },
   "dependencies": {
     "deepmerge": "^3.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
+    "@babel/core": "^7.4.0",
     "@babel/node": "^7.2.2",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-env": "^7.4.2",
     "@nuxt/babel-preset-app": "^2.4.5",
     "@nuxtjs/eslint-config": "^0.0.1",
     "@vue/server-test-utils": "^1.0.0-beta.29",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.4.0",
+    "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-dynamic-import-node": "^2.2.0",
+    "browserstack-local": "^1.3.7",
+    "chromedriver": "^2.46.0",
     "codecov": "^3.2.0",
-    "doctoc": "^1.4.0",
+    "eslint": "^5.15.3",
-    "eslint": "^5.15.1",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.3.0",
+    "eslint-plugin-jest": "^22.4.1",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.2.2",
-    "esm": "^3.2.14",
+    "esm": "^3.2.18",
     "fs-extra": "^7.0.1",
+    "geckodriver": "^1.16.0",
     "is-wsl": "^1.1.0",
-    "jest": "^24.4.0",
+    "jest": "^24.5.0",
-    "jest-environment-jsdom": "^24.4.0",
+    "jest-environment-jsdom": "^24.5.0",
-    "jest-environment-jsdom-global": "^1.1.1",
+    "jest-environment-jsdom-global": "^1.2.0",
     "jsdom": "^14.0.0",
     "lodash": "^4.17.11",
+    "node-env-file": "^0.1.8",
     "puppeteer-core": "^1.13.0",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
+    "rollup": "^1.7.0",
     "rollup-plugin-buble": "^0.19.6",
     "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-json": "^3.1.0",
+    "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-replace": "^2.1.0",
+    "rollup-plugin-replace": "^2.1.1",
     "rollup-plugin-terser": "^4.0.4",
-    "update-section": "^0.3.3",
+    "selenium-webdriver": "^4.0.0-alpha.1",
-    "vue": "^2.6.8",
+    "standard-version": "^5.0.2",
+    "tib": "^0.3.0",
+    "vue": "^2.6.10",
     "vue-jest": "^3.0.4",
     "vue-loader": "^15.7.0",
     "vue-router": "^3.0.2",
-    "vue-server-renderer": "^2.6.8",
+    "vue-server-renderer": "^2.6.10",
-    "vue-template-compiler": "^2.6.8",
+    "vue-template-compiler": "^2.6.10",
+    "vuepress": "^0.14.10",
+    "vuepress-theme-vue": "^1.1.0",
     "webpack": "^4.29.6"
   }
 }

src/shared/mixin.js

@@ -47,7 +47,7 @@ export default function createMixin(Vue, options) {
         // coerce function-style metaInfo to a computed prop so we can observe
         // it on creation
         if (isFunction(this.$options[options.keyName])) {
-          if (isUndefined(this.$options.computed)) {
+          if (!this.$options.computed) {
             this.$options.computed = {}
           }
           this.$options.computed.$metaInfo = this.$options[options.keyName]
@@ -82,7 +82,7 @@ export default function createMixin(Vue, options) {
               }
             })
 
-            // add the navigation guards if they havent been added yet
+            // add the navigation guards if requested
             if (options.refreshOnceOnNavigation) {
               addNavGuards(this)
             }
@@ -94,7 +94,10 @@ export default function createMixin(Vue, options) {
           // add the navigation guards if they havent been added yet
           // if metaInfo is defined as a function, this does call the computed fn redundantly
           // but as Vue internally caches the results of computed props it shouldnt hurt performance
-          if (!options.refreshOnceOnNavigation && this.$options[options.keyName].afterNavigation) {
+          if (!options.refreshOnceOnNavigation && (
+            (this.$options[options.keyName] && this.$options[options.keyName].afterNavigation) ||
+            (this.$options.computed && this.$options.computed.$metaInfo && (this.$options.computed.$metaInfo() || {}).afterNavigation)
+          )) {
             addNavGuards(this)
           }
 

test/e2e/browser.test.js

@@ -1,79 +1,116 @@
-import Browser from '../utils/browser'
+/**
-import { buildFixture } from '../utils/build'
+ * @jest-environment node
+ */
+import fs from 'fs'
+import path from 'path'
+import env from 'node-env-file'
+import { browser as startBrowser } from 'tib'
 
-const browser = new Browser()
+const browserString = process.env.BROWSER_STRING || 'puppeteer/core'
 
-describe('basic browser with ssr page', () => {
+describe(browserString, () => {
-  let page = null
+  let browser
-  let url
+  let page
-  let html
+  const folder = path.resolve(__dirname, '..', 'fixtures/basic/.vue-meta/')
 
   beforeAll(async () => {
-    const fixture = await buildFixture('basic')
+    if (browserString.includes('browserstack') && browserString.includes('local')) {
-    url = fixture.url
+      const envFile = path.resolve(__dirname, '..', '..', '.env-browserstack')
-    html = fixture.html
+      if (fs.existsSync(envFile)) {
+        env(envFile)
+      }
+    }
 
-    await browser.start({
+    browser = await startBrowser(browserString, {
-      // slowMo: 50,
+      BrowserStackLocal: { folder },
-      // headless: false
+      extendPage(page) {
+        return {
+          async navigate(path) {
+            // IMPORTANT: use (arrow) function with block'ed body
+            // see: https://github.com/tunnckoCoreLabs/parse-function/issues/179
+            await page.runAsyncScript((path) => {
+              return new Promise((resolve) => {
+                const oldTitle = document.title
+
+                // local firefox has sometimes not updated the title
+                // even when the DOM is supposed to be fully updated
+                const waitTitleChanged = function () {
+                  setTimeout(function () {
+                    if (oldTitle !== document.title) {
+                      resolve()
+                    } else {
+                      waitTitleChanged()
+                    }
+                  }, 50)
+                }
+
+                window.$vueMeta.$once('routeChanged', waitTitleChanged)
+                window.$vueMeta.$router.push(path)
+              })
+            }, path)
+          },
+          routeData() {
+            return page.runScript(() => ({
+              path: window.$vueMeta.$route.path,
+              query: window.$vueMeta.$route.query
+            }))
+          }
+        }
+      }
     })
   })
 
-  // Stop browser
   afterAll(async () => {
-    if (page) await page.close()
+    if (browser) {
-    await browser.close()
+      await browser.close()
+    }
   })
 
-  test('validate ssr', () => {
+  test('open page', async () => {
-    const htmlTag = html.match(/<html([^>]+)>/)[0]
+    const webPath = '/index.html'
-    expect(htmlTag).toContain('data-vue-meta-server-rendered')
-    expect(htmlTag).toContain(' lang="en" ')
-    expect(htmlTag).toContain(' amp ')
-    expect(htmlTag).not.toContain('allowfullscreen')
-    expect(html.match(/<title[^>]*>(.*?)<\/title>/)[1]).toBe('Home | Vue Meta Test')
-    expect(html.match(/<meta/g).length).toBe(2)
-    expect(html.match(/<meta/g).length).toBe(2)
 
-    const re = /<(no)?script[^>]+type="application\/ld\+json"[^>]*>(.*?)</g
+    let url
-    const sanitizeCheck = []
+    if (browser.getLocalFolderUrl) {
-    let match
+      url = browser.getLocalFolderUrl(webPath)
-    while ((match = re.exec(html))) {
+    } else {
-      sanitizeCheck.push(match[2])
+      url = `file://${path.join(folder, webPath)}`
     }
 
-    expect(sanitizeCheck.length).toBe(3)
-    expect(() => JSON.parse(sanitizeCheck[0])).not.toThrow()
-    expect(() => JSON.parse(sanitizeCheck[1])).toThrow()
-    expect(() => JSON.parse(sanitizeCheck[2])).not.toThrow()
-  })
-
-  test('Open /', async () => {
     page = await browser.page(url)
 
-    expect(await page.$attr('html', 'data-vue-meta-server-rendered')).toBe(null)
+    expect(await page.getAttribute('html', 'data-vue-meta-server-rendered')).toBe(null)
-    expect(await page.$attr('html', 'lang')).toBe('en')
+    expect(await page.getAttribute('html', 'lang')).toBe('en')
-    expect(await page.$attr('html', 'amp')).toBe('')
+    expect(await page.getAttribute('html', 'amp')).toBe('')
-    expect(await page.$attr('html', 'allowfullscreen')).toBe(null)
+    expect(await page.getAttribute('html', 'allowfullscreen')).toBe(null)
-    expect(await page.$attr('head', 'test')).toBe('true')
+    expect(await page.getAttribute('head', 'test')).toBe('true')
-    expect(await page.$text('h1')).toBe('Basic')
+    expect(await page.getText('h1')).toBe('Basic')
-    expect(await page.$text('title')).toBe('Home | Vue Meta Test')
+    expect(await page.getText('title')).toBe('Home | Vue Meta Test')
-    expect(await page.$$eval('meta', metas => metas.length)).toBe(2)
+    expect(await page.getElementCount('meta')).toBe(2)
 
-    let sanitizeCheck = await page.$$text('script')
+    let sanitizeCheck = await page.getTexts('script')
-    sanitizeCheck.push(...(await page.$$text('noscript')))
+    sanitizeCheck.push(...(await page.getTexts('noscript')))
     sanitizeCheck = sanitizeCheck.filter(v => !!v)
 
     expect(sanitizeCheck.length).toBe(3)
     expect(() => JSON.parse(sanitizeCheck[0])).not.toThrow()
-    expect(() => JSON.parse(sanitizeCheck[1])).not.toThrow()
+    // TODO: check why this doesnt Throw when Home is dynamic loaded
+    // (but that causes hydration error)
+    expect(() => JSON.parse(sanitizeCheck[1])).toThrow()
     expect(() => JSON.parse(sanitizeCheck[2])).not.toThrow()
   })
 
   test('/about', async () => {
-    const { hook } = await page.vueMeta.navigate('/about', false)
+    try {
-    await hook
+      await page.navigate('/about', false)
-    expect(await page.$text('title')).toBe('About')
+    } catch (e) {
-    expect(await page.$$eval('meta', metas => metas.length)).toBe(1)
+      if (e.constructor.name !== 'ScriptTimeoutError') {
+        throw e
+      } else {
+        console.warn(e) // eslint-disable-line no-console
+      }
+    }
+
+    expect(await page.getText('title')).toBe('About')
+    expect(await page.getElementCount('meta')).toBe(1)
   })
 })

test/e2e/ssr.test.js

@@ -0,0 +1,33 @@
+import { buildFixture } from '../utils/build'
+
+describe('basic browser with ssr page', () => {
+  let html
+
+  beforeAll(async () => {
+    const fixture = await buildFixture('basic')
+    html = fixture.html
+  })
+
+  test('validate ssr', () => {
+    const htmlTag = html.match(/<html([^>]+)>/)[0]
+    expect(htmlTag).toContain('data-vue-meta-server-rendered')
+    expect(htmlTag).toContain(' lang="en" ')
+    expect(htmlTag).toContain(' amp ')
+    expect(htmlTag).not.toContain('allowfullscreen')
+    expect(html.match(/<title[^>]*>(.*?)<\/title>/)[1]).toBe('Home | Vue Meta Test')
+    expect(html.match(/<meta/g).length).toBe(2)
+    expect(html.match(/<meta/g).length).toBe(2)
+
+    const re = /<(no)?script[^>]+type="application\/ld\+json"[^>]*>(.*?)</g
+    const sanitizeCheck = []
+    let match
+    while ((match = re.exec(html))) {
+      sanitizeCheck.push(match[2])
+    }
+
+    expect(sanitizeCheck.length).toBe(3)
+    expect(() => JSON.parse(sanitizeCheck[0])).not.toThrow()
+    expect(() => JSON.parse(sanitizeCheck[1])).toThrow()
+    expect(() => JSON.parse(sanitizeCheck[2])).not.toThrow()
+  })
+})

test/fixtures/basic/App.vue

@@ -8,13 +8,17 @@
 
 <script>
 export default {
-  metaInfo: {
+  metaInfo() {
-    meta: [
+    return {
-      { vmid: 'charset', charset: 'utf-8' }
+      meta: [
-    ]
+        { vmid: 'charset', charset: 'utf-8' }
+      ],
+      afterNavigation: () => {
+        this.$emit('routeChanged')
+      }
+    }
   },
   mounted() {
-    this.$router.afterEach((to, from) => this.$emit('routeChanged', to, from))
     window.$vueMeta = this
   }
 }

test/fixtures/basic/router.js

@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import Home from './views/home.vue'
 
 Vue.use(Router)
 
-const Home = () => import('./views/home.vue')
 const Post = () => import('./views/about.vue')
 
 export default function createRouter() {

test/utils/build.js

@@ -38,6 +38,7 @@ export async function buildFixture(fixture, config = {}) {
   await fs.remove(webpackConfig.output.path)
 
   // run webpack
+  process.env.NODE_ENV = 'test'
   const webpackStats = await webpackRun(webpackConfig)
 
   // for test debugging
@@ -73,6 +74,7 @@ export function createWebpackConfig(config = {}) {
 
   return {
     mode: 'development',
+    devtool: 'none',
     output: {
       path: path.join(path.dirname(config.entry), publicPath),
       filename: '[name].js',
@@ -81,7 +83,22 @@ export function createWebpackConfig(config = {}) {
     },
     module: {
       rules: [
-        { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                ['@babel/preset-env', {
+                  useBuiltIns: 'usage',
+                  corejs: 'core-js@2',
+                  targets: { ie: 9, safari: '5.1' }
+                }]
+              ]
+            }
+          }
+        },
         { test: /\.vue$/, use: 'vue-loader' }
       ]
     },
@@ -102,7 +119,13 @@ export function createWebpackConfig(config = {}) {
       }
     },
     plugins: [
-      new VueLoaderPlugin()
+      new VueLoaderPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          // make sure our simple polyfills are enabled
+          'NODE_ENV': '"test"'
+        }
+      })
     ],
     resolve: {
       alias: {

test/utils/setup.js

@@ -1,2 +1,2 @@
 jest.useFakeTimers()
-jest.setTimeout(15000)
+jest.setTimeout(30000)