From 0bc139bfb02260be03e402f2850a6ea67c431373 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Sun, 12 Dec 2021 22:48:31 +0800
Subject: [PATCH] test(NavBar): add demo test

---
 example/app.json                              |   1 +
 example/pages/nav-bar/index.js                |  10 +-
 example/pages/nav-bar/index.wxml              |  16 +-
 packages/nav-bar/demo/index.json              |   8 +
 .../nav-bar/demo/index.less                   |   0
 packages/nav-bar/demo/index.ts                |  13 +
 packages/nav-bar/demo/index.wxml              |  14 +
 .../test/__snapshots__/demo.spec.ts.snap      | 125 +++++++++
 packages/nav-bar/test/demo.spec.ts            |  11 +
 .../test/__snapshots__/demo.spec.ts.snap      | 249 ++++++++++++++++++
 10 files changed, 423 insertions(+), 24 deletions(-)
 create mode 100644 packages/nav-bar/demo/index.json
 rename example/pages/nav-bar/index.wxss => packages/nav-bar/demo/index.less (100%)
 create mode 100644 packages/nav-bar/demo/index.ts
 create mode 100644 packages/nav-bar/demo/index.wxml
 create mode 100644 packages/nav-bar/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/nav-bar/test/demo.spec.ts
 create mode 100644 packages/notice-bar/test/__snapshots__/demo.spec.ts.snap

diff --git a/example/app.json b/example/app.json
index e5e5e403..49367492 100644
--- a/example/app.json
+++ b/example/app.json
@@ -98,6 +98,7 @@
     "van-loading": "./dist/loading/index",
     "van-loading-demo": "./dist/loading/demo/index",
     "van-nav-bar": "./dist/nav-bar/index",
+    "van-nav-bar-demo": "./dist/nav-bar/demo/index",
     "van-notice-bar": "./dist/notice-bar/index",
     "van-notice-bar-demo": "./dist/notice-bar/demo/index",
     "van-notify": "./dist/notify/index",
