wix-style-react/src/TimeInputNext/test/TimeInputNextUtils.spec.js

wix-style-react

import { DEFAULT_STEP } from '../TimeInputNext';
import {
  getFormattedDate,
  getTimeSlot,
  getTimeSlots,
  getClosestTimeSlot,
} from '../TimeInputNextUtils';

const timeSlots = [
  { id: 1630875600000, value: '12:00 AM' },
  { id: 1630879200000, value: '1:00 AM' },
  { id: 1630882800000, value: '2:00 AM' },
  { id: 1630886400000, value: '3:00 AM' },
  { id: 1630890000000, value: '4:00 AM' },
  { id: 1630893600000, value: '5:00 AM' },
  { id: 1630897200000, value: '6:00 AM' },
  { id: 1630900800000, value: '7:00 AM' },
  { id: 1630904400000, value: '8:00 AM' },
  { id: 1630908000000, value: '9:00 AM' },
  { id: 1630911600000, value: '10:00 AM' },
  { id: 1630915200000, value: '11:00 AM' },
  { id: 1630918800000, value: '12:00 PM' },
  { id: 1630922400000, value: '1:00 PM' },
  { id: 1630926000000, value: '2:00 PM' },
  { id: 1630929600000, value: '3:00 PM' },
  { id: 1630933200000, value: '4:00 PM' },
  { id: 1630936800000, value: '5:00 PM' },
  { id: 1630940400000, value: '6:00 PM' },
  { id: 1630944000000, value: '7:00 PM' },
  { id: 1630947600000, value: '8:00 PM' },
  { id: 1630951200000, value: '9:00 PM' },
  { id: 1630954800000, value: '10:00 PM' },
  { id: 1630958400000, value: '11:00 PM' },
];

const extractValueFromTimeSlots = slots => slots.map(slot => slot.value);

describe('TimeInputNextUtils', () => {
  describe('getFormattedDate', () => {
    it(`should return empty string [when] value is not passed`, async () => {
      const value = getFormattedDate({
        locale: 'en',
        timeStyle: 'short',
      });

      expect(value).toBe('');
    });

    it(`should format date as a short time value [when] timeStyle='short' is passed`, async () => {
      const value = getFormattedDate({
        value: new Date('2021-09-06 14:10'),
        locale: 'en',
        timeStyle: 'short',
      });

      expect(value).toBe('2:10 PM');
    });

    it(`should format date as a long time value [when] timeStyle='long' is passed`, async () => {
      const value = getFormattedDate({
        value: new Date('2021-09-06 14:10'),
        locale: 'en',
        timeStyle: 'long',
      });

      expect(value).toMatch(/2:10 PM (GMT\+3|UTC)/);
    });

    it(`should format date as a short time value [when] timeStyle='short' and locale='lt' is passed`, async () => {
      const timeSlot = getTimeSlot({
        value: new Date('2021-09-06 14:10'),
        locale: 'lt',
        timeStyle: 'short',
      });

      expect(timeSlot.value).toBe('14:10');
    });
  });

  describe('getTimeSlot', () => {
    it(`should return time slot with id and value [when] function is called`, async () => {
      const timeSlot = getTimeSlot({
        value: new Date('2021-09-06 14:10'),
        locale: 'en',
        timeStyle: 'short',
      });

      expect(timeSlot.value).toBe('2:10 PM');
    });
  });

  describe('getTimeSlots', () => {
    it(`should fall back to default step [when] step is not passed `, async () => {
      const generatedTimeSlots = getTimeSlots({
        value: new Date('2021-09-06 14:10'),
        locale: 'en',
        timeStyle: 'short',
      });
      const stepBetweenTwoSlots =
        generatedTimeSlots[1].id - generatedTimeSlots[0].id;

      expect(stepBetweenTwoSlots).toBe(DEFAULT_STEP * 60000);
    });

    it(`should return time slots with intervals according to step prop [when] step is passed`, async () => {
      const generatedTimeSlots = getTimeSlots({
        value: new Date('2021-09-06 14:10'),
        locale: 'en',
        timeStyle: 'short',
        step: 60,
      });

      expect(extractValueFromTimeSlots(generatedTimeSlots)).toEqual(
        extractValueFromTimeSlots(timeSlots),
      );
    });
  });

  describe('getClosestTimeSlot', () => {
    it(`should return closest time slot to passed value in given array of time slots [when] value and timeSlots are passed`, async () => {
      const closestTimeSlot = getClosestTimeSlot({
        value: new Date('2021-09-06 14:10'),
        locale: 'en',
        timeStyle: 'short',
        timeSlots,
      });

      const expectedTimeSlot = timeSlots.find(
        slot => slot.value === closestTimeSlot.value,
      );

      expect(closestTimeSlot).toEqual(expectedTimeSlot);
    });
  });
});