mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-17 13:00:34 +03:00
Code Activity

feat: add support for setting attributes from multiple apps

Browse Source 
chore: improve build size
This commit is contained in:
pimlie
2019-09-13 13:09:22 +02:00
committed by Pim
parent 0ab76ee16b
commit d9b0ab29da
16 changed files with 251 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/unit/components.test.js
+11 -9
View File
@@ -1,6 +1,6 @@
import { getComponentMetaInfo } from '../../src/shared/getComponentOption'
import _getMetaInfo from '../../src/shared/getMetaInfo'
import { mount, createWrapper, loadVueMetaPlugin, vmTick } from '../utils'
import { mount, createWrapper, loadVueMetaPlugin, vmTick, clearClientAttributeMap } from '../utils'
import { defaultOptions } from '../../src/shared/constants'
import GoodbyeWorld from '../components/goodbye-world.vue'
@@ -226,6 +226,13 @@ describe('client', () => {
// this component uses a computed prop to simulate a non-synchronous
// metaInfo update like you would have with a Vuex mutation
const Component = Vue.extend({
metaInfo () {
return {
htmlAttrs: {
theme: this.theme
}
}
},
data () {
return {
hiddenTheme: 'light'
@@ -239,14 +246,7 @@ describe('client', () => {
beforeMount () {
this.hiddenTheme = 'dark'
},
render: h => h('div'),
metaInfo () {
return {
htmlAttrs: {
theme: this.theme
}
}
}
render: h => h('div')
})
const vm = new Component().$mount(el)
@@ -263,6 +263,8 @@ describe('client', () => {
})
test('changes during hydration initialization trigger an update', async () => {
clearClientAttributeMap()
html.setAttribute(defaultOptions.ssrAttribute, 'true')
const el = document.createElement('div')
test/unit/generators.test.js
+1 -1
View File
@@ -29,7 +29,7 @@ describe('generators', () => {
const testInfo = typeTests[action]
// return when no test case available
if (!testCases[action] && !testInfo.test) {
if (!testCases[action]) {
return
}
test/unit/updaters.test.js
+3 -1
View File
@@ -2,6 +2,7 @@ import _updateClientMetaInfo from '../../src/client/updateClientMetaInfo'
import { defaultOptions, ssrAppId, ssrAttribute } from '../../src/shared/constants'
import metaInfoData from '../utils/meta-info-data'
import * as load from '../../src/client/load'
import { clearClientAttributeMap } from '../utils'
const updateClientMetaInfo = (type, data) => _updateClientMetaInfo(ssrAppId, defaultOptions, { [type]: data })
@@ -43,7 +44,6 @@ describe('updaters', () => {
},
remove: (tags) => {
// TODO: i'd expect tags.removedTags to be populated
typeTests.add.expect.forEach((expected, index) => {
expect(html.outerHTML).not.toContain(expected)
})
@@ -57,6 +57,8 @@ describe('updaters', () => {
}
describe(`${type} type tests`, () => {
beforeAll(() => clearClientAttributeMap())
Object.keys(typeTests).forEach((action) => {
const testInfo = typeTests[action]
test/utils/index.js
+9
View File
@@ -1,6 +1,7 @@
import { JSDOM } from 'jsdom'
import { mount, shallowMount, createWrapper, createLocalVue } from '@vue/test-utils'
import { renderToString } from '@vue/server-test-utils'
import { attributeMap } from '../../src/client/updaters/attribute'
import { defaultOptions } from '../../src/shared/constants'
import VueMetaPlugin from '../../src'
@@ -39,3 +40,11 @@ export function createDOM (html = '<!DOCTYPE html>', options = {}) {
document: dom.window.document
}
}
// dirty hack to remove data from previous test
// this is ok because this code normally only runs on
// the client and not during ssr
// TODO: findout why jest.resetModules doesnt work for this
export function clearClientAttributeMap() {
Object.keys(attributeMap).forEach(key => delete attributeMap[key])
}
test/utils/meta-info-data.js
+94 -9
View File
@@ -1,4 +1,5 @@
import { defaultOptions } from '../../src/shared/constants'
import { attributeMap } from '../../src/client/updaters/attribute'
const metaInfoData = {
title: {
@@ -187,43 +188,127 @@ const metaInfoData = {
htmlAttrs: {
add: {
data: { foo: 'bar' },
expect: ['<html foo="bar" data-vue-meta="foo">']
expect: ['<html foo="bar" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D%7D">'],
test (side, defaultTest) {
return () => {
if (side === 'client') {
this.expect[0] = this.expect[0].replace(/ data-vue-meta="[^"]+"/, '')
}
defaultTest()
if (side === 'client') {
expect(attributeMap).toEqual({ htmlAttrs: { foo: { ssr: 'bar' } } })
}
}
}
},
change: {
data: { foo: 'baz' },
expect: ['<html foo="baz" data-vue-meta="foo">']
expect: ['<html foo="baz">'],
test (side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ htmlAttrs: { foo: { ssr: 'baz' } } })
}
}
},
remove: {
data: {},
expect: ['<html>']
expect: ['<html>'],
test (side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ htmlAttrs: { foo: {} } })
}
}
}
},
headAttrs: {
add: {
data: { foo: 'bar' },
expect: ['<head foo="bar" data-vue-meta="foo">']
expect: ['<head foo="bar" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D%7D">'],
test (side, defaultTest) {
return () => {
if (side === 'client') {
this.expect[0] = this.expect[0].replace(/ data-vue-meta="[^"]+"/, '')
}
defaultTest()
if (side === 'client') {
expect(attributeMap).toEqual({ headAttrs: { foo: { ssr: 'bar' } } })
}
}
}
},
change: {
data: { foo: 'baz' },
expect: ['<head foo="baz" data-vue-meta="foo">']
expect: ['<head foo="baz">'],
test (side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ headAttrs: { foo: { ssr: 'baz' } } })
}
}
},
remove: {
data: {},
expect: ['<head>']
expect: ['<head>'],
test (side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ headAttrs: { foo: {} } })
}
}
}
},
bodyAttrs: {
add: {
data: { foo: 'bar', fizz: ['fuzz', 'fozz'] },
expect: ['<body foo="bar" fizz="fuzz fozz" data-vue-meta="fizz,foo">']
expect: ['<body foo="bar" fizz="fuzz fozz" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D,%22fizz%22:%7B%22ssr%22:%5B%22fuzz%22,%22fozz%22%5D%7D%7D">'],
test (side, defaultTest) {
return () => {
if (side === 'client') {
this.expect[0] = this.expect[0].replace(/ data-vue-meta="[^"]+"/, '')
}
defaultTest()
if (side === 'client') {
expect(attributeMap).toEqual({ bodyAttrs: {
foo: { ssr: 'bar' },
fizz: { ssr: ['fuzz', 'fozz'] }
}})
}
}
}
},
change: {
data: { foo: 'baz' },
expect: ['<body foo="baz" data-vue-meta="fizz,foo">']
expect: ['<body foo="baz">'],
test (side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ bodyAttrs: { foo: { ssr: 'baz' }, fizz: {} } })
}
}
},
remove: {
data: {},
expect: ['<body>']
expect: ['<body>'],
test (side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ bodyAttrs: { foo: {}, fizz: {} } })
}
}
}
}
}