vant/test/specs/field.spec.js

import Field from 'packages/field';
import FieldWithIcon from '../components/field';
import { mount } from 'avoriaz';

describe('Field', () => {
  let wrapper;
  afterEach(() => {
    wrapper && wrapper.destroy();
  });

  it('create a text field', () => {
    wrapper = mount(Field, {
      propsData: {
        type: 'text',
        autosize: false
      }
    });

    expect(wrapper.hasClass('van-field')).to.be.true;
  });

  it('create a border field', () => {
    wrapper = mount(Field, {
      propsData: {
        type: 'text',
        border: true
      }
    });

    expect(wrapper.hasClass('van-field')).to.be.true;
    expect(wrapper.hasClass('van-field--border')).to.be.true;
  });

  it('create a text field with initialize value', (done) => {
    wrapper = mount(Field, {
      propsData: {
        value: 'test'
      }
    });

    const eventStub = sinon.stub(wrapper.vm, '$emit');

    wrapper.vm.value = 'test2';
    wrapper.vm.$nextTick(() => {
      expect(eventStub.calledWith('input'));
      expect(wrapper.find('.van-field__control')[0].element.value).to.equal('test2');
      done();
    });
  });

  it('focus on input', (done) => {
    wrapper = mount(Field, {
      propsData: {
        value: ''
      }
    });

    const eventStub = sinon.stub(wrapper.vm, '$emit');
    const input = wrapper.find('.van-field__control')[0];
    input.trigger('focus');

    wrapper.update();
    wrapper.vm.$nextTick(() => {
      expect(eventStub.calledWith('focus'));
      done();
    });
  });

  it('create a textarea field', (done) => {
    wrapper = mount(Field, {
      propsData: {
        type: 'textarea',
        autosize: true
      }
    });

    setTimeout(() => {
      expect(wrapper.hasClass('van-field')).to.be.true;
      expect(wrapper.hasClass('van-field--has-textarea')).to.be.true;
      done();
    }, 50);
  });

  it('create a autosize textarea field', (done) => {
    wrapper = mount(Field, {
      propsData: {
        type: 'textarea',
        autosize: {}
      }
    });

    wrapper.vm.$on('input', val => {
      wrapper.vm.value = val;
    });

    expect(wrapper.hasClass('van-field')).to.be.true;
    expect(wrapper.hasClass('van-field--autosize')).to.be.true;

    const textarea = wrapper.find('.van-field__control')[0];
    const textareaElement = textarea.element;
    const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
          parseInt(textareaElement.style.paddingTop, 10)) || 0;

    const longText = 'testtesttesttesttesttesttest';
    textareaElement.value = longText;
    textarea.trigger('input');

    wrapper.update();
    setTimeout(() => {
      expect(wrapper.find('.van-field__control')[0].element.value).to.equal(longText);
      expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');
      done();
    }, 50);
  });

  it('autosize object', (done) => {
    wrapper = mount(Field, {
      propsData: {
        type: 'textarea',
        autosize: {
          maxHeight: 100,
          minHeight: 50
        }
      }
    });

    wrapper.vm.$on('input', val => {
      wrapper.vm.value = val;
    });

    expect(wrapper.hasClass('van-field')).to.be.true;
    expect(wrapper.hasClass('van-field--autosize')).to.be.true;

    const textarea = wrapper.find('.van-field__control')[0];
    const textareaElement = textarea.element;

    const longText = 'testtesttesttesttesttesttest';
    textareaElement.value = longText;
    textarea.trigger('input');

    wrapper.update();
    setTimeout(() => {
      expect(wrapper.find('.van-field__control')[0].element.value).to.equal(longText);
      expect(textareaElement.style.height).to.equal(('50px'));
      done();
    }, 50);
  });

  it('show icon when has value and icon props', () => {
    wrapper = mount(Field, {
      propsData: {
        icon: 'name',
        value: '123'
      }
    });

    wrapper.find('.van-field__icon')[0].trigger('touchstart');
    expect(wrapper.find('.van-field__icon').length).to.equal(1);
  });

  it('keypress event', () => {
    wrapper = mount(Field, {
      propsData: {
        value: '',
        type: 'number'
      }
    });

    const spy1 = sinon.spy();
    wrapper.vm.onKeypress({ keyCode: 0, preventDefault: spy1 });
    expect(spy1.calledOnce).to.be.true;

    const spy2 = sinon.spy();
    wrapper.vm.onKeypress({ keyCode: 50, preventDefault: spy2 });
    expect(spy2.calledOnce).to.be.false;

    const spy3 = sinon.spy();
    wrapper.vm.value = '0.1';
    wrapper.vm.onKeypress({ keyCode: 46, preventDefault: spy3 });
    expect(spy3.calledOnce).to.be.true;

    wrapper.vm.type = 'text';
    const spy4 = sinon.spy();
    wrapper.vm.onKeypress({ keyCode: 0, preventDefault: spy4 });
    expect(spy4.calledOnce).to.be.false;
  });

  it('create a field with icon slot', () => {
    const fn = sinon.spy();

    wrapper = mount(FieldWithIcon, {
      propsData: {
        onIconClick: fn
      }
    });

    wrapper.find('.van-field__icon')[0].trigger('touchstart');
    expect(fn.calledOnce).to.be.true;
  });

  it('blur event', (done) => {
    const blur = sinon.spy();
    const focus = sinon.spy();
    const clickIcon = sinon.spy();

    wrapper = mount(FieldWithIcon, {});
    wrapper.vm.$on('blur', blur);
    wrapper.vm.$on('focus', focus);

    wrapper.find('.van-field__icon')[0].trigger('click');
    wrapper.find('.van-field__control')[0].trigger('focus');
    wrapper.find('.van-field__control')[0].trigger('blur');

    expect(blur.calledOnce).to.be.true;
    expect(clickIcon.calledOnce).to.be.false;
    done();
  });
});