Skip to content

Commit

Permalink
fix(tests): Make tests green again
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexander Soldatov committed Oct 21, 2019
1 parent 8c16b5a commit 47ba21a
Show file tree
Hide file tree
Showing 10 changed files with 1,144 additions and 357 deletions.
927 changes: 812 additions & 115 deletions package-lock.json
View file

Large diffs are not rendered by default.

12 changes: 10 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,17 @@
"del": "3.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.3.4",
"eslint-plugin-chai-friendly": "^0.4.1",
"enzyme-to-json": "^3.4.3",
"eslint": "5.12.1",
"eslint-config-airbnb": "17.1.0",
"eslint-plugin-chai-friendly": "0.4.1",
"eslint-plugin-class-methods-use-this-regexp": "0.1.0",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsdoc": "4.0.1",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-markdown": "^1.0.0-beta.6",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-sort-class-members": "1.4.0",
"file-loader": "^3.0.1",
"glob": "7.1.2",
"gulp": "3.9.1",
Expand Down
129 changes: 78 additions & 51 deletions src/calendar-input/calendar-input.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,31 @@ import CalendarInput from './calendar-input';
import * as calendarUtils from './utils';
import keyboardCode from '../lib/keyboard-code';
import { SCROLL_TO_CORRECTION } from '../vars';
import { setIsMatched as setMqMatched } from '../mq/mq';
import { setIsMatched as setMqMatched } from '../mq/mq'; // eslint-disable-line

jest.mock('../mq/mq');
jest.mock('modernizr', () => ({
inputtypes: {
search: true,
tel: true,
url: true,
email: true,
datetime: false,
date: true,
month: true,
week: true,
time: true,
'datetime-local': true,
number: true,
range: true,
color: true
},
pointerevents: true,
touchevents: true
}));

