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

wix-style-react

import React from 'react';
import TimePicker from './TimeInput';
import timeInputDriverFactory from './TimeInput.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import moment from 'moment';
import sinon from 'sinon';
import { isTestkitExists, isEnzymeTestkitExists } from '../../test/utils/testkit-sanity';
import { timeInputTestkitFactory } from '../../testkit';
import { timeInputTestkitFactory as enzymeTimeInputTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';

var defaultMoment = moment();
var defaultMomentWithAM = moment('2014-04-25T01:00:00.00Z');
var defaultMomentWithPM = moment('2014-04-25T13:00:00.00Z');

describe('TimeInput', function () {
  var createDriver = createDriverFactory(timeInputDriverFactory);
  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(React.createElement(TimePicker, props));
      expect(driver.getValue()).toBe(format12Hours(props.defaultValue));
    });

    it('should render the current time if no default value were passed ', function () {
      var driver = createDriver(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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: sinon.spy()
      };
      var driver = createDriver(React.createElement(TimePicker, 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: sinon.spy(),
        disabled: true
      };
      var driver = createDriver(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, 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(React.createElement(TimePicker, props));
      expect(driver.isRtl()).toBeFalsy();
    });

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

  describe('testkit', function () {
    it('should exist', function () {
      expect(isTestkitExists(React.createElement(TimePicker, null), timeInputTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect(isEnzymeTestkitExists(React.createElement(TimePicker, null), enzymeTimeInputTestkitFactory, mount)).toBe(true);
    });
  });
});