test: increase coverage, add missing tests

fix: issues discovered by adding missing tests

Author: pimlie

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  testEnvironment: 'node',
+  testEnvironment: 'jest-environment-jsdom-global',
 
   expand: true,
 

package.json

@@ -80,8 +80,9 @@
     "eslint-plugin-vue": "^5.2.2",
     "esm": "^3.2.5",
     "jest": "^24.1.0",
+    "jest-environment-jsdom": "^24.3.1",
+    "jest-environment-jsdom-global": "^1.1.1",
     "jsdom": "^13.2.0",
-    "jsdom-global": "^3.0.2",
     "rimraf": "^2.6.3",
     "rollup": "^1.2.2",
     "rollup-plugin-babel": "^4.3.2",

src/client/updateClientMetaInfo.js

@@ -2,7 +2,7 @@ import { metaInfoOptionKeys, metaInfoAttributeKeys } from '../shared/constants'
 import isArray from '../shared/isArray'
 import { updateAttribute, updateTag, updateTitle } from './updaters'
 
-const getTag = (tags, tag) => {
+function getTag(tags, tag) {
   if (!tags[tag]) {
     tags[tag] = document.getElementsByTagName(tag)[0]
   }
@@ -23,54 +23,53 @@ export default function updateClientMetaInfo(options = {}, newInfo) {
 
   const htmlTag = getTag(tags, 'html')
 
-  // if this is not a server render, then update
-  if (htmlTag.getAttribute(ssrAttribute) === null) {
-    // initialize tracked changes
-    const addedTags = {}
-    const removedTags = {}
-
-    for (const type in newInfo) {
-      // ignore these
-      if (metaInfoOptionKeys.includes(type)) {
-        continue
-      }
+  // if this is a server render, then dont update
+  if (htmlTag.getAttribute(ssrAttribute)) {
+    // remove the server render attribute so we can update on (next) changes
+    htmlTag.removeAttribute(ssrAttribute)
+    return false
+  }
 
-      if (type === 'title') {
-        // update the title
-        updateTitle(newInfo.title)
-        continue
-      }
+  // initialize tracked changes
+  const addedTags = {}
+  const removedTags = {}
 
-      if (metaInfoAttributeKeys.includes(type)) {
-        const tagName = type.substr(0, 4)
-        updateAttribute(options, newInfo[type], getTag(tags, tagName))
-        continue
-      }
+  for (const type in newInfo) {
+    // ignore these
+    if (metaInfoOptionKeys.includes(type)) {
+      continue
+    }
 
-      // tags should always be an array, ignore if it isnt
-      if (!isArray(newInfo[type])) {
-        continue
-      }
+    if (type === 'title') {
+      // update the title
+      updateTitle(newInfo.title)
+      continue
+    }
 
-      const { oldTags, newTags } = updateTag(
-        options,
-        type,
-        newInfo[type],
-        getTag(tags, 'head'),
-        getTag(tags, 'body')
-      )
+    if (metaInfoAttributeKeys.includes(type)) {
+      const tagName = type.substr(0, 4)
+      updateAttribute(options, newInfo[type], getTag(tags, tagName))
+      continue
+    }
 
-      if (newTags.length) {
-        addedTags[type] = newTags
-        removedTags[type] = oldTags
-      }
+    // tags should always be an array, ignore if it isnt
+    if (!isArray(newInfo[type])) {
+      continue
     }
 
-    return { addedTags, removedTags }
-  } else {
-    // remove the server render attribute so we can update on changes
-    htmlTag.removeAttribute(ssrAttribute)
+    const { oldTags, newTags } = updateTag(
+      options,
+      type,
+      newInfo[type],
+      getTag(tags, 'head'),
+      getTag(tags, 'body')
+    )
+
+    if (newTags.length) {
+      addedTags[type] = newTags
+      removedTags[type] = oldTags
+    }
   }
 
-  return false
+  return { addedTags, removedTags }
 }

src/shared/getMetaInfo.js

@@ -38,10 +38,6 @@ export default function getMetaInfo(options = {}, component, escapeSequences = [
   }
 
   disableOptionKeys.forEach((disableKey, index) => {
-    if (!info[disableKey]) {
-      return
-    }
-
     if (index === 0) {
       ensureIsArray(info, disableKey)
     } else if (index === 1) {

src/shared/merge.js

@@ -18,24 +18,32 @@ export function arrayMerge({ component, tagIDKeyName, metaTemplateKeyName, conte
     const sourceIndex = source.findIndex(item => item[tagIDKeyName] === targetItem[tagIDKeyName])
     const sourceItem = source[sourceIndex]
 
-    // source doesnt contain any duplicate id's
-    // or the source item should be ignored
-    if (sourceIndex === -1 ||
-      (sourceItem.hasOwnProperty(contentKeyName) && sourceItem[contentKeyName] === undefined) ||
-      (sourceItem.hasOwnProperty('innerHTML') && sourceItem.innerHTML === undefined)
-    ) {
+    // source doesnt contain any duplicate vmid's, we can keep targetItem
+    if (sourceIndex === -1) {
       destination.push(targetItem)
       return
     }
 
+    // when sourceItem explictly defines contentKeyName or innerHTML as undefined, its
+    // an indication that we need to skip the default behaviour
+    // So we keep the targetItem and ignore/remove the sourceItem
+    if ((sourceItem.hasOwnProperty(contentKeyName) && sourceItem[contentKeyName] === undefined) ||
+      (sourceItem.hasOwnProperty('innerHTML') && sourceItem.innerHTML === undefined)) {
+      destination.push(targetItem)
+      // remove current index from source array so its not concatenated to destination below
+      source.splice(sourceIndex, 1)
+      return
+    }
+
+    // we now know that targetItem is a duplicate and we should ignore it in favor of sourceItem
+
     // if source specifies null as content then ignore both the target as the source
     if (sourceItem[contentKeyName] === null || sourceItem.innerHTML === null) {
       // remove current index from source array so its not concatenated to destination below
       source.splice(sourceIndex, 1)
       return
     }
 
-    // we now know that targetItem is a duplicate and we should ignore it in favor of sourceItem
     // now we only need to check if the target has a template to combine it with the source
     const targetTemplate = targetItem[metaTemplateKeyName]
     if (!targetTemplate) {
@@ -64,17 +72,17 @@ export function merge(target, source, options = {}) {
     delete source.title
   }
 
-  for (const attrKey in metaInfoAttributeKeys) {
+  metaInfoAttributeKeys.forEach((attrKey) => {
     if (!source[attrKey]) {
-      continue
+      return
     }
 
     for (const key in source[attrKey]) {
       if (source[attrKey].hasOwnProperty(key) && source[attrKey][key] === undefined) {
         delete source[attrKey][key]
       }
     }
-  }
+  })
 
   return deepmerge(target, source, {
     arrayMerge: (t, s) => arrayMerge(options, t, s)

src/shared/mixin.js

@@ -114,12 +114,14 @@ export default function createMixin(Vue, options) {
             // Wait that element is hidden before refreshing meta tags (to support animations)
             const interval = setInterval(() => {
               if (this.$el && this.$el.offsetParent !== null) {
+                /* istanbul ignore next line */
                 return
               }
 
               clearInterval(interval)
 
               if (!this.$parent) {
+                /* istanbul ignore next line */
                 return
               }
 

test/components.test.js

@@ -1,5 +1,6 @@
 import _getMetaInfo from '../src/shared/getMetaInfo'
-import { mount, defaultOptions, loadVueMetaPlugin } from './utils'
+import { mount, loadVueMetaPlugin, vmTick } from './utils'
+import { defaultOptions } from './utils/constants'
 
 import GoodbyeWorld from './fixtures/goodbye-world.vue'
 import HelloWorld from './fixtures/hello-world.vue'
@@ -8,10 +9,31 @@ import Changed from './fixtures/changed.vue'
 
 const getMetaInfo = component => _getMetaInfo(defaultOptions, component)
 
+jest.mock('../src/shared/window', () => ({
+  hasGlobalWindow: false
+}))
+
 describe('client', () => {
   let Vue
+  let html
+
+  beforeAll(() => {
+    Vue = loadVueMetaPlugin()
+
+    // force using timers, jest cant mock rAF
+    delete window.requestAnimationFrame
+    delete window.cancelAnimationFrame
 
-  beforeAll(() => (Vue = loadVueMetaPlugin()))
+    html = document.createElement('html')
+    document._getElementsByTagName = document.getElementsByTagName
+    jest.spyOn(document, 'getElementsByTagName').mockImplementation((tag) => {
+      if (tag === 'html') {
+        return [html]
+      }
+
+      return document._getElementsByTagName(tag)
+    })
+  })
 
   test('meta-info refreshed on component\'s data change', () => {
     const wrapper = mount(HelloWorld, { localVue: Vue })
@@ -78,20 +100,59 @@ describe('client', () => {
     expect(metaInfo.title.text()).toEqual('<title data-vue-meta="true">Hello World</title>')
   })
 
-  test('changed function is called', () => {
+  test('doesnt update when ssr attribute is set', () => {
+    html.setAttribute(defaultOptions.ssrAttribute, 'true')
+    const wrapper = mount(HelloWorld, { localVue: Vue })
+
+    const { tags } = wrapper.vm.$meta().refresh()
+    expect(tags).toBe(false)
+  })
+
+  test('changed function is called', async () => {
     const parentComponent = new Vue({ render: h => h('div') })
     const wrapper = mount(Changed, { localVue: Vue, parentComponent })
 
+    await vmTick(wrapper.vm)
+    expect(wrapper.vm.$root._vueMeta.initialized).toBe(true)
+
     let context
     const changed = jest.fn(function () {
       context = this
     })
-    wrapper.setData({ changed })
-    wrapper.setData({ childVisible: true })
+    wrapper.setData({ changed, childVisible: true })
+    jest.runAllTimers()
 
-    wrapper.vm.$parent.$meta().refresh()
     expect(changed).toHaveBeenCalledTimes(1)
     // TODO: this isnt what the docs say
     expect(context._uid).not.toBe(wrapper.vm._uid)
   })
+
+  test('afterNavigation function is called', () => {
+    const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: true })
+    const afterNavigation = jest.fn()
+    const component = Vue.component('nav-component', {
+      render: h => h('div'),
+      metaInfo: { afterNavigation }
+    })
+
+    const guards = {}
+    Vue.prototype.$router = {
+      beforeEach(fn) {
+        guards.before = fn
+      },
+      afterEach(fn) {
+        guards.after = fn
+      }
+    }
+    const wrapper = mount(component, { localVue: Vue })
+
+    expect(guards.before).toBeDefined()
+    expect(guards.after).toBeDefined()
+
+    guards.before(null, null, () => {})
+    expect(wrapper.vm.$root._vueMeta.paused).toBe(true)
+
+    guards.after()
+    expect(afterNavigation).toHaveBeenCalled()
+  })
 })

test/escaping.test.js

@@ -1,5 +1,6 @@
 import _getMetaInfo from '../src/shared/getMetaInfo'
-import { defaultOptions, loadVueMetaPlugin } from './utils'
+import { loadVueMetaPlugin } from './utils'
+import { defaultOptions } from './utils/constants'
 
 const getMetaInfo = (component, escapeSequences) => _getMetaInfo(defaultOptions, component, escapeSequences)
 
@@ -11,6 +12,7 @@ describe('escaping', () => {
   test('special chars are escaped unless disabled', () => {
     const component = new Vue({
       metaInfo: {
+        htmlAttrs: { key: 1 },
         title: 'Hello & Goodbye',
         script: [{ innerHTML: 'Hello & Goodbye' }],
         __dangerouslyDisableSanitizers: ['script']
@@ -21,7 +23,9 @@ describe('escaping', () => {
       title: 'Hello & Goodbye',
       titleChunk: 'Hello & Goodbye',
       titleTemplate: '%s',
-      htmlAttrs: {},
+      htmlAttrs: {
+        key: 1
+      },
       headAttrs: {},
       bodyAttrs: {},
       meta: [],

test/generators.test.js

@@ -1,5 +1,5 @@
 import _generateServerInjector from '../src/server/generateServerInjector'
-import { defaultOptions } from './utils'
+import { defaultOptions } from './utils/constants'
 import metaInfoData from './utils/meta-info-data'
 
 const generateServerInjector = (type, data) => _generateServerInjector(defaultOptions, type, data)