From ce8955560e04cab25f66a7f8462e965cc0df4606 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Thu, 2 Dec 2021 23:59:47 +0800
Subject: [PATCH] test(Stepper): add demo test

---
 example/app.json                              |   1 +
 example/pages/stepper/index.js                |  18 +-
 example/pages/stepper/index.wxml              |  46 +-
 example/pages/stepper/index.wxss              |   4 -
 packages/stepper/demo/index.json              |   9 +
 packages/stepper/demo/index.ts                |  22 +
 packages/stepper/demo/index.wxml              |  45 ++
 .../test/__snapshots__/demo.spec.ts.snap      | 585 ++++++++++++++++++
 packages/stepper/test/demo.spec.ts            |  11 +
 9 files changed, 675 insertions(+), 66 deletions(-)
 delete mode 100644 example/pages/stepper/index.wxss
 create mode 100644 packages/stepper/demo/index.json
 create mode 100644 packages/stepper/demo/index.ts
 create mode 100644 packages/stepper/demo/index.wxml
 create mode 100644 packages/stepper/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/stepper/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index de7e94ab..e96a0617 100644
--- a/example/app.json
+++ b/example/app.json
@@ -112,6 +112,7 @@
     "van-sidebar-item": "./dist/sidebar-item/index",
     "van-slider": "./dist/slider/index",
     "van-stepper": "./dist/stepper/index",
+    "van-stepper-demo": "./dist/stepper/demo/index",
     "van-steps": "./dist/steps/index",
     "van-sticky": "./dist/sticky/index",
     "van-submit-bar": "./dist/submit-bar/index",
diff --git a/example/pages/stepper/index.js b/example/pages/stepper/index.js
index 27f22043..cc11dfda 100644
--- a/example/pages/stepper/index.js
+++ b/example/pages/stepper/index.js
@@ -1,19 +1,3 @@
 import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
 
