From 25914982044cbf550b5e395d71d1070c71ab79c6 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Wed, 1 Dec 2021 23:47:46 +0800
Subject: [PATCH] test(Area): add test demo

---
 example/app.json                              |   1 +
 example/pages/area/index.js                   |  42 +----
 example/pages/area/index.wxml                 |  47 +----
 example/pages/area/index.wxss                 |   1 -
 packages/area/demo/index.json                 |   8 +
 packages/area/demo/index.ts                   |  51 ++++++
 packages/area/demo/index.wxml                 |  11 ++
 .../area/test/__snapshots__/demo.spec.ts.snap | 162 ++++++++++++++++++
 packages/area/test/demo.spec.ts               |  11 ++
 9 files changed, 246 insertions(+), 88 deletions(-)
 delete mode 100644 example/pages/area/index.wxss
 create mode 100644 packages/area/demo/index.json
 create mode 100644 packages/area/demo/index.ts
 create mode 100644 packages/area/demo/index.wxml
 create mode 100644 packages/area/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/area/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index 5e1e2f3f..8c9d7fb2 100644
--- a/example/app.json
+++ b/example/app.json
@@ -66,6 +66,7 @@
     "van-action-sheet": "./dist/action-sheet/index",
     "van-action-sheet-demo": "./dist/action-sheet/demo/index",
     "van-area": "./dist/area/index",
+    "van-area-demo": "./dist/area/demo/index",
     "van-button": "./dist/button/index",
     "van-button-demo": "./dist/button/demo/index",
     "van-card": "./dist/card/index",
diff --git a/example/pages/area/index.js b/example/pages/area/index.js
index 7023ccaf..cc11dfda 100644
--- a/example/pages/area/index.js
+++ b/example/pages/area/index.js
@@ -1,43 +1,3 @@
 import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
 
