@docsvision/material-ui-pickers 3.2.0-beta.24 → 3.2.0-beta.26

package/src/__tests__/_helpers/date-utils.test.tsx

@@ -0,0 +1,197 @@
+import { utilsToUse } from '../test-utils';
+import { findClosestEnabledDate } from '../../_helpers/date-utils';
+
+describe('findClosestEnabledDate', () => {
+  const day18thText = utilsToUse.getDayText(utilsToUse.date('2018-08-18'));
+  const only18th = (date: any) => utilsToUse.getDayText(date) !== day18thText;
+
+  it('Should return null if all dates are disabled', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('1999-01-01'), // Use close-by min/max dates to reduce the test runtime.
+      maxDate: utilsToUse.date('2001-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: () => true,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(result).toBe(null);
+  });
+
+  it('Should return given date if it is enabled', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: () => false,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2000-01-01'))).toBe(true);
+  });
+
+  it('Should return next 18th going from 10th', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2018-08-10'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-08-18'))).toBe(true);
+  });
+
+  it('Should return previous 18th going from 1st', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2018-08-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-07-18'))).toBe(true);
+  });
+
+  it('Should return future 18th if disablePast', () => {
+    const today = utilsToUse.startOfDay(utilsToUse.date());
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: true,
+    });
+
+    expect(utilsToUse.getDayText(result)).toBe(day18thText);
+    expect(utilsToUse.isBefore(result, today)).toBe(false);
+    expect(utilsToUse.isBefore(result, utilsToUse.addDays(today, 31))).toBe(true);
+  });
+
+  it('Should return past Saturday if disableFuture', () => {
+    const today = utilsToUse.startOfDay(utilsToUse.date());
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2099-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: true,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isBeforeDay(result, today)).toBe(true);
+    expect(utilsToUse.getDayText(result)).toBe(day18thText);
+    expect(utilsToUse.isBefore(result, utilsToUse.addDays(today, -31))).toBe(false);
+  });
+
+  it('Should return now if disablePast+disableFuture and now is valid', () => {
+    const today = utilsToUse.startOfDay(utilsToUse.date());
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: () => false,
+      disableFuture: true,
+      disablePast: true,
+    });
+
+    expect(utilsToUse.isSameDay(result, today)).toBe(true);
+  });
+
+  it('Should return null if disablePast+disableFuture and now is invalid', () => {
+    const today = utilsToUse.date();
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: date => utilsToUse.isSameDay(date, today),
+      disableFuture: true,
+      disablePast: true,
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it('Should return minDate if it is after the date and valid', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('2018-08-18'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-08-18'))).toBe(true);
+  });
+
+  it('Should return next 18th after minDate', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('2018-08-01'),
+      maxDate: utilsToUse.date('2200-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-08-18'))).toBe(true);
+  });
+
+  it('Should return maxDate if it is before the date and valid', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2050-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2018-07-18'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-07-18'))).toBe(true);
+  });
+
+  it('Should return previous 18th before maxDate', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2050-01-01'),
+      minDate: utilsToUse.date('1900-01-01'),
+      maxDate: utilsToUse.date('2018-08-17'),
+      utils: utilsToUse,
+      shouldDisableDate: only18th,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(utilsToUse.isSameDay(result, utilsToUse.date('2018-07-18'))).toBe(true);
+  });
+
+  it('Should return null if minDate is after maxDate', () => {
+    const result = findClosestEnabledDate({
+      date: utilsToUse.date('2000-01-01'),
+      minDate: utilsToUse.date('2000-01-01'),
+      maxDate: utilsToUse.date('1999-01-01'),
+      utils: utilsToUse,
+      shouldDisableDate: () => false,
+      disableFuture: false,
+      disablePast: false,
+    });
+
+    expect(result).toBeNull();
+  });
+});

package/src/__tests__/_helpers/text-field-helper.test.tsx

@@ -0,0 +1,34 @@
+import {
+  makeMaskFromFormat,
+  maskedDateFormatter,
+  pick12hOr24hFormat,
+} from '../../_helpers/text-field-helper';
+
+const refuse = /[^\d]+/gi;
+describe('test-field-helper', () => {
+  test('maskedDateFormatter', () => {
+    const formatterFn = maskedDateFormatter('__/__/____', '_', refuse);
+
+    expect(formatterFn('21')).toBe('21/__/____');
+    expect(formatterFn('21-12-21')).toBe('21/12/21__');
+    expect(formatterFn('21-12-2010')).toBe('21/12/2010');
+  });
+
+  test('makeMaskFromFormat', () => {
+    expect(makeMaskFromFormat('yyyy-mm-dd', '_')).toBe('____-__-__');
+    expect(makeMaskFromFormat('YYYY/LL/DD', '_')).toBe('____/__/__');
+    expect(makeMaskFromFormat('yyyy-mm-dd mm:hh', '_')).toBe('____-__-__ __:__');
+  });
+
+  test('pick12hOr24hFormat', () => {
+    expect(pick12hOr24hFormat(undefined, true, { '12h': 'hh:mm a', '24h': 'HH:mm' })).toBe(
+      'hh:mm a'
+    );
+    expect(pick12hOr24hFormat(undefined, undefined, { '12h': 'hh:mm a', '24h': 'HH:mm' })).toBe(
+      'hh:mm a'
+    );
+    expect(pick12hOr24hFormat(undefined, false, { '12h': 'hh:mm a', '24h': 'HH:mm' })).toBe(
+      'HH:mm'
+    );
+  });
+});

