[Improvement] Field: add left-icon prop (#1092)

packages/field/en-US.md

@@ -120,7 +120,8 @@ Filed support all native properties of input tag，such as `maxlength`、`placeh
 | error | Whether to show error info | `Boolean` | `false` |
 | error-message | Error message | `String` | `''` |
 | autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |
-| icon | Right side Icon name | `String` | - |
+| icon | Right side icon name | `String` | - |
+| left-icon | Left side icon name | `String` | - |
 
 ### Event
 Filed support all native events of input tag，such as `focus`、`blur`、`keypress`

packages/field/index.vue

@@ -1,5 +1,6 @@
 <template>
   <cell
+    :icon="leftIcon"
     :title="label"
     :center="center"
     :border="border"
@@ -64,7 +65,9 @@ export default create({
     label: String,
     error: Boolean,
     center: Boolean,
+    leftIcon: String,
     required: Boolean,
+    onIconClick: Function,
     autosize: [Boolean, Object],
     errorMessage: String,
     type: {
@@ -74,10 +77,6 @@ export default create({
     border: {
       type: Boolean,
       default: true
-    },
-    onIconClick: {
-      type: Function,
-      default: () => {}
     }
   },
 
@@ -112,7 +111,7 @@ export default create({
 
     onClickIcon() {
       this.$emit('click-icon');
-      this.onIconClick();
+      this.onIconClick && this.onIconClick();
     },
 
     onKeypress(event) {

packages/field/test/__snapshots__/field.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render textarea 1`] = `
+<div class="van-cell van-hairline van-field">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">
+    <textarea class="van-field__control" style="height: auto;"></textarea>
+    <!---->
+    <!---->
+    <!---->
+  </div>
+  <!---->
+</div>
+`;

packages/field/test/field.spec.js

@@ -0,0 +1,101 @@
+import Field from '../';
+import { mount } from '@vue/test-utils';
+
+test('input event', () => {
+  const wrapper = mount(Field);
+  const input = wrapper.find('input');
+
+  input.element.value = '1';
+  input.trigger('input');
+  expect(wrapper.emitted('input')[0][0]).toEqual('1');
+});
+
+test('click icon event', () => {
+  const onIconClick = jest.fn();
+  const wrapper = mount(Field, {
+    propsData: {
+      icon: 'search',
+      onIconClick
+    }
+  });
+
+  wrapper.find('.van-field__icon').trigger('touchstart');
+  expect(wrapper.emitted('click-icon')).toBeTruthy();
+  expect(onIconClick.mock.calls.length).toBe(1);
+});
+
+test('keypress event', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: '',
+      type: 'number'
+    }
+  });
+
+  const fn = jest.fn();
+  const { calls } = fn.mock;
+  const press = keyCode => wrapper.vm.onKeypress({
+    keyCode,
+    preventDefault: fn
+  });
+
+  press(0);
+  expect(calls.length).toBe(1);
+
+  press(50);
+  expect(calls.length).toBe(1);
+
+  wrapper.vm.value = '0.1';
+  press(46);
+  expect(calls.length).toBe(2);
+
+  wrapper.vm.type = 'text';
+  press(0);
+  expect(calls.length).toBe(2);
+});
+
+test('render textarea', done => {
+  const wrapper = mount(Field, {
+    propsData: {
+      type: 'textarea',
+      autosize: true
+    }
+  });
+  setTimeout(() => {
+    expect(wrapper.html()).toMatchSnapshot();
+    done();
+  });
+});
+
+test('autosize textarea field', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      type: 'textarea',
+      autosize: {}
+    }
+  });
+
+  const longText = '1'.repeat(20);
+  const textarea = wrapper.find('.van-field__control');
+
+  wrapper.vm.value = longText;
+  expect(textarea.element.value).toEqual(longText);
+});
+
+test('autosize object', done => {
+  const wrapper = mount(Field, {
+    propsData: {
+      type: 'textarea',
+      autosize: {
+        maxHeight: 100,
+        minHeight: 50
+      }
+    }
+  });
+
+  const textarea = wrapper.find('.van-field__control');
+  setTimeout(() => {
+    expect(textarea.element.style.height).toEqual(('50px'));
+    done();
+  });
+});

packages/field/zh-CN.md

@@ -123,6 +123,7 @@ Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | error-message | 底部错误提示文案 | `String` | `''` |
 | autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |
 | icon | 输入框尾部图标 (可选值见 Icon 组件)  | `String` | - |
+| left-icon | 输入框左侧图标 (可选值见 Icon 组件)  | `String` | - |
 
 ### Event
 Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等