add SearchBar test, ref #1274

components/search-bar/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchBar renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#efeff4",
+      "flexDirection": "row",
+      "height": 44,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <TextInput
+      clearButtonMode="always"
+      editable={true}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onClear={[Function]}
+      onFocus={[Function]}
+      onSubmit={[Function]}
+      onSubmitEditing={[Function]}
+      placeholder="搜索"
+      prefixCls="am-search"
+      style={
+        Object {
+          "backgroundColor": "#fff",
+          "borderColor": "#ddd",
+          "borderRadius": 5,
+          "borderWidth": 0.5,
+          "color": "#000",
+          "flex": 1,
+          "fontSize": 14,
+          "height": 28,
+          "paddingBottom": 0,
+          "paddingLeft": 35,
+          "paddingRight": 35,
+          "paddingTop": 0,
+        }
+      }
+      underlineColorAndroid="transparent"
+      value=""
+    />
+  </View>
+  <Image
+    resizeMode="stretch"
+    source={1}
+    style={
+      Object {
+        "height": 15,
+        "left": 16,
+        "position": "absolute",
+        "tintColor": "#ccc",
+        "top": 14.5,
+        "width": 15,
+      }
+    }
+  />
+</View>
+`;

components/search-bar/__tests__/__snapshots__/index.test.web.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchBar renders correctly 1`] = `
+<form
+  class="am-search"
+>
+  <div
+    class="am-search-input"
+  >
+    <div
+      class="am-search-synthetic-ph"
+    >
+      <span
+        class="am-search-synthetic-ph-container"
+      >
+        <i
+          class="am-search-synthetic-ph-icon"
+        />
+        <span
+          class="am-search-synthetic-ph-placeholder"
+          style="visibility:visible;"
+        >
+          搜索
+        </span>
+      </span>
+    </div>
+    <input
+      class="am-search-value"
+      placeholder="搜索"
+      type="search"
+      value=""
+    />
+    <a
+      class="am-search-clear"
+    />
+  </div>
+  <div
+    class="am-search-cancel"
+  >
+    取消
+  </div>
+</form>
+`;

components/search-bar/__tests__/index.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import SearchBar from '../index';
+
+describe('SearchBar', () => {
+  it('renders correctly', () => {
+    const wrapper = renderer.create(<SearchBar placeholder="搜索" />);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  describe('test some events', () => {
+    let handler;
+    let wrapper;
+
+    beforeEach(() => {
+      handler = jest.fn();
+    });
+
+    it('fires onChange event', () => {
+      wrapper = shallow(<SearchBar onChange={handler} />);
+      wrapper.find('TextInput').simulate('changeText', 'foo');
+      expect(handler).toBeCalledWith('foo');
+    });
+
+    it('fires onFocus event', () => {
+      wrapper = shallow(<SearchBar onFocus={handler} />);
+      wrapper.find('TextInput').simulate('focus');
+      expect(handler).toBeCalledWith();
+    });
+
+    it('fires onBlur event', () => {
+      wrapper = shallow(<SearchBar onBlur={handler} />);
+      wrapper.find('TextInput').simulate('blur');
+      expect(handler).toBeCalledWith();
+    });
+
+    it('fires onCancel event', () => {
+      wrapper = shallow(<SearchBar value="test" showCancelButton onCancel={handler} />);
+      wrapper.find('Text').simulate('press');
+      expect(handler).toBeCalledWith('test');
+    });
+  });
+});

components/search-bar/__tests__/index.test.web.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import SearchBar from '../index.web';
+
+describe('SearchBar', () => {
+  it('renders correctly', () => {
+    const wrapper = render(<SearchBar placeholder="搜索" />);
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
+
+  describe('test some events', () => {
+    let handler;
+    let wrapper;
+
+    beforeEach(() => {
+      handler = jest.fn();
+    });
+
+    it('fires onChange event', () => {
+      wrapper = mount(<SearchBar onChange={handler} />);
+      wrapper.find('input').simulate('change', { target: { value: 'foo' } });
+      expect(handler).toBeCalledWith('foo');
+    });
+
+    it('fires onFocus event', () => {
+      wrapper = mount(<SearchBar onFocus={handler} />);
+      wrapper.find('input').simulate('focus');
+      expect(handler).toBeCalledWith();
+    });
+
+    it('fires onBlur event', () => {
+      wrapper = mount(<SearchBar onBlur={handler} />);
+      wrapper.find('input').simulate('blur');
+      expect(handler).toBeCalledWith();
+    });
+
+    it('fires onCancel event', () => {
+      wrapper = mount(<SearchBar value="test" onCancel={handler} />);
+      wrapper.find('.am-search-cancel').simulate('click');
+      expect(handler).toBeCalledWith('test');
+    });
+
+    it('fires onClear event', () => {
+      wrapper = mount(<SearchBar onClear={handler} />);
+      wrapper.find('a').simulate('click');
+      expect(handler).toBeCalledWith('');
+    });
+  });
+});