import React from 'react'; import { mount } from 'enzyme'; import dayjs from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; import MockDate from 'mockdate'; import DatePicker from '..'; import focusTest from '../../../tests/shared/focusTest'; import 'dayjs/locale/mk'; // to test local in 'prop locale should works' test case dayjs.extend(customParseFormat); describe('DatePicker', () => { const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); focusTest(DatePicker, { refFocus: true }); beforeEach(() => { MockDate.set(dayjs('2016-11-22').valueOf()); }); afterEach(() => { MockDate.reset(); errorSpy.mockReset(); }); afterAll(() => { errorSpy.mockRestore(); }); it('prop locale should works', () => { const locale = { lang: { locale: 'mk', placeholder: 'Избери дата', rangePlaceholder: ['Начална дата', 'Крайна дата'], today: 'Днес', now: 'Сега', backToToday: 'Към днес', ok: 'Добре', clear: 'Изчистване', month: 'Месец', year: 'Година', timeSelect: 'Избор на час', dateSelect: 'Избор на дата', monthSelect: 'Избор на месец', yearSelect: 'Избор на година', decadeSelect: 'Десетилетие', previousMonth: 'Предишен месец (PageUp)', nextMonth: 'Следващ месец (PageDown)', previousYear: 'Последна година (Control + left)', nextYear: 'Следваща година (Control + right)', previousDecade: 'Предишно десетилетие', nextDecade: 'Следващо десетилетие', previousCentury: 'Последен век', nextCentury: 'Следващ век', yearFormat: 'YYYY', dateFormat: 'D M YYYY', dayFormat: 'D', dateTimeFormat: 'D M YYYY HH:mm:ss', monthBeforeYear: true, }, timePickerLocale: { placeholder: 'Избор на час', }, }; const birthday = dayjs('2000-01-01', 'YYYY-MM-DD'); const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); it('disabled date', () => { const disabledDate = current => current && current < dayjs().endOf('day'); const wrapper = mount(); expect(wrapper.render()).toMatchSnapshot(); }); it('placeholder', () => { const wrapper = mount(); expect(wrapper.find('input').props().placeholder).toEqual('Select date'); }); it('showTime={{ showHour: true, showMinute: true }}', () => { const wrapper = mount( , ); expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2); expect( wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell') .length, ).toBe(24); expect( wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell') .length, ).toBe(60); }); it('showTime={{ showHour: true, showSecond: true }}', () => { const wrapper = mount( , ); expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2); expect( wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell') .length, ).toBe(24); expect( wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell') .length, ).toBe(60); }); it('showTime={{ showMinute: true, showSecond: true }}', () => { const wrapper = mount( , ); expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2); expect( wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell') .length, ).toBe(60); expect( wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell') .length, ).toBe(60); }); it('showTime should work correctly when format is custom function', () => { const wrapper = mount( val.format('YYYY-MM-DD')} open />, ); const input = wrapper.find('input').simulate('mousedown'); expect(input.simulate.bind(input, 'focus')).not.toThrowError(); }); it('12 hours', () => { const wrapper = mount( , ); expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4); expect( wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell') .length, ).toBe(12); expect( wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell') .length, ).toBe(60); expect( wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell') .length, ).toBe(60); expect( wrapper.find('.ant-picker-time-panel-column').at(3).find('.ant-picker-time-panel-cell') .length, ).toBe(2); }); it('24 hours', () => { const wrapper = mount( , ); expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3); expect( wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell') .length, ).toBe(24); expect( wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell') .length, ).toBe(60); expect( wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell') .length, ).toBe(60); }); it('DatePicker.RangePicker with defaultPickerValue and showTime', () => { const startDate = dayjs('1982-02-12'); const endDate = dayjs('1982-02-22'); const wrapper = mount( , ); const month = wrapper.find('.ant-picker-header-view .ant-picker-month-btn').text(); const year = wrapper.find('.ant-picker-header-view .ant-picker-year-btn').text(); expect(month).toBe(startDate.format('MMM')); expect(year).toBe(startDate.format('YYYY')); expect(wrapper.find('.ant-picker-time-panel').length).toBe(1); }); it('placement api work correctly ', () => { const popupAlignDefault = (points = ['tl', 'bl'], offset = [0, 4]) => ({ points, offset, overflow: { adjustX: 1, adjustY: 1, }, }); const wrapper = mount(); expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tl', 'bl'])); wrapper.setProps({ placement: 'bottomRight', }); expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tr', 'br'])); wrapper.setProps({ placement: 'topLeft', }); expect(wrapper.find('Trigger').prop('popupAlign')).toEqual( popupAlignDefault(['bl', 'tl'], [0, -4]), ); wrapper.setProps({ placement: 'topRight', }); expect(wrapper.find('Trigger').prop('popupAlign')).toEqual( popupAlignDefault(['br', 'tr'], [0, -4]), ); }); });