mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
test: fix demo snapshot
This commit is contained in:
chenjiahan
parent
f0482c7eec
commit
6016a4acf1
120
docs/site/demo-locale.js
Normal file
120
docs/site/demo-locale.js
Normal file
@ -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',
|
||||
},
|
||||
});
|
||||
@ -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',
|
||||
},
|
||||
});
|
||||
|
||||
26
test/demo.ts
26
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<CreateElement> {
|
||||
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();
|
||||
|
||||
@ -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<void> {
|
||||
export function later(delay = 0): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, delay);
|
||||
});
|
||||
@ -16,4 +7,4 @@ export function later(delay: number = 0): Promise<void> {
|
||||
|
||||
export * from './dom';
|
||||
export * from './event';
|
||||
export { mount };
|
||||
export { mount } from '@vue/test-utils';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user