From 689c5d82ed0cfc1ae6ffcd1716fdcd8b135a5028 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Thu, 2 Dec 2021 23:51:17 +0800
Subject: [PATCH] test(Search): add demo test

---
 example/app.json                              |   1 +
 example/pages/search/index.js                 |  44 +-
 example/pages/search/index.wxml               |  57 +-
 example/pages/search/index.wxss               |   0
 packages/search/demo/index.json               |   7 +
 packages/search/demo/index.ts                 |  47 ++
 packages/search/demo/index.wxml               |  56 ++
 .../test/__snapshots__/demo.spec.ts.snap      | 679 ++++++++++++++++++
 packages/search/test/demo.spec.ts             |  11 +
 9 files changed, 803 insertions(+), 99 deletions(-)
 delete mode 100644 example/pages/search/index.wxss
 create mode 100644 packages/search/demo/index.json
 create mode 100644 packages/search/demo/index.ts
 create mode 100644 packages/search/demo/index.wxml
 create mode 100644 packages/search/test/__snapshots__/demo.spec.ts.snap
 create mode 100644 packages/search/test/demo.spec.ts

diff --git a/example/app.json b/example/app.json
index 0656fb8a..f10d1c23 100644
--- a/example/app.json
+++ b/example/app.json
@@ -107,6 +107,7 @@
     "van-radio-group": "./dist/radio-group/index",
     "van-row": "./dist/row/index",
     "van-search": "./dist/search/index",
+    "van-search-demo": "./dist/search/demo/index",
     "van-sidebar": "./dist/sidebar/index",
     "van-sidebar-item": "./dist/sidebar-item/index",
     "van-slider": "./dist/slider/index",
