mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-19 14:20:34 +03:00
feat: enable onload callbacks (#414)
* refactor(examples): run ssr example from server * chore: switch to babel for build buble complains too much * feat: enable loaded callbacks feat: add skip option * examples: add async-callback browser example * examples: fix server * examples(ssr): add reactive script with callback * fix: also skip on ssr * chore: remove unused var * feat: only add mutationobserver if DOM is still loading feat: disconnect mutation observer once DOM has loaded * examples: pass vmid to loadCallback instead of el * feat: also support load callbacks for link/style tags * test: add unit tests for load * test: add load e2e test * chore: fix lint * chore: remove unused files * test: fix e2e load callback test * test: fix attempt * examples: ie9 compatiblity destructuring doesnt work in ie9 * fix: add onload attribute on ssr dont rely on mutationobserver * chore: lint ci conf * refactor: remove loadCallbackAttribute config option test: fix coverage for load * test: improve coverage * fix: only use console when it exists (for ie9) * chore: fix coverage
This commit is contained in:
Pim
@@ -3,8 +3,6 @@ import { defaultOptions } from '../../src/shared/constants'
|
||||
import metaInfoData from '../utils/meta-info-data'
|
||||
import { titleGenerator } from '../../src/server/generators'
|
||||
|
||||
defaultOptions.ssrAppId = 'test'
|
||||
|
||||
const generateServerInjector = (type, data) => _generateServerInjector(defaultOptions, type, data)
|
||||
|
||||
describe('generators', () => {
|
||||
@@ -88,7 +86,7 @@ describe('extra tests', () => {
|
||||
|
||||
expect(scriptTags.text()).toBe('')
|
||||
expect(scriptTags.text({ body: true })).toBe('')
|
||||
expect(scriptTags.text({ pbody: true })).toBe('<script data-vue-meta="test" src="/script.js" data-pbody="true"></script>')
|
||||
expect(scriptTags.text({ pbody: true })).toBe('<script data-vue-meta="ssr" src="/script.js" data-pbody="true"></script>')
|
||||
})
|
||||
|
||||
test('script append body', () => {
|
||||
@@ -96,7 +94,7 @@ describe('extra tests', () => {
|
||||
const scriptTags = generateServerInjector('script', tags)
|
||||
|
||||
expect(scriptTags.text()).toBe('')
|
||||
expect(scriptTags.text({ body: true })).toBe('<script data-vue-meta="test" src="/script.js" data-body="true"></script>')
|
||||
expect(scriptTags.text({ body: true })).toBe('<script data-vue-meta="ssr" src="/script.js" data-body="true"></script>')
|
||||
expect(scriptTags.text({ pbody: true })).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
import { pTick, createDOM } from '../utils'
|
||||
|
||||
const onLoadAttribute = {
|
||||
k: 'onload',
|
||||
v: 'this.__vm_l=1'
|
||||
}
|
||||
|
||||
const getLoadAttribute = () => `${onLoadAttribute.k}="${onLoadAttribute.v}"`
|
||||
|
||||
describe('load callbacks', () => {
|
||||
let load
|
||||
beforeEach(async () => {
|
||||
jest.resetModules()
|
||||
load = await import('../../src/client/load')
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks()
|
||||
})
|
||||
|
||||
test('isDOMLoaded', async () => {
|
||||
jest.useRealTimers()
|
||||
const { document } = createDOM()
|
||||
await pTick()
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('loading')
|
||||
expect(load.isDOMLoaded(document)).toBe(false)
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('interactive')
|
||||
expect(load.isDOMLoaded(document)).toBe(true)
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('complete')
|
||||
expect(load.isDOMLoaded(document)).toBe(true)
|
||||
})
|
||||
|
||||
test('isDOMComplete', async () => {
|
||||
jest.useRealTimers()
|
||||
const { document } = createDOM()
|
||||
await pTick()
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('loading')
|
||||
expect(load.isDOMComplete(document)).toBe(false)
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('interactive')
|
||||
expect(load.isDOMComplete(document)).toBe(false)
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('complete')
|
||||
expect(load.isDOMComplete(document)).toBe(true)
|
||||
})
|
||||
|
||||
test('waitDOMLoaded', async () => {
|
||||
expect(load.waitDOMLoaded()).toBe(true)
|
||||
|
||||
jest.spyOn(document, 'readyState', 'get').mockReturnValue('loading')
|
||||
const waitPromise = load.waitDOMLoaded()
|
||||
expect(waitPromise).toEqual(expect.any(Promise))
|
||||
|
||||
const domLoaded = new Event('DOMContentLoaded')
|
||||
document.dispatchEvent(domLoaded)
|
||||
|
||||
await expect(waitPromise).resolves.toEqual(expect.any(Object))
|
||||
})
|
||||
|
||||
test('addCallback (no query)', () => {
|
||||
const callback = () => {}
|
||||
load.addCallback(callback)
|
||||
|
||||
const matches = jest.fn(() => false)
|
||||
load.applyCallbacks({ matches })
|
||||
|
||||
expect(matches).toHaveBeenCalledTimes(1)
|
||||
expect(matches).toHaveBeenCalledWith(`[${getLoadAttribute()}]`)
|
||||
})
|
||||
|
||||
test('addCallback (query)', () => {
|
||||
const callback = () => {}
|
||||
load.addCallback('script', callback)
|
||||
|
||||
const matches = jest.fn(() => false)
|
||||
load.applyCallbacks({ matches })
|
||||
|
||||
expect(matches).toHaveBeenCalledTimes(1)
|
||||
expect(matches).toHaveBeenCalledWith(`script[${getLoadAttribute()}]`)
|
||||
})
|
||||
|
||||
test('addCallbacks', () => {
|
||||
const addListeners = jest.spyOn(document, 'querySelectorAll').mockReturnValue(false)
|
||||
|
||||
const config = { tagIDKeyName: 'test-id' }
|
||||
|
||||
const tags = [
|
||||
{ [config.tagIDKeyName]: 'test1', callback: false },
|
||||
{ [config.tagIDKeyName]: false, callback: () => {} },
|
||||
{ [config.tagIDKeyName]: 'test1', callback: () => {} },
|
||||
{ [config.tagIDKeyName]: 'test2', callback: () => {} }
|
||||
]
|
||||
|
||||
load.addCallbacks(config, 'link', tags)
|
||||
|
||||
const matches = jest.fn(() => false)
|
||||
load.applyCallbacks({ matches })
|
||||
|
||||
expect(matches).toHaveBeenCalledTimes(2)
|
||||
expect(matches).toHaveBeenCalledWith(`link[data-${config.tagIDKeyName}="test1"][${getLoadAttribute()}]`)
|
||||
expect(matches).toHaveBeenCalledWith(`link[data-${config.tagIDKeyName}="test2"][${getLoadAttribute()}]`)
|
||||
|
||||
expect(addListeners).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('addCallbacks (auto add listeners)', () => {
|
||||
const addListeners = jest.spyOn(document, 'querySelectorAll').mockReturnValue(false)
|
||||
|
||||
const config = { tagIDKeyName: 'test-id', loadCallbackAttribute: 'test-load' }
|
||||
|
||||
const tags = [
|
||||
{ [config.tagIDKeyName]: 'test1', callback: () => {} }
|
||||
]
|
||||
|
||||
load.addCallbacks(config, 'style', tags, true)
|
||||
|
||||
const matches = jest.fn(() => false)
|
||||
load.applyCallbacks({ matches })
|
||||
|
||||
expect(matches).toHaveBeenCalledTimes(1)
|
||||
expect(matches).toHaveBeenCalledWith(`style[data-${config.tagIDKeyName}="test1"][${getLoadAttribute()}]`)
|
||||
|
||||
expect(addListeners).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('callback trigger', () => {
|
||||
const { window, document } = createDOM()
|
||||
|
||||
const callback = jest.fn()
|
||||
|
||||
const el = document.createElement('script')
|
||||
el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
|
||||
document.body.appendChild(el)
|
||||
|
||||
load.addCallback(callback)
|
||||
load.applyCallbacks(el)
|
||||
|
||||
const loadEvent = new window.Event('load')
|
||||
el.dispatchEvent(loadEvent)
|
||||
|
||||
expect(callback).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('callback trigger (loaded before adding)', () => {
|
||||
const { document } = createDOM()
|
||||
|
||||
const callback = jest.fn()
|
||||
|
||||
const el = document.createElement('script')
|
||||
el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
|
||||
el.__vm_l = 1
|
||||
document.body.appendChild(el)
|
||||
|
||||
load.addCallback(callback)
|
||||
load.applyCallbacks(el)
|
||||
|
||||
expect(callback).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
test('callback trigger (only once)', () => {
|
||||
const { window, document } = createDOM()
|
||||
|
||||
const callback = jest.fn()
|
||||
|
||||
const el = document.createElement('script')
|
||||
el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
|
||||
document.body.appendChild(el)
|
||||
|
||||
el.__vm_l = 1
|
||||
|
||||
load.addCallback(callback)
|
||||
load.applyCallbacks(el)
|
||||
|
||||
el.__vm_cb = true
|
||||
|
||||
const loadEvent = new window.Event('load')
|
||||
el.dispatchEvent(loadEvent)
|
||||
|
||||
expect(callback).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
test('only one event listener added', () => {
|
||||
const { window, document } = createDOM()
|
||||
|
||||
const el = document.createElement('script')
|
||||
const addEventListener = el.addEventListener.bind(el)
|
||||
const addEventListenerSpy = jest.spyOn(el, 'addEventListener').mockImplementation((...args) => {
|
||||
return addEventListener(...args)
|
||||
})
|
||||
el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
|
||||
document.body.appendChild(el)
|
||||
|
||||
load.addCallback(() => {})
|
||||
load.applyCallbacks(el)
|
||||
|
||||
const loadEvent1 = new window.Event('load')
|
||||
el.dispatchEvent(loadEvent1)
|
||||
|
||||
expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
|
||||
|
||||
el.setAttribute(onLoadAttribute.k, onLoadAttribute.v)
|
||||
load.applyCallbacks(el)
|
||||
|
||||
const loadEvent2 = new window.Event('load')
|
||||
el.dispatchEvent(loadEvent2)
|
||||
|
||||
expect(addEventListenerSpy).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
@@ -1,8 +1,9 @@
|
||||
import _updateClientMetaInfo from '../../src/client/updateClientMetaInfo'
|
||||
import { defaultOptions } from '../../src/shared/constants'
|
||||
import { defaultOptions, ssrAppId, ssrAttribute } from '../../src/shared/constants'
|
||||
import metaInfoData from '../utils/meta-info-data'
|
||||
import * as load from '../../src/client/load'
|
||||
|
||||
const updateClientMetaInfo = (type, data) => _updateClientMetaInfo('test', defaultOptions, { [type]: data })
|
||||
const updateClientMetaInfo = (type, data) => _updateClientMetaInfo(ssrAppId, defaultOptions, { [type]: data })
|
||||
|
||||
describe('updaters', () => {
|
||||
let html
|
||||
@@ -14,7 +15,7 @@ describe('updaters', () => {
|
||||
Array.from(html.getElementsByTagName('meta')).forEach(el => el.parentNode.removeChild(el))
|
||||
})
|
||||
|
||||
Object.keys(metaInfoData).forEach((type) => {
|
||||
for (const type in metaInfoData) {
|
||||
const typeTests = metaInfoData[type]
|
||||
|
||||
const testCases = {
|
||||
@@ -93,5 +94,22 @@ describe('updaters', () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
describe('extra tests', () => {
|
||||
test('adds callback listener on hydration', () => {
|
||||
const addListeners = load.addListeners
|
||||
const addListenersSpy = jest.spyOn(load, 'addListeners').mockImplementation(addListeners)
|
||||
|
||||
const html = document.getElementsByTagName('html')[0]
|
||||
html.setAttribute(ssrAttribute, 'true')
|
||||
|
||||
const data = [{ src: 'src1', [defaultOptions.tagIDKeyName]: 'content', callback: () => {} }]
|
||||
const tags = updateClientMetaInfo('script', data)
|
||||
|
||||
expect(tags).toBe(false)
|
||||
expect(html.hasAttribute(ssrAttribute)).toBe(false)
|
||||
expect(addListenersSpy).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user