[improvement] Search: tsx (#3028)

packages/search/test/__snapshots__/demo.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-search" style="background:#ffffff;">
+    <div class="van-search" style="background:#fff;">
       <div class="van-search__content van-search__content--square">
         <div class="van-cell van-cell--borderless van-field">
           <div class="van-field__left-icon"><i class="van-icon van-icon-search">
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <form action="/">
-      <div class="van-search van-search--show-action" style="background:#ffffff;">
+      <div class="van-search van-search--show-action" style="background:#fff;">
         <div class="van-search__content van-search__content--square">
           <div class="van-cell van-cell--borderless van-field">
             <div class="van-field__left-icon"><i class="van-icon van-icon-search">
@@ -34,7 +34,7 @@ exports[`renders demo correctly 1`] = `
     </form>
   </div>
   <div>
-    <div class="van-search van-search--show-action" style="background:#ffffff;">
+    <div class="van-search van-search--show-action" style="background:#fff;">
       <div class="van-search__content van-search__content--round">
         <div class="van-search__label">地址</div>
         <div class="van-cell van-cell--borderless van-field">

packages/search/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render label slot 1`] = `
+<div class="van-search" style="background: rgb(255, 255, 255);">
+  <div class="van-search__content van-search__content--square">
+    <div class="van-search__label">Custom Label</div>
+    <div class="van-cell van-cell--borderless van-field">
+      <div class="van-field__left-icon"><i class="van-icon van-icon-search">
+          <!----></i></div>
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-field__body"><input type="search" class="van-field__control"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/search/test/index.spec.js

@@ -2,34 +2,75 @@ import Search from '..';
 import { mount } from '../../../test/utils';
 
 test('listen input event', () => {
-  const wrapper = mount(Search);
+  const onInput = jest.fn();
+  const wrapper = mount(Search, {
+    context: {
+      on: {
+        input: onInput
+      }
+    }
+  });
+
   const input = wrapper.find('input');
   input.element.value = '1';
   input.trigger('input');
 
-  expect(wrapper.emitted('input')[0][0]).toEqual('1');
+  expect(onInput).toBeCalledWith('1');
 });
 
 test('cancel search', () => {
+  const onInput = jest.fn();
+  const onCancel = jest.fn();
+
   const wrapper = mount(Search, {
     propsData: {
       value: 'test',
       showAction: true
+    },
+    context: {
+      on: {
+        input: onInput,
+        cancel: onCancel
+      }
     }
   });
 
   const cancel = wrapper.find('.van-search__action div');
   cancel.trigger('click');
-  expect(wrapper.emitted('input')[0][0]).toEqual('');
-  expect(wrapper.emitted('cancel')).toBeTruthy();
+
+  expect(onInput).toBeCalledWith('');
+  expect(onCancel).toBeCalled();
 });
 
 test('emit a search event', () => {
-  const wrapper = mount(Search);
+  const onSearch = jest.fn();
+  const onKeypress = jest.fn();
+
+  const wrapper = mount(Search, {
+    context: {
+      on: {
+        search: onSearch,
+        keypress: onKeypress
+      }
+    }
+  });
+
   const input = wrapper.find('input');
   input.trigger('keypress.enter');
   input.trigger('keypress.a');
 
-  expect(wrapper.emitted('search')).toBeTruthy();
-  expect(wrapper.emitted('keypress')).toBeTruthy();
+  expect(onSearch).toBeCalled();
+  expect(onKeypress).toBeCalled();
+});
+
+test('render label slot', () => {
+  const wrapper = mount(Search, {
+    scopedSlots: {
+      label() {
+        return 'Custom Label';
+      }
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
 });