diff --git a/example/pages/nav-bar/index.js b/example/pages/nav-bar/index.js
index 971c4793..cc11dfda 100644
--- a/example/pages/nav-bar/index.js
+++ b/example/pages/nav-bar/index.js
@@ -1,11 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  onClickLeft() {
-    wx.showToast({ title: '点击返回', icon: 'none' });
-  },
-
-  onClickRight() {
-    wx.showToast({ title: '点击按钮', icon: 'none' });
-  }
-});
+Page();
diff --git a/example/pages/nav-bar/index.wxml b/example/pages/nav-bar/index.wxml
index b61ba556..024f956e 100644
--- a/example/pages/nav-bar/index.wxml
+++ b/example/pages/nav-bar/index.wxml
@@ -1,15 +1 @@
-<demo-block title="基础用法">
-  <van-nav-bar
-    title="标题"
-    right-text="按钮"
-    left-arrow
-    bind:click-left="onClickLeft"
-    bind:click-right="onClickRight"
-  />
-</demo-block>
-
-<demo-block title="高级用法">
-  <van-nav-bar title="标题" left-text="返回" left-arrow>
-    <van-icon name="search" slot="right" custom-class="icon" size="18" />
-  </van-nav-bar>
-</demo-block>
+<van-nav-bar-demo />
diff --git a/packages/nav-bar/demo/index.json b/packages/nav-bar/demo/index.json
new file mode 100644
index 00000000..07a793c0
--- /dev/null
+++ b/packages/nav-bar/demo/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../../icon/index",
+    "van-nav-bar": "../../nav-bar/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/nav-bar/index.wxss b/packages/nav-bar/demo/index.less
similarity index 100%
rename from example/pages/nav-bar/index.wxss
rename to packages/nav-bar/demo/index.less
diff --git a/packages/nav-bar/demo/index.ts b/packages/nav-bar/demo/index.ts
new file mode 100644
index 00000000..d67178ba
--- /dev/null
+++ b/packages/nav-bar/demo/index.ts
@@ -0,0 +1,13 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  methods: {
+    onClickLeft() {
+      wx.showToast({ title: '点击返回', icon: 'none' });
+    },
+
+    onClickRight() {
+      wx.showToast({ title: '点击按钮', icon: 'none' });
+    },
+  },
+});
diff --git a/packages/nav-bar/demo/index.wxml b/packages/nav-bar/demo/index.wxml
new file mode 100644
index 00000000..0c68e2f7
--- /dev/null
+++ b/packages/nav-bar/demo/index.wxml
@@ -0,0 +1,14 @@
+<demo-block title="基础用法">
+  <van-nav-bar
+    title="标题"
+    right-text="按钮"
+    left-arrow
+    bind:click-left="onClickLeft"
+    bind:click-right="onClickRight"
+  />
+</demo-block>
+<demo-block title="高级用法">
+  <van-nav-bar title="标题" left-text="返回" left-arrow>
+    <van-icon name="search" slot="right" custom-class="icon" size="18" />
+  </van-nav-bar>
+</demo-block>
diff --git a/packages/nav-bar/test/__snapshots__/demo.spec.ts.snap b/packages/nav-bar/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..ea26da63
--- /dev/null
+++ b/packages/nav-bar/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,125 @@
+// 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-nav-bar
+        bind:click-left="onClickLeft"
+        bind:click-right="onClickRight"
+      >
+        <wx-view
+          class="van-nav-bar custom-class van-hairline--bottom"
+          style="z-index:1;padding-top:20px; "
+        >
+          <wx-view
+            class="van-nav-bar__content"
+          >
+            <wx-view
+              class="van-nav-bar__left"
+              bind:tap="onClickLeft"
+            >
+              <van-icon
+                customClass="van-nav-bar__arrow"
+              >
+                <wx-view
+                  class="custom-class van-icon van-icon-arrow-left"
+                  style="font-size:16px"
+                  bind:tap="onClick"
+                />
+              </van-icon>
+            </wx-view>
+            <wx-view
+              class="van-nav-bar__title title-class van-ellipsis"
+            >
+              标题
+            </wx-view>
+            <wx-view
+              class="van-nav-bar__right"
+              bind:tap="onClickRight"
+            >
+              <wx-view
+                class="van-nav-bar__text"
+                hoverClass="van-nav-bar__text--hover"
+                hoverStayTime="70"
+              >
+                按钮
+              </wx-view>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-nav-bar>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        高级用法
+      </wx-view>
+      <van-nav-bar>
+        <wx-view
+          class="van-nav-bar custom-class van-hairline--bottom"
+          style="z-index:1;padding-top:20px; "
+        >
+          <wx-view
+            class="van-nav-bar__content"
+          >
+            <wx-view
+              class="van-nav-bar__left"
+              bind:tap="onClickLeft"
+            >
+              <van-icon
+                customClass="van-nav-bar__arrow"
+              >
+                <wx-view
+                  class="custom-class van-icon van-icon-arrow-left"
+                  style="font-size:16px"
+                  bind:tap="onClick"
+                />
+              </van-icon>
+              <wx-view
+                class="van-nav-bar__text"
+                hoverClass="van-nav-bar__text--hover"
+                hoverStayTime="70"
+              >
+                返回
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-nav-bar__title title-class van-ellipsis"
+            >
+              标题
+            </wx-view>
+            <wx-view
+              class="van-nav-bar__right"
+              bind:tap="onClickRight"
+            >
+              <van-icon
+                customClass="icon"
+                slot="right"
+              >
+                <wx-view
+                  class="custom-class van-icon van-icon-search"
+                  style="font-size:18px"
+                  bind:tap="onClick"
+                />
+              </van-icon>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-nav-bar>
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/nav-bar/test/demo.spec.ts b/packages/nav-bar/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/nav-bar/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();
+});
diff --git a/packages/notice-bar/test/__snapshots__/demo.spec.ts.snap b/packages/notice-bar/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..ebe24efb
--- /dev/null
+++ b/packages/notice-bar/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,249 @@
+// 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-notice-bar>
+        <wx-view
+          class="custom-class van-notice-bar"
+          style=""
+          bind:tap="onClick"
+        >
+          <van-icon
+            class="van-notice-bar__left-icon"
+          >
+            <wx-view
+              class="custom-class van-icon van-icon-volume-o"
+              style="font-size:16px"
+              bind:tap="onClick"
+            />
+          </van-icon>
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content "
+            >
+              
+      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+      
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-notice-bar>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        滚动模式
+      </wx-view>
+      <van-notice-bar
+        customClass="demo-margin-bottom"
+      >
+        <wx-view
+          class="custom-class van-notice-bar"
+          style=""
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content "
+            >
+              
+      技术是开发它的人的共同灵魂。
+      
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-notice-bar>
+      <van-notice-bar
+        customClass="demo-margin-bottom"
+      >
+        <wx-view
+          class="custom-class van-notice-bar"
+          style=""
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content van-ellipsis"
+            >
+              
+      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+      
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-notice-bar>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        多行展示
+      </wx-view>
+      <van-notice-bar>
+        <wx-view
+          class="custom-class van-notice-bar van-notice-bar--wrapable"
+          style=""
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content "
+            >
+              
+      在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+      
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-notice-bar>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        通知栏模式
+      </wx-view>
+      <van-notice-bar>
+        <wx-view
+          class="custom-class van-notice-bar van-notice-bar--withicon"
+          style=""
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content "
+            >
+              
+      技术是开发它的人的共同灵魂。
+      
+            </wx-view>
+          </wx-view>
+          <van-icon
+            class="van-notice-bar__right-icon"
+            catch:tap="onClickIcon"
+          >
+            <wx-view
+              class="custom-class van-icon van-icon-cross"
+              style=""
+              bind:tap="onClick"
+            />
+          </van-icon>
+        </wx-view>
+      </van-notice-bar>
+      <van-notice-bar
+        customClass="margin-top"
+      >
+        <wx-view
+          class="custom-class van-notice-bar van-notice-bar--withicon"
+          style=""
+          bind:tap="onClick"
+        >
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content "
+            >
+              
+      技术是开发它的人的共同灵魂。
+      
+            </wx-view>
+          </wx-view>
+          <wx-navigator
+            openType="navigate"
+            url=""
+          >
+            <van-icon
+              class="van-notice-bar__right-icon"
+            >
+              <wx-view
+                class="custom-class van-icon van-icon-arrow"
+                style=""
+                bind:tap="onClick"
+              />
+            </van-icon>
+          </wx-navigator>
+        </wx-view>
+      </van-notice-bar>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义样式
+      </wx-view>
+      <van-notice-bar>
+        <wx-view
+          class="custom-class van-notice-bar"
+          style="color:#1989fa;background:#ecf9ff"
+          bind:tap="onClick"
+        >
+          <van-icon
+            class="van-notice-bar__left-icon"
+          >
+            <wx-view
+              class="custom-class van-icon van-icon-info-o"
+              style="font-size:16px"
+              bind:tap="onClick"
+            />
+          </van-icon>
+          <wx-view
+            class="van-notice-bar__wrap"
+          >
+            <wx-view
+              animation=""
+              class="van-notice-bar__content "
+            >
+              
+      技术是开发它的人的共同灵魂。
+      
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-notice-bar>
+    </wx-view>
+  </demo-block>
+</main>
+`;