describe('calendar-input', () => {
let originalWindowScrollTo = window.scrollTo;
const originalWindowScrollTo = window.scrollTo;

beforeAll(() => {
timezoneMock.register('UTC');
Expand All @@ -38,47 +57,47 @@ describe('calendar-input', () => {

it('should render without problems', () => {
const month = new Date('2018-06-15').valueOf();
let calendarInput = shallow(<CalendarInput value='01.06.2018' calendar={ { month } } />);
const calendarInput = shallow(<CalendarInput value='01.06.2018' calendar={ { month } } />);

expect(calendarInput).toMatchSnapshot();
});

it('should render with calendar icon by default', () => {
let calendarInput = mount(<CalendarInput />);
let iconNode = calendarInput.find('IconButton');
const calendarInput = mount(<CalendarInput />);
const iconNode = calendarInput.find('IconButton');

expect(iconNode.length).toBe(1);
});

it('should render without calendar icon with withIcon=false', () => {
let calendarInput = mount(<CalendarInput withIcon={ false } />);
let iconNode = calendarInput.find('IconButton');
const calendarInput = mount(<CalendarInput withIcon={ false } />);
const iconNode = calendarInput.find('IconButton');

expect(iconNode.length).toBe(0);
});

it('should call `onInputChange` callback after input value was changed', () => {
let onInputChange = jest.fn();
let calendarInput = mount(<CalendarInput onInputChange={ onInputChange } />);

const onInputChange = jest.fn();
const calendarInput = mount(<CalendarInput onInputChange={ onInputChange } />);

calendarInput.find('input').simulate('change');

expect(onInputChange).toHaveBeenCalled();
});

it('should call `onChange` callback after input value was changed', () => {
let onChange = jest.fn();
let calendarInput = mount(<CalendarInput onChange={ onChange } />);
const onChange = jest.fn();
const calendarInput = mount(<CalendarInput onChange={ onChange } />);

calendarInput.find('input').simulate('change');

expect(onChange).toHaveBeenCalled();
});

it('should focus input on after `focus` call', () => {
let calendarInput = mount(<CalendarInput />);
let focusTarget = calendarInput.instance().customCalendarTarget;
const calendarInput = mount(<CalendarInput />);
const focusTarget = calendarInput.instance().customCalendarTarget;

jest.spyOn(focusTarget, 'focus');

calendarInput.instance().focus();
Expand All @@ -87,8 +106,9 @@ describe('calendar-input', () => {
});

it('should blur input on after `blur` call', () => {
let calendarInput = mount(<CalendarInput />);
let focusTarget = calendarInput.instance().customCalendarTarget;
const calendarInput = mount(<CalendarInput />);
const focusTarget = calendarInput.instance().customCalendarTarget;

jest.spyOn(focusTarget, 'blur');

calendarInput.instance().blur();
Expand All @@ -97,18 +117,18 @@ describe('calendar-input', () => {
});

it('should scroll window to element on public scrollTo method', () => {
let calendarInput = mount(<CalendarInput />);
let elemTopPosition = calendarInput.getDOMNode().getBoundingClientRect().top;
let elemScrollTo = (elemTopPosition + window.pageYOffset) - SCROLL_TO_CORRECTION;
const calendarInput = mount(<CalendarInput />);
const elemTopPosition = calendarInput.getDOMNode().getBoundingClientRect().top;
const elemScrollTo = (elemTopPosition + window.pageYOffset) - SCROLL_TO_CORRECTION;

calendarInput.instance().scrollTo();

expect(window.scrollTo).toHaveBeenCalledWith(0, elemScrollTo);
});

it('should receive SyntheticEvent with type blur from input in first argument of `onInputFocus` callback', () => {
let onInputFocus = jest.fn();
let calendarInput = mount(<CalendarInput onInputFocus={ onInputFocus } />);
const onInputFocus = jest.fn();
const calendarInput = mount(<CalendarInput onInputFocus={ onInputFocus } />);

calendarInput.find('input').simulate('focus');

Expand All @@ -117,8 +137,8 @@ describe('calendar-input', () => {
});

it('should receive SyntheticEvent with type blur from input in first argument of `onInputBlur` callback', () => {
let onInputBlur = jest.fn();
let calendarInput = mount(<CalendarInput onInputBlur={ onInputBlur } />);
const onInputBlur = jest.fn();
const calendarInput = mount(<CalendarInput onInputBlur={ onInputBlur } />);

calendarInput.find('input').simulate('blur');

Expand All @@ -127,8 +147,8 @@ describe('calendar-input', () => {
});

it('should receive SyntheticEvent with type focus from component in first argument of `onFocus` callback', () => {
let onFocus = jest.fn();
let calendarInput = mount(<CalendarInput onFocus={ onFocus } />);
const onFocus = jest.fn();
const calendarInput = mount(<CalendarInput onFocus={ onFocus } />);

calendarInput.find('input').simulate('focus');

Expand All @@ -137,19 +157,18 @@ describe('calendar-input', () => {
});

it('should receive SyntheticEvent with type blur from component in first argument of `onBlur` callback', () => {
let onBlur = jest.fn();
let calendarInput = mount(<CalendarInput onBlur={ onBlur } />);
const onBlur = jest.fn();
const calendarInput = mount(<CalendarInput onBlur={ onBlur } />);

calendarInput.find('input').simulate('blur');

expect(onBlur).toHaveBeenCalled();
expect(onBlur).toHaveBeenCalledWith(expect.objectContaining({ type: 'blur' }));
});


it('should receive custom formatted date from event.target.value on `onFocus` callback', () => {
let onFocus = jest.fn();
let calendarInput = mount(<CalendarInput onFocus={ onFocus } value='01.08.2016' />);
const onFocus = jest.fn();
const calendarInput = mount(<CalendarInput onFocus={ onFocus } value='01.08.2016' />);

calendarInput.find('input').simulate('focus');

Expand All @@ -159,7 +178,7 @@ describe('calendar-input', () => {
});

it('should receive custom formatted date from event.target.value on `onBlur` callback', () => {
let onBlur = jest.fn();
const onBlur = jest.fn();
const wrapper = mount(<CalendarInput onBlur={ onBlur } value='01.08.2016' />);

wrapper.find('input').simulate('blur');
Expand All @@ -169,7 +188,7 @@ describe('calendar-input', () => {
});

it('should receive custom formatted date from event.target.value on `onChange` callback', () => {
let onChange = jest.fn();
const onChange = jest.fn();
const wrapper = mount(<CalendarInput onChange={ onChange } />);
const inputNode = wrapper.find('input');

Expand All @@ -179,7 +198,7 @@ describe('calendar-input', () => {
});

it('should receive custom formatted date from event.target.value on `onInputChange` callback', () => {
let onInputChange = jest.fn();
const onInputChange = jest.fn();
const wrapper = mount(<CalendarInput onInputChange={ onInputChange } />);
const inputNode = wrapper.find('input');

Expand All @@ -202,7 +221,7 @@ describe('calendar-input', () => {
});

it('should call `onCalendarChange` callback after calendar value was changed', () => {
let onCalendarChange = jest.fn();
const onCalendarChange = jest.fn();
const wrapper = mount(<CalendarInput opened={ true } onCalendarChange={ onCalendarChange } />);
const dayNode = wrapper.find('.calendar__day').at(15);

Expand All @@ -212,7 +231,7 @@ describe('calendar-input', () => {
});

it('should call `onChange` callback after calendar value was changed', () => {
let onChange = jest.fn();
const onChange = jest.fn();
const wrapper = mount(<CalendarInput opened={ true } onChange={ onChange } />);
const dayNode = wrapper.find('.calendar__day').at(15);

Expand Down Expand Up @@ -283,6 +302,7 @@ describe('calendar-input', () => {
const wrapper = mount(<CalendarInput />);
const calendarTarget = wrapper.instance().customCalendarTarget;
const calendarNode = wrapper.find('.calendar');

jest.spyOn(calendarTarget, 'focus');

calendarNode.simulate('keyDown', { which: keyboardCode.ESCAPE });
Expand All @@ -293,16 +313,17 @@ describe('calendar-input', () => {
it('should focus on input after calendar icon was clicked', () => {
const wrapper = mount(<CalendarInput />);
const calendarTarget = wrapper.instance().customCalendarTarget;

jest.spyOn(calendarTarget, 'focus');
let iconNode = wrapper.find('.icon');
const iconNode = wrapper.find('.icon');

iconNode.simulate('click');

expect(calendarTarget.focus).toHaveBeenCalled();
});

it('should call `onCalendarKeyDown` callback after any key was pressed in calendar', () => {
let onCalendarKeyDown = jest.fn();
const onCalendarKeyDown = jest.fn();
const wrapper = mount(<CalendarInput onCalendarKeyDown={ onCalendarKeyDown } />);
const calendarNode = wrapper.find('.calendar');

Expand All @@ -312,7 +333,7 @@ describe('calendar-input', () => {
});

it('should call `onInputKeyDown` callback after any key was pressed in input', () => {
let onInputKeyDown = jest.fn();
const onInputKeyDown = jest.fn();
const wrapper = mount(<CalendarInput onInputKeyDown={ onInputKeyDown } />);
const inputNode = wrapper.find('input');

Expand All @@ -322,7 +343,7 @@ describe('calendar-input', () => {
});

it('should call `onKeyDown` callback after any key was pressed in input and in calendar', () => {
let onKeyDown = jest.fn();
const onKeyDown = jest.fn();
const wrapper = mount(<CalendarInput onKeyDown={ onKeyDown } />);
const inputNode = wrapper.find('input');
const calendarNode = wrapper.find('.calendar');
Expand All @@ -334,15 +355,15 @@ describe('calendar-input', () => {
});

it('should render with `off` autocomplete attribute', () => {
let input = mount(<CalendarInput autocomplete={ false } />);
let controlNode = input.find('input');
const input = mount(<CalendarInput autocomplete={ false } />);
const controlNode = input.find('input');

expect(controlNode.props().autoComplete).toBe('off');
});

it('should render with `on` autocomplete attribute', () => {
let input = mount(<CalendarInput autocomplete={ true } />);
let controlNode = input.find('input');
const input = mount(<CalendarInput autocomplete={ true } />);
const controlNode = input.find('input');

expect(controlNode.props().autoComplete).toBe('on');
});
Expand All @@ -353,7 +374,7 @@ describe('calendar-input', () => {
});

it('should set `max` attribute to `date`', () => {
let calendar = {
const calendar = {
laterLimit: 1514505600000
};

Expand All @@ -364,7 +385,7 @@ describe('calendar-input', () => {
});

it('should set `min` attribute to `date`', () => {
let calendar = {
const calendar = {
earlierLimit: 1513900800000
};

Expand All @@ -375,22 +396,22 @@ describe('calendar-input', () => {
});

it('should render date input with mobileMode=native', () => {
let calendarInput = mount(<CalendarInput mobileMode='native' />);
let dateInput = calendarInput.find('input[type="date"]');
const calendarInput = mount(<CalendarInput mobileMode='native' />);
const dateInput = calendarInput.find('input[type="date"]');

expect(dateInput.length).toBe(1);
});

it('should set Popup target to `screen` with mobileMode=popup', () => {
let calendarInput = mount(<CalendarInput mobileMode='popup' />);
let popup = calendarInput.find('Popup');
const calendarInput = mount(<CalendarInput mobileMode='popup' />);
const popup = calendarInput.find('Popup');

expect(popup.prop('target')).toEqual('screen');
});

it('should not show Popup with mobileMode=input', () => {
let calendarInput = mount(<CalendarInput mobileMode='input' />);
let popup = calendarInput.find('Popup');
const calendarInput = mount(<CalendarInput mobileMode='input' />);
const popup = calendarInput.find('Popup');

expect(popup.prop('visible')).toBe(false);
});
Expand All @@ -399,18 +420,21 @@ describe('calendar-input', () => {
describe('calendar utils', () => {
it('should change format of a date', () => {
const result = calendarUtils.changeDateFormat('2012-11-10', 'YYYY-MM-DD', 'DD.MM.YYYY');

expect(result).toBe('10.11.2012');
});

it('should return start of month', () => {
const result = new Date(calendarUtils.calculateMonth('2012-11-10', 'YYYY-MM-DD'));

expect(result.getMonth() + 1).toBe(11); // getMonth is zero based
expect(result.getFullYear()).toBe(2012);
});

it('should return current month if not valid value given', () => {
const result = new Date(calendarUtils.calculateMonth('foo', 'YYYY-MM-DD'));
const now = new Date();

expect(result.getMonth()).toBe(now.getMonth());
expect(result.getFullYear()).toBe(now.getFullYear());
});
Expand All @@ -421,6 +445,7 @@ describe('calendar-input', () => {
'YYYY-MM-DD',
(new Date(2013, 8, 10).getTime())
));

expect(result.getMonth()).toBe(8);
expect(result.getFullYear()).toBe(2013);
});
Expand All @@ -432,6 +457,7 @@ describe('calendar-input', () => {
(new Date(2011, 8, 10).getTime()),
(new Date(2011, 9, 10).getTime())
));

expect(result.getMonth()).toBe(9);
expect(result.getFullYear()).toBe(2011);
});
Expand All @@ -443,6 +469,7 @@ describe('calendar-input', () => {
(new Date(2011, 8, 10).getTime()),
(new Date(2014, 9, 10).getTime())
));

expect(result.getMonth() + 1).toBe(11); // getMonth is zero based
expect(result.getFullYear()).toBe(2012);
});
Expand Down
Loading

0 comments on commit 47ba21a

Please sign in to comment.