test: set up test for core (#480)

.babelrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", { "targets": { "node": 8 }}]
+      ]
+    }
+  }
+}

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   extends: [
-    'plugin:vue-libs/recommended'
+    'plugin:vue-libs/recommended',
+    'plugin:jest/recommended'
   ],
   rules: {
     indent: ['error', 2, { MemberExpression: 'off' }]

lib/app/app.js

@@ -26,7 +26,7 @@ if (module.hot) {
 Vue.config.productionTip = false
 Vue.use(Router)
 // mixin for exposing $site and $page
-Vue.mixin(dataMixin)
+Vue.mixin(dataMixin(siteData))
 // component for rendering markdown content and setting title etc.
 Vue.component('Content', Content)
 Vue.component('OutboundLink', OutboundLink)

lib/app/dataMixin.js

@@ -1,7 +1,75 @@
 import Vue from 'vue'
-import { siteData } from './.temp/siteData'
 import { findPageForPath } from './util'
 
+export default function dataMixin (siteData) {
+  prepare(siteData)
+  const store = new Vue({
+    data: { siteData }
+  })
+
+  if (module.hot) {
+    module.hot.accept('./.temp/siteData', () => {
+      prepare(siteData)
+      store.siteData = siteData
+    })
+  }
+
+  return {
+    computed: {
+      $site () {
+        return store.siteData
+      },
+      $localeConfig () {
+        const { locales = {}} = this.$site
+        let targetLang
+        let defaultLang
+        for (const path in locales) {
+          if (path === '/') {
+            defaultLang = locales[path]
+          } else if (this.$page.path.indexOf(path) === 0) {
+            targetLang = locales[path]
+          }
+        }
+        return targetLang || defaultLang || {}
+      },
+      $siteTitle () {
+        return this.$localeConfig.title || this.$site.title || ''
+      },
+      $title () {
+        const page = this.$page
+        const siteTitle = this.$siteTitle
+        const selfTitle = page.frontmatter.home ? null : (
+          page.frontmatter.title || // explicit title
+          page.title // inferred title
+        )
+        return siteTitle
+          ? selfTitle
+            ? (siteTitle + ' | ' + selfTitle)
+            : siteTitle
+          : selfTitle || 'VuePress'
+      },
+      $description () {
+        return this.$page.frontmatter.description || this.$localeConfig.description || this.$site.description || ''
+      },
+      $lang () {
+        return this.$page.frontmatter.lang || this.$localeConfig.lang || 'en-US'
+      },
+      $localePath () {
+        return this.$localeConfig.path || '/'
+      },
+      $themeLocaleConfig () {
+        return (this.$site.themeConfig.locales || {})[this.$localePath] || {}
+      },
+      $page () {
+        return findPageForPath(
+          this.$site.pages,
+          this.$route.path
+        )
+      }
+    }
+  }
+}
+
 function prepare (siteData) {
   siteData.pages.forEach(page => {
     if (!page.frontmatter) {
@@ -15,70 +83,3 @@ function prepare (siteData) {
   }
   Object.freeze(siteData)
 }
-
-prepare(siteData)
-const store = new Vue({
-  data: { siteData }
-})
-
-if (module.hot) {
-  module.hot.accept('./.temp/siteData', () => {
-    prepare(siteData)
-    store.siteData = siteData
-  })
-}
-
-export default {
-  computed: {
-    $site () {
-      return store.siteData
-    },
-    $localeConfig () {
-      const { locales = {}} = this.$site
-      let targetLang
-      let defaultLang
-      for (const path in locales) {
-        if (path === '/') {
-          defaultLang = locales[path]
-        } else if (this.$page.path.indexOf(path) === 0) {
-          targetLang = locales[path]
-        }
-      }
-      return targetLang || defaultLang || {}
-    },
-    $siteTitle () {
-      return this.$localeConfig.title || this.$site.title || ''
-    },
-    $title () {
-      const page = this.$page
-      const siteTitle = this.$siteTitle
-      const selfTitle = page.frontmatter.home ? null : (
-        page.frontmatter.title || // explicit title
-        page.title // inferred title
-      )
-      return siteTitle
-        ? selfTitle
-          ? (siteTitle + ' | ' + selfTitle)
-          : siteTitle
-        : selfTitle || 'VuePress'
-    },
-    $description () {
-      return this.$page.frontmatter.description || this.$localeConfig.description || this.$site.description || ''
-    },
-    $lang () {
-      return this.$page.frontmatter.lang || this.$localeConfig.lang || 'en-US'
-    },
-    $localePath () {
-      return this.$localeConfig.path || '/'
-    },
-    $themeLocaleConfig () {
-      return (this.$site.themeConfig.locales || {})[this.$localePath] || {}
-    },
-    $page () {
-      return findPageForPath(
-        this.$site.pages,
-        this.$route.path
-      )
-    }
-  }
-}

lib/markdown/index.js

@@ -10,7 +10,7 @@ const emoji = require('markdown-it-emoji')
 const anchor = require('markdown-it-anchor')
 const toc = require('markdown-it-table-of-contents')
 const _slugify = require('./slugify')
-const { parseHeaders } = require('../util')
+const parseHeaders = require('../util/parseHeaders')
 
 module.exports = ({ markdown = {}} = {}) => {
   // allow user config slugify
@@ -54,6 +54,15 @@ module.exports = ({ markdown = {}} = {}) => {
     md.use(lineNumbers)
   }
 
+  module.exports.dataReturnable(md)
+
+  // expose slugify
+  md.slugify = slugify
+
+  return md
+}
+
+module.exports.dataReturnable = function dataReturnable (md) {
   // override render to allow custom plugins return data
   const render = md.render
   md.render = (...args) => {
@@ -64,9 +73,4 @@ module.exports = ({ markdown = {}} = {}) => {
       data: md.__data
     }
   }
-
-  // expose slugify
-  md.slugify = slugify
-
-  return md
 }

lib/util/index.js

@@ -5,8 +5,6 @@ exports.encodePath = path => {
   return path.split('/').map(item => encodeURIComponent(item)).join('/')
 }
 
-exports.parseHeaders = parseHeaders
-
 exports.normalizeHeadTag = tag => {
   if (typeof tag === 'string') {
     tag = [tag]

package.json

@@ -10,7 +10,8 @@
     "dev": "node bin/vuepress dev docs",
     "build": "node bin/vuepress build docs",
     "lint": "eslint --fix --ext .js,.vue bin/ lib/ test/",
-    "prepublishOnly": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s"
+    "prepublishOnly": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s",
+    "test": "node test/prepare.js && jest --config test/jest.config.js"
   },
   "repository": {
     "type": "git",
@@ -37,10 +38,10 @@
     ]
   },
   "dependencies": {
-    "autoprefixer": "^8.2.0",
     "@babel/core": "7.0.0-beta.47",
-    "babel-loader": "8.0.0-beta.3",
     "@vue/babel-preset-app": "3.0.0-beta.11",
+    "autoprefixer": "^8.2.0",
+    "babel-loader": "8.0.0-beta.3",
     "cache-loader": "^1.2.2",
     "chalk": "^2.3.2",
     "chokidar": "^2.0.3",
@@ -94,10 +95,17 @@
     "workbox-build": "^3.1.0"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.16",
+    "babel-core": "^7.0.0-0",
+    "babel-jest": "^23.0.0",
     "conventional-changelog-cli": "^1.3.22",
     "eslint": "^4.19.1",
+    "eslint-plugin-jest": "^21.15.1",
     "eslint-plugin-vue-libs": "^3.0.0",
+    "jest": "^23.0.0",
+    "jest-serializer-vue": "^1.0.0",
     "lint-staged": "^7.0.4",
+    "vue-jest": "^2.6.0",
     "vuepress-theme-vue": "^1.0.2",
     "yorkie": "^1.0.3"
   },

test/app/Content.spec.js

@@ -0,0 +1,30 @@
+import Content from '@/app/Content.js'
+import { mount } from '@vue/test-utils'
+import { getRouter, modeTestRunner } from '../util'
+
+function test (mode, localVue) {
+  it(`${mode} - add custom class by default.`, () => {
+    const wrapper = mount(Content, {
+      localVue,
+      router: getRouter()
+    })
+    expect(wrapper.contains('.custom')).toBe(true)
+  })
+
+  it(`${mode} - remove custom when custom set to false.`, () => {
+    const wrapper = mount(Content, {
+      // https://vue-test-utils.vuejs.org/api/options.html#context
+      context: {
+        props: {
+          custom: false
+        }
+      },
+      localVue,
+      router: getRouter()
+    })
+    expect(wrapper.contains('.custom')).toBe(false)
+  })
+}
+
+modeTestRunner('Content', test)
+

test/default-theme/DropdownLink.spec.js

@@ -0,0 +1,31 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import DropdownLink from '@/default-theme/DropdownLink.vue'
+import { modeTestRunner } from '../util'
+
+function test (mode, localVue) {
+  it(`$${mode} - renders dropdown link.`, () => {
+    const item = {
+      text: 'VuePress',
+      items: [
+        {
+          text: 'Guide',
+          link: '/guide/'
+        },
+        {
+          text: 'Config Reference',
+          link: '/config/'
+        }
+      ]
+    }
+    const wrapper = mount(DropdownLink, {
+      localVue,
+      stubs: {
+        'router-link': RouterLinkStub
+      },
+      propsData: { item }
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+}
+
+modeTestRunner('DropdownLink', test)

test/default-theme/NavLink.spec.js

@@ -0,0 +1,34 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import { modeTestRunner } from '../util'
+import NavLink from '@/default-theme/NavLink.vue'
+
+function test (mode, localVue) {
+  it(`$${mode} - renders nav link with internal link`, () => {
+    const item = {
+      link: '/',
+      text: 'VuePress'
+    }
+    const wrapper = mount(NavLink, {
+      localVue,
+      stubs: {
+        'router-link': RouterLinkStub
+      },
+      propsData: { item }
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it(`$${mode} - renders nav link with external link`, () => {
+    const item = {
+      link: 'http://vuejs.org/',
+      text: 'Vue'
+    }
+    const wrapper = mount(NavLink, {
+      localVue,
+      propsData: { item }
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+}
+
+modeTestRunner('NavLink', test)

test/default-theme/__snapshots__/DropdownLink.spec.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownLink $i18n - renders dropdown link. 1`] = `
+<div class="dropdown-wrapper">
+  <a class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
+  <ul class="nav-dropdown" style="display: none;" name="dropdown">
+    <li class="dropdown-item">
+      <!---->
+      <a class="nav-link">Guide</a>
+    </li>
+    <li class="dropdown-item">
+      <!---->
+      <a class="nav-link">Config Reference</a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`DropdownLink $simple - renders dropdown link. 1`] = `
+<div class="dropdown-wrapper">
+  <a class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a>
+  <ul class="nav-dropdown" style="display: none;" name="dropdown">
+    <li class="dropdown-item">
+      <!---->
+      <a class="nav-link">Guide</a>
+    </li>
+    <li class="dropdown-item">
+      <!---->
+      <a class="nav-link">Config Reference</a>
+    </li>
+  </ul>
+</div>
+`;