test(Overlay): add demo test

example/app.json

@@ -147,6 +147,7 @@
     "van-collapse-item": "./dist/collapse-item/index",
     "van-picker": "./dist/picker/index",
     "van-overlay": "./dist/overlay/index",
+    "van-overlay-demo": "./dist/overlay/demo/index",
     "van-circle": "./dist/circle/index",
     "van-circle-demo": "./dist/circle/demo/index",
     "van-index-bar": "./dist/index-bar/index",

example/pages/overlay/index.js

@@ -1,26 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    show: false,
-    showEmbedded: false
-  },
-
-  onClickShow() {
-    this.setData({ show: true });
-  },
-
-  onClickHide() {
-    this.setData({ show: false });
-  },
-
-  onClickShowEmbedded() {
-    this.setData({ showEmbedded: true });
-  },
-
-  onClickHideEmbedded() {
-    this.setData({ showEmbedded: false });
-  },
-
-  noop() {}
-});
+Page();

example/pages/overlay/index.wxml

@@ -1,17 +1 @@
-<demo-block title="基础用法" padding>
-  <van-button type="primary" bind:click="onClickShow">
-    显示遮罩层
-  </van-button>
-  <van-overlay show="{{ show }}" bind:click="onClickHide" />
-</demo-block>
-
-<demo-block title="嵌入内容" padding>
-  <van-button type="primary" bind:click="onClickShowEmbedded">
-    嵌入内容
-  </van-button>
-  <van-overlay show="{{ showEmbedded }}" bind:click="onClickHideEmbedded">
-    <view class="wrapper">
-      <div class="block" catch:tap="noop" />
-    </view>
-  </van-overlay>
-</demo-block>
+<van-overlay-demo />

packages/overlay/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "../../button/index",
+    "van-overlay": "../../overlay/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

packages/overlay/demo/index.ts

@@ -0,0 +1,28 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    show: false,
+    showEmbedded: false,
+  },
+
+  methods: {
+    onClickShow() {
+      this.setData({ show: true });
+    },
+
+    onClickHide() {
+      this.setData({ show: false });
+    },
+
+    onClickShowEmbedded() {
+      this.setData({ showEmbedded: true });
+    },
+
+    onClickHideEmbedded() {
+      this.setData({ showEmbedded: false });
+    },
+
+    noop() {},
+  },
+});

packages/overlay/demo/index.wxml

@@ -0,0 +1,17 @@
+<demo-block title="基础用法" padding>
+  <van-button type="primary" bind:click="onClickShow">
+    显示遮罩层
+  </van-button>
+  <van-overlay show="{{ show }}" bind:click="onClickHide" />
+</demo-block>
+
+<demo-block title="嵌入内容" padding>
+  <van-button type="primary" bind:click="onClickShowEmbedded">
+    嵌入内容
+  </van-button>
+  <van-overlay show="{{ showEmbedded }}" bind:click="onClickHideEmbedded">
+    <view class="wrapper">
+      <div class="block" catch:tap="noop" />
+    </view>
+  </van-overlay>
+</demo-block>

packages/overlay/test/__snapshots__/demo.spec.ts.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix demo-block--padding"
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        基础用法
+      </wx-view>
+      <van-button
+        bind:click="onClickShow"
+      >
+        <wx-button
+          appParameter=""
+          ariaLabel=""
+          businessId="{{0}}"
+          class="custom-class van-button van-button--primary van-button--normal "
+          data-detail="{{null}}"
+          formType=""
+          hoverClass="van-button--active hover-class"
+          id=""
+          lang=""
+          openType=""
+          sendMessageImg=""
+          sendMessagePath=""
+          sendMessageTitle=""
+          sessionFrom=""
+          showMessageCard="{{false}}"
+          style=""
+          bind:contact="onContact"
+          bind:error="onError"
+          bind:getphonenumber="onGetPhoneNumber"
+          bind:getuserinfo="onGetUserInfo"
+          bind:launchapp="onLaunchApp"
+          bind:opensetting="onOpenSetting"
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-button__text"
+          >
+            
+    显示遮罩层
+  
+          </wx-view>
+        </wx-button>
+      </van-button>
+      <van-overlay
+        bind:click="onClickHide"
+      >
+        <van-transition
+          customClass="van-overlay"
+          bind:tap="onClick"
+          catch:touchmove="noop"
+        />
+      </van-overlay>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix demo-block--padding"
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        嵌入内容
+      </wx-view>
+      <van-button
+        bind:click="onClickShowEmbedded"
+      >
+        <wx-button
+          appParameter=""
+          ariaLabel=""
+          businessId="{{0}}"
+          class="custom-class van-button van-button--primary van-button--normal "
+          data-detail="{{null}}"
+          formType=""
+          hoverClass="van-button--active hover-class"
+          id=""
+          lang=""
+          openType=""
+          sendMessageImg=""
+          sendMessagePath=""
+          sendMessageTitle=""
+          sessionFrom=""
+          showMessageCard="{{false}}"
+          style=""
+          bind:contact="onContact"
+          bind:error="onError"
+          bind:getphonenumber="onGetPhoneNumber"
+          bind:getuserinfo="onGetUserInfo"
+          bind:launchapp="onLaunchApp"
+          bind:opensetting="onOpenSetting"
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-button__text"
+          >
+            
+    嵌入内容
+  
+          </wx-view>
+        </wx-button>
+      </van-button>
+      <van-overlay
+        bind:click="onClickHideEmbedded"
+      >
+        <van-transition
+          customClass="van-overlay"
+          bind:tap="onClick"
+          catch:touchmove="noop"
+        />
+      </van-overlay>
+    </wx-view>
+  </demo-block>
+</main>
+`;

packages/overlay/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});