wix-style-react/dist/src/TimeInput/TimeInput.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _TimeInput = require('./TimeInput');

var _TimeInput2 = _interopRequireDefault(_TimeInput);

var _TimeInput3 = require('./TimeInput.driver');

var _TimeInput4 = _interopRequireDefault(_TimeInput3);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _sinon = require('sinon');

var _sinon2 = _interopRequireDefault(_sinon);

var _testkitSanity = require('../../test/utils/testkit-sanity');

var _testkit = require('../../testkit');

var _enzyme = require('../../testkit/enzyme');

var _enzyme2 = require('enzyme');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var defaultMoment = (0, _moment2.default)();
var defaultMomentWithAM = (0, _moment2.default)('2014-04-25T01:00:00.00Z');
var defaultMomentWithPM = (0, _moment2.default)('2014-04-25T13:00:00.00Z');

describe('TimeInput', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_TimeInput4.default);
  var format12Hours = function format12Hours(time) {
    return time.format('hh:mm');
  };
  var format24Hours = function format24Hours(time) {
    return time.format('HH:mm');
  };

  describe('Time display', function () {
    it('should render the given default value', function () {
      var props = {
        defaultValue: defaultMoment
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.getValue()).toBe(format12Hours(props.defaultValue));
    });

    it('should render the current time if no default value were passed ', function () {
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, null));
      var currentTime = defaultMoment;
      var currentTimeHours = format12Hours(currentTime).substring(0, 2);
      var currentTimeMinutes = format12Hours(currentTime).substring(3, 5);
      var inputTimeHours = driver.getValue().substring(0, 2);
      var inputTimeMinutes = driver.getValue().substring(3, 5);
      var minutesDiff = Math.abs(parseInt(inputTimeMinutes) - parseInt(currentTimeMinutes));
      expect(inputTimeHours).toBe(currentTimeHours);
      expect(minutesDiff <= 1).toBeTruthy(); //ignore diff of one minute (minute can be change from the time the object was created to current time)
    });

    it('should allow rendering time in 24 hours mode', function () {
      var props = {
        defaultValue: defaultMoment,
        disableAmPm: true
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.getValue()).toBe(format24Hours(props.defaultValue));
    });

    it('should display am/pm indicator when in 12 hours mode', function () {
      var props = {
        defaultValue: defaultMoment,
        disableAmPm: false
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.isAmPmIndicatorExist()).toBeTruthy();
    });

    it('should display AM indicator when in 12 hours mode and the time displayed is AM', function () {
      var props = {
        defaultValue: defaultMomentWithAM,
        disableAmPm: false
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.getAmPmIndicatorText()).toBe('am');
    });

    it('should display AM indicator when in 12 hours mode and the time displayed is PM', function () {
      var props = {
        defaultValue: defaultMomentWithPM,
        disableAmPm: false
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.getAmPmIndicatorText()).toBe('pm');
    });
  });

  describe('onChange & disabled', function () {
    it('should trigger \'onChange\' callBack upon clicking input\'s up/down ticker', function () {
      var props = {
        onChange: _sinon2.default.spy()
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.isDisabled()).toBeFalsy();
      driver.clickTickerUp();
      driver.clickTickerDown();
      expect(props.onChange.calledTwice).toBeTruthy();
    });

    it('should not do anything upon clicking input\'s up/down ticker when disabled', function () {
      var props = {
        onChange: _sinon2.default.spy(),
        disabled: true
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));

      driver.clickTickerUp();
      driver.clickTickerDown();

      expect(driver.isDisabled()).toBeTruthy();
      expect(props.onChange.called).toBeFalsy();
    });

    it('should increase input value by 20 minutes upon clicking the input\'s up ticker', function () {
      var props = {
        defaultValue: defaultMoment
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      driver.clickTickerUp();
      expect(driver.getValue()).toBe(format12Hours(props.defaultValue.add(20, 'minutes')));
    });

    it('should decrease input value by 20 minutes upon clicking the input\'s down ticker', function () {
      var props = {
        defaultValue: defaultMoment
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      driver.clickTickerDown();
      expect(driver.getValue()).toBe(format12Hours(props.defaultValue.subtract(20, 'minutes')));
    });

    it('should allow to change time using keyboard\'s input', function () {
      var props = {
        defaultValue: defaultMoment
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      driver.setValue('12:00');
      driver.blur();
      expect(driver.getValue()).toBe('12:00');
    });

    it('should not allow to enter non numeric charecters using keyboard\'s input, it should bring back the privous valid value', function () {
      var props = {
        defaultValue: defaultMomentWithAM
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      driver.setValue('blabla');
      driver.blur();
      expect(driver.getValue()).toBe(format12Hours(props.defaultValue));
    });

    it('should not allow to enter invalid time using keyboard\'s input, it should bring back the privous valid value', function () {
      var props = {
        defaultValue: defaultMomentWithAM
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      driver.setValue('99:99');
      driver.blur();
      expect(driver.getValue()).toBe(format12Hours(props.defaultValue));
    });

    it('should allow toggling between am/pm when in 12 hours mode', function () {
      var props = {
        defaultValue: defaultMomentWithPM,
        disableAmPm: false
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.getAmPmIndicatorText()).toBe('pm');
      driver.toggleAmPmIndicator();
      expect(driver.getAmPmIndicatorText()).toBe('am');
    });

    it('should not allow to enter letters', function () {
      var props = {
        defaultValue: defaultMoment
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      driver.setValue('11:01');
      driver.setValue('10a:02');
      expect(driver.getValue()).toBe('11:01');
    });
  });

  describe('Styling', function () {
    it('should not be created in rtl mode by default', function () {
      var props = {};
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.isRtl()).toBeFalsy();
    });

    it('should allow to be created in rtl mode', function () {
      var props = {
        rtl: true
      };
      var driver = createDriver(_react2.default.createElement(_TimeInput2.default, props));
      expect(driver.isRtl()).toBeTruthy();
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_TimeInput2.default, null), _testkit.timeInputTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect((0, _testkitSanity.isEnzymeTestkitExists)(_react2.default.createElement(_TimeInput2.default, null), _enzyme.timeInputTestkitFactory, _enzyme2.mount)).toBe(true);
    });
  });
});