test(Dialog): add demo test

example/app.json

@@ -81,6 +81,7 @@
     "van-col-demo": "./dist/col/demo/index",
     "van-count-down": "./dist/count-down/index",
     "van-dialog": "./dist/dialog/index",
+    "van-dialog-demo": "./dist/dialog/demo/index",
     "van-divider": "./dist/divider/index",
     "van-empty": "./dist/empty/index",
     "van-field": "./dist/field/index",

example/pages/dialog/index.js

@@ -1,79 +1,3 @@
 import Page from '../../common/page';
-import Dialog from '../../dist/dialog/dialog';
 
-const message = '代码是写出来给人看的，附带能在机器上运行';
-
-Page({
-  data: {
-    show: false,
-  },
-
-  showCustomDialog() {
-    this.setData({ show: true });
-  },
-
-  getUserInfo(event) {
-    console.log(event.detail);
-  },
-
-  onClickThemeAlert() {
-    Dialog.alert({
-      title: '标题',
-      theme: 'round-button',
-      message,
-    });
-  },
-
-  onClickThemeAlert2() {
-    Dialog.alert({
-      theme: 'round-button',
-      message,
-    });
-  },
-
-  onClickAlert() {
-    Dialog.alert({
-      title: '标题',
-      message,
-    });
-  },
-
-  onClickAlert2() {
-    Dialog.alert({
-      message,
-    });
-  },
-
-  onClickConfirm() {
-    Dialog.confirm({
-      title: '标题',
-      message,
-    });
-  },
-
-  onClickAsyncClose() {
-    const beforeClose = (action) =>
-      new Promise((resolve) => {
-        setTimeout(() => {
-          if (action === 'confirm') {
-            resolve(true);
-          } else {
-            // 拦截取消操作
-            resolve(false);
-          }
-        }, 1000);
-      });
-
-    Dialog.confirm({
-      title: '标题',
-      message,
-      beforeClose,
-    });
-  },
-
-  onClose() {
-    this.setData({
-      show: false,
-    });
-  },
-});
+Page();

example/pages/dialog/index.wxml

@@ -1,35 +1 @@
-<demo-block card title="提示弹窗" padding>
-  <van-cell title="提示弹窗" bind:click="onClickAlert" is-link />
-  <van-cell title="提示弹窗（无标题）" bind:click="onClickAlert2" is-link />
-  <van-cell title="确认弹窗" bind:click="onClickConfirm" is-link />
-</demo-block>
-
-<demo-block card title="圆角按钮样式" padding>
-  <van-cell title="提示弹窗" bind:click="onClickThemeAlert" is-link />
-  <van-cell title="提示弹窗（无标题）" bind:click="onClickThemeAlert2" is-link />
-</demo-block>
-
-<demo-block card title="异步关闭" padding>
-  <van-cell title="异步关闭" bind:click="onClickAsyncClose" />
-</demo-block>
-
-<demo-block card title="组件调用" padding>
-  <van-cell title="组件调用" bind:click="showCustomDialog" />
-</demo-block>
-
-<van-dialog
-  use-slot
-  title="标题"
-  show="{{ show }}"
-  show-cancel-button
-  bind:close="onClose"
-  confirm-button-open-type="getUserInfo"
-  bind:getuserinfo="getUserInfo"
->
-  <image
-    class="demo-image"
-    src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"
-  />
-</van-dialog>
-
-<van-dialog id="van-dialog" />
+<van-dialog-demo />

packages/dialog/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../../cell/index",
+    "van-dialog": "../../dialog/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

packages/dialog/demo/index.ts

@@ -0,0 +1,87 @@
+import { VantComponent } from '../../common/component';
+import Dialog, { Action } from '../../dialog/dialog';
+
+const message = '代码是写出来给人看的，附带能在机器上运行';
+
+VantComponent({
+  data: {
+    show: false,
+  },
+
+  methods: {
+    showCustomDialog() {
+      this.setData({ show: true });
+    },
+
+    getUserInfo(event) {
+      console.log(event.detail);
+    },
+
+    onClickThemeAlert() {
+      Dialog.alert({
+        context: this,
+        title: '标题',
+        theme: 'round-button',
+        message,
+      });
+    },
+
+    onClickThemeAlert2() {
+      Dialog.alert({
+        context: this,
+        theme: 'round-button',
+        message,
+      });
+    },
+
+    onClickAlert() {
+      Dialog.alert({
+        context: this,
+        title: '标题',
+        message,
+      });
+    },
+
+    onClickAlert2() {
+      Dialog.alert({
+        context: this,
+        message,
+      });
+    },
+
+    onClickConfirm() {
+      Dialog.confirm({
+        context: this,
+        title: '标题',
+        message,
+      });
+    },
+
+    onClickAsyncClose() {
+      const beforeClose = (action: Action): Promise<boolean> =>
+        new Promise((resolve) => {
+          setTimeout(() => {
+            if (action === 'confirm') {
+              resolve(true);
+            } else {
+              // 拦截取消操作
+              resolve(false);
+            }
+          }, 1000);
+        });
+
+      Dialog.confirm({
+        context: this,
+        title: '标题',
+        message,
+        beforeClose,
+      });
+    },
+
+    onClose() {
+      this.setData({
+        show: false,
+      });
+    },
+  },
+});