-const db = wx.cloud.database();
-
-Page({
-  data: {
-    areaList: {},
-    loading: true,
-    value: 330302
-  },
-
-  onShow() {
-    db.collection('region').limit(1).get().then(res => {
-      if (res.data && res.data.length > 0) {
-        this.setData({
-          loading: false,
-          areaList: res.data[0]
-        });
-      }
-    })
-      .catch(err => {
-        console.log(err);
-        this.setData({
-          loading: false,
-        });
-      });
-  },
-
-  onChange(event) {
-    const { values } = event.detail;
-
-    Toast(values.map(item => item.name).join('-'));
-  },
-
-  onConfirm(event) {
-    console.log(event);
-  },
-
-  onCancel(event) {
-    console.log(event);
-  }
-});
+Page();
diff --git a/example/pages/area/index.wxml b/example/pages/area/index.wxml
index 79e453f2..762dc53e 100644
--- a/example/pages/area/index.wxml
+++ b/example/pages/area/index.wxml
@@ -1,46 +1 @@
-<demo-block title="基础用法">
-  <van-area
-    value="{{ value }}"
-    loading="{{ loading }}"
-    area-list="{{ areaList }}"
-    bind:change="onChange"
-    bind:confirm="onConfirm"
-    bind:cancel="onCancel"
-  />
-</demo-block>
-
-<demo-block title="选中省市县">
-  <van-area
-    value="{{ value }}"
-    loading="{{ loading }}"
-    area-list="{{ areaList }}"
-    bind:change="onChange"
-    bind:confirm="onConfirm"
-  />
-</demo-block>
-
-<demo-block title="配置显示列">
-  <van-area
-    title="标题"
-    columns-num="{{ 2 }}"
-    loading="{{ loading }}"
-    area-list="{{ areaList }}"
-    bind:change="onChange"
-    bind:confirm="onConfirm"
-  />
-</demo-block>
-
-<demo-block title="配置列占位提示文字">
-  <van-area
-    title="标题"
-    columns-num="{{ 2 }}"
-    loading="{{ loading }}"
-    area-list="{{ areaList }}"
-    columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"
-    bind:change="onChange"
-    bind:confirm="onConfirm"
-  />
-</demo-block>
-
-
-<van-toast id="van-toast" />
+<van-area-demo />
diff --git a/example/pages/area/index.wxss b/example/pages/area/index.wxss
deleted file mode 100644
index 8b137891..00000000
--- a/example/pages/area/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/area/demo/index.json b/packages/area/demo/index.json
new file mode 100644
index 00000000..f9c45f20
--- /dev/null
+++ b/packages/area/demo/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-area": "../../area/index",
+    "van-toast": "../../toast/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/packages/area/demo/index.ts b/packages/area/demo/index.ts
new file mode 100644
index 00000000..b1262ae0
--- /dev/null
+++ b/packages/area/demo/index.ts
@@ -0,0 +1,51 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+const db = wx.cloud?.database();
+
+VantComponent({
+  data: {
+    areaList: {},
+    loading: true,
+    value: 330302,
+  },
+
+  mounted() {
+    db?.collection('region')
+      .limit(1)
+      .get()
+      .then((res) => {
+        if (res.data && res.data.length > 0) {
+          this.setData({
+            loading: false,
+            areaList: res.data[0],
+          });
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        this.setData({
+          loading: false,
+        });
+      });
+  },
+
+  methods: {
+    onChange(event) {
+      const { values } = event.detail;
+
+      Toast({
+        context: this,
+        message: values.map((item) => item.name).join('-'),
+      });
+    },
+
+    onConfirm(event) {
+      console.log(event);
+    },
+
+    onCancel(event) {
+      console.log(event);
+    },
+  },
+});
diff --git a/packages/area/demo/index.wxml b/packages/area/demo/index.wxml
new file mode 100644
index 00000000..ac048b64
--- /dev/null
+++ b/packages/area/demo/index.wxml
@@ -0,0 +1,11 @@
+<demo-block title="基础用法">
+  <van-area
+    value="{{ value }}"
+    loading="{{ loading }}"
+    area-list="{{ areaList }}"
+    bind:change="onChange"
+    bind:confirm="onConfirm"
+    bind:cancel="onCancel"
+  />
+</demo-block>
+<van-toast id="van-toast" />
diff --git a/packages/area/test/__snapshots__/demo.spec.ts.snap b/packages/area/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..3ee0f137
--- /dev/null
+++ b/packages/area/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,162 @@
+// 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-area
+        bind:cancel="onCancel"
+        bind:change="onChange"
+        bind:confirm="onConfirm"
+      >
+        <van-picker
+          activeClass="active-class"
+          class="van-area__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__loading"
+            >
+              <loading>
+                <wx-view
+                  class="custom-class van-loading"
+                >
+                  <wx-view
+                    class="van-loading__spinner van-loading__spinner--circular"
+                    style="color:#1989fa"
+                  />
+                  <wx-view
+                    class="van-loading__text"
+                    style=""
+                  />
+                </wx-view>
+              </loading>
+            </wx-view>
+            <wx-view
+              class="van-picker__columns"
+              style="height:264px"
+              catch:touchmove="noop"
+            >
+              <picker-column
+                activeClass="active-class"
+                class="van-picker__column"
+                customClass="column-class"
+                data-index="{{0}}"
+                bind:change="onChange"
+              >
+                <wx-view
+                  class="van-picker-column custom-class"
+                  style="height:264px"
+                  bind:touchcancel="onTouchEnd"
+                  bind:touchend="onTouchEnd"
+                  catch:touchmove="onTouchMove"
+                  bind:touchstart="onTouchStart"
+                >
+                  <wx-view
+                    style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
+                  />
+                </wx-view>
+              </picker-column>
+              <picker-column
+                activeClass="active-class"
+                class="van-picker__column"
+                customClass="column-class"
+                data-index="{{1}}"
+                bind:change="onChange"
+              >
+                <wx-view
+                  class="van-picker-column custom-class"
+                  style="height:264px"
+                  bind:touchcancel="onTouchEnd"
+                  bind:touchend="onTouchEnd"
+                  catch:touchmove="onTouchMove"
+                  bind:touchstart="onTouchStart"
+                >
+                  <wx-view
+                    style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
+                  />
+                </wx-view>
+              </picker-column>
+              <picker-column
+                activeClass="active-class"
+                class="van-picker__column"
+                customClass="column-class"
+                data-index="{{2}}"
+                bind:change="onChange"
+              >
+                <wx-view
+                  class="van-picker-column custom-class"
+                  style="height:264px"
+                  bind:touchcancel="onTouchEnd"
+                  bind:touchend="onTouchEnd"
+                  catch:touchmove="onTouchMove"
+                  bind:touchstart="onTouchStart"
+                >
+                  <wx-view
+                    style="transition:transform 0ms;line-height:44px;transform:translate3d(0, 110px, 0)"
+                  />
+                </wx-view>
+              </picker-column>
+              <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-area>
+    </wx-view>
+  </demo-block>
+  <van-toast
+    id="van-toast"
+  >
+    <van-transition
+      customClass="van-toast__container"
+    />
+  </van-toast>
+</main>
+`;
diff --git a/packages/area/test/demo.spec.ts b/packages/area/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/area/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();
+});