From 390eab8d0d653778e36ff8fadc1db33795497d18 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Sun, 12 Dec 2021 23:38:35 +0800
Subject: [PATCH] test(Transition): add demo test

---
 example/app.json                              |   1 +
 example/pages/transition/index.js             |  83 +----
 example/pages/transition/index.wxml           |  36 +-
 packages/transition/demo/index.json           |   8 +
 .../transition/demo/index.less                |   0
 packages/transition/demo/index.ts             |  86 +++++
 packages/transition/demo/index.wxml           |  35 ++
 .../test/__snapshots__/demo.spec.ts.snap      | 343 ++++++++++++++++++
 packages/transition/test/demo.spec.ts         |  11 +
 9 files changed, 486 insertions(+), 117 deletions(-)
 create mode 100644 packages/transition/demo/index.json
 rename example/pages/transition/index.wxss => packages/transition/demo/index.less (100%)
 create mode 100644 packages/transition/demo/index.ts
 create mode 100644 packages/transition/demo/index.wxml
 create mode 100644 packages/transition/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/transition/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index ca9c7c9e..1c7b9af5 100644
--- a/example/app.json
+++ b/example/app.json
@@ -146,6 +146,7 @@
     "van-toast": "./dist/toast/index",
     "van-toast-demo": "./dist/toast/demo/index",
     "van-transition": "./dist/transition/index",
+    "van-transition-demo": "./dist/transition/demo/index",
     "van-tree-select": "./dist/tree-select/index",
     "van-tree-select-demo": "./dist/tree-select/demo/index",
     "van-datetime-picker": "./dist/datetime-picker/index",