diff --git a/example/pages/search/index.js b/example/pages/search/index.js
index bb7cf7a4..cc11dfda 100644
--- a/example/pages/search/index.js
+++ b/example/pages/search/index.js
@@ -1,45 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    value: ''
-  },
-
-  onChange(e) {
-    this.setData({
-      value: e.detail
-    });
-  },
-
-  onSearch() {
-    if (this.data.value) {
-      wx.showToast({
-        title: '搜索：' + this.data.value,
-        icon: 'none'
-      });
-    }
-  },
-
-  onClick() {
-    if (this.data.value) {
-      wx.showToast({
-        title: '搜索：' + this.data.value,
-        icon: 'none'
-      });
-    }
-  },
-
-  onCancel() {
-    wx.showToast({
-      title: '取消',
-      icon: 'none'
-    });
-  },
-
-  onClear() {
-    wx.showToast({
-      title: '清空',
-      icon: 'none'
-    });
-  }
-});
+Page();
diff --git a/example/pages/search/index.wxml b/example/pages/search/index.wxml
index 4c60d927..8079da56 100644
--- a/example/pages/search/index.wxml
+++ b/example/pages/search/index.wxml
@@ -1,56 +1 @@
-<demo-block title="基本用法">
-  <van-search
-    model:value="{{ value }}"
-    placeholder="请输入搜索关键词"
-    bind:search="onSearch"
-  />
-</demo-block>
-
-<demo-block title="事件监听">
-  <van-search
-    model:value="{{ value }}"
-    show-action
-    placeholder="请输入搜索关键词"
-    bind:search="onSearch"
-    bind:cancel="onCancel"
-    bind:clear="onClear"
-  />
-</demo-block>
-
-<demo-block title="搜索框内容对齐">
-  <van-search
-    model:value="{{ value }}"
-    input-align="center"
-    placeholder="请输入搜索关键词"
-  />
-</demo-block>
-
-<demo-block title="禁用搜索框">
-  <van-search
-    disabled
-    model:value="{{ value }}"
-    placeholder="请输入搜索关键词"
-  />
-</demo-block>
-
-<demo-block title="自定义背景色">
-  <van-search
-    model:value="{{ value }}"
-    shape="round"
-    background="#4fc08d"
-    placeholder="请输入搜索关键词"
-  />
-</demo-block>
-
-<demo-block title="自定义按钮">
-  <van-search
-    model:value="{{ value }}"
-    label="地址"
-    shape="round"
-    placeholder="请输入搜索关键词"
-    use-action-slot
-    bind:search="onSearch"
-  >
-    <view slot="action" bind:tap="onClick">搜索</view>
-  </van-search>
-</demo-block>
+<van-search-demo />
diff --git a/example/pages/search/index.wxss b/example/pages/search/index.wxss
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/search/demo/index.json b/packages/search/demo/index.json
new file mode 100644
index 00000000..d8396d84
--- /dev/null
+++ b/packages/search/demo/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-search": "../../search/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/packages/search/demo/index.ts b/packages/search/demo/index.ts
new file mode 100644
index 00000000..372149ba
--- /dev/null
+++ b/packages/search/demo/index.ts
@@ -0,0 +1,47 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    value: '',
+  },
+
+  methods: {
+    onChange(e) {
+      this.setData({
+        value: e.detail,
+      });
+    },
+
+    onSearch() {
+      if (this.data.value) {
+        wx.showToast({
+          title: '搜索：' + this.data.value,
+          icon: 'none',
+        });
+      }
+    },
+
+    onClick() {
+      if (this.data.value) {
+        wx.showToast({
+          title: '搜索：' + this.data.value,
+          icon: 'none',
+        });
+      }
+    },
+
+    onCancel() {
+      wx.showToast({
+        title: '取消',
+        icon: 'none',
+      });
+    },
+
+    onClear() {
+      wx.showToast({
+        title: '清空',
+        icon: 'none',
+      });
+    },
+  },
+});
diff --git a/packages/search/demo/index.wxml b/packages/search/demo/index.wxml
new file mode 100644
index 00000000..4c60d927
--- /dev/null
+++ b/packages/search/demo/index.wxml
@@ -0,0 +1,56 @@
+<demo-block title="基本用法">
+  <van-search
+    model:value="{{ value }}"
+    placeholder="请输入搜索关键词"
+    bind:search="onSearch"
+  />
+</demo-block>
+
+<demo-block title="事件监听">
+  <van-search
+    model:value="{{ value }}"
+    show-action
+    placeholder="请输入搜索关键词"
+    bind:search="onSearch"
+    bind:cancel="onCancel"
+    bind:clear="onClear"
+  />
+</demo-block>
+
+<demo-block title="搜索框内容对齐">
+  <van-search
+    model:value="{{ value }}"
+    input-align="center"
+    placeholder="请输入搜索关键词"
+  />
+</demo-block>
+
+<demo-block title="禁用搜索框">
+  <van-search
+    disabled
+    model:value="{{ value }}"
+    placeholder="请输入搜索关键词"
+  />
+</demo-block>
+
+<demo-block title="自定义背景色">
+  <van-search
+    model:value="{{ value }}"
+    shape="round"
+    background="#4fc08d"
+    placeholder="请输入搜索关键词"
+  />
+</demo-block>
+
+<demo-block title="自定义按钮">
+  <van-search
+    model:value="{{ value }}"
+    label="地址"
+    shape="round"
+    placeholder="请输入搜索关键词"
+    use-action-slot
+    bind:search="onSearch"
+  >
+    <view slot="action" bind:tap="onClick">搜索</view>
+  </van-search>
+</demo-block>
diff --git a/packages/search/test/__snapshots__/demo.spec.ts.snap b/packages/search/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..cc72ecb9
--- /dev/null
+++ b/packages/search/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,679 @@
+// 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-search
+        bind:search="onSearch"
+      >
+        <wx-view
+          class="van-search custom-class"
+          style="background: #ffffff"
+        >
+          <wx-view
+            class="van-search__content van-search__content--square"
+          >
+            <van-field
+              class="van-search__field field-class"
+              inputClass="input-class"
+              bind:blur="onBlur"
+              bind:change="onChange"
+              bind:clear="onClear"
+              bind:click-input="onClickInput"
+              bind:confirm="onSearch"
+              bind:focus="onFocus"
+            >
+              <van-cell
+                customClass="van-field"
+              >
+                <wx-view
+                  class="custom-class van-cell van-cell--borderless"
+                  hoverClass="van-cell--hover hover-class"
+                  hoverStayTime="70"
+                  style="padding: 5px 10px 5px 0; background-color: transparent;"
+                  bind:tap="onClick"
+                >
+                  <van-icon
+                    class="van-cell__left-icon-wrap"
+                    customClass="van-cell__left-icon"
+                  >
+                    <wx-view
+                      class="custom-class van-icon van-icon-search"
+                      style=""
+                      bind:tap="onClick"
+                    />
+                  </van-icon>
+                  <wx-view
+                    class="van-cell__title title-class"
+                    style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
+                  />
+                  <wx-view
+                    class="van-cell__value value-class"
+                  >
+                    <wx-view
+                      class="van-field__body van-field__body--search"
+                    >
+                      <wx-view
+                        class="van-field__control van-field__control--custom"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-input
+                        adjustPosition="{{true}}"
+                        alwaysEmbed="{{false}}"
+                        autoFocus="{{false}}"
+                        class="van-field__control input-class"
+                        confirmHold="{{false}}"
+                        confirmType="search"
+                        cursor="{{-1}}"
+                        cursorSpacing="{{50}}"
+                        disabled="{{false}}"
+                        focus="{{false}}"
+                        holdKeyboard="{{false}}"
+                        maxlength="{{-1}}"
+                        password="{{false}}"
+                        placeholder="请输入搜索关键词"
+                        placeholderClass="van-field__placeholder"
+                        placeholderStyle=""
+                        selectionEnd="{{-1}}"
+                        selectionStart="{{-1}}"
+                        type="search"
+                        value=""
+                        bind:blur="onBlur"
+                        bind:confirm="onConfirm"
+                        bind:focus="onFocus"
+                        bind:input="onInput"
+                        bind:keyboardheightchange="onKeyboardHeightChange"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-view
+                        class="van-field__icon-container"
+                        bind:tap="onClickIcon"
+                      />
+                      <wx-view
+                        class="van-field__button"
+                      />
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </van-cell>
+            </van-field>
+          </wx-view>
+        </wx-view>
+      </van-search>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        事件监听
+      </wx-view>
+      <van-search
+        bind:cancel="onCancel"
+        bind:clear="onClear"
+        bind:search="onSearch"
+      >
+        <wx-view
+          class="van-search van-search--withaction custom-class"
+          style="background: #ffffff"
+        >
+          <wx-view
+            class="van-search__content van-search__content--square"
+          >
+            <van-field
+              class="van-search__field field-class"
+              inputClass="input-class"
+              bind:blur="onBlur"
+              bind:change="onChange"
+              bind:clear="onClear"
+              bind:click-input="onClickInput"
+              bind:confirm="onSearch"
+              bind:focus="onFocus"
+            >
+              <van-cell
+                customClass="van-field"
+              >
+                <wx-view
+                  class="custom-class van-cell van-cell--borderless"
+                  hoverClass="van-cell--hover hover-class"
+                  hoverStayTime="70"
+                  style="padding: 5px 10px 5px 0; background-color: transparent;"
+                  bind:tap="onClick"
+                >
+                  <van-icon
+                    class="van-cell__left-icon-wrap"
+                    customClass="van-cell__left-icon"
+                  >
+                    <wx-view
+                      class="custom-class van-icon van-icon-search"
+                      style=""
+                      bind:tap="onClick"
+                    />
+                  </van-icon>
+                  <wx-view
+                    class="van-cell__title title-class"
+                    style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
+                  />
+                  <wx-view
+                    class="van-cell__value value-class"
+                  >
+                    <wx-view
+                      class="van-field__body van-field__body--search"
+                    >
+                      <wx-view
+                        class="van-field__control van-field__control--custom"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-input
+                        adjustPosition="{{true}}"
+                        alwaysEmbed="{{false}}"
+                        autoFocus="{{false}}"
+                        class="van-field__control input-class"
+                        confirmHold="{{false}}"
+                        confirmType="search"
+                        cursor="{{-1}}"
+                        cursorSpacing="{{50}}"
+                        disabled="{{false}}"
+                        focus="{{false}}"
+                        holdKeyboard="{{false}}"
+                        maxlength="{{-1}}"
+                        password="{{false}}"
+                        placeholder="请输入搜索关键词"
+                        placeholderClass="van-field__placeholder"
+                        placeholderStyle=""
+                        selectionEnd="{{-1}}"
+                        selectionStart="{{-1}}"
+                        type="search"
+                        value=""
+                        bind:blur="onBlur"
+                        bind:confirm="onConfirm"
+                        bind:focus="onFocus"
+                        bind:input="onInput"
+                        bind:keyboardheightchange="onKeyboardHeightChange"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-view
+                        class="van-field__icon-container"
+                        bind:tap="onClickIcon"
+                      />
+                      <wx-view
+                        class="van-field__button"
+                      />
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </van-cell>
+            </van-field>
+          </wx-view>
+          <wx-view
+            class="van-search__action"
+            hoverClass="van-search__action--hover"
+            hoverStayTime="70"
+          >
+            <wx-view
+              class="cancel-class"
+              bind:tap="onCancel"
+            >
+              取消
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-search>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        搜索框内容对齐
+      </wx-view>
+      <van-search>
+        <wx-view
+          class="van-search custom-class"
+          style="background: #ffffff"
+        >
+          <wx-view
+            class="van-search__content van-search__content--square"
+          >
+            <van-field
+              class="van-search__field field-class"
+              inputClass="input-class"
+              bind:blur="onBlur"
+              bind:change="onChange"
+              bind:clear="onClear"
+              bind:click-input="onClickInput"
+              bind:confirm="onSearch"
+              bind:focus="onFocus"
+            >
+              <van-cell
+                customClass="van-field"
+              >
+                <wx-view
+                  class="custom-class van-cell van-cell--borderless"
+                  hoverClass="van-cell--hover hover-class"
+                  hoverStayTime="70"
+                  style="padding: 5px 10px 5px 0; background-color: transparent;"
+                  bind:tap="onClick"
+                >
+                  <van-icon
+                    class="van-cell__left-icon-wrap"
+                    customClass="van-cell__left-icon"
+                  >
+                    <wx-view
+                      class="custom-class van-icon van-icon-search"
+                      style=""
+                      bind:tap="onClick"
+                    />
+                  </van-icon>
+                  <wx-view
+                    class="van-cell__title title-class"
+                    style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
+                  />
+                  <wx-view
+                    class="van-cell__value value-class"
+                  >
+                    <wx-view
+                      class="van-field__body van-field__body--search"
+                    >
+                      <wx-view
+                        class="van-field__control van-field__control--center van-field__control--custom"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-input
+                        adjustPosition="{{true}}"
+                        alwaysEmbed="{{false}}"
+                        autoFocus="{{false}}"
+                        class="van-field__control van-field__control--center input-class"
+                        confirmHold="{{false}}"
+                        confirmType="search"
+                        cursor="{{-1}}"
+                        cursorSpacing="{{50}}"
+                        disabled="{{false}}"
+                        focus="{{false}}"
+                        holdKeyboard="{{false}}"
+                        maxlength="{{-1}}"
+                        password="{{false}}"
+                        placeholder="请输入搜索关键词"
+                        placeholderClass="van-field__placeholder"
+                        placeholderStyle=""
+                        selectionEnd="{{-1}}"
+                        selectionStart="{{-1}}"
+                        type="search"
+                        value=""
+                        bind:blur="onBlur"
+                        bind:confirm="onConfirm"
+                        bind:focus="onFocus"
+                        bind:input="onInput"
+                        bind:keyboardheightchange="onKeyboardHeightChange"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-view
+                        class="van-field__icon-container"
+                        bind:tap="onClickIcon"
+                      />
+                      <wx-view
+                        class="van-field__button"
+                      />
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </van-cell>
+            </van-field>
+          </wx-view>
+        </wx-view>
+      </van-search>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        禁用搜索框
+      </wx-view>
+      <van-search>
+        <wx-view
+          class="van-search custom-class"
+          style="background: #ffffff"
+        >
+          <wx-view
+            class="van-search__content van-search__content--square"
+          >
+            <van-field
+              class="van-search__field field-class"
+              inputClass="input-class"
+              bind:blur="onBlur"
+              bind:change="onChange"
+              bind:clear="onClear"
+              bind:click-input="onClickInput"
+              bind:confirm="onSearch"
+              bind:focus="onFocus"
+            >
+              <van-cell
+                customClass="van-field"
+              >
+                <wx-view
+                  class="custom-class van-cell van-cell--borderless"
+                  hoverClass="van-cell--hover hover-class"
+                  hoverStayTime="70"
+                  style="padding: 5px 10px 5px 0; background-color: transparent;"
+                  bind:tap="onClick"
+                >
+                  <van-icon
+                    class="van-cell__left-icon-wrap"
+                    customClass="van-cell__left-icon"
+                  >
+                    <wx-view
+                      class="custom-class van-icon van-icon-search"
+                      style=""
+                      bind:tap="onClick"
+                    />
+                  </van-icon>
+                  <wx-view
+                    class="van-cell__title title-class"
+                    style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
+                  />
+                  <wx-view
+                    class="van-cell__value value-class"
+                  >
+                    <wx-view
+                      class="van-field__body van-field__body--search"
+                    >
+                      <wx-view
+                        class="van-field__control van-field__control--custom"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-input
+                        adjustPosition="{{true}}"
+                        alwaysEmbed="{{false}}"
+                        autoFocus="{{false}}"
+                        class="van-field__control van-field__control--disabled input-class"
+                        confirmHold="{{false}}"
+                        confirmType="search"
+                        cursor="{{-1}}"
+                        cursorSpacing="{{50}}"
+                        disabled="{{true}}"
+                        focus="{{false}}"
+                        holdKeyboard="{{false}}"
+                        maxlength="{{-1}}"
+                        password="{{false}}"
+                        placeholder="请输入搜索关键词"
+                        placeholderClass="van-field__placeholder"
+                        placeholderStyle=""
+                        selectionEnd="{{-1}}"
+                        selectionStart="{{-1}}"
+                        type="search"
+                        value=""
+                        bind:blur="onBlur"
+                        bind:confirm="onConfirm"
+                        bind:focus="onFocus"
+                        bind:input="onInput"
+                        bind:keyboardheightchange="onKeyboardHeightChange"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-view
+                        class="van-field__icon-container"
+                        bind:tap="onClickIcon"
+                      />
+                      <wx-view
+                        class="van-field__button"
+                      />
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </van-cell>
+            </van-field>
+          </wx-view>
+        </wx-view>
+      </van-search>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义背景色
+      </wx-view>
+      <van-search>
+        <wx-view
+          class="van-search custom-class"
+          style="background: #4fc08d"
+        >
+          <wx-view
+            class="van-search__content van-search__content--round"
+          >
+            <van-field
+              class="van-search__field field-class"
+              inputClass="input-class"
+              bind:blur="onBlur"
+              bind:change="onChange"
+              bind:clear="onClear"
+              bind:click-input="onClickInput"
+              bind:confirm="onSearch"
+              bind:focus="onFocus"
+            >
+              <van-cell
+                customClass="van-field"
+              >
+                <wx-view
+                  class="custom-class van-cell van-cell--borderless"
+                  hoverClass="van-cell--hover hover-class"
+                  hoverStayTime="70"
+                  style="padding: 5px 10px 5px 0; background-color: transparent;"
+                  bind:tap="onClick"
+                >
+                  <van-icon
+                    class="van-cell__left-icon-wrap"
+                    customClass="van-cell__left-icon"
+                  >
+                    <wx-view
+                      class="custom-class van-icon van-icon-search"
+                      style=""
+                      bind:tap="onClick"
+                    />
+                  </van-icon>
+                  <wx-view
+                    class="van-cell__title title-class"
+                    style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
+                  />
+                  <wx-view
+                    class="van-cell__value value-class"
+                  >
+                    <wx-view
+                      class="van-field__body van-field__body--search"
+                    >
+                      <wx-view
+                        class="van-field__control van-field__control--custom"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-input
+                        adjustPosition="{{true}}"
+                        alwaysEmbed="{{false}}"
+                        autoFocus="{{false}}"
+                        class="van-field__control input-class"
+                        confirmHold="{{false}}"
+                        confirmType="search"
+                        cursor="{{-1}}"
+                        cursorSpacing="{{50}}"
+                        disabled="{{false}}"
+                        focus="{{false}}"
+                        holdKeyboard="{{false}}"
+                        maxlength="{{-1}}"
+                        password="{{false}}"
+                        placeholder="请输入搜索关键词"
+                        placeholderClass="van-field__placeholder"
+                        placeholderStyle=""
+                        selectionEnd="{{-1}}"
+                        selectionStart="{{-1}}"
+                        type="search"
+                        value=""
+                        bind:blur="onBlur"
+                        bind:confirm="onConfirm"
+                        bind:focus="onFocus"
+                        bind:input="onInput"
+                        bind:keyboardheightchange="onKeyboardHeightChange"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-view
+                        class="van-field__icon-container"
+                        bind:tap="onClickIcon"
+                      />
+                      <wx-view
+                        class="van-field__button"
+                      />
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </van-cell>
+            </van-field>
+          </wx-view>
+        </wx-view>
+      </van-search>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义按钮
+      </wx-view>
+      <van-search
+        bind:search="onSearch"
+      >
+        <wx-view
+          class="van-search van-search--withaction custom-class"
+          style="background: #ffffff"
+        >
+          <wx-view
+            class="van-search__content van-search__content--round"
+          >
+            <wx-view
+              class="van-search__label"
+            >
+              地址
+            </wx-view>
+            <van-field
+              class="van-search__field field-class"
+              inputClass="input-class"
+              bind:blur="onBlur"
+              bind:change="onChange"
+              bind:clear="onClear"
+              bind:click-input="onClickInput"
+              bind:confirm="onSearch"
+              bind:focus="onFocus"
+            >
+              <van-cell
+                customClass="van-field"
+              >
+                <wx-view
+                  class="custom-class van-cell van-cell--borderless"
+                  hoverClass="van-cell--hover hover-class"
+                  hoverStayTime="70"
+                  style="padding: 5px 10px 5px 0; background-color: transparent;"
+                  bind:tap="onClick"
+                >
+                  <van-icon
+                    class="van-cell__left-icon-wrap"
+                    customClass="van-cell__left-icon"
+                  >
+                    <wx-view
+                      class="custom-class van-icon van-icon-search"
+                      style=""
+                      bind:tap="onClick"
+                    />
+                  </van-icon>
+                  <wx-view
+                    class="van-cell__title title-class"
+                    style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
+                  />
+                  <wx-view
+                    class="van-cell__value value-class"
+                  >
+                    <wx-view
+                      class="van-field__body van-field__body--search"
+                    >
+                      <wx-view
+                        class="van-field__control van-field__control--custom"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-input
+                        adjustPosition="{{true}}"
+                        alwaysEmbed="{{false}}"
+                        autoFocus="{{false}}"
+                        class="van-field__control input-class"
+                        confirmHold="{{false}}"
+                        confirmType="search"
+                        cursor="{{-1}}"
+                        cursorSpacing="{{50}}"
+                        disabled="{{false}}"
+                        focus="{{false}}"
+                        holdKeyboard="{{false}}"
+                        maxlength="{{-1}}"
+                        password="{{false}}"
+                        placeholder="请输入搜索关键词"
+                        placeholderClass="van-field__placeholder"
+                        placeholderStyle=""
+                        selectionEnd="{{-1}}"
+                        selectionStart="{{-1}}"
+                        type="search"
+                        value=""
+                        bind:blur="onBlur"
+                        bind:confirm="onConfirm"
+                        bind:focus="onFocus"
+                        bind:input="onInput"
+                        bind:keyboardheightchange="onKeyboardHeightChange"
+                        bind:tap="onClickInput"
+                      />
+                      <wx-view
+                        class="van-field__icon-container"
+                        bind:tap="onClickIcon"
+                      />
+                      <wx-view
+                        class="van-field__button"
+                      />
+                    </wx-view>
+                  </wx-view>
+                </wx-view>
+              </van-cell>
+            </van-field>
+          </wx-view>
+          <wx-view
+            class="van-search__action"
+            hoverClass="van-search__action--hover"
+            hoverStayTime="70"
+          >
+            <wx-view
+              slot="action"
+              bind:tap="onClick"
+            >
+              搜索
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-search>
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/search/test/demo.spec.ts b/packages/search/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/search/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();
+});