[improvement] rename packages dir to src (#3659)

src/field/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__value van-cell__value--alone">
+          <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-cell--required van-field">
+        <div class="van-cell__title van-field__label"><span>用户名</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control">
+            <div class="van-field__right-icon"><i class="van-icon van-icon-question-o">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-cell van-cell--required van-field">
+        <div class="van-cell__title van-field__label"><span>密码</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-field__left-icon"><i class="van-icon van-icon-contact">
+            <!----></i></div>
+        <div class="van-cell__title van-field__label"><span>用户名</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field van-field--error">
+        <div class="van-cell__title van-field__label"><span>用户名</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
+        </div>
+      </div>
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>手机号</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>
+          <div class="van-field__error-message">手机号格式错误</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>留言</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control" style="height: auto;"></textarea></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-cell--center van-field">
+        <div class="van-cell__title van-field__label"><span>短信验证码</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
+            <div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
+            发送验证码
+          </span></button></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/field/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`clearable 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
+exports[`clearable 2`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><input type="text" class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
+        <!----></i></div>
+  </div>
+</div>
+`;
+
+exports[`label-class prop 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>
+  <div class="van-cell__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
+exports[`label-width prop with unit 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label" style="width: 10rem;"><span>Label</span></div>
+  <div class="van-cell__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
+exports[`label-width prop without unit 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label" style="width: 100px;"><span>Label</span></div>
+  <div class="van-cell__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
+exports[`render input slot 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body">
+      <div class="van-field__control">Custom Input</div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`render label slot 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__title van-field__label">Custom Label</div>
+  <div class="van-cell__value">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;
+
+exports[`render textarea 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
+  </div>
+</div>
+`;
+
+exports[`size prop 1`] = `
+<div class="van-cell van-cell--large van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div>
+</div>
+`;

src/field/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

src/field/test/index.spec.js

@@ -0,0 +1,237 @@
+import Field from '..';
+import { mount, later } from '../../../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 event', () => {
+  const wrapper = mount(Field);
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click')[0][0]).toBeTruthy();
+});
+
+test('click icon event', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: 'a',
+      leftIcon: 'contact',
+      rightIcon: 'search'
+    }
+  });
+
+  wrapper.find('.van-field__left-icon').trigger('click');
+  wrapper.find('.van-field__right-icon').trigger('click');
+  expect(wrapper.emitted('click-left-icon')).toBeTruthy();
+  expect(wrapper.emitted('click-right-icon')).toBeTruthy();
+});
+
+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.setProps({ value: '0.1' });
+  press(46);
+  expect(calls.length).toBe(2);
+
+  wrapper.setProps({ type: 'text' });
+  press(0);
+  expect(calls.length).toBe(2);
+});
+
+test('render textarea', async () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      type: 'textarea',
+      autosize: true
+    }
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('autosize textarea field', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      type: 'textarea',
+      autosize: {}
+    }
+  });
+
+  const value = '1'.repeat(20);
+  const textarea = wrapper.find('.van-field__control');
+
+  wrapper.setProps({ value });
+  expect(textarea.element.value).toEqual(value);
+});
+
+test('autosize object', async () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      type: 'textarea',
+      autosize: {
+        maxHeight: 100,
+        minHeight: 50
+      }
+    }
+  });
+
+  const textarea = wrapper.find('.van-field__control');
+
+  await later();
+  expect(textarea.element.style.height).toEqual(('50px'));
+});
+
+test('blur method', () => {
+  const fn = jest.fn();
+  const wrapper = mount(Field);
+
+  wrapper.vm.$on('blur', fn);
+  wrapper.find('input').element.focus();
+  wrapper.vm.blur();
+
+  expect(fn).toHaveBeenCalledTimes(1);
+});
+
+test('focus method', () => {
+  const fn = jest.fn();
+  const wrapper = mount(Field);
+
+  wrapper.vm.$on('focus', fn);
+  wrapper.vm.focus();
+
+  expect(fn).toHaveBeenCalledTimes(1);
+});
+
+test('maxlength', async () => {
+  const wrapper = mount(Field, {
+    attrs: {
+      maxlength: 3
+    },
+    propsData: {
+      value: 1234,
+      type: 'number'
+    }
+  });
+
+  const input = wrapper.find('input');
+  expect(input.element.value).toEqual('123');
+
+  input.element.value = 1234;
+  await later();
+  input.trigger('input');
+
+  expect(input.element.value).toEqual('123');
+  expect(wrapper.emitted('input')[0][0]).toEqual('123');
+});
+
+test('clearable', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: 'test',
+      clearable: true
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+  const input = wrapper.find('input');
+  input.trigger('focus');
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.find('.van-field__clear').trigger('touchstart');
+  expect(wrapper.emitted('input')[0][0]).toEqual('');
+  expect(wrapper.emitted('clear')).toBeTruthy();
+});
+
+test('render input slot', () => {
+  const wrapper = mount({
+    template: `
+      <field>
+        <template v-slot:input>Custom Input</template>
+      </field>
+    `,
+    components: {
+      Field
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render label slot', () => {
+  const wrapper = mount({
+    template: `
+      <field label="Default Label">
+        <template v-slot:label>Custom Label</template>
+      </field>
+    `,
+    components: {
+      Field
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('size prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      size: 'large'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('label-width prop with unit', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'Label',
+      labelWidth: '10rem'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('label-width prop without unit', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'Label',
+      labelWidth: 100
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('label-class prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      label: 'Label',
+      labelClass: 'custom-label-class'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});