lucid-ui/lib/components/TextField/TextField.spec.js

A UI component library from AppNexus.

import _delay from "lodash/delay";
import _noop from "lodash/noop";
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { common, controls } from '../../util/generic-tests';
import * as KEYCODE from '../../constants/key-code';
import assert from 'assert';
import TextField from './TextField';
import { MOSTLY_STABLE_DELAY } from '../../../tests/constants';
describe('TextField', function () {
  common(TextField);
  controls(TextField, {
    callbackName: 'onChange',
    controlSelector: '.lucid-TextField',
    eventType: 'change',
    additionalProps: {
      value: '123'
    }
  });
  it('should correctly debounce onChangeDebounced [mostly stable]', function (done) {
    var event = {
      target: {
        value: 'yolo'
      },
      persist: _noop
    };
    var onChangeDebounced = sinon.spy();
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onChangeDebounced: onChangeDebounced,
      debounceLevel: 0
    }));
    wrapper.find('input').simulate('change', event);
    assert(onChangeDebounced.notCalled);

    _delay(function () {
      assert(onChangeDebounced.called);
      assert.equal(onChangeDebounced.args[0][0], 'yolo');
      done();
    }, MOSTLY_STABLE_DELAY);
  });
  it('should accept a new `value` prop immediately if the user hasnt typed anything recently', function () {
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      value: "start"
    }));
    wrapper.setProps({
      value: 'end'
    });
    assert.equal(wrapper.state('value'), 'end');
  }); // This test had value, but it's been known to be flaky.

  it('should postpone state changes if the user recently typed something in [mostly stable]', function (done) {
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      value: "start",
      lazyLevel: 1
    })); // Order of operations is crucial for this test
    // 1) User starts typing something in
    // 2) New props comes in from above while the user is typing
    // 3) The props shouldn't take effect until the lazyLevel has elapsed

    assert.equal(wrapper.state('value'), 'start');
    wrapper.find('input').simulate('change', {
      target: {
        value: 'user typed'
      }
    });
    wrapper.setProps({
      value: 'end'
    });
    assert.equal(wrapper.state('value'), 'user typed');

    _delay(function () {
      assert.equal(wrapper.state('value'), 'end');
      done();
    }, MOSTLY_STABLE_DELAY);
  });
  it('should callback onSubmit when the user hits enter', function () {
    var onSubmit = sinon.spy();
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onSubmit: onSubmit
    }));
    wrapper.find('input').simulate('keydown', {
      keyCode: KEYCODE.Enter,
      target: {
        value: 'yolo'
      }
    });
    assert(onSubmit.called);
    assert.equal(onSubmit.args[0][0], 'yolo');
  });
  it('should callback onBlur when the leaves input', function () {
    var onBlur = sinon.spy();
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onBlur: onBlur
    }));
    wrapper.find('input').simulate('blur', {
      target: {
        value: 'yolo'
      }
    });
    assert(onBlur.calledOnce);
    assert.equal(onBlur.args[0][0], 'yolo');
  });
  it('should respect isDisabled', function () {
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      isDisabled: true
    }));
    assert.equal(wrapper.find('input').prop('disabled'), true);
  });
  it('should respect isMultiLine', function () {
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      isMultiLine: true
    }));
    assert.equal(wrapper.find('textarea').length, 1);
    assert.equal(wrapper.find('.lucid-TextField-is-multi-line').length, 1);
  });
  it('should respect onKeyDown if passed in', function () {
    var onKeyDown = jest.fn();
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onKeyDown: onKeyDown
    }));
    wrapper.find('input').simulate('keydown', {});
    expect(onKeyDown).toBeCalled();
  });
  it('should call `event.persist` for `onChangeDebounced`', function () {
    var event = {
      target: {
        value: 'yolo'
      },
      persist: sinon.spy()
    };

    var onChangeDebounced = function onChangeDebounced() {}; // intentionally not _.noop


    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onChangeDebounced: onChangeDebounced
    }));
    assert(event.persist.notCalled);
    wrapper.find('input').simulate('change', event);
    assert(event.persist.called);
  });
  it('should flush the `onChangeDebounced`-handled event before blurring', function () {
    var onBlur = sinon.spy();
    var internalChangeSpy = sinon.spy();

    var onChangeDebounced = function onChangeDebounced() {
      assert(onBlur.notCalled);
      internalChangeSpy();
    };

    var event = {
      target: {
        value: 'foo'
      },
      persist: function persist() {}
    };
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onBlur: onBlur,
      debounceLevel: 100,
      onChangeDebounced: onChangeDebounced
    }));
    wrapper.find('input').simulate('change', event);
    assert(internalChangeSpy.notCalled);
    wrapper.find('input').simulate('blur');
    assert(internalChangeSpy.calledOnce);
    assert(onBlur.calledOnce);
  });
  it('should flush the `onChangeDebounced`-handled event before submitting', function () {
    var onSubmit = sinon.spy();
    var internalChangeSpy = sinon.spy();

    var onChangeDebounced = function onChangeDebounced() {
      assert(onSubmit.notCalled);
      internalChangeSpy();
    };

    var event = {
      target: {
        value: 'foo'
      },
      persist: function persist() {}
    };
    var wrapper = shallow( /*#__PURE__*/React.createElement(TextField, {
      onSubmit: onSubmit,
      debounceLevel: 100,
      onChangeDebounced: onChangeDebounced
    }));
    wrapper.find('input').simulate('change', event);
    assert(internalChangeSpy.notCalled);
    wrapper.find('input').simulate('keydown', {
      keyCode: KEYCODE.Enter,
      target: {
        value: 'foo'
      }
    });
    assert(internalChangeSpy.calledOnce);
    assert(onSubmit.calledOnce);
  });
});