From 338f90d5c55a749a37dde97bfa358615150c3be7 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Sun, 12 Dec 2021 23:03:19 +0800
Subject: [PATCH] test(Slider): add demo test

---
 example/app.json                              |   1 +
 example/pages/slider/index.js                 |  19 +-
 example/pages/slider/index.wxml               |  84 +---
 packages/slider/demo/index.json               |   7 +
 .../slider/demo/index.less                    |   0
 packages/slider/demo/index.ts                 |  22 +
 packages/slider/demo/index.wxml               |  83 ++++
 .../test/__snapshots__/demo.spec.ts.snap      | 442 ++++++++++++++++++
 packages/slider/test/demo.spec.ts             |  11 +
 9 files changed, 568 insertions(+), 101 deletions(-)
 create mode 100644 packages/slider/demo/index.json
 rename example/pages/slider/index.wxss => packages/slider/demo/index.less (100%)
 create mode 100644 packages/slider/demo/index.ts
 create mode 100644 packages/slider/demo/index.wxml
 create mode 100644 packages/slider/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/slider/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index be640f33..f90a52c6 100644
--- a/example/app.json
+++ b/example/app.json
@@ -119,6 +119,7 @@
     "van-sidebar": "./dist/sidebar/index",
     "van-sidebar-item": "./dist/sidebar-item/index",
     "van-slider": "./dist/slider/index",
+    "van-slider-demo": "./dist/slider/demo/index",
     "van-stepper": "./dist/stepper/index",
     "van-stepper-demo": "./dist/stepper/demo/index",
     "van-steps": "./dist/steps/index",
