first commit

ui/tests/unit/global-setup.js

@@ -0,0 +1,14 @@
+const app = require('express')()
+
+app.use((request, response, next) => {
+  response.header('Access-Control-Allow-Origin', '*')
+  next()
+})
+
+require('../mock-api')(app)
+
+module.exports = () => {
+  return new Promise((resolve, reject) => {
+    global.mockApiServer = app.listen(process.env.MOCK_API_PORT, resolve)
+  })
+}

ui/tests/unit/global-teardown.js

@@ -0,0 +1,7 @@
+// Shut down the mock API once all the tests are complete.
+
+module.exports = () => {
+  return new Promise((resolve, reject) => {
+    global.mockApiServer.close(resolve)
+  })
+}

ui/tests/unit/matchers.js

@@ -0,0 +1,105 @@
+// See these docs for details on Jest's matcher utils:
+// https://facebook.github.io/jest/docs/en/expect.html#thisutils
+
+const _ = require('lodash')
+const customMatchers = {}
+
+customMatchers.toBeAComponent = function(options) {
+  if (isAComponent()) {
+    return {
+      message: () =>
+        `expected ${this.utils.printReceived(
+          options
+        )} not to be a Vue component`,
+      pass: true,
+    }
+  } else {
+    return {
+      message: () =>
+        `expected ${this.utils.printReceived(
+          options
+        )} to be a valid Vue component, exported from a .vue file`,
+      pass: false,
+    }
+  }
+
+  function isAComponent() {
+    return _.isPlainObject(options) && typeof options.render === 'function'
+  }
+}
+
+customMatchers.toBeAViewComponent = function(options, mockInstance = {}) {
+  if (usesALayout() && definesAPageTitleAndDescription()) {
+    return {
+      message: () =>
+        `expected ${this.utils.printReceived(
+          options
+        )} not to register a local Layout component nor define a page title and meta description`,
+      pass: true,
+    }
+  } else {
+    return {
+      message: () =>
+        `expected ${this.utils.printReceived(
+          options
+        )} to register a local Layout component and define a page title and meta description`,
+      pass: false,
+    }
+  }
+
+  function usesALayout() {
+    return options.components && options.components.Layout
+  }
+
+  function definesAPageTitleAndDescription() {
+    if (!options.page) return false
+    const pageObject =
+      typeof options.page === 'function'
+        ? options.page.apply(mockInstance)
+        : options.page
+    if (!Object.prototype.hasOwnProperty.call(pageObject, 'title')) return false
+    if (!pageObject.meta) return false
+    const hasMetaDescription = pageObject.meta.some(
+      (metaObject) =>
+        metaObject.name === 'description' &&
+        Object.prototype.hasOwnProperty.call(metaObject, 'content')
+    )
+    if (!hasMetaDescription) return false
+    return true
+  }
+}
+
+customMatchers.toBeAViewComponentUsing = function(options, mockInstance) {
+  return customMatchers.toBeAViewComponent.apply(this, [options, mockInstance])
+}
+
+customMatchers.toBeAVuexModule = function(options) {
+  if (isAVuexModule()) {
+    return {
+      message: () =>
+        `expected ${this.utils.printReceived(options)} not to be a Vuex module`,
+      pass: true,
+    }
+  } else {
+    return {
+      message: () =>
+        `expected ${this.utils.printReceived(
+          options
+        )} to be a valid Vuex module, include state, getters, mutations, and actions`,
+      pass: false,
+    }
+  }
+
+  function isAVuexModule() {
+    return (
+      _.isPlainObject(options) &&
+      _.isPlainObject(options.state) &&
+      _.isPlainObject(options.getters) &&
+      _.isPlainObject(options.mutations) &&
+      _.isPlainObject(options.actions)
+    )
+  }
+}
+
+// https://facebook.github.io/jest/docs/en/expect.html#expectextendmatchers
+global.expect.extend(customMatchers)

ui/tests/unit/setup.js

