@mekari/mekari-ui-vue
Version:
--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import
240 lines (200 loc) • 10.5 kB
JavaScript
import MDatePickerRanged from './index.vue';
import MDatePickerRangedContainer from './components/DatePickerRangedContainer.vue';
import MDatePickerDayPicker from '../DatePicker/components/DatePickerDayPicker.vue';
import MDatePickerInput from '../DatePicker/components/DatePickerInput.vue';
import locale from '../DatePicker/locale';
import MFormInput from '../FormInput';
import { BFormInput } from 'bootstrap-vue';
import { shallowMount } from '@vue/test-utils';
describe('Mekari UI Date Picker Ranged Component', () => {
let wrapper;
const initWrapper = props =>
shallowMount(MDatePickerRanged, {
propsData: {
...props,
},
stubs: {
'm-date-picker-ranged-container-stub': MDatePickerRangedContainer,
'm-date-picker-input-stub': MDatePickerInput,
'm-form-input-stub': MFormInput,
},
});
afterEach(() => {
wrapper.destroy();
});
it('should match snapshot', async () => {
wrapper = initWrapper({ value: [new Date(2020, 11, 24), new Date(2020, 11, 25)] }); // eslint-disable-line no-magic-numbers
await wrapper.vm.$nextTick();
expect(wrapper.element).toMatchSnapshot();
});
describe('should set date picker value correctly', () => {
it('should set to new value if there are updated value', async () => {
wrapper = initWrapper();
wrapper.setProps({ value: [new Date(2020, 11, 24), new Date(2020, 11, 25)] });
await wrapper.vm.$nextTick();
const displayedDate = wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value');
const expectedDate = locale.dateFormatBuilder(wrapper.vm.value, wrapper.vm.language, wrapper.vm.dateFormat);
expect(displayedDate).toBe(expectedDate);
});
it('should be able to display date with String format', async () => {
wrapper = initWrapper({ value: ['2020-12-31', '2020-12-31'] });
await wrapper.vm.$nextTick();
const displayedDate = wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value');
const localThis = wrapper.vm;
const firstDate = new Date(localThis.selectedYear[0], localThis.selectedMonth[0], localThis.selectedDate[0]);
const secondDate = new Date(localThis.selectedYear[1], localThis.selectedMonth[1], localThis.selectedDate[1]);
const expectedDate = locale.dateFormatBuilder([firstDate, secondDate], wrapper.vm.language, wrapper.vm.dateFormat);
expect(displayedDate).toBe(expectedDate);
});
it('should be able to display date with Number format', async () => {
wrapper = initWrapper({ value: [1609129699276, 1609129699276] });
await wrapper.vm.$nextTick();
const displayedDate = wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value');
const localThis = wrapper.vm;
const firstDate = new Date(localThis.selectedYear[0], localThis.selectedMonth[0], localThis.selectedDate[0]);
const secondDate = new Date(localThis.selectedYear[1], localThis.selectedMonth[1], localThis.selectedDate[1]);
const expectedDate = locale.dateFormatBuilder([firstDate, secondDate], wrapper.vm.language, wrapper.vm.dateFormat);
});
it('should display `-` if initial value of date picker is [null, null]', async () => {
wrapper = initWrapper();
wrapper.setProps({ value: [null, null] });
await wrapper.vm.$nextTick();
const displayedDate = wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value');
expect(displayedDate).toBe('-');
});
it('should display `-` if value of date picker is null', async () => {
wrapper = initWrapper({ value: null });
await wrapper.vm.$nextTick();
const displayedDate = wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value');
expect(displayedDate).toBe('-');
});
});
it('should display placeholder if value of date picker is null and placeholder is not empty', async () => {
wrapper = initWrapper({ value: null, placeholder: 'placeholder' });
await wrapper.vm.$nextTick();
const datePickerInputEl = wrapper.findComponent(MDatePickerInput).findComponent(BFormInput);
const displayedDate = datePickerInputEl.attributes('value');
const displayedPlaceholder = datePickerInputEl.attributes('placeholder');
expect(displayedDate).toBe('');
expect(displayedPlaceholder).toBe('placeholder');
});
it('should toggle date picker container correctly', async () => {
wrapper = initWrapper();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(true);
wrapper.findComponent(MDatePickerInput).vm.$emit('hide-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(false);
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(true);
});
it('should set selected date to [] if reset icon is clicked', async () => {
wrapper = initWrapper();
wrapper.findComponent(MDatePickerInput).trigger('mouseenter');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('reset-selected-date');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('input')[0][0]).toEqual([]);
});
it('should reverse the selected date if the second date selected is less than the first one', async () => {
wrapper = initWrapper();
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerRangedContainer).vm.$emit('update-selected-date', {
date: 1, // eslint-disable-line
month: 11, // eslint-disable-line
year: 2022, // eslint-disable-line
from: 'datePicker',
});
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value')).toBe('01 Dec 2022 - ...');;
wrapper.findComponent(MDatePickerRangedContainer).vm.$emit('update-selected-date', {
date: 1, // eslint-disable-line
month: 10, // eslint-disable-line
year: 2022, // eslint-disable-line
from: 'datePicker',
});
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value')).toBe('01 Nov 2022 - 01 Dec 2022');
wrapper.findComponent(MDatePickerRangedContainer).vm.$emit('update-selected-date', {
date: 1, // eslint-disable-line
month: 11, // eslint-disable-line
year: 2022, // eslint-disable-line
from: 'datePicker',
});
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerInput).findComponent(BFormInput).attributes('value')).toBe('01 Dec 2022 - ...');;
});
it('should update month shown on date picker if date picker container emitting "update-month"', async () => {
wrapper = initWrapper({
value: [new Date(2020, 11, 1), null] // eslint-disable-line
});
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).find('.date-picker-header-title--left').text()).toBe('December 2020');
expect(wrapper.findComponent(MDatePickerRangedContainer).find('.date-picker-header-title--right').text()).toBe('January 2021');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerRangedContainer).vm.$emit('update-month', 1);
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).find('.date-picker-header-title--left').text()).toBe('January 2021');
expect(wrapper.findComponent(MDatePickerRangedContainer).find('.date-picker-header-title--right').text()).toBe('February 2021');
});
it('should not show the date picker container when date input is clicked if disabled prop true', async () => {
wrapper = initWrapper({
disabled: true,
});
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(false);
});
it('should not show the date picker container when props disabled toggled', async () => {
wrapper = initWrapper({
disabled: true,
});
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(false);
await wrapper.vm.$nextTick();
wrapper.setProps({ disabled: false });
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(false);
});
it('should not show the date picker container when props clickableReadonly toggled', async () => {
wrapper = initWrapper({
clickableReadonly: false,
});
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(false);
await wrapper.vm.$nextTick();
wrapper.setProps({ clickableReadonly: true });
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(false);
});
it('should not have "disableddate" on component MDatePickerDayPicker if props disablePastDates set to false', async () => {
wrapper = initWrapper({ disablePastDates: false, value: [new Date(2020, 0, 1)] });
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).findComponent(MDatePickerDayPicker).attributes('disableddates')).toBeFalsy();
});
it('should be able to use datePickerInputContainer slot as trigger for date picker container', async () => {
wrapper = shallowMount(MDatePickerRanged, {
propsData: {
useCustomInput: true,
},
scopedSlots: {
datePickerInputContainer: `
<template #datePickerInputContainer slot-scope="props">
<button :id="props.triggerId" @click="props.setShowDatePicker(true)">
{{ props.setDatePicker }}
</button>
</template>
`,
},
});
wrapper.find('button').trigger('click');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerRangedContainer).exists()).toBe(true);
});
});