packages/dialog/demo/index.wxml

@@ -0,0 +1,35 @@
+<demo-block card title="提示弹窗" padding>
+  <van-cell title="提示弹窗" bind:click="onClickAlert" is-link />
+  <van-cell title="提示弹窗（无标题）" bind:click="onClickAlert2" is-link />
+  <van-cell title="确认弹窗" bind:click="onClickConfirm" is-link />
+</demo-block>
+
+<demo-block card title="圆角按钮样式" padding>
+  <van-cell title="提示弹窗" bind:click="onClickThemeAlert" is-link />
+  <van-cell title="提示弹窗（无标题）" bind:click="onClickThemeAlert2" is-link />
+</demo-block>
+
+<demo-block card title="异步关闭" padding>
+  <van-cell title="异步关闭" bind:click="onClickAsyncClose" />
+</demo-block>
+
+<demo-block card title="组件调用" padding>
+  <van-cell title="组件调用" bind:click="showCustomDialog" />
+</demo-block>
+
+<van-dialog
+  use-slot
+  title="标题"
+  show="{{ show }}"
+  show-cancel-button
+  bind:close="onClose"
+  confirm-button-open-type="getUserInfo"
+  bind:getuserinfo="getUserInfo"
+>
+  <image
+    class="demo-image"
+    src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"
+  />
+</van-dialog>
+
+<van-dialog id="van-dialog" />

packages/dialog/dialog.ts

@@ -22,7 +22,7 @@ interface DialogOptions {
    * @deprecated use beforeClose instead
    */
   asyncClose?: boolean;
-  beforeClose?: null | ((action: Action) => Promise<void> | void);
+  beforeClose?: null | ((action: Action) => Promise<void | boolean> | void);
   businessId?: number;
   sessionFrom?: string;
   overlayStyle?: string;

packages/dialog/test/__snapshots__/demo.spec.ts.snap

@@ -0,0 +1,298 @@
+// 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>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          bind:click="onClickAlert"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            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-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-cell
+          bind:click="onClickAlert2"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            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-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-cell
+          bind:click="onClickConfirm"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            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-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+      </wx-view>
+    </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>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          bind:click="onClickThemeAlert"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            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-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+        <van-cell
+          bind:click="onClickThemeAlert2"
+        >
+          <wx-view
+            class="custom-class van-cell van-cell--clickable"
+            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-icon
+              class="van-cell__right-icon-wrap right-icon-class"
+              customClass="van-cell__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-view>
+        </van-cell>
+      </wx-view>
+    </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>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          bind:click="onClickAsyncClose"
+        >
+          <wx-view
+            class="custom-class van-cell"
+            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"
+            />
+          </wx-view>
+        </van-cell>
+      </wx-view>
+    </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>
+      <wx-view
+        class="demo-block__card"
+      >
+        <van-cell
+          bind:click="showCustomDialog"
+        >
+          <wx-view
+            class="custom-class van-cell"
+            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"
+            />
+          </wx-view>
+        </van-cell>
+      </wx-view>
+    </wx-view>
+  </demo-block>
+  <van-dialog
+    bind:close="onClose"
+    bind:getuserinfo="getUserInfo"
+  >
+    <van-popup
+      customClass="van-dialog van-dialog--default "
+      bind:close="onClickOverlay"
+    >
+      <van-overlay
+        bind:click="onClickOverlay"
+      >
+        <van-transition
+          customClass="van-overlay"
+          bind:tap="onClick"
+          catch:touchmove="noop"
+        />
+      </van-overlay>
+    </van-popup>
+  </van-dialog>
+  <van-dialog>
+    <van-popup
+      customClass="van-dialog van-dialog--default "
+      bind:close="onClickOverlay"
+    >
+      <van-overlay
+        bind:click="onClickOverlay"
+      >
+        <van-transition
+          customClass="van-overlay"
+          bind:tap="onClick"
+          catch:touchmove="noop"
+        />
+      </van-overlay>
+    </van-popup>
+  </van-dialog>
+</main>
+`;

packages/dialog/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();
+});