@@ -0,0 +1,209 @@
+import fs from 'fs'
+import path from 'path'
+import Vue from 'vue'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+// ===
+// Utility functions
+// ===
+
+// https://vue-test-utils.vuejs.org/
+const vueTestUtils = require('@vue/test-utils')
+// https://lodash.com/
+const _ = require('lodash')
+_.mixin({
+  pascalCase: _.flow(_.camelCase, _.upperFirst),
+})
+
+// ===
+// Configure Axios
+// ===
+
+// Force Axios to use the XHR adapter so that it behaves
+// more like it would in a browser environment.
+axios.defaults.adapter = require('axios/lib/adapters/xhr')
+
+// ===
+// Configure Vue
+// ===
+
+// Don't warn about not using the production build of Vue, as
+// we care more about the quality of errors than performance
+// for tests.
+Vue.config.productionTip = false
+
+// ===
+// Register global components
+// ===
+
+const globalComponentFiles = fs
+  .readdirSync(path.join(__dirname, '../../src/components'))
+  .filter((fileName) => /^_base-.+\.vue$/.test(fileName))
+
+for (const fileName of globalComponentFiles) {
+  const componentName = _.pascalCase(fileName.match(/^_(base-.+)\.vue$/)[1])
+  const componentConfig = require('../../src/components/' + fileName)
+  Vue.component(componentName, componentConfig.default || componentConfig)
+}
+
+// ===
+// Mock window properties not handled by jsdom
+// ===
+
+Object.defineProperty(window, 'localStorage', {
+  value: (function() {
+    let store = {}
+    return {
+      getItem: function(key) {
+        return store[key] || null
+      },
+      setItem: function(key, value) {
+        store[key] = value.toString()
+      },
+      clear: function() {
+        store = {}
+      },
+    }
+  })(),
+})
+
+// ===
+// Console handlers
+// ===
+
+// Make console.error throw, so that Jest tests fail
+const error = console.error
+console.error = function(message) {
+  error.apply(console, arguments)
+  // NOTE: You can whitelist some `console.error` messages here
+  //       by returning if the `message` value is acceptable.
+  throw message instanceof Error ? message : new Error(message)
+}
+
+// Make console.warn throw, so that Jest tests fail
+const warn = console.warn
+console.warn = function(message) {
+  warn.apply(console, arguments)
+  // NOTE: You can whitelist some `console.warn` messages here
+  //       by returning if the `message` value is acceptable.
+  throw message instanceof Error ? message : new Error(message)
+}
+
+// ===
+// Global helpers
+// ===
+
+// https://vue-test-utils.vuejs.org/api/#mount
+global.mount = vueTestUtils.mount
+
+// https://vue-test-utils.vuejs.org/api/#shallowmount
+global.shallowMount = vueTestUtils.shallowMount
+
+// A special version of `shallowMount` for view components
+global.shallowMountView = (Component, options = {}) => {
+  return global.shallowMount(Component, {
+    ...options,
+    stubs: {
+      Layout: {
+        functional: true,
+        render(h, { slots }) {
+          return <div>{slots().default}</div>
+        },
+      },
+      ...(options.stubs || {}),
+    },
+  })
+}
+
+// A helper for creating Vue component mocks
+global.createComponentMocks = ({ store, router, style, mocks, stubs }) => {
+  // Use a local version of Vue, to avoid polluting the global
+  // Vue and thereby affecting other tests.
+  // https://vue-test-utils.vuejs.org/api/#createlocalvue
+  const localVue = vueTestUtils.createLocalVue()
+  const returnOptions = { localVue }
+
+  // https://vue-test-utils.vuejs.org/api/options.html#stubs
+  returnOptions.stubs = stubs || {}
+  // https://vue-test-utils.vuejs.org/api/options.html#mocks
+  returnOptions.mocks = mocks || {}
+
+  // Converts a `store` option shaped like:
+  //
+  // store: {
+  //   someModuleName: {
+  //     state: { ... },
+  //     getters: { ... },
+  //     actions: { ... },
+  //   },
+  //   anotherModuleName: {
+  //     getters: { ... },
+  //   },
+  // },
+  //
+  // to a store instance, with each module namespaced by
+  // default, just like in our app.
+  if (store) {
+    localVue.use(Vuex)
+    returnOptions.store = new Vuex.Store({
+      modules: Object.keys(store)
+        .map((moduleName) => {
+          const storeModule = store[moduleName]
+          return {
+            [moduleName]: {
+              state: storeModule.state || {},
+              getters: storeModule.getters || {},
+              actions: storeModule.actions || {},
+              namespaced:
+                typeof storeModule.namespaced === 'undefined'
+                  ? true
+                  : storeModule.namespaced,
+            },
+          }
+        })
+        .reduce((moduleA, moduleB) => Object.assign({}, moduleA, moduleB), {}),
+    })
+  }
+
+  // If using `router: true`, we'll automatically stub out
+  // components from Vue Router.
+  if (router) {
+    returnOptions.stubs['router-link'] = true
+    returnOptions.stubs['router-view'] = true
+  }
+
+  // If a `style` object is provided, mock some styles.
+  if (style) {
+    returnOptions.mocks.$style = style
+  }
+
+  return returnOptions
+}
+
+global.createModuleStore = (vuexModule, options = {}) => {
+  vueTestUtils.createLocalVue().use(Vuex)
+  const store = new Vuex.Store({
+    ..._.cloneDeep(vuexModule),
+    modules: {
+      auth: {
+        namespaced: true,
+        state: {
+          currentUser: options.currentUser,
+        },
+      },
+    },
+    // Enable strict mode when testing Vuex modules so that
+    // mutating state outside of a mutation results in a
+    // failing test.
+    // https://vuex.vuejs.org/guide/strict.html
+    strict: true,
+  })
+  axios.defaults.headers.common.Authorization = options.currentUser
+    ? options.currentUser.token
+    : ''
+  if (vuexModule.actions.init) {
+    store.dispatch('init')
+  }
+  return store
+}