package/src/__tests__/_shared/ModalDialog.test.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { ShallowWrapper } from 'enzyme';
+import { shallow } from '../test-utils';
+import { ModalDialog, ModalDialogProps } from '../../_shared/ModalDialog';
+
+const initialProps = {
+  onAccept: jest.fn(),
+  onDismiss: jest.fn(),
+  onClear: jest.fn(),
+  onKeyDownInner: jest.fn(),
+  okLabel: 'OK',
+  open: false,
+  cancelLabel: 'Cancel',
+  clearLabel: 'Clear',
+  clearable: false,
+  todayLabel: 'Today',
+  showTodayButton: false,
+  onSetToday: jest.fn(),
+  children: 'Test',
+  classes: {} as any,
+};
+
+describe('ModalDialog', () => {
+  let component: ShallowWrapper<ModalDialogProps>;
+  const props = { ...initialProps };
+
+  beforeEach(() => {
+    component = shallow(<ModalDialog {...props} />);
+  });
+
+  it('Should render dialog content', () => {
+    expect(component.find('WithStyles(ForwardRef(DialogContent))').props().children).toBe(
+      props.children
+    );
+  });
+
+  it('Should render dialog actions with 2 buttons', () => {
+    expect(component.find('WithStyles(ForwardRef(DialogActions))').length).toBe(1);
+    expect(
+      component
+        .find('WithStyles(ForwardRef(Button))')
+        .at(0)
+        .props().children
+    ).toBe('Cancel');
+
+    expect(
+      component
+        .find('WithStyles(ForwardRef(Button))')
+        .at(1)
+        .props().children
+    ).toBe('OK');
+  });
+
+  it('Should handle on OK button click', () => {
+    component
+      .find('WithStyles(ForwardRef(Button))')
+      .at(1)
+      .simulate('click');
+    expect(props.onAccept).toHaveBeenCalled();
+  });
+
+  it('Should handle on Cancel button click', () => {
+    component
+      .find('WithStyles(ForwardRef(Button))')
+      .at(0)
+      .simulate('click');
+    expect(props.onDismiss).toHaveBeenCalled();
+  });
+});
+
+describe('ModalDialog with Clear Button', () => {
+  let component: ShallowWrapper<ModalDialogProps>;
+  const props = {
+    ...initialProps,
+    clearable: true,
+  };
+
+  beforeEach(() => {
+    component = shallow(<ModalDialog {...props} />);
+  });
+
+  it('Should handle on Clear button click', () => {
+    component
+      .find('WithStyles(ForwardRef(Button))')
+      .at(0)
+      .simulate('click');
+    expect(props.onClear).toHaveBeenCalled();
+  });
+});
+
+describe('ModalDialog with Today Button', () => {
+  let component: ShallowWrapper<ModalDialogProps>;
+  const props = {
+    ...initialProps,
+    showTodayButton: true,
+  };
+
+  beforeEach(() => {
+    component = shallow(<ModalDialog {...props} />);
+  });
+
+  it('Should handle on Clear button click', () => {
+    component
+      .find('WithStyles(ForwardRef(Button))')
+      .at(0)
+      .simulate('click');
+    expect(props.onSetToday).toHaveBeenCalled();
+  });
+});

package/src/__tests__/e2e/DatePicker.test.tsx

