From 40349869e5649fa357b9ebb9f3dc5259702ed677 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Sun, 12 Dec 2021 22:38:21 +0800
Subject: [PATCH] test(Overlay): add demo test

---
 example/app.json                              |   1 +
 example/pages/overlay/index.js                |  25 +---
 example/pages/overlay/index.wxml              |  18 +--
 packages/overlay/demo/index.json              |   8 ++
 .../overlay/demo/index.less                   |   0
 packages/overlay/demo/index.ts                |  28 ++++
 packages/overlay/demo/index.wxml              |  17 +++
 .../test/__snapshots__/demo.spec.ts.snap      | 120 ++++++++++++++++++
 packages/overlay/test/demo.spec.ts            |  11 ++
 9 files changed, 187 insertions(+), 41 deletions(-)
 create mode 100644 packages/overlay/demo/index.json
 rename example/pages/overlay/index.wxss => packages/overlay/demo/index.less (100%)
 create mode 100644 packages/overlay/demo/index.ts
 create mode 100644 packages/overlay/demo/index.wxml
 create mode 100644 packages/overlay/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/overlay/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index 5855470f..80560d1b 100644
--- a/example/app.json
+++ b/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",
diff --git a/example/pages/overlay/index.js b/example/pages/overlay/index.js
index 76454f4a..cc11dfda 100644
--- a/example/pages/overlay/index.js
+++ b/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();
diff --git a/example/pages/overlay/index.wxml b/example/pages/overlay/index.wxml
index 2beb4efe..b8f74971 100644
--- a/example/pages/overlay/index.wxml
+++ b/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 />
diff --git a/packages/overlay/demo/index.json b/packages/overlay/demo/index.json
new file mode 100644
index 00000000..0b0b4174
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/example/pages/overlay/index.wxss b/packages/overlay/demo/index.less
similarity index 100%
rename from example/pages/overlay/index.wxss
rename to packages/overlay/demo/index.less
diff --git a/packages/overlay/demo/index.ts b/packages/overlay/demo/index.ts
new file mode 100644
index 00000000..52be0d39
--- /dev/null
+++ b/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() {},
+  },
+});
diff --git a/packages/overlay/demo/index.wxml b/packages/overlay/demo/index.wxml
new file mode 100644
index 00000000..2beb4efe
--- /dev/null
+++ b/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>
diff --git a/packages/overlay/test/__snapshots__/demo.spec.ts.snap b/packages/overlay/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..3903394e
--- /dev/null
+++ b/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>
+`;
diff --git a/packages/overlay/test/demo.spec.ts b/packages/overlay/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/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();
+});