From 7819c25be07a8bb1f529f40a4d474e74afba1b71 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Wed, 1 Dec 2021 23:02:57 +0800
Subject: [PATCH] test(ActionSheet): add demo test

---
 example/app.json                              |   1 +
 example/pages/action-sheet/index.js           |  57 +--
 example/pages/action-sheet/index.wxml         |  63 +--
 packages/action-sheet/demo/index.json         |   8 +
 .../action-sheet/demo/index.less              |   0
 packages/action-sheet/demo/index.ts           |  61 +++
 packages/action-sheet/demo/index.wxml         |  62 +++
 .../test/__snapshots__/demo.spec.ts.snap      | 391 ++++++++++++++++++
 packages/action-sheet/test/demo.spec.ts       |  11 +
 9 files changed, 536 insertions(+), 118 deletions(-)
 create mode 100644 packages/action-sheet/demo/index.json
 rename example/pages/action-sheet/index.wxss => packages/action-sheet/demo/index.less (100%)
 create mode 100644 packages/action-sheet/demo/index.ts
 create mode 100644 packages/action-sheet/demo/index.wxml
 create mode 100644 packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/action-sheet/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index b5e1a7c1..5e1e2f3f 100644
--- a/example/app.json
+++ b/example/app.json
@@ -64,6 +64,7 @@
   "usingComponents": {
     "demo-block": "./components/demo-block/index",
     "van-action-sheet": "./dist/action-sheet/index",
+    "van-action-sheet-demo": "./dist/action-sheet/demo/index",
     "van-area": "./dist/area/index",
     "van-button": "./dist/button/index",
     "van-button-demo": "./dist/button/demo/index",
diff --git a/example/pages/action-sheet/index.js b/example/pages/action-sheet/index.js
index 7142137d..cc11dfda 100644
--- a/example/pages/action-sheet/index.js
+++ b/example/pages/action-sheet/index.js
@@ -1,58 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    show1: false,
-    show2: false,
-    show3: false,
-    show4: false,
-    show5: false,
-    show6: false,
-    action1: [
-      { name: '选项' },
-      { name: '选项' },
-      { name: '选项', subname: '描述信息' },
-    ],
-    action2: [
-      { name: '着色选项', color: '#ee0a24' },
-      { loading: true },
-      { name: '禁用选项', disabled: true },
-    ],
-    action6: [
-      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
-    ],
-  },
-
-  toggle(type) {
-    this.setData({
-      [type]: !this.data[type],
-    });
-  },
-
-  toggleActionSheet1() {
-    this.toggle('show1');
-  },
-
-  toggleActionSheet2() {
-    this.toggle('show2');
-  },
-
-  toggleActionSheet3() {
-    this.toggle('show3');
-  },
-
-  toggleActionSheet4() {
-    this.toggle('show4');
-  },
-
-  toggleActionSheet5() {
-    this.toggle('show5');
-  },
-
-  toggleActionSheet6() {
-    this.toggle('show6');
-  },
-  onGetUserInfo(e) {
-    console.log(e.detail);
-  },
-});
+Page();
diff --git a/example/pages/action-sheet/index.wxml b/example/pages/action-sheet/index.wxml
index 36c775e5..c574b5da 100644
--- a/example/pages/action-sheet/index.wxml
+++ b/example/pages/action-sheet/index.wxml
@@ -1,62 +1 @@
-<demo-block title="基础用法" padding>
-  <van-button type="primary" bind:click="toggleActionSheet1">弹出菜单</van-button>
-  <van-action-sheet
-    show="{{ show1 }}"
-    actions="{{ action1 }}"
-    bind:close="toggleActionSheet1"
-  />
-</demo-block>
-
-<demo-block title="选项状态" padding>
-  <van-button type="primary" bind:click="toggleActionSheet2">弹出菜单</van-button>
-  <van-action-sheet
-    show="{{ show2 }}"
-    actions="{{ action2 }}"
-    bind:close="toggleActionSheet2"
-  />
-</demo-block>
-
-<demo-block title="展示取消按钮" padding>
-  <van-button type="primary" bind:click="toggleActionSheet3">弹出菜单</van-button>
-  <van-action-sheet
-    show="{{ show3 }}"
-    actions="{{ action1 }}"
-    cancel-text="取消"
-    bind:close="toggleActionSheet3"
-  >
-  </van-action-sheet>
-</demo-block>
-
-<demo-block title="展示描述信息" padding>
-  <van-button type="primary" bind:click="toggleActionSheet4">弹出菜单</van-button>
-  <van-action-sheet
-    show="{{ show4 }}"
-    actions="{{ action1 }}"
-    description="这是一段描述信息"
-    bind:close="toggleActionSheet4"
-  >
-  </van-action-sheet>
-</demo-block>
-
-<demo-block title="展示标题栏" padding>
-  <van-button type="primary" bind:click="toggleActionSheet5">弹出菜单</van-button>
-  <van-action-sheet
-    show="{{ show5 }}"
-    title="标题"
-    bind:close="toggleActionSheet5"
-  >
-    <view class="content">内容</view>
-  </van-action-sheet>
-</demo-block>
-
-<demo-block title="微信开放能力" padding>
-  <van-button type="primary" bind:click="toggleActionSheet6">弹出菜单</van-button>
-  <van-action-sheet
-    show="{{ show6 }}"
-    title="标题"
-    bind:close="toggleActionSheet6"
-    actions="{{ action6 }}"
-    bind:getuserinfo="onGetUserInfo"
-  >
-  </van-action-sheet>
-</demo-block>
+<van-action-sheet-demo />
diff --git a/packages/action-sheet/demo/index.json b/packages/action-sheet/demo/index.json
new file mode 100644
index 00000000..1409fecc
--- /dev/null
+++ b/packages/action-sheet/demo/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "../../button/index",
+    "van-action-sheet": "../../action-sheet/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/action-sheet/index.wxss b/packages/action-sheet/demo/index.less
similarity index 100%
rename from example/pages/action-sheet/index.wxss
rename to packages/action-sheet/demo/index.less
diff --git a/packages/action-sheet/demo/index.ts b/packages/action-sheet/demo/index.ts
new file mode 100644
index 00000000..9477f39f
--- /dev/null
+++ b/packages/action-sheet/demo/index.ts
@@ -0,0 +1,61 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    show1: false,
+    show2: false,
+    show3: false,
+    show4: false,
+    show5: false,
+    show6: false,
+    action1: [
+      { name: '选项' },
+      { name: '选项' },
+      { name: '选项', subname: '描述信息' },
+    ],
+    action2: [
+      { name: '着色选项', color: '#ee0a24' },
+      { loading: true },
+      { name: '禁用选项', disabled: true },
+    ],
+    action6: [
+      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
+    ],
+  },
+
+  methods: {
+    toggle(type) {
+      this.setData({
+        [type]: !this.data[type],
+      });
+    },
+
+    toggleActionSheet1() {
+      this.toggle('show1');
+    },
+
+    toggleActionSheet2() {
+      this.toggle('show2');
+    },
+
+    toggleActionSheet3() {
+      this.toggle('show3');
+    },
+
+    toggleActionSheet4() {
+      this.toggle('show4');
+    },
+
+    toggleActionSheet5() {
+      this.toggle('show5');
+    },
+
+    toggleActionSheet6() {
+      this.toggle('show6');
+    },
+
+    onGetUserInfo(e) {
+      console.log(e.detail);
+    },
+  },
+});
diff --git a/packages/action-sheet/demo/index.wxml b/packages/action-sheet/demo/index.wxml
new file mode 100644
index 00000000..36c775e5
--- /dev/null
+++ b/packages/action-sheet/demo/index.wxml
@@ -0,0 +1,62 @@
+<demo-block title="基础用法" padding>
+  <van-button type="primary" bind:click="toggleActionSheet1">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show1 }}"
+    actions="{{ action1 }}"
+    bind:close="toggleActionSheet1"
+  />
+</demo-block>
+
+<demo-block title="选项状态" padding>
+  <van-button type="primary" bind:click="toggleActionSheet2">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show2 }}"
+    actions="{{ action2 }}"
+    bind:close="toggleActionSheet2"
+  />
+</demo-block>
+
+<demo-block title="展示取消按钮" padding>
+  <van-button type="primary" bind:click="toggleActionSheet3">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show3 }}"
+    actions="{{ action1 }}"
+    cancel-text="取消"
+    bind:close="toggleActionSheet3"
+  >
+  </van-action-sheet>
+</demo-block>
+
+<demo-block title="展示描述信息" padding>
+  <van-button type="primary" bind:click="toggleActionSheet4">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show4 }}"
+    actions="{{ action1 }}"
+    description="这是一段描述信息"
+    bind:close="toggleActionSheet4"
+  >
+  </van-action-sheet>
+</demo-block>
+
+<demo-block title="展示标题栏" padding>
+  <van-button type="primary" bind:click="toggleActionSheet5">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show5 }}"
+    title="标题"
+    bind:close="toggleActionSheet5"
+  >
+    <view class="content">内容</view>
+  </van-action-sheet>
+</demo-block>
+
+<demo-block title="微信开放能力" padding>
+  <van-button type="primary" bind:click="toggleActionSheet6">弹出菜单</van-button>
+  <van-action-sheet
+    show="{{ show6 }}"
+    title="标题"
+    bind:close="toggleActionSheet6"
+    actions="{{ action6 }}"
+    bind:getuserinfo="onGetUserInfo"
+  >
+  </van-action-sheet>
+</demo-block>
diff --git a/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap b/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..a66dc159
--- /dev/null
+++ b/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,391 @@
+// 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="toggleActionSheet1"
+      >
+        <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-action-sheet
+        bind:close="toggleActionSheet1"
+      >
+        <van-popup
+          customClass="van-action-sheet"
+          bind:close="onClickOverlay"
+        >
+          <van-overlay
+            bind:click="onClickOverlay"
+          >
+            <van-transition
+              customClass="van-overlay"
+              bind:tap="onClick"
+              catch:touchmove="noop"
+            />
+          </van-overlay>
+        </van-popup>
+      </van-action-sheet>
+    </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="toggleActionSheet2"
+      >
+        <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-action-sheet
+        bind:close="toggleActionSheet2"
+      >
+        <van-popup
+          customClass="van-action-sheet"
+          bind:close="onClickOverlay"
+        >
+          <van-overlay
+            bind:click="onClickOverlay"
+          >
+            <van-transition
+              customClass="van-overlay"
+              bind:tap="onClick"
+              catch:touchmove="noop"
+            />
+          </van-overlay>
+        </van-popup>
+      </van-action-sheet>
+    </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="toggleActionSheet3"
+      >
+        <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-action-sheet
+        bind:close="toggleActionSheet3"
+      >
+        <van-popup
+          customClass="van-action-sheet"
+          bind:close="onClickOverlay"
+        >
+          <van-overlay
+            bind:click="onClickOverlay"
+          >
+            <van-transition
+              customClass="van-overlay"
+              bind:tap="onClick"
+              catch:touchmove="noop"
+            />
+          </van-overlay>
+        </van-popup>
+      </van-action-sheet>
+    </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="toggleActionSheet4"
+      >
+        <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-action-sheet
+        bind:close="toggleActionSheet4"
+      >
+        <van-popup
+          customClass="van-action-sheet"
+          bind:close="onClickOverlay"
+        >
+          <van-overlay
+            bind:click="onClickOverlay"
+          >
+            <van-transition
+              customClass="van-overlay"
+              bind:tap="onClick"
+              catch:touchmove="noop"
+            />
+          </van-overlay>
+        </van-popup>
+      </van-action-sheet>
+    </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="toggleActionSheet5"
+      >
+        <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-action-sheet
+        bind:close="toggleActionSheet5"
+      >
+        <van-popup
+          customClass="van-action-sheet"
+          bind:close="onClickOverlay"
+        >
+          <van-overlay
+            bind:click="onClickOverlay"
+          >
+            <van-transition
+              customClass="van-overlay"
+              bind:tap="onClick"
+              catch:touchmove="noop"
+            />
+          </van-overlay>
+        </van-popup>
+      </van-action-sheet>
+    </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="toggleActionSheet6"
+      >
+        <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-action-sheet
+        bind:close="toggleActionSheet6"
+        bind:getuserinfo="onGetUserInfo"
+      >
+        <van-popup
+          customClass="van-action-sheet"
+          bind:close="onClickOverlay"
+        >
+          <van-overlay
+            bind:click="onClickOverlay"
+          >
+            <van-transition
+              customClass="van-overlay"
+              bind:tap="onClick"
+              catch:touchmove="noop"
+            />
+          </van-overlay>
+        </van-popup>
+      </van-action-sheet>
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/action-sheet/test/demo.spec.ts b/packages/action-sheet/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/action-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();
+});