@@ -0,0 +1,233 @@
+import * as React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { mount, utilsToUse } from '../test-utils';
+import { DatePicker, DatePickerProps } from '../../DatePicker/DatePicker';
+
+describe('e2e - DatePicker default year format', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+  const date = utilsToUse.date('2018-01-01T00:00:00.000Z');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <DatePicker
+        animateYearScrolling={false}
+        value={utilsToUse.date('2018-01-01T00:00:00.000')}
+        onChange={onChangeMock}
+        views={['year']}
+      />
+    );
+  });
+
+  it('Should use year format by default for year only view', () => {
+    expect(component.find('input').props().value).toBe(
+      utilsToUse.format(date, utilsToUse.yearFormat)
+    );
+  });
+});
+
+describe('e2e - DatePicker default year month format', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+  const date = utilsToUse.date('2018-01-01T00:00:00.000Z');
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker onChange={onChangeMock} value={date} views={['year', 'month']} />
+    );
+  });
+
+  it('Should use year month format by default for year & month views', () => {
+    expect(component.find('input').props().value).toBe(
+      utilsToUse.format(date, utilsToUse.yearMonthFormat)
+    );
+  });
+});
+
+describe('e2e - DatePicker default year month day format', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+  const date = utilsToUse.date('2018-01-01T00:00:00.000Z');
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker onChange={onChangeMock} value={date} views={['year', 'month', 'date']} />
+    );
+  });
+
+  it('Should use default for year & month & day views', () => {
+    expect(component.find('input').props().value).toBe(
+      utilsToUse.format(date, utilsToUse.dateFormat)
+    );
+  });
+});
+
+describe('e2e - DatePicker inline variant', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+  const onCloseMock = jest.fn();
+  const onOpenMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <DatePicker
+        autoOk
+        variant="inline"
+        animateYearScrolling={false}
+        onChange={onChangeMock}
+        onClose={onCloseMock}
+        onOpen={onOpenMock}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+      />
+    );
+  });
+
+  it('Should renders', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should open modal with picker on click', () => {
+    component.find('input').simulate('click');
+
+    expect(component.find('WithStyles(ForwardRef(Popover))').props().open).toBeTruthy();
+    expect(onOpenMock).toHaveBeenCalled();
+  });
+
+  it('Should close on popover close request', () => {
+    const popoverOnClose = component
+      .find('WithStyles(ForwardRef(Popover))')
+      .prop('onClose') as () => void;
+
+    popoverOnClose();
+
+    expect(component.find('WithStyles(ForwardRef(Popover))').prop('open')).toBeFalsy();
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  it('Should dispatch onChange and close on day select', () => {
+    component.find('input').simulate('click');
+    component
+      .find('Day button')
+      .at(10)
+      .simulate('click');
+
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(component.find('WithStyles(ForwardRef(Popover))').props().open).toBeFalsy();
+  });
+});
+
+describe('e2e - DatePicker without month change', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+  const date = utilsToUse.date('2018-01-01T00:00:00.000Z');
+
+  beforeEach(() => {
+    component = mount(<DatePicker open onChange={onChangeMock} value={date} />);
+  });
+
+  it('Should not add to loading queue if callback is undefined', () => {
+    component
+      .find('CalendarHeader button')
+      .first()
+      .simulate('click');
+    expect(
+      component
+        .find('Calendar')
+        .first()
+        .state('loadingQueue')
+    ).toEqual(0);
+  });
+});
+
+describe('e2e - DatePicker month change sync', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+  const onMonthChangeMock = jest.fn();
+  const date = utilsToUse.date('2018-01-01T00:00:00.000Z');
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker open onChange={onChangeMock} onMonthChange={onMonthChangeMock} value={date} />
+    );
+  });
+
+  it('Should not add to loading queue when synchronous', () => {
+    component
+      .find('CalendarHeader button')
+      .first()
+      .simulate('click');
+    expect(
+      component
+        .find('Calendar')
+        .first()
+        .state('loadingQueue')
+    ).toEqual(0);
+  });
+});
+
+describe('e2e - DatePicker month change async', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+
+  const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+  const promise = sleep(50);
+  const onMonthChangeAsyncMock = jest.fn(async () => {
+    await promise;
+  });
+
+  const date = utilsToUse.date('2018-01-01T00:00:00.000Z');
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker
+        open
+        onChange={onChangeMock}
+        onMonthChange={onMonthChangeAsyncMock}
+        value={date}
+      />
+    );
+  });
+
+  it('Should add to loading queue when loading asynchronous data', () => {
+    component
+      .find('CalendarHeader button')
+      .first()
+      .simulate('click');
+
+    expect(
+      component
+        .find('Calendar')
+        .first()
+        .state('loadingQueue')
+    ).toEqual(1);
+  });
+
+  it('Should empty loading queue after loading asynchronous data', async () => {
+    component
+      .find('CalendarHeader button')
+      .first()
+      .simulate('click');
+    await sleep(100);
+    expect(
+      component
+        .find('Calendar')
+        .first()
+        .state('loadingQueue')
+    ).toEqual(0);
+  });
+});
+
+test('Custom toolbar component', () => {
+  const component = mount(
+    <DatePicker
+      open
+      value={new Date()}
+      onChange={jest.fn()}
+      ToolbarComponent={() => <div id="custom-toolbar" />}
+    />
+  );
+
+  expect(component.find('#custom-toolbar').length).toBe(1);
+});

package/src/__tests__/e2e/DatePickerProps.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { mount, utilsToUse } from '../test-utils';
+import { DatePicker } from '../../DatePicker/DatePicker';
+
+describe('DatePicker - different props', () => {
+  it('Should not render toolbar if onlyCalendar = true', () => {
+    const component = mount(
+      <DatePicker
+        open
+        disableToolbar
+        onChange={jest.fn()}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+      />
+    );
+
+    expect(component.find('WithStyles(PickerToolbar)').length).toBe(0);
+  });
+});