From 1a9df5599d2ac74d1095d943fc3f9a51591d13ee Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Tue, 7 Dec 2021 00:08:34 +0800
Subject: [PATCH] test(ShareSheet): add demo test

---
 example/app.json                              |   1 +
 example/pages/share-sheet/index.js            |  84 +-----
 example/pages/share-sheet/index.wxml          |  46 +--
 packages/share-sheet/demo/index.json          |   9 +
 .../share-sheet/demo/index.less               |   0
 packages/share-sheet/demo/index.ts            |  87 ++++++
 packages/share-sheet/demo/index.wxml          |  45 +++
 .../test/__snapshots__/demo.spec.ts.snap      | 281 ++++++++++++++++++
 packages/share-sheet/test/demo.spec.ts        |  11 +
 9 files changed, 436 insertions(+), 128 deletions(-)
 create mode 100644 packages/share-sheet/demo/index.json
 rename example/pages/share-sheet/index.wxss => packages/share-sheet/demo/index.less (100%)
 create mode 100644 packages/share-sheet/demo/index.ts
 create mode 100644 packages/share-sheet/demo/index.wxml
 create mode 100644 packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/share-sheet/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index 20f3ae9b..b8d1b391 100644
--- a/example/app.json
+++ b/example/app.json
@@ -160,6 +160,7 @@
     "van-calendar": "./dist/calendar/index",
     "van-calendar-demo": "./dist/calendar/demo/index",
     "van-share-sheet": "./dist/share-sheet/index",
+    "van-share-sheet-demo": "./dist/share-sheet/demo/index",
     "van-config-provider": "./dist/config-provider/index",
     "van-config-provider-demo": "./dist/config-provider/demo/index"
   },
diff --git a/example/pages/share-sheet/index.js b/example/pages/share-sheet/index.js
index ec5f5b33..cc11dfda 100644
--- a/example/pages/share-sheet/index.js
+++ b/example/pages/share-sheet/index.js
@@ -1,85 +1,3 @@
 import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
 
