From 6016a4acf109f0d89b88b39bceb5eb6c3edd711c Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 22 Aug 2020 10:59:22 +0800 Subject: [PATCH] test: fix demo snapshot --- docs/site/demo-locale.js | 120 +++++++++++++++++++++++++++++++++++++ docs/site/mobile.js | 126 ++------------------------------------- test/demo.ts | 26 ++++---- test/index.ts | 13 +--- 4 files changed, 143 insertions(+), 142 deletions(-) create mode 100644 docs/site/demo-locale.js diff --git a/docs/site/demo-locale.js b/docs/site/demo-locale.js new file mode 100644 index 000000000..e83d8ec51 --- /dev/null +++ b/docs/site/demo-locale.js @@ -0,0 +1,120 @@ +import Locale from '../../src/locale'; +import enUS from '../../src/locale/lang/en-US'; +import { get } from '../../src/utils'; +import { camelize } from '../../src/utils/format/string'; + +Locale.add({ + 'en-US': enUS, +}); + +let demoUid = 0; + +export const DemoLocaleMixin = { + computed: { + t() { + const { name } = this.$options; + const prefix = name ? camelize(name) + '.' : ''; + const messages = Locale.messages(); + + return (path, ...args) => { + const message = get(messages, prefix + path) || get(messages, path); + return typeof message === 'function' ? message(...args) : message; + }; + }, + + // flag for vant-weapp demos + isWeapp() { + return location.search.indexOf('weapp=1') !== -1; + }, + }, + + beforeCreate() { + if (!this.$options.name) { + this.$options.name = `demo-${demoUid++}`; + } + + const { i18n, name } = this.$options; + + if (i18n && name) { + const locales = {}; + const camelizedName = camelize(name); + + Object.keys(i18n).forEach((key) => { + locales[key] = { [camelizedName]: i18n[key] }; + }); + + Locale.add(locales); + } + }, +}; + +// switch lang after routing +if (window.vueRouter) { + window.vueRouter.afterEach((to) => { + const { lang } = to.meta || {}; + + if (lang) { + Locale.use(lang); + } + }); +} + +// add some basic locale messages +Locale.add({ + 'zh-CN': { + add: '增加', + decrease: '减少', + red: '红色', + orange: '橙色', + yellow: '黄色', + purple: '紫色', + tab: '标签', + tag: '标签', + desc: '描述信息', + back: '返回', + title: '标题', + status: '状态', + button: '按钮', + option: '选项', + search: '搜索', + content: '内容', + custom: '自定义', + username: '用户名', + password: '密码', + disabled: '禁用状态', + uneditable: '不可编辑', + basicUsage: '基础用法', + advancedUsage: '高级用法', + loadingStatus: '加载状态', + usernamePlaceholder: '请输入用户名', + passwordPlaceholder: '请输入密码', + }, + 'en-US': { + add: 'Add', + decrease: 'Decrease', + red: 'Red', + orange: 'Orange', + yellow: 'Yellow', + purple: 'Purple', + tab: 'Tab', + tag: 'Tag', + desc: 'Description', + back: 'Back', + title: 'Title', + status: 'Status', + button: 'Button', + option: 'Option', + search: 'Search', + content: 'Content', + custom: 'Custom', + username: 'Username', + password: 'Password', + loadingStatus: 'Loading', + disabled: 'Disabled', + uneditable: 'Uneditable', + basicUsage: 'Basic Usage', + advancedUsage: 'Advanced Usage', + usernamePlaceholder: 'Username', + passwordPlaceholder: 'Password', + }, +}); diff --git a/docs/site/mobile.js b/docs/site/mobile.js index fe83fab5e..880e84fc3 100644 --- a/docs/site/mobile.js +++ b/docs/site/mobile.js @@ -1,129 +1,13 @@ -import Locale from '../../src/locale'; -import enUS from '../../src/locale/lang/en-US'; -import { get } from '../../src/utils'; -import { camelize } from '../../src/utils/format/string'; +import { DemoLocaleMixin } from './demo-locale'; // import Lazyload from '../../src/lazyload'; -const { app } = window; - // TODO // Vue.use(Lazyload, { // lazyComponent: true, // }); -Locale.add({ - 'en-US': enUS, -}); - -let demoUid = 0; - -// helper for demo locales -app.mixin({ - computed: { - t() { - const { name } = this.$options; - const prefix = name ? camelize(name) + '.' : ''; - const messages = Locale.messages(); - - return (path, ...args) => { - const message = get(messages, prefix + path) || get(messages, path); - return typeof message === 'function' ? message(...args) : message; - }; - }, - - // flag for vant-weapp demos - isWeapp() { - return location.search.indexOf('weapp=1') !== -1; - }, - }, - - beforeCreate() { - if (!this.$options.name) { - this.$options.name = `demo-${demoUid++}`; - } - - const { i18n, name } = this.$options; - - if (i18n && name) { - const locales = {}; - const camelizedName = camelize(name); - - Object.keys(i18n).forEach((key) => { - locales[key] = { [camelizedName]: i18n[key] }; - }); - - Locale.add(locales); - } - }, -}); - -// switch lang after routing -if (window.vueRouter) { - window.vueRouter.afterEach((to) => { - const { lang } = to.meta || {}; - - if (lang) { - Locale.use(lang); - } - }); +const { app } = window; +if (app) { + // helper for demo locales + app.mixin(DemoLocaleMixin); } - -// add some basic locale messages -Locale.add({ - 'zh-CN': { - add: '增加', - decrease: '减少', - red: '红色', - orange: '橙色', - yellow: '黄色', - purple: '紫色', - tab: '标签', - tag: '标签', - desc: '描述信息', - back: '返回', - title: '标题', - status: '状态', - button: '按钮', - option: '选项', - search: '搜索', - content: '内容', - custom: '自定义', - username: '用户名', - password: '密码', - disabled: '禁用状态', - uneditable: '不可编辑', - basicUsage: '基础用法', - advancedUsage: '高级用法', - loadingStatus: '加载状态', - usernamePlaceholder: '请输入用户名', - passwordPlaceholder: '请输入密码', - }, - 'en-US': { - add: 'Add', - decrease: 'Decrease', - red: 'Red', - orange: 'Orange', - yellow: 'Yellow', - purple: 'Purple', - tab: 'Tab', - tag: 'Tag', - desc: 'Description', - back: 'Back', - title: 'Title', - status: 'Status', - button: 'Button', - option: 'Option', - search: 'Search', - content: 'Content', - custom: 'Custom', - username: 'Username', - password: 'Password', - loadingStatus: 'Loading', - disabled: 'Disabled', - uneditable: 'Uneditable', - basicUsage: 'Basic Usage', - advancedUsage: 'Advanced Usage', - usernamePlaceholder: 'Username', - passwordPlaceholder: 'Password', - }, -}); diff --git a/test/demo.ts b/test/demo.ts index d231c6a7b..d60c1687a 100644 --- a/test/demo.ts +++ b/test/demo.ts @@ -1,18 +1,15 @@ -import Vue, { CreateElement } from 'vue'; -import '../docs/site/mobile'; +import { h } from 'Vue'; import Locale from '../src/locale'; import { mount, later } from '.'; +import { DemoLocaleMixin } from '../docs/site/demo-locale'; -const Empty = { - render(h: CreateElement): ReturnType { - return h('div', [(this as any).$slots.default]); +const EmptyComponent = { + render() { + return h('div', [(this as any).$slots.default()]); }, inheritAttrs: false, }; -Vue.component('demo-block', Empty); -Vue.component('demo-section', Empty); - export function snapshotDemo(Demo: any, option: any = {}) { test('renders demo correctly', async () => { if (option.beforeTest) { @@ -23,11 +20,20 @@ export function snapshotDemo(Demo: any, option: any = {}) { Locale.add(Demo.i18n); } - const wrapper = mount(Demo); + const wrapper = mount(Demo, { + global: { + mixins: [DemoLocaleMixin], + components: { + 'demo-block': EmptyComponent, + 'demo-section': EmptyComponent, + }, + plugins: [(window as any).vant], + }, + }); await later(); - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); if (option.afterTest) { option.afterTest(); diff --git a/test/index.ts b/test/index.ts index fc3f459ab..3db455b45 100644 --- a/test/index.ts +++ b/test/index.ts @@ -1,14 +1,5 @@ -import Vue from 'vue'; -import { mount, TransitionStub } from '@vue/test-utils'; - -// prevent vue warning log -Vue.config.silent = true; - -// stub transition -Vue.component('transition', TransitionStub as any); - // promisify setTimeout -export function later(delay: number = 0): Promise { +export function later(delay = 0): Promise { return new Promise((resolve) => { setTimeout(resolve, delay); }); @@ -16,4 +7,4 @@ export function later(delay: number = 0): Promise { export * from './dom'; export * from './event'; -export { mount }; +export { mount } from '@vue/test-utils';