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

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

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { clickOKButton } from './commands';
+import { mount, utilsToUse } from '../test-utils';
+import { DatePicker, DatePickerProps } from '../../DatePicker';
+
+describe('e2e - DatePicker', () => {
+  let component: ReactWrapper<DatePickerProps>;
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <DatePicker
+        open
+        autoOk
+        openTo="date"
+        animateYearScrolling={false}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+      />
+    );
+  });
+
+  it('Should renders', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should render proper count of days', () => {
+    expect(component.find('Day').length).toBe(35);
+  });
+
+  it('Should dispatch onChange on day click', () => {
+    component
+      .find('Day button')
+      .at(2)
+      .simulate('click');
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
+  it('Should render year selection', () => {
+    component
+      .find('ToolbarButton')
+      .first()
+      .simulate('click');
+
+    expect(component.find('Year').length).toBe(201);
+
+    component
+      .find('Year')
+      .at(1)
+      .simulate('click');
+
+    clickOKButton(component);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});
+
+describe('e2e -- DatePicker views year', () => {
+  const onChangeMock = jest.fn();
+  const onYearChangeMock = jest.fn();
+
+  let component: ReactWrapper<DatePickerProps>;
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker
+        open
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        onYearChange={onYearChangeMock}
+        views={['year']}
+      />
+    );
+  });
+
+  it('Should render year selection and select year', () => {
+    expect(component.find('Year').length).toBe(201);
+
+    component
+      .find('Year')
+      .at(1)
+      .simulate('click');
+
+    clickOKButton(component);
+    expect(onYearChangeMock).toHaveBeenCalled();
+  });
+});
+
+describe('e2e -- DatePicker views year and month', () => {
+  const onChangeMock = jest.fn();
+  const onMonthChangeMock = jest.fn();
+
+  let component: ReactWrapper<DatePickerProps>;
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker
+        open
+        autoOk
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        onMonthChange={onMonthChangeMock}
+        openTo="month"
+        views={['year', 'month']}
+      />
+    );
+  });
+
+  it('Should select month', () => {
+    expect(component.find('Month').length).toBe(12);
+    component
+      .find('Month')
+      .first()
+      .simulate('click');
+
+    expect(onMonthChangeMock).toHaveBeenCalled();
+  });
+
+  it('Should switch to year selection and back to month', () => {
+    component
+      .find('ToolbarButton')
+      .first()
+      .simulate('click');
+
+    const year = component.find('Year');
+    expect(component.find('Year').length).toBe(201);
+
+    year.first().simulate('click');
+    expect(component.find('Month').length).toBe(12);
+  });
+});
+
+describe('e2e -- DatePicker views year and month open from year', () => {
+  const onChangeMock = jest.fn();
+  let component: ReactWrapper<DatePickerProps>;
+
+  beforeEach(() => {
+    component = mount(
+      <DatePicker
+        open
+        autoOk
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        views={['year', 'month']}
+        openTo="year"
+      />
+    );
+  });
+
+  it('Should render year selection', () => {
+    expect(component.find('Year').length).toBe(201);
+  });
+});

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { mount, utilsToUse } from '../test-utils';
+import { DateTimePicker, DateTimePickerProps } from '../../DateTimePicker/DateTimePicker';
+
+const format = process.env.UTILS === 'moment' ? 'MM/DD/YYYY HH:mm' : 'MM/dd/yyyy hh:mm';
+
+describe('e2e - DateTimePicker', () => {
+  let component: ReactWrapper<DateTimePickerProps>;
+
+  const onCloseMock = jest.fn();
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    component = mount(
+      <DateTimePicker
+        clearable
+        format={format}
+        onClose={onCloseMock}
+        onChange={onChangeMock}
+        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(Dialog))').prop('open')).toBeTruthy();
+  });
+
+  it('Should update state when passing new value from outside', () => {
+    component.setProps({ value: '2018-01-01T00:00:00.000Z' });
+    component.update(); // make additional react tick to update text field
+
+    const expectedString = utilsToUse.format(utilsToUse.date('2018-01-01T00:00:00.000Z'), format);
+    expect(component.find('input').props().value).toBe(expectedString);
+  });
+
+  it('Should change internal state on update', () => {
+    component.find('input').simulate('click');
+    component
+      .find('Day button')
+      .at(3)
+      .simulate('click');
+
+    expect(
+      component
+        .find('ToolbarButton')
+        .at(0)
+        .text()
+    ).toBe('2018');
+    // expect(component.find('ToolbarButton').at(1).text()).toBe('Jan 3');
+  });
+});
+
+describe('e2e -- Controlling open state', () => {
+  let component: ReactWrapper<DateTimePickerProps>;
+  const onCloseMock = jest.fn();
+
+  beforeEach(() => {
+    component = mount(
+      <DateTimePicker
+        open
+        onClose={onCloseMock}
+        onChange={jest.fn()}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+      />
+    );
+  });
+
+  it('Should be opened', () => {
+    expect(component.find('WithStyles(ForwardRef(Dialog))').prop('open')).toBeTruthy();
+  });
+
+  it('Should close', () => {
+    component
+      .find('ForwardRef(DialogActions) button')
+      .at(0)
+      .simulate('click');
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { clickOKButton } from './commands';
+import { mount, utilsToUse, toHaveBeenCalledExceptMoment } from '../test-utils';
+import { DateTimePicker, DateTimePickerProps } from '../../DateTimePicker/DateTimePicker';
+
+describe('e2e - DateTimePicker', () => {
+  let component: ReactWrapper<DateTimePickerProps>;
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <DateTimePicker
+        open
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        openTo="hours"
+        leftArrowIcon="keyboard_arrow_left"
+        rightArrowIcon="keyboard_arrow_right"
+        dateRangeIcon="date_range"
+        timeIcon="access_time"
+      />
+    );
+  });
+
+  it('Should renders', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should display year view', () => {
+    component
+      .find('ToolbarButton')
+      .first()
+      .simulate('click');
+
+    expect(component.find('Year').length).toBe(201);
+    component
+      .find('Year')
+      .at(1)
+      .simulate('click');
+
+    clickOKButton(component);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
+  it('Should render hour view', () => {
+    component
+      .find('ToolbarButton')
+      .at(2)
+      .simulate('click');
+    expect(component.find('TimePickerView').props().type).toBe('hours');
+  });
+
+  it('Should render minutes view', () => {
+    component
+      .find('ToolbarButton')
+      .at(3)
+      .simulate('click');
+    expect(component.find('TimePickerView').props().type).toBe('minutes');
+  });
+
+  it('Should change meridiem', () => {
+    component
+      .find('ToolbarButton')
+      .at(5)
+      .simulate('click');
+
+    clickOKButton(component);
+    toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000Z')]);
+  });
+});

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

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import addDays from 'date-fns/addDays';
+import { ReactWrapper } from 'enzyme';
+import { mount } from '../test-utils';
+import { KeyboardDatePicker, KeyboardDatePickerProps } from '../../DatePicker/DatePicker';
+
+describe('e2e -- DatePicker keyboard input', () => {
+  const onChangeMock = jest.fn();
+  let component: ReactWrapper<KeyboardDatePickerProps>;
+
+  beforeEach(() => {
+    component = mount(
+      <KeyboardDatePicker
+        label="Masked input"
+        placeholder="10/10/2018"
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+        value={new Date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        InputAdornmentProps={{
+          disableTypography: true,
+        }}
+        InputLabelProps={{
+          htmlFor: 'your-id',
+        }}
+      />
+    );
+  });
+
+  it('Should properly set value on change keyboard', () => {
+    const e = { target: { value: '10/11/2018' } };
+
+    component.find('input').simulate('change', e);
+    expect(component.find('input').prop('value')).toBe('10/11/2018');
+
+    component.find('input').simulate('blur');
+    expect(onChangeMock).toBeCalled();
+  });
+});
+
+describe('e2e -- KeyboardDatePicker validation errors', () => {
+  it('Should render error message if date is unparseable', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+        value={new Date(NaN)}
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe('Invalid Date Format');
+  });
+
+  it('Should render error message if date is after disableFuture', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        onChange={jest.fn()}
+        disableFuture
+        value={addDays(new Date(), 2)}
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
+      'Date should not be after maximal date'
+    );
+  });
+
+  it('Should render error message if date is before disablePast', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        onChange={jest.fn()}
+        disablePast
+        value={addDays(new Date(), -2)}
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
+      'Date should not be before minimal date'
+    );
+  });
+
+  it('Should not render error message if date is after maxDate without strict comparison', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        onChange={jest.fn()}
+        maxDate={new Date('2018-01-01T00:00:00.000Z')}
+        value={new Date('2018-01-01T01:00:00.000Z')}
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe('');
+  });
+
+  it('Should render error message if date is after maxDate with strict comparison', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        onChange={jest.fn()}
+        maxDate={new Date('2018-01-01T00:00:00.000Z')}
+        value={new Date('2018-01-01T01:00:00.000Z')}
+        strictCompareDates
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
+      'Date should not be after maximal date'
+    );
+  });
+
+  it('Should not render error message if date is after minDate without strict comparison', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        onChange={jest.fn()}
+        minDate={new Date('2018-01-01T01:00:00.000Z')}
+        value={new Date('2018-01-01T00:00:00.000Z')}
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe('');
+  });
+
+  it('Should render error message if date is after minDate with strict comparison', () => {
+    const component = mount(
+      <KeyboardDatePicker
+        onChange={jest.fn()}
+        minDate={new Date('2018-01-01T01:00:00.000Z')}
+        value={new Date('2018-01-01T00:00:00.000Z')}
+        strictCompareDates
+        format={process.env.UTILS === 'moment' ? 'DD/MM/YYYY' : 'dd/MM/yyyy'}
+      />
+    );
+
+    expect(component.find('ForwardRef(TextField)').prop('helperText')).toBe(
+      'Date should not be before minimal date'
+    );
+  });
+});

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { mount, utilsToUse } from '../test-utils';
+import {
+  KeyboardDateTimePicker,
+  KeyboardDateTimePickerProps,
+} from '../../DateTimePicker/DateTimePicker';
+
+const format = process.env.UTILS === 'moment' ? 'MM/DD/YYYY HH:mm' : 'MM/dd/yyyy hh:mm';
+
+describe('e2e - KeyboardDateTimePicker (inline)', () => {
+  let component: ReactWrapper<KeyboardDateTimePickerProps>;
+  const onChangeMock = jest.fn();
+  const onCloseMock = jest.fn();
+  const onOpenMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <KeyboardDateTimePicker
+        autoOk
+        variant="inline"
+        inputVariant="outlined"
+        onChange={onChangeMock}
+        onClose={onCloseMock}
+        onOpen={onOpenMock}
+        format={format}
+        KeyboardButtonProps={{ id: 'keyboard-button' }}
+        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('button#keyboard-button').simulate('click');
+    expect(component.find('WithStyles(ForwardRef(Popover))').props().open).toBeTruthy();
+    expect(onOpenMock).toHaveBeenCalled();
+  });
+
+  it('Should apply keyboard input', () => {
+    component.find('input').simulate('change', { target: { value: '02/01/2018 10:00' } });
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from '../test-utils';
+import { DatePicker } from '../../DatePicker';
+import { createMuiTheme } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/styles';
+import { DateTimePicker } from '../../DateTimePicker/DateTimePicker';
+
+const theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+  },
+});
+
+test('Should renders without crash in dark theme', () => {
+  const component = mount(
+    <ThemeProvider theme={theme}>
+      <DateTimePicker open openTo="hours" value={null} onChange={jest.fn()} />
+    </ThemeProvider>
+  );
+
+  expect(component).toBeTruthy();
+});
+
+test('Should render component with different orientation', () => {
+  const component = mount(
+    <DatePicker open orientation="landscape" value={null} onChange={jest.fn()} />
+  );
+
+  expect(component).toBeTruthy();
+});

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { clickOKButton } from './commands';
+import { TimePicker, TimePickerProps } from '../../TimePicker/TimePicker';
+import { mount, utilsToUse, toHaveBeenCalledExceptMoment } from '../test-utils';
+
+const fakeTouchEvent = {
+  buttons: 1,
+  nativeEvent: {
+    offsetX: 20,
+    offsetY: 15,
+  },
+};
+
+describe('e2e - TimePicker', () => {
+  let component: ReactWrapper<TimePickerProps>;
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <TimePicker open value={utilsToUse.date('2018-01-01T00:00:00.000')} onChange={onChangeMock} />
+    );
+  });
+
+  it('Should renders', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should submit onChange on moving', () => {
+    component.find('Clock div[role="menu"]').simulate('mouseMove', fakeTouchEvent);
+    component.find('Clock div[role="menu"]').simulate('mouseUp', fakeTouchEvent);
+
+    expect(
+      component
+        .find('WithStyles(ToolbarButton)')
+        .at(0)
+        .text()
+    ).toBe('11');
+  });
+
+  it('Should change minutes (touch)', () => {
+    component
+      .find('WithStyles(ToolbarButton)')
+      .at(1)
+      .simulate('click');
+
+    component.find('Clock div[role="menu"]').simulate('touchMove', {
+      buttons: 1,
+      changedTouches: [
+        {
+          clientX: 20,
+          clientY: 15,
+        },
+      ],
+    });
+
+    expect(
+      component
+        .find('WithStyles(ToolbarButton)')
+        .at(1)
+        .text()
+    ).toBe('53');
+  });
+
+  it('Should change meridiem mode', () => {
+    component
+      .find('WithStyles(ToolbarButton)')
+      .at(3)
+      .simulate('click');
+
+    clickOKButton(component);
+    toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000')]);
+  });
+});
+
+describe('e2e - TimePicker with seconds', () => {
+  let component: ReactWrapper<TimePickerProps>;
+  const onChangeMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    component = mount(
+      <TimePicker
+        open
+        views={['hours', 'minutes', 'seconds']}
+        value={utilsToUse.date('2018-01-01T00:00:12.000')}
+        onChange={onChangeMock}
+      />
+    );
+  });
+
+  it('Should show seconds number', () => {
+    expect(
+      component
+        .find('WithStyles(ToolbarButton)')
+        .at(2)
+        .text()
+    ).toBe('12');
+  });
+
+  it('Should change seconds', () => {
+    component
+      .find('WithStyles(ToolbarButton)')
+      .at(2)
+      .simulate('click');
+
+    component.find('Clock div[role="menu"]').simulate('touchMove', {
+      buttons: 1,
+      changedTouches: [
+        {
+          clientX: 20,
+          clientY: 15,
+        },
+      ],
+    });
+
+    clickOKButton(component);
+    toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T00:00:53.000')]);
+  });
+});

package/src/__tests__/e2e/commands.tsx

@@ -0,0 +1,8 @@
+import { ReactWrapper } from 'enzyme';
+
+export const clickOKButton = (component: ReactWrapper<any>) => {
+  component
+    .find('ForwardRef(DialogActions) WithStyles(ForwardRef(Button))')
+    .at(1)
+    .simulate('click');
+};

package/src/__tests__/setup.js

@@ -0,0 +1,26 @@
+const Enzyme = require('enzyme');
+const EnzymeAdapter = require('enzyme-adapter-react-16');
+
+// Setup enzyme's react adapter
+Enzyme.configure({ adapter: new EnzymeAdapter() });
+
+// Convert any console error into a thrown error
+const error = console.error;
+console.error = (...args) => {
+  error.apply(console, args);
+  if (args[0] instanceof Error) {
+    throw args[0];
+  } else {
+    // combine multi args into a string
+    const message = args
+      .map(value => {
+        if (typeof value === 'object') {
+          return JSON.stringify(value);
+        } else {
+          return value;
+        }
+      })
+      .join(' ');
+    throw new Error(message);
+  }
+};