From 8560eab73c5d4a2658349b9ebabf8e5b6cc89e42 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Sun, 12 Dec 2021 23:22:30 +0800
Subject: [PATCH] test(DatetimePicker): add demo test

---
 example/app.json                              |   1 +
 example/pages/datetime-picker/index.js        |  54 +--
 example/pages/datetime-picker/index.wxml      |  53 +--
 example/pages/datetime-picker/index.wxss      |   1 -
 packages/datetime-picker/demo/index.json      |   8 +
 packages/datetime-picker/demo/index.ts        |  60 +++
 packages/datetime-picker/demo/index.wxml      |  52 +++
 .../test/__snapshots__/demo.spec.ts.snap      | 360 ++++++++++++++++++
 packages/datetime-picker/test/demo.spec.ts    |  11 +
 9 files changed, 494 insertions(+), 106 deletions(-)
 delete mode 100644 example/pages/datetime-picker/index.wxss
 create mode 100644 packages/datetime-picker/demo/index.json
 create mode 100644 packages/datetime-picker/demo/index.ts
 create mode 100644 packages/datetime-picker/demo/index.wxml
 create mode 100644 packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/datetime-picker/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index e6f45ee3..0d1aa51a 100644
--- a/example/app.json
+++ b/example/app.json
@@ -147,6 +147,7 @@
     "van-tree-select": "./dist/tree-select/index",
     "van-tree-select-demo": "./dist/tree-select/demo/index",
     "van-datetime-picker": "./dist/datetime-picker/index",
+    "van-datetime-picker-demo": "./dist/datetime-picker/demo/index",
     "van-rate": "./dist/rate/index",
     "van-rate-demo": "./dist/rate/demo/index",
     "van-collapse": "./dist/collapse/index",
diff --git a/example/pages/datetime-picker/index.js b/example/pages/datetime-picker/index.js
index 4945f3ce..cc11dfda 100644
--- a/example/pages/datetime-picker/index.js
+++ b/example/pages/datetime-picker/index.js
@@ -1,55 +1,3 @@
 import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
 