-Page({
-  data: {
-    show: {
-      basic: false,
-      withDesc: false,
-      multiLine: false,
-      customIcon: false,
-    },
-    options: [
-      { name: '微信', icon: 'wechat', openType: 'share' },
-      { name: '朋友圈', icon: 'wechat-moments' },
-      { name: 'QQ', icon: 'qq' },
-      { name: '微博', icon: 'weibo' },
-      { name: '复制链接', icon: 'link' },
-      { name: '分享海报', icon: 'poster' },
-      { name: '二维码', icon: 'qrcode' },
-      { name: '小程序码', icon: 'weapp-qrcode' },
-    ],
-
-    multiLineOptions: [
-      [
-        { name: '微信', icon: 'wechat' },
-        { name: '微博', icon: 'weibo' },
-        { name: 'QQ', icon: 'qq' },
-      ],
-      [
-        { name: '复制链接', icon: 'link' },
-        { name: '分享海报', icon: 'poster' },
-        { name: '二维码', icon: 'qrcode' },
-      ],
-    ],
-
-    customIconOptions: [
-      {
-        name: '名称',
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
-      },
-      {
-        name: '名称',
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
-      },
-      {
-        name: '名称',
-        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
-      },
-    ],
-
-    optionsWithDesc: [
-      { name: '微信', icon: 'wechat' },
-      { name: '微博', icon: 'weibo' },
-      {
-        name: '复制链接',
-        icon: 'link',
-        description: '描述信息',
-      },
-      { name: '分享海报', icon: 'poster' },
-      { name: '二维码', icon: 'qrcode' },
-    ],
-  },
-
-  onShowShareSheet(event) {
-    this.setData({
-      [`show.${event.target.dataset.type}`]: true,
-    });
-  },
-
-  onClose() {
-    this.setData({
-      show: {
-        basic: false,
-        withDesc: false,
-        multiLine: false,
-        customIcon: false,
-      },
-    });
-  },
-
-  onSelect(event) {
-    Toast(event.detail.name);
-    this.onClose();
-  },
-});
+Page();
diff --git a/example/pages/share-sheet/index.wxml b/example/pages/share-sheet/index.wxml
index c4820977..c560ff7b 100644
--- a/example/pages/share-sheet/index.wxml
+++ b/example/pages/share-sheet/index.wxml
@@ -1,45 +1 @@
-<demo-block card title="基础用法">
-  <van-cell is-link title="显示分享面板" data-type="basic" bind:click="onShowShareSheet" />
-  <van-share-sheet
-    show="{{ show.basic }}"
-    title="立即分享给好友"
-    options="{{ options }}"
-    bind:close="onClose"
-    bind:select="onSelect"
-  />
-</demo-block>
-
-<demo-block card title="展示多行选项">
-  <van-cell is-link title="显示分享面板" data-type="multiLine" bind:click="onShowShareSheet" />
-  <van-share-sheet
-    show="{{ show.multiLine }}"
-    title="立即分享给好友"
-    options="{{ multiLineOptions }}"
-    bind:close="onClose"
-    bind:select="onSelect"
-  />
-</demo-block>
-
-<demo-block card title="自定义图标">
-  <van-cell is-link title="显示分享面板" data-type="customIcon" bind:click="onShowShareSheet" />
-  <van-share-sheet
-    show="{{ show.customIcon }}"
-    options="{{ customIconOptions }}"
-    bind:close="onClose"
-    bind:select="onSelect"
-  />
-</demo-block>
-
-<demo-block card title="展示描述信息">
-  <van-cell is-link title="显示分享面板" data-type="withDesc" bind:click="onShowShareSheet" />
-  <van-share-sheet
-    show="{{ show.withDesc }}"
-    title="立即分享给好友"
-    options="{{ optionsWithDesc }}"
-    description="描述信息"
-    bind:close="onClose"
-    bind:select="onSelect"
-  />
-</demo-block>
-
-<van-toast id="van-toast" />
+<van-share-sheet-demo />
diff --git a/packages/share-sheet/demo/index.json b/packages/share-sheet/demo/index.json
new file mode 100644
index 00000000..a3ae007c
--- /dev/null
+++ b/packages/share-sheet/demo/index.json
@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../../cell/index",
+    "van-toast": "../../toast/index",
+    "van-share-sheet": "../../share-sheet/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/share-sheet/index.wxss b/packages/share-sheet/demo/index.less
similarity index 100%
rename from example/pages/share-sheet/index.wxss
rename to packages/share-sheet/demo/index.less
diff --git a/packages/share-sheet/demo/index.ts b/packages/share-sheet/demo/index.ts
new file mode 100644
index 00000000..66b1feb1
--- /dev/null
+++ b/packages/share-sheet/demo/index.ts
@@ -0,0 +1,87 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+  data: {
+    show: {
+      basic: false,
+      withDesc: false,
+      multiLine: false,
+      customIcon: false,
+    },
+    options: [
+      { name: '微信', icon: 'wechat', openType: 'share' },
+      { name: '朋友圈', icon: 'wechat-moments' },
+      { name: 'QQ', icon: 'qq' },
+      { name: '微博', icon: 'weibo' },
+      { name: '复制链接', icon: 'link' },
+      { name: '分享海报', icon: 'poster' },
+      { name: '二维码', icon: 'qrcode' },
+      { name: '小程序码', icon: 'weapp-qrcode' },
+    ],
+
+    multiLineOptions: [
+      [
+        { name: '微信', icon: 'wechat' },
+        { name: '微博', icon: 'weibo' },
+        { name: 'QQ', icon: 'qq' },
+      ],
+      [
+        { name: '复制链接', icon: 'link' },
+        { name: '分享海报', icon: 'poster' },
+        { name: '二维码', icon: 'qrcode' },
+      ],
+    ],
+
+    customIconOptions: [
+      {
+        name: '名称',
+        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
+      },
+      {
+        name: '名称',
+        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
+      },
+      {
+        name: '名称',
+        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
+      },
+    ],
+
+    optionsWithDesc: [
+      { name: '微信', icon: 'wechat' },
+      { name: '微博', icon: 'weibo' },
+      {
+        name: '复制链接',
+        icon: 'link',
+        description: '描述信息',
+      },
+      { name: '分享海报', icon: 'poster' },
+      { name: '二维码', icon: 'qrcode' },
+    ],
+  },
+
+  methods: {
+    onShowShareSheet(event) {
+      this.setData({
+        [`show.${event.target.dataset.type}`]: true,
+      });
+    },
+
+    onClose() {
+      this.setData({
+        show: {
+          basic: false,
+          withDesc: false,
+          multiLine: false,
+          customIcon: false,
+        },
+      });
+    },
+
+    onSelect(event) {
+      Toast({ context: this, message: event.detail.name });
+      this.onClose();
+    },
+  },
+});
diff --git a/packages/share-sheet/demo/index.wxml b/packages/share-sheet/demo/index.wxml
new file mode 100644
index 00000000..c4820977
--- /dev/null
+++ b/packages/share-sheet/demo/index.wxml
@@ -0,0 +1,45 @@
+<demo-block card title="基础用法">
+  <van-cell is-link title="显示分享面板" data-type="basic" bind:click="onShowShareSheet" />
+  <van-share-sheet
+    show="{{ show.basic }}"
+    title="立即分享给好友"
+    options="{{ options }}"
+    bind:close="onClose"
+    bind:select="onSelect"
+  />
+</demo-block>
+
+<demo-block card title="展示多行选项">
+  <van-cell is-link title="显示分享面板" data-type="multiLine" bind:click="onShowShareSheet" />
+  <van-share-sheet
+    show="{{ show.multiLine }}"
+    title="立即分享给好友"
+    options="{{ multiLineOptions }}"
+    bind:close="onClose"
+    bind:select="onSelect"
+  />
+</demo-block>
+
+<demo-block card title="自定义图标">
+  <van-cell is-link title="显示分享面板" data-type="customIcon" bind:click="onShowShareSheet" />
+  <van-share-sheet
+    show="{{ show.customIcon }}"
+    options="{{ customIconOptions }}"
+    bind:close="onClose"
+    bind:select="onSelect"
+  />
+</demo-block>
+
+<demo-block card title="展示描述信息">
+  <van-cell is-link title="显示分享面板" data-type="withDesc" bind:click="onShowShareSheet" />
+  <van-share-sheet
+    show="{{ show.withDesc }}"
+    title="立即分享给好友"
+    options="{{ optionsWithDesc }}"
+    description="描述信息"
+    bind:close="onClose"
+    bind:select="onSelect"
+  />
+</demo-block>
+
+<van-toast id="van-toast" />
diff --git a/packages/share-sheet/test/__snapshots__/demo.spec.ts.snap b/packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..ccedfb68
--- /dev/null
+++ b/packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,281 @@
+// 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 "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        基础用法
+      </wx-view>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          data-type="basic"
+          bind:click="onShowShareSheet"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            hoverClass="van-cell--hover hover-class"
+            hoverStayTime="70"
+            style=""
+            bind:tap="onClick"
+          >
+            <wx-view
+              class="van-cell__title title-class"
+              style=""
+            >
+              显示分享面板
+            </wx-view>
+            <wx-view
+              class="van-cell__value value-class"
+            />
+            <van-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-share-sheet
+          bind:close="onClose"
+          bind:select="onSelect"
+        >
+          <van-popup
+            class="van-share-sheet"
+            bind:click-overlay="onClickOverlay"
+            bind:close="onClose"
+          >
+            <van-overlay
+              bind:click="onClickOverlay"
+            >
+              <van-transition
+                customClass="van-overlay"
+                bind:tap="onClick"
+                catch:touchmove="noop"
+              />
+            </van-overlay>
+          </van-popup>
+        </van-share-sheet>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        展示多行选项
+      </wx-view>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          data-type="multiLine"
+          bind:click="onShowShareSheet"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            hoverClass="van-cell--hover hover-class"
+            hoverStayTime="70"
+            style=""
+            bind:tap="onClick"
+          >
+            <wx-view
+              class="van-cell__title title-class"
+              style=""
+            >
+              显示分享面板
+            </wx-view>
+            <wx-view
+              class="van-cell__value value-class"
+            />
+            <van-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-share-sheet
+          bind:close="onClose"
+          bind:select="onSelect"
+        >
+          <van-popup
+            class="van-share-sheet"
+            bind:click-overlay="onClickOverlay"
+            bind:close="onClose"
+          >
+            <van-overlay
+              bind:click="onClickOverlay"
+            >
+              <van-transition
+                customClass="van-overlay"
+                bind:tap="onClick"
+                catch:touchmove="noop"
+              />
+            </van-overlay>
+          </van-popup>
+        </van-share-sheet>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义图标
+      </wx-view>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          data-type="customIcon"
+          bind:click="onShowShareSheet"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            hoverClass="van-cell--hover hover-class"
+            hoverStayTime="70"
+            style=""
+            bind:tap="onClick"
+          >
+            <wx-view
+              class="van-cell__title title-class"
+              style=""
+            >
+              显示分享面板
+            </wx-view>
+            <wx-view
+              class="van-cell__value value-class"
+            />
+            <van-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-share-sheet
+          bind:close="onClose"
+          bind:select="onSelect"
+        >
+          <van-popup
+            class="van-share-sheet"
+            bind:click-overlay="onClickOverlay"
+            bind:close="onClose"
+          >
+            <van-overlay
+              bind:click="onClickOverlay"
+            >
+              <van-transition
+                customClass="van-overlay"
+                bind:tap="onClick"
+                catch:touchmove="noop"
+              />
+            </van-overlay>
+          </van-popup>
+        </van-share-sheet>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        展示描述信息
+      </wx-view>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          data-type="withDesc"
+          bind:click="onShowShareSheet"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            hoverClass="van-cell--hover hover-class"
+            hoverStayTime="70"
+            style=""
+            bind:tap="onClick"
+          >
+            <wx-view
+              class="van-cell__title title-class"
+              style=""
+            >
+              显示分享面板
+            </wx-view>
+            <wx-view
+              class="van-cell__value value-class"
+            />
+            <van-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-share-sheet
+          bind:close="onClose"
+          bind:select="onSelect"
+        >
+          <van-popup
+            class="van-share-sheet"
+            bind:click-overlay="onClickOverlay"
+            bind:close="onClose"
+          >
+            <van-overlay
+              bind:click="onClickOverlay"
+            >
+              <van-transition
+                customClass="van-overlay"
+                bind:tap="onClick"
+                catch:touchmove="noop"
+              />
+            </van-overlay>
+          </van-popup>
+        </van-share-sheet>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+  <van-toast
+    id="van-toast"
+  >
+    <van-transition
+      customClass="van-toast__container"
+    />
+  </van-toast>
+</main>
+`;
diff --git a/packages/share-sheet/test/demo.spec.ts b/packages/share-sheet/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/share-sheet/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();
+});