-Page({
-  data: {
-    value: 1
-  },
-
-  onChange(event) {
-    Toast.loading({
-      forbidClick: true
-    });
-
-    setTimeout(() => {
-      Toast.clear();
-      this.setData({ value: event.detail });
-    }, 500);
-  }
-});
+Page();
diff --git a/example/pages/stepper/index.wxml b/example/pages/stepper/index.wxml
index 7d3d3de3..34ac9353 100644
--- a/example/pages/stepper/index.wxml
+++ b/example/pages/stepper/index.wxml
@@ -1,45 +1 @@
-<van-cell center title="基础用法">
-  <van-stepper value="{{ 1 }}" />
-</van-cell>
-
-<van-cell center title="步长设置">
-  <van-stepper value="{{ 1 }}" step="2" />
-</van-cell>
-
-<van-cell center title="限制输入范围">
-  <van-stepper value="{{ 1 }}" min="5" max="8" />
-</van-cell>
-
-<van-cell center title="限制输入整数">
-  <van-stepper value="{{ 1 }}" integer />
-</van-cell>
-
-<van-cell center title="禁用状态">
-  <van-stepper value="{{ 1 }}" disabled />
-</van-cell>
-
-<van-cell center title="禁用长按">
-  <van-stepper value="{{ 1 }}" long-press="{{ false }}" />
-</van-cell>
-
-<van-cell center title="固定小数位数">
-  <van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
-</van-cell>
-
-<van-cell center title="异步变更">
-  <van-stepper
-    value="{{ value }}"
-    async-change
-    bind:change="onChange"
-  />
-</van-cell>
-
-<van-cell center title="自定义大小">
-  <van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
-</van-cell>
-
-<van-cell center title="圆角风格">
-  <van-stepper value="{{ 1 }}" theme="round" button-size="22px" />
-</van-cell>
-
-<van-toast id="van-toast" />
+<van-stepper-demo />
diff --git a/example/pages/stepper/index.wxss b/example/pages/stepper/index.wxss
deleted file mode 100644
index f4ab9d80..00000000
--- a/example/pages/stepper/index.wxss
+++ /dev/null
@@ -1,4 +0,0 @@
-/* pages/stepper/index.wxss */
-page {
-  background-color: #fff;
-}
diff --git a/packages/stepper/demo/index.json b/packages/stepper/demo/index.json
new file mode 100644
index 00000000..cbe9850f
--- /dev/null
+++ b/packages/stepper/demo/index.json
@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../../cell/index",
+    "van-toast": "../../toast/index",
+    "van-stepper": "../../stepper/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/packages/stepper/demo/index.ts b/packages/stepper/demo/index.ts
new file mode 100644
index 00000000..2ba5a038
--- /dev/null
+++ b/packages/stepper/demo/index.ts
@@ -0,0 +1,22 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+  data: {
+    value: 1,
+  },
+
+  methods: {
+    onChange(event) {
+      Toast.loading({
+        context: this,
+        forbidClick: true,
+      });
+
+      setTimeout(() => {
+        Toast.clear();
+        this.setData({ value: event.detail });
+      }, 500);
+    },
+  },
+});
diff --git a/packages/stepper/demo/index.wxml b/packages/stepper/demo/index.wxml
new file mode 100644
index 00000000..3007ef89
--- /dev/null
+++ b/packages/stepper/demo/index.wxml
@@ -0,0 +1,45 @@
+<van-cell center title="基础用法">
+  <van-stepper value="{{ 1 }}" />
+</van-cell>
+
+<van-cell center title="步长设置">
+  <van-stepper value="{{ 1 }}" step="2" />
+</van-cell>
+
+<vanpackages/stepper/demo/index.less-cell center title="限制输入范围">
+  <van-stepper value="{{ 1 }}" min="5" max="8" />
+</van-cell>
+
+<van-cell center title="限制输入整数">
+  <van-stepper value="{{ 1 }}" integer />
+</van-cell>
+
+<van-cell center title="禁用状态">
+  <van-stepper value="{{ 1 }}" disabled />
+</van-cell>
+
+<van-cell center title="禁用长按">
+  <van-stepper value="{{ 1 }}" long-press="{{ false }}" />
+</van-cell>
+
+<van-cell center title="固定小数位数">
+  <van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
+</van-cell>
+
+<van-cell center title="异步变更">
+  <van-stepper
+    value="{{ value }}"
+    async-change
+    bind:change="onChange"
+  />
+</van-cell>
+
+<van-cell center title="自定义大小">
+  <van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
+</van-cell>
+
+<van-cell center title="圆角风格">
+  <van-stepper value="{{ 1 }}" theme="round" button-size="22px" />
+</van-cell>
+
+<van-toast id="van-toast" />
diff --git a/packages/stepper/test/__snapshots__/demo.spec.ts.snap b/packages/stepper/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..ba3d22a2
--- /dev/null
+++ b/packages/stepper/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,585 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="digit"
+              value="{{5}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="number"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input van-stepper__input--disabled"
+              disabled="{{true}}"
+              focus=""
+              style=""
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus van-stepper__plus--disabled"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="digit"
+              value="1.0"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper
+          bind:change="onChange"
+        >
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style=""
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style="width:32px;height:32px"
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style="width:40px;height:32px"
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style="width:32px;height:32px"
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-cell>
+    <wx-view
+      class="custom-class van-cell van-cell--center"
+      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-stepper>
+          <wx-view
+            class="van-stepper van-stepper--round custom-class"
+          >
+            <wx-view
+              class="minus-class van-stepper__minus van-stepper__minus--disabled"
+              data-type="minus"
+              hoverClass="van-stepper__minus--hover"
+              hoverStayTime="70"
+              style="width:22px;height:22px"
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+            <wx-input
+              class="input-class van-stepper__input"
+              disabled="{{false}}"
+              focus=""
+              style="height:22px"
+              type="digit"
+              value="{{1}}"
+              bind:blur="onBlur"
+              bind:focus="onFocus"
+              bind:input="onInput"
+            />
+            <wx-view
+              class="plus-class van-stepper__plus"
+              data-type="plus"
+              hoverClass="van-stepper__plus--hover"
+              hoverStayTime="70"
+              style="width:22px;height:22px"
+              bind:tap="onTap"
+              bind:touchend="onTouchEnd"
+              bind:touchstart="onTouchStart"
+            />
+          </wx-view>
+        </van-stepper>
+      </wx-view>
+    </wx-view>
+  </van-cell>
+  <van-toast
+    id="van-toast"
+  >
+    <van-transition
+      customClass="van-toast__container"
+    />
+  </van-toast>
+</main>
+`;
diff --git a/packages/stepper/test/demo.spec.ts b/packages/stepper/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/stepper/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();
+});