// Copyright (C) 2019 Storj Labs, Inc. // See LICENSE for copying information. import VDatePicker from '@/components/common/VDatePicker.vue'; import { mount } from '@vue/test-utils'; const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; describe('VDatePicker.vue', () => { it('renders correctly', async () => { const wrapper = mount(VDatePicker, {}); await wrapper.vm.showCheck(); expect(wrapper.findAll('li').at(0).text()).toBe('Mo'); expect(wrapper.findAll('.day').length).toBe(42); await wrapper.vm.showYear(); expect(wrapper.findAll('.year').length).toBe(100); await wrapper.vm.showMonth(); expect(wrapper.findAll('.month').length).toBe(12); }); it('renders correctly with props', async () => { const wrapper = mount(VDatePicker, { propsData: { isSundayFirst: true, }, }); await wrapper.vm.showCheck(); expect(wrapper.findAll('li').at(0).text()).toBe('Su'); expect(wrapper.findAll('.day').length).toBe(42); }); it('triggers correct functionality on normal check', async () => { const wrapper = mount(VDatePicker); await wrapper.vm.showCheck(); await wrapper.vm.setYear(2019); await wrapper.vm.setMonth(months[9]); wrapper.findAll('.day').at(1).trigger('click'); expect(wrapper.vm.selectedDays.length).toBe(1); const selectedDay = wrapper.vm.selectedDays[0]; expect(selectedDay.getDate()).toBe(1); expect(selectedDay.getMonth()).toBe(9); expect(selectedDay.getFullYear()).toBe(2019); wrapper.findAll('.day').at(2).trigger('click'); expect(wrapper.vm.selectedDays.length).toBe(0); }); it('triggers correct functionality on toggle checking', async () => { const wrapper = mount(VDatePicker); await wrapper.vm.showCheck(); await wrapper.vm.setYear(2019); await wrapper.vm.setMonth(months[9]); wrapper.findAll('.day').at(1).trigger('click'); expect(wrapper.vm.selectedDays.length).toBe(1); const selectedDay1 = wrapper.vm.selectedDays[0]; expect(selectedDay1.getDate()).toBe(1); expect(selectedDay1.getMonth()).toBe(9); expect(selectedDay1.getFullYear()).toBe(2019); wrapper.findAll('.day').at(1).trigger('click'); expect(wrapper.vm.selectedDays.length).toBe(0); wrapper.findAll('.day').at(2).trigger('click'); expect(wrapper.vm.selectedDays.length).toBe(1); const selectedDay2 = wrapper.vm.selectedDays[0]; expect(selectedDay2.getDate()).toBe(2); expect(selectedDay2.getMonth()).toBe(9); expect(selectedDay2.getFullYear()).toBe(2019); }); it('triggers correct functionality on month selection', async () => { const wrapper = mount(VDatePicker); await wrapper.vm.showCheck(); await wrapper.vm.setYear(2019); await wrapper.vm.setMonth(months[9]); expect(wrapper.findAll('.month').length).toBe(0); await wrapper.find('.month-selection').trigger('click'); expect(wrapper.findAll('.month').length).toBe(12); await wrapper.findAll('.month').at(0).trigger('click'); expect(wrapper.vm.selectedDateState.month).toBe(0); expect(wrapper.find('.month-selection').text()).toBe(months[0]); }); it('triggers correct functionality on year selection', async () => { const wrapper = mount(VDatePicker); const now = new Date(); const nowYear = now.getFullYear(); await wrapper.vm.showCheck(); await wrapper.vm.setYear(2019); await wrapper.vm.setMonth(months[9]); expect(wrapper.findAll('.year').length).toBe(0); await wrapper.find('.year-selection').trigger('click'); expect(wrapper.findAll('.year').length).toBe(100); expect(wrapper.findAll('.year').at(0).text()).toBe(nowYear.toString()); await wrapper.find('.year-selection').trigger('click'); await wrapper.findAll('.year').at(1).trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(nowYear - 1); expect(wrapper.find('.year-selection').text()).toBe((nowYear - 1).toString()); }); it('triggers correct functionality on month incrementation', async () => { const wrapper = mount(VDatePicker); const now = new Date(); const nowYear = now.getFullYear(); await wrapper.vm.showCheck(); await wrapper.vm.setYear(nowYear); await wrapper.vm.setMonth(months[now.getMonth() - 1]); const actualDates = wrapper.findAll('.day'); actualDates.at(actualDates.length - 1).trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(nowYear); expect(wrapper.vm.selectedDateState.month).toBe(now.getMonth()); wrapper.find('.cov-date-next').trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(nowYear); expect(wrapper.vm.selectedDateState.month).toBe(now.getMonth()); wrapper.vm.setYear(nowYear - 1); wrapper.vm.setMonth(months[0]); const changedDates = wrapper.findAll('.day'); changedDates.at(changedDates.length - 1).trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(nowYear - 1); expect(wrapper.vm.selectedDateState.month).toBe(1); wrapper.find('.cov-date-next').trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(nowYear - 1); expect(wrapper.vm.selectedDateState.month).toBe(2); }); it('triggers correct functionality on month decrementation', async () => { const wrapper = mount(VDatePicker); await wrapper.vm.showCheck(); await wrapper.vm.setYear(2019); await wrapper.vm.setMonth(months[9]); wrapper.findAll('.day').at(0).trigger('click'); expect(wrapper.vm.selectedDateState.month).toBe(8); wrapper.find('.cov-date-previous').trigger('click'); expect(wrapper.vm.selectedDateState.month).toBe(7); wrapper.vm.setMonth(months[0]); wrapper.find('.cov-date-previous').trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(2018); expect(wrapper.vm.selectedDateState.month).toBe(11); wrapper.vm.setYear(2019); wrapper.vm.setMonth(months[0]); wrapper.findAll('.day').at(0).trigger('click'); expect(wrapper.vm.selectedDateState.year).toBe(2018); expect(wrapper.vm.selectedDateState.month).toBe(11); }); });