test: fix demo snapshot

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',
+  },
+});

docs/site/mobile.js

@@ -1,129 +1,13 @@
-import Locale from '../../src/locale';
+import { DemoLocaleMixin } from './demo-locale';
-import enUS from '../../src/locale/lang/en-US';
-import { get } from '../../src/utils';
-import { camelize } from '../../src/utils/format/string';
 // import Lazyload from '../../src/lazyload';
 
-const { app } = window;
-
 // TODO
 // Vue.use(Lazyload, {
 //   lazyComponent: true,
 // });
 
-Locale.add({
+const { app } = window;
-  'en-US': enUS,
+if (app) {
-});
+  // helper for demo locales
-
+  app.mixin(DemoLocaleMixin);
-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);
-    }
-  });
 }
-
-// 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',
-  },
-});

test/demo.ts

@@ -1,18 +1,15 @@
-import Vue, { CreateElement } from 'vue';
+import { h } from 'Vue';
-import '../docs/site/mobile';
 import Locale from '../src/locale';
 import { mount, later } from '.';
+import { DemoLocaleMixin } from '../docs/site/demo-locale';
 
-const Empty = {
+const EmptyComponent = {
-  render(h: CreateElement): ReturnType<CreateElement> {
+  render() {
-    return h('div', [(this as any).$slots.default]);
+    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();

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<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';