-Page({
-  data: {
-    minHour: 10,
-    maxHour: 20,
-    minDate: new Date(2018, 0, 1).getTime(),
-    maxDate: new Date(2019, 10, 1).getTime(),
-    currentDate1: new Date(2018, 2, 31).getTime(),
-    currentDate2: null,
-    currentDate3: new Date(2018, 0, 1),
-    currentDate4: '12:00',
-    loading: false,
-    formatter(type, value) {
-      if (type === 'year') {
-        return `${value}年`;
-      }
-      if (type === 'month') {
-        return `${value}月`;
-      }
-      return value;
-    },
-    filter(type, options) {
-      if (type === 'minute') {
-        return options.filter(option => option % 5 === 0);
-      }
-
-      return options;
-    }
-  },
-
-  onInput(event) {
-    const { detail, currentTarget } = event;
-    const result = this.getResult(detail, currentTarget.dataset.type);
-
-    Toast(result);
-  },
-
-  getResult(time, type) {
-    const date = new Date(time);
-    switch (type) {
-      case 'datetime':
-        return date.toLocaleString();
-      case 'date':
-        return date.toLocaleDateString();
-      case 'year-month':
-        return `${date.getFullYear()}/${date.getMonth() + 1}`;
-      case 'time':
-        return time;
-      default:
-        return '';
-    }
-  }
-});
+Page();
diff --git a/example/pages/datetime-picker/index.wxml b/example/pages/datetime-picker/index.wxml
index c13fce52..4cfc1ab4 100644
--- a/example/pages/datetime-picker/index.wxml
+++ b/example/pages/datetime-picker/index.wxml
@@ -1,52 +1 @@
-<demo-block title="选择完整时间">
-  <van-datetime-picker
-    type="datetime"
-    data-type="datetime"
-    loading="{{ loading }}"
-    value="{{ currentDate1 }}"
-    min-date="{{ minDate }}"
-    bind:input="onInput"
-  />
-</demo-block>
-
-<demo-block title="选择日期（年月日）">
-  <van-datetime-picker
-    type="date"
-    data-type="date"
-    value="{{ currentDate2 }}"
-    min-date="{{ minDate }}"
-    bind:input="onInput"
-    formatter="{{ formatter }}"
-  />
-</demo-block>
-
-<demo-block title="选择日期（年月）">
-  <van-datetime-picker
-    type="year-month"
-    data-type="year-month"
-    value="{{ currentDate3 }}"
-    min-date="{{ minDate }}"
-    bind:input="onInput"
-  />
-</demo-block>
-
-<demo-block title="选择时间">
-  <van-datetime-picker
-    type="time"
-    data-type="time"
-    value="{{ currentDate4 }}"
-    min-hour="{{ minHour }}"
-    max-hour="{{ maxHour }}"
-    bind:input="onInput"
-  />
-</demo-block>
-
-<demo-block title="选项过滤器">
-  <van-datetime-picker
-    type="time"
-    value="{{ currentDate4 }}"
-    filter="{{ filter }}"
-  />
-</demo-block>
-
-<van-toast id="van-toast" />
+<van-datetime-picker-demo />
diff --git a/example/pages/datetime-picker/index.wxss b/example/pages/datetime-picker/index.wxss
deleted file mode 100644
index 8b137891..00000000
--- a/example/pages/datetime-picker/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/datetime-picker/demo/index.json b/packages/datetime-picker/demo/index.json
new file mode 100644
index 00000000..2adda0e1
--- /dev/null
+++ b/packages/datetime-picker/demo/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-toast": "../../toast/index",
+    "van-datetime-picker": "../../datetime-picker/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/packages/datetime-picker/demo/index.ts b/packages/datetime-picker/demo/index.ts
new file mode 100644
index 00000000..5e2ab5f7
--- /dev/null
+++ b/packages/datetime-picker/demo/index.ts
@@ -0,0 +1,60 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+  data: {
+    minHour: 10,
+    maxHour: 20,
+    minDate: new Date(2018, 0, 1).getTime(),
+    maxDate: new Date(2019, 10, 1).getTime(),
+    currentDate1: new Date(2018, 2, 31).getTime(),
+    currentDate2: null,
+    currentDate3: new Date(2018, 0, 1),
+    currentDate4: '12:00',
+    loading: false,
+    formatter(type, value) {
+      if (type === 'year') {
+        return `${value}年`;
+      }
+      if (type === 'month') {
+        return `${value}月`;
+      }
+      return value;
+    },
+    filter(type, options) {
+      if (type === 'minute') {
+        return options.filter((option) => option % 5 === 0);
+      }
+
+      return options;
+    },
+  },
+
+  methods: {
+    onInput(event) {
+      const { detail, currentTarget } = event;
+      const result = this.getResult(detail, currentTarget.dataset.type);
+
+      Toast({
+        context: this,
+        message: result,
+      });
+    },
+
+    getResult(time, type) {
+      const date = new Date(time);
+      switch (type) {
+        case 'datetime':
+          return date.toLocaleString();
+        case 'date':
+          return date.toLocaleDateString();
+        case 'year-month':
+          return `${date.getFullYear()}/${date.getMonth() + 1}`;
+        case 'time':
+          return time;
+        default:
+          return '';
+      }
+    },
+  },
+});
diff --git a/packages/datetime-picker/demo/index.wxml b/packages/datetime-picker/demo/index.wxml
new file mode 100644
index 00000000..c13fce52
--- /dev/null
+++ b/packages/datetime-picker/demo/index.wxml
@@ -0,0 +1,52 @@
+<demo-block title="选择完整时间">
+  <van-datetime-picker
+    type="datetime"
+    data-type="datetime"
+    loading="{{ loading }}"
+    value="{{ currentDate1 }}"
+    min-date="{{ minDate }}"
+    bind:input="onInput"
+  />
+</demo-block>
+
+<demo-block title="选择日期（年月日）">
+  <van-datetime-picker
+    type="date"
+    data-type="date"
+    value="{{ currentDate2 }}"
+    min-date="{{ minDate }}"
+    bind:input="onInput"
+    formatter="{{ formatter }}"
+  />
+</demo-block>
+
+<demo-block title="选择日期（年月）">
+  <van-datetime-picker
+    type="year-month"
+    data-type="year-month"
+    value="{{ currentDate3 }}"
+    min-date="{{ minDate }}"
+    bind:input="onInput"
+  />
+</demo-block>
+
+<demo-block title="选择时间">
+  <van-datetime-picker
+    type="time"
+    data-type="time"
+    value="{{ currentDate4 }}"
+    min-hour="{{ minHour }}"
+    max-hour="{{ maxHour }}"
+    bind:input="onInput"
+  />
+</demo-block>
+
+<demo-block title="选项过滤器">
+  <van-datetime-picker
+    type="time"
+    value="{{ currentDate4 }}"
+    filter="{{ filter }}"
+  />
+</demo-block>
+
+<van-toast id="van-toast" />
diff --git a/packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap b/packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..15e2e7e1
--- /dev/null
+++ b/packages/datetime-picker/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,360 @@
+// 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-datetime-picker
+        data-type="datetime"
+        bind:input="onInput"
+      >
+        <van-picker
+          activeClass="active-class"
+          class="van-datetime-picker"
+          columnClass="column-class"
+          toolbarClass="toolbar-class"
+          bind:cancel="onCancel"
+          bind:change="onChange"
+          bind:confirm="onConfirm"
+        >
+          <wx-view
+            class="van-picker custom-class"
+          >
+            <wx-view
+              class="van-picker__toolbar toolbar-class"
+            >
+              <wx-view
+                class="van-picker__cancel"
+                data-type="cancel"
+                hoverClass="van-picker__cancel--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    取消
+  
+              </wx-view>
+              <wx-view
+                class="van-picker__confirm"
+                data-type="confirm"
+                hoverClass="van-picker__confirm--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    确认
+  
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-picker__columns"
+              style="height:264px"
+              catch:touchmove="noop"
+            >
+              <wx-view
+                class="van-picker__mask"
+                style="background-size:100% 110px"
+              />
+              <wx-view
+                class="van-picker__frame van-hairline--top-bottom"
+                style="height:44px"
+              />
+            </wx-view>
+          </wx-view>
+        </van-picker>
+      </van-datetime-picker>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        选择日期（年月日）
+      </wx-view>
+      <van-datetime-picker
+        data-type="date"
+        bind:input="onInput"
+      >
+        <van-picker
+          activeClass="active-class"
+          class="van-datetime-picker"
+          columnClass="column-class"
+          toolbarClass="toolbar-class"
+          bind:cancel="onCancel"
+          bind:change="onChange"
+          bind:confirm="onConfirm"
+        >
+          <wx-view
+            class="van-picker custom-class"
+          >
+            <wx-view
+              class="van-picker__toolbar toolbar-class"
+            >
+              <wx-view
+                class="van-picker__cancel"
+                data-type="cancel"
+                hoverClass="van-picker__cancel--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    取消
+  
+              </wx-view>
+              <wx-view
+                class="van-picker__confirm"
+                data-type="confirm"
+                hoverClass="van-picker__confirm--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    确认
+  
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-picker__columns"
+              style="height:264px"
+              catch:touchmove="noop"
+            >
+              <wx-view
+                class="van-picker__mask"
+                style="background-size:100% 110px"
+              />
+              <wx-view
+                class="van-picker__frame van-hairline--top-bottom"
+                style="height:44px"
+              />
+            </wx-view>
+          </wx-view>
+        </van-picker>
+      </van-datetime-picker>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        选择日期（年月）
+      </wx-view>
+      <van-datetime-picker
+        data-type="year-month"
+        bind:input="onInput"
+      >
+        <van-picker
+          activeClass="active-class"
+          class="van-datetime-picker"
+          columnClass="column-class"
+          toolbarClass="toolbar-class"
+          bind:cancel="onCancel"
+          bind:change="onChange"
+          bind:confirm="onConfirm"
+        >
+          <wx-view
+            class="van-picker custom-class"
+          >
+            <wx-view
+              class="van-picker__toolbar toolbar-class"
+            >
+              <wx-view
+                class="van-picker__cancel"
+                data-type="cancel"
+                hoverClass="van-picker__cancel--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    取消
+  
+              </wx-view>
+              <wx-view
+                class="van-picker__confirm"
+                data-type="confirm"
+                hoverClass="van-picker__confirm--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    确认
+  
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-picker__columns"
+              style="height:264px"
+              catch:touchmove="noop"
+            >
+              <wx-view
+                class="van-picker__mask"
+                style="background-size:100% 110px"
+              />
+              <wx-view
+                class="van-picker__frame van-hairline--top-bottom"
+                style="height:44px"
+              />
+            </wx-view>
+          </wx-view>
+        </van-picker>
+      </van-datetime-picker>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        选择时间
+      </wx-view>
+      <van-datetime-picker
+        data-type="time"
+        bind:input="onInput"
+      >
+        <van-picker
+          activeClass="active-class"
+          class="van-datetime-picker"
+          columnClass="column-class"
+          toolbarClass="toolbar-class"
+          bind:cancel="onCancel"
+          bind:change="onChange"
+          bind:confirm="onConfirm"
+        >
+          <wx-view
+            class="van-picker custom-class"
+          >
+            <wx-view
+              class="van-picker__toolbar toolbar-class"
+            >
+              <wx-view
+                class="van-picker__cancel"
+                data-type="cancel"
+                hoverClass="van-picker__cancel--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    取消
+  
+              </wx-view>
+              <wx-view
+                class="van-picker__confirm"
+                data-type="confirm"
+                hoverClass="van-picker__confirm--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    确认
+  
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-picker__columns"
+              style="height:264px"
+              catch:touchmove="noop"
+            >
+              <wx-view
+                class="van-picker__mask"
+                style="background-size:100% 110px"
+              />
+              <wx-view
+                class="van-picker__frame van-hairline--top-bottom"
+                style="height:44px"
+              />
+            </wx-view>
+          </wx-view>
+        </van-picker>
+      </van-datetime-picker>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        选项过滤器
+      </wx-view>
+      <van-datetime-picker>
+        <van-picker
+          activeClass="active-class"
+          class="van-datetime-picker"
+          columnClass="column-class"
+          toolbarClass="toolbar-class"
+          bind:cancel="onCancel"
+          bind:change="onChange"
+          bind:confirm="onConfirm"
+        >
+          <wx-view
+            class="van-picker custom-class"
+          >
+            <wx-view
+              class="van-picker__toolbar toolbar-class"
+            >
+              <wx-view
+                class="van-picker__cancel"
+                data-type="cancel"
+                hoverClass="van-picker__cancel--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    取消
+  
+              </wx-view>
+              <wx-view
+                class="van-picker__confirm"
+                data-type="confirm"
+                hoverClass="van-picker__confirm--hover"
+                hoverStayTime="70"
+                bind:tap="emit"
+              >
+                
+    确认
+  
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-picker__columns"
+              style="height:264px"
+              catch:touchmove="noop"
+            >
+              <wx-view
+                class="van-picker__mask"
+                style="background-size:100% 110px"
+              />
+              <wx-view
+                class="van-picker__frame van-hairline--top-bottom"
+                style="height:44px"
+              />
+            </wx-view>
+          </wx-view>
+        </van-picker>
+      </van-datetime-picker>
+    </wx-view>
+  </demo-block>
+  <van-toast
+    id="van-toast"
+  >
+    <van-transition
+      customClass="van-toast__container"
+    />
+  </van-toast>
+</main>
+`;
diff --git a/packages/datetime-picker/test/demo.spec.ts b/packages/datetime-picker/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/datetime-picker/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();
+});