diff --git a/example/pages/transition/index.js b/example/pages/transition/index.js
index d4cf8efd..cc11dfda 100644
--- a/example/pages/transition/index.js
+++ b/example/pages/transition/index.js
@@ -1,84 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    show: false,
-    name: 'fade',
-    showCustom: false
-  },
-
-  onClickFade() {
-    this.trigger('fade');
-  },
-
-  onClickFadeUp() {
-    this.trigger('fade-up');
-  },
-
-  onClickFadeDown() {
-    this.trigger('fade-down');
-  },
-
-  onClickFadeLeft() {
-    this.trigger('fade-left');
-  },
-
-  onClickFadeRight() {
-    this.trigger('fade-right');
-  },
-
-  onClickSlideUp() {
-    this.trigger('slide-up');
-  },
-
-  onClickSlideDown() {
-    this.trigger('slide-down');
-  },
-
-  onClickSlideLeft() {
-    this.trigger('slide-left');
-  },
-
-  onClickSlideRight() {
-    this.trigger('slide-right');
-  },
-
-  trigger(name) {
-    this.setData({ name, show: true });
-    setTimeout(() => {
-      this.setData({ show: false });
-    }, 500);
-  },
-
-  onClickCustom() {
-    this.setData({ showCustom: true });
-
-    setTimeout(() => {
-      this.setData({ showCustom: false });
-    }, 1000);
-  },
-
-  onBeforeEnter() {
-    console.log('before enter');
-  },
-
-  onEnter() {
-    console.log('enter');
-  },
-
-  onAfterEnter() {
-    console.log('after enter');
-  },
-
-  onBeforeLeave() {
-    console.log('before leave');
-  },
-
-  onLeave() {
-    console.log('leave');
-  },
-
-  onAfterLeave() {
-    console.log('after leave');
-  },
-});
+Page();
diff --git a/example/pages/transition/index.wxml b/example/pages/transition/index.wxml
index fa613cc1..5cc62eea 100644
--- a/example/pages/transition/index.wxml
+++ b/example/pages/transition/index.wxml
@@ -1,35 +1 @@
-<demo-block title="基础用法" padding>
-  <van-cell title="Fade" bind:click="onClickFade" is-link />
-  <van-cell title="Fade Up" bind:click="onClickFadeUp" is-link />
-  <van-cell title="Fade Down" bind:click="onClickFadeDown" is-link />
-  <van-cell title="Fade Left" bind:click="onClickFadeLeft" is-link />
-  <van-cell title="Fade Right" bind:click="onClickFadeRight" is-link />
-  <van-cell title="Slide Up" bind:click="onClickSlideUp" is-link />
-  <van-cell title="Slide Down" bind:click="onClickSlideDown" is-link />
-  <van-cell title="Slide Left" bind:click="onClickSlideLeft" is-link />
-  <van-cell title="Slide Right" bind:click="onClickSlideRight" is-link />
-  <van-cell title="Custom" bind:click="onClickCustom" is-link />
-
-  <van-transition
-    show="{{ show }}"
-    name="{{ name }}"
-    custom-class="block"
-  />
-
-  <van-transition
-    show="{{ showCustom }}"
-    name=""
-    duration="{{ { enter: 300, leave: 1000 } }}"
-    custom-class="block"
-    enter-class="van-enter-class"
-    enter-active-class="van-enter-active-class"
-    leave-active-class="van-leave-active-class"
-    leave-to-class="van-leave-to-class"
-    bind:before-enter="onBeforeEnter"
-    bind:enter="onEnter"
-    bind:after-enter="onAfterEnter"
-    bind:before-leave="onBeforeLeave"
-    bind:leave="onLeave"
-    bind:after-leave="onAfterLeave"
-  />
-</demo-block>
+<van-transition-demo />
diff --git a/packages/transition/demo/index.json b/packages/transition/demo/index.json
new file mode 100644
index 00000000..a2909bb8
--- /dev/null
+++ b/packages/transition/demo/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../../cell/index",
+    "van-transition": "../../transition/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/transition/index.wxss b/packages/transition/demo/index.less
similarity index 100%
rename from example/pages/transition/index.wxss
rename to packages/transition/demo/index.less
diff --git a/packages/transition/demo/index.ts b/packages/transition/demo/index.ts
new file mode 100644
index 00000000..acb1eba7
--- /dev/null
+++ b/packages/transition/demo/index.ts
@@ -0,0 +1,86 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    show: false,
+    name: 'fade',
+    showCustom: false,
+  },
+
+  methods: {
+    onClickFade() {
+      this.trigger('fade');
+    },
+
+    onClickFadeUp() {
+      this.trigger('fade-up');
+    },
+
+    onClickFadeDown() {
+      this.trigger('fade-down');
+    },
+
+    onClickFadeLeft() {
+      this.trigger('fade-left');
+    },
+
+    onClickFadeRight() {
+      this.trigger('fade-right');
+    },
+
+    onClickSlideUp() {
+      this.trigger('slide-up');
+    },
+
+    onClickSlideDown() {
+      this.trigger('slide-down');
+    },
+
+    onClickSlideLeft() {
+      this.trigger('slide-left');
+    },
+
+    onClickSlideRight() {
+      this.trigger('slide-right');
+    },
+
+    trigger(name) {
+      this.setData({ name, show: true });
+      setTimeout(() => {
+        this.setData({ show: false });
+      }, 500);
+    },
+
+    onClickCustom() {
+      this.setData({ showCustom: true });
+
+      setTimeout(() => {
+        this.setData({ showCustom: false });
+      }, 1000);
+    },
+
+    onBeforeEnter() {
+      console.log('before enter');
+    },
+
+    onEnter() {
+      console.log('enter');
+    },
+
+    onAfterEnter() {
+      console.log('after enter');
+    },
+
+    onBeforeLeave() {
+      console.log('before leave');
+    },
+
+    onLeave() {
+      console.log('leave');
+    },
+
+    onAfterLeave() {
+      console.log('after leave');
+    },
+  },
+});
diff --git a/packages/transition/demo/index.wxml b/packages/transition/demo/index.wxml
new file mode 100644
index 00000000..fa613cc1
--- /dev/null
+++ b/packages/transition/demo/index.wxml
@@ -0,0 +1,35 @@
+<demo-block title="基础用法" padding>
+  <van-cell title="Fade" bind:click="onClickFade" is-link />
+  <van-cell title="Fade Up" bind:click="onClickFadeUp" is-link />
+  <van-cell title="Fade Down" bind:click="onClickFadeDown" is-link />
+  <van-cell title="Fade Left" bind:click="onClickFadeLeft" is-link />
+  <van-cell title="Fade Right" bind:click="onClickFadeRight" is-link />
+  <van-cell title="Slide Up" bind:click="onClickSlideUp" is-link />
+  <van-cell title="Slide Down" bind:click="onClickSlideDown" is-link />
+  <van-cell title="Slide Left" bind:click="onClickSlideLeft" is-link />
+  <van-cell title="Slide Right" bind:click="onClickSlideRight" is-link />
+  <van-cell title="Custom" bind:click="onClickCustom" is-link />
+
+  <van-transition
+    show="{{ show }}"
+    name="{{ name }}"
+    custom-class="block"
+  />
+
+  <van-transition
+    show="{{ showCustom }}"
+    name=""
+    duration="{{ { enter: 300, leave: 1000 } }}"
+    custom-class="block"
+    enter-class="van-enter-class"
+    enter-active-class="van-enter-active-class"
+    leave-active-class="van-leave-active-class"
+    leave-to-class="van-leave-to-class"
+    bind:before-enter="onBeforeEnter"
+    bind:enter="onEnter"
+    bind:after-enter="onAfterEnter"
+    bind:before-leave="onBeforeLeave"
+    bind:leave="onLeave"
+    bind:after-leave="onAfterLeave"
+  />
+</demo-block>
diff --git a/packages/transition/test/__snapshots__/demo.spec.ts.snap b/packages/transition/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..1d19b3f5
--- /dev/null
+++ b/packages/transition/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,343 @@
+// 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>
+      <van-cell
+        bind:click="onClickFade"
+      >
+        <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=""
+          >
+            Fade
+          </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="onClickFadeUp"
+      >
+        <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=""
+          >
+            Fade Up
+          </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="onClickFadeDown"
+      >
+        <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=""
+          >
+            Fade Down
+          </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="onClickFadeLeft"
+      >
+        <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=""
+          >
+            Fade Left
+          </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="onClickFadeRight"
+      >
+        <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=""
+          >
+            Fade Right
+          </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="onClickSlideUp"
+      >
+        <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=""
+          >
+            Slide Up
+          </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="onClickSlideDown"
+      >
+        <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=""
+          >
+            Slide Down
+          </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="onClickSlideLeft"
+      >
+        <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=""
+          >
+            Slide Left
+          </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="onClickSlideRight"
+      >
+        <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=""
+          >
+            Slide Right
+          </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="onClickCustom"
+      >
+        <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=""
+          >
+            Custom
+          </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-transition
+        customClass="block"
+      />
+      <van-transition
+        customClass="block"
+        enterActiveClass="van-enter-active-class"
+        enterClass="van-enter-class"
+        leaveActiveClass="van-leave-active-class"
+        leaveToClass="van-leave-to-class"
+        bind:after-enter="onAfterEnter"
+        bind:after-leave="onAfterLeave"
+        bind:before-enter="onBeforeEnter"
+        bind:before-leave="onBeforeLeave"
+        bind:enter="onEnter"
+        bind:leave="onLeave"
+      />
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/transition/test/demo.spec.ts b/packages/transition/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/transition/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();
+});