diff --git a/example/pages/slider/index.js b/example/pages/slider/index.js
index 673c7a08..cc11dfda 100644
--- a/example/pages/slider/index.js
+++ b/example/pages/slider/index.js
@@ -1,20 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    currentValue: 50,
-  },
-
-  onChange(event) {
-    wx.showToast({
-      icon: 'none',
-      title: `当前值：${event.detail}`,
-    });
-  },
-
-  onDrag(event) {
-    this.setData({
-      currentValue: event.detail.value,
-    });
-  },
-});
+Page();
diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml
index 0a35ef8d..7e03ef7f 100644
--- a/example/pages/slider/index.wxml
+++ b/example/pages/slider/index.wxml
@@ -1,83 +1 @@
-<demo-block title="基础用法">
-  <van-slider
-    value="50"
-    custom-class="slider"
-    bind:change="onChange"
-  />
-</demo-block>
-
-<demo-block title="双滑块">
-  <van-slider
-    range
-    value="{{ [20, 60 ] }}"
-    custom-class="slider"
-    bind:change="onChange"
-  />
-</demo-block>
-
-<demo-block title="指定选择范围">
-  <van-slider
-    custom-class="slider"
-    min="-50"
-    max="50"
-    bind:change="onChange"
-  />
-</demo-block>
-
-<demo-block title="禁用">
-  <van-slider
-    custom-class="slider"
-    value="50"
-    disabled
-  />
-</demo-block>
-
-<demo-block title="指定步长">
-  <van-slider
-    custom-class="slider"
-    value="50"
-    step="10"
-    bind:change="onChange"
-  />
-</demo-block>
-
-<demo-block title="自定义样式">
-  <van-slider
-    value="50"
-    custom-class="slider"
-    bar-height="4px"
-    active-color="#ee0a24"
-  />
-</demo-block>
-
-<demo-block title="自定义按钮">
-  <van-slider
-    value="{{ currentValue }}"
-    custom-class="slider"
-    use-button-slot
-    active-color="#ee0a24"
-    bind:drag="onDrag"
-  >
-    <view class="custom-button" slot="button">
-      {{ currentValue }}
-    </view>
-  </van-slider>
-</demo-block>
-
-<demo-block title="垂直方向">
-  <view style="height: 150px; padding-left: 30px;">
-    <van-slider
-      value="{{ 50 }}"
-      vertical
-      custom-class="slider"
-      bind:change="onChange"
-    />
-    <van-slider
-      value="{{ [20, 60 ] }}"
-      vertical
-      range
-      custom-class="slider"
-      bind:change="onChange"
-    />
-  </view>
-</demo-block>
+<van-slider-demo />
diff --git a/packages/slider/demo/index.json b/packages/slider/demo/index.json
new file mode 100644
index 00000000..bdfd18ec
--- /dev/null
+++ b/packages/slider/demo/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-slider": "../../slider/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/slider/index.wxss b/packages/slider/demo/index.less
similarity index 100%
rename from example/pages/slider/index.wxss
rename to packages/slider/demo/index.less
diff --git a/packages/slider/demo/index.ts b/packages/slider/demo/index.ts
new file mode 100644
index 00000000..3f8673d1
--- /dev/null
+++ b/packages/slider/demo/index.ts
@@ -0,0 +1,22 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    currentValue: 50,
+  },
+
+  methods: {
+    onChange(event) {
+      wx.showToast({
+        icon: 'none',
+        title: `当前值：${event.detail}`,
+      });
+    },
+
+    onDrag(event) {
+      this.setData({
+        currentValue: event.detail.value,
+      });
+    },
+  },
+});
diff --git a/packages/slider/demo/index.wxml b/packages/slider/demo/index.wxml
new file mode 100644
index 00000000..0a35ef8d
--- /dev/null
+++ b/packages/slider/demo/index.wxml
@@ -0,0 +1,83 @@
+<demo-block title="基础用法">
+  <van-slider
+    value="50"
+    custom-class="slider"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="双滑块">
+  <van-slider
+    range
+    value="{{ [20, 60 ] }}"
+    custom-class="slider"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="指定选择范围">
+  <van-slider
+    custom-class="slider"
+    min="-50"
+    max="50"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="禁用">
+  <van-slider
+    custom-class="slider"
+    value="50"
+    disabled
+  />
+</demo-block>
+
+<demo-block title="指定步长">
+  <van-slider
+    custom-class="slider"
+    value="50"
+    step="10"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="自定义样式">
+  <van-slider
+    value="50"
+    custom-class="slider"
+    bar-height="4px"
+    active-color="#ee0a24"
+  />
+</demo-block>
+
+<demo-block title="自定义按钮">
+  <van-slider
+    value="{{ currentValue }}"
+    custom-class="slider"
+    use-button-slot
+    active-color="#ee0a24"
+    bind:drag="onDrag"
+  >
+    <view class="custom-button" slot="button">
+      {{ currentValue }}
+    </view>
+  </van-slider>
+</demo-block>
+
+<demo-block title="垂直方向">
+  <view style="height: 150px; padding-left: 30px;">
+    <van-slider
+      value="{{ 50 }}"
+      vertical
+      custom-class="slider"
+      bind:change="onChange"
+    />
+    <van-slider
+      value="{{ [20, 60 ] }}"
+      vertical
+      range
+      custom-class="slider"
+      bind:change="onChange"
+    />
+  </view>
+</demo-block>
diff --git a/packages/slider/test/__snapshots__/demo.spec.ts.snap b/packages/slider/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..47bbc3c0
--- /dev/null
+++ b/packages/slider/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,442 @@
+// 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>
+      <van-slider
+        customClass="slider"
+        bind:change="onChange"
+      >
+        <wx-view
+          class="custom-class van-slider"
+          style="
+          background: ;
+          height: ;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 50%;
+          left: 0%;
+          top: 0;
+          
+        ; "
+          >
+            <wx-view
+              class="van-slider__button-wrapper"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        双滑块
+      </wx-view>
+      <van-slider
+        customClass="slider"
+        bind:change="onChange"
+      >
+        <wx-view
+          class="custom-class van-slider"
+          style="
+          background: ;
+          height: ;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 40%;
+          left: 20%;
+          top: 0;
+          
+        ; "
+          >
+            <wx-view
+              class="van-slider__button-wrapper-left"
+              data-index="{{0}}"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+            <wx-view
+              class="van-slider__button-wrapper-right"
+              data-index="{{1}}"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        指定选择范围
+      </wx-view>
+      <van-slider
+        customClass="slider"
+        bind:change="onChange"
+      >
+        <wx-view
+          class="custom-class van-slider"
+          style="
+          background: ;
+          height: ;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 50%;
+          left: 0%;
+          top: 0;
+          
+        ; "
+          >
+            <wx-view
+              class="van-slider__button-wrapper"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        禁用
+      </wx-view>
+      <van-slider
+        customClass="slider"
+      >
+        <wx-view
+          class="custom-class van-slider van-slider--disabled"
+          style="
+          background: ;
+          height: ;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 50%;
+          left: 0%;
+          top: 0;
+          
+        ; "
+          >
+            <wx-view
+              class="van-slider__button-wrapper"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        指定步长
+      </wx-view>
+      <van-slider
+        customClass="slider"
+        bind:change="onChange"
+      >
+        <wx-view
+          class="custom-class van-slider"
+          style="
+          background: ;
+          height: ;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 50%;
+          left: 0%;
+          top: 0;
+          
+        ; "
+          >
+            <wx-view
+              class="van-slider__button-wrapper"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义样式
+      </wx-view>
+      <van-slider
+        customClass="slider"
+      >
+        <wx-view
+          class="custom-class van-slider"
+          style="
+          background: ;
+          height: 4px;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 50%;
+          left: 0%;
+          top: 0;
+          
+        ; background-color:#ee0a24"
+          >
+            <wx-view
+              class="van-slider__button-wrapper"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="van-slider__button"
+              />
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义按钮
+      </wx-view>
+      <van-slider
+        customClass="slider"
+        bind:drag="onDrag"
+      >
+        <wx-view
+          class="custom-class van-slider"
+          style="
+          background: ;
+          height: ;
+        "
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-slider__bar"
+            style="
+          width: 50%;
+          left: 0%;
+          top: 0;
+          
+        ; background-color:#ee0a24"
+          >
+            <wx-view
+              class="van-slider__button-wrapper"
+              bind:touchcancel="onTouchEnd"
+              bind:touchend="onTouchEnd"
+              catch:touchmove="onTouchMove"
+              bind:touchstart="onTouchStart"
+            >
+              <wx-view
+                class="custom-button"
+                slot="button"
+              >
+                
+      50
+    
+              </wx-view>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-slider>
+    </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
+        style="height: 150px; padding-left: 30px;"
+      >
+        <van-slider
+          customClass="slider"
+          bind:change="onChange"
+        >
+          <wx-view
+            class="custom-class van-slider van-slider--vertical"
+            style="
+          background: ;
+          width: ;
+        "
+            bind:tap="onClick"
+          >
+            <wx-view
+              class="van-slider__bar"
+              style="
+          height: 50%;
+          left: 0;
+          top: 0%;
+          
+        ; "
+            >
+              <wx-view
+                class="van-slider__button-wrapper"
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="van-slider__button"
+                />
+              </wx-view>
+            </wx-view>
+          </wx-view>
+        </van-slider>
+        <van-slider
+          customClass="slider"
+          bind:change="onChange"
+        >
+          <wx-view
+            class="custom-class van-slider van-slider--vertical"
+            style="
+          background: ;
+          width: ;
+        "
+            bind:tap="onClick"
+          >
+            <wx-view
+              class="van-slider__bar"
+              style="
+          height: 40%;
+          left: 0;
+          top: 20%;
+          
+        ; "
+            >
+              <wx-view
+                class="van-slider__button-wrapper-left"
+                data-index="{{0}}"
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="van-slider__button"
+                />
+              </wx-view>
+              <wx-view
+                class="van-slider__button-wrapper-right"
+                data-index="{{1}}"
+                bind:touchcancel="onTouchEnd"
+                bind:touchend="onTouchEnd"
+                catch:touchmove="onTouchMove"
+                bind:touchstart="onTouchStart"
+              >
+                <wx-view
+                  class="van-slider__button"
+                />
+              </wx-view>
+            </wx-view>
+          </wx-view>
+        </van-slider>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/slider/test/demo.spec.ts b/packages/slider/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/slider/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();
+});