@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
256 lines (204 loc) • 10.6 kB
JavaScript
import MDatePicker from './index.vue';
import MDatePickerContainer from './components/DatePickerContainer.vue';
import MDatePickerDayPicker from './components/DatePickerDayPicker.vue';
import MDatePickerMonthPicker from './components/DatePickerMonthPicker.vue';
import MDatePickerYearPicker from './components/DatePickerYearPicker.vue';
import MDatePickerInput from './components/DatePickerInput.vue';
import locale from './locale';
import MFormInput from '../FormInput';
import { BFormInput } from 'bootstrap-vue';
import { shallowMount } from '@vue/test-utils';
describe('Mekari UI Date Picker Component', () => {
let wrapper;
const initWrapper = props =>
shallowMount(MDatePicker, {
propsData: {
...props,
},
stubs: {
'm-date-picker-container-stub': MDatePickerContainer,
'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) }); // eslint-disable-line no-magic-numbers
await wrapper.vm.$nextTick();
expect(wrapper.element).toMatchSnapshot();
});
it('should set to new value if there are updated value', async () => {
wrapper = initWrapper();
wrapper.setProps({ value: new Date(2020, 11, 24) });
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 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(MDatePickerContainer).exists()).toBe(true);
wrapper.findComponent(MDatePickerInput).vm.$emit('hide-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.emitted('blur')).toBeTruthy();
expect(wrapper.findComponent(MDatePickerContainer).exists()).toBe(false);
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).exists()).toBe(true);
});
it('should set selected date to null 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]).toBe(null);
});
it('should set picker date to today if the selected date is null', async () => {
wrapper = initWrapper();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).trigger('mouseenter');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('reset-selected-date');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
const monthCount = 12;
const monthShown = locale.dictionary[wrapper.vm.language].fullMonths[wrapper.vm.pickerMonth % monthCount];
const headerCopy = `${monthShown} ${wrapper.vm.pickerYear}`;
expect(wrapper.findComponent(MDatePickerContainer).find('.date-picker-header-title').text()).toBe(headerCopy);
});
it('should update date picker view based on date picker container\'s children state', async () => {
wrapper = initWrapper();
wrapper.setData({
datePickerView: 'year',
});
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
// year picker component should be visible, because current date picker container state is on year picker
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerYearPicker).exists()).toBe(true);
// month picker component should be hidden, because current date picker container state is on year picker
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerMonthPicker).exists()).toBe(false);
// day picker component should be hidden, because current date picker container state is on year picker
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerDayPicker).exists()).toBe(false);
// trigger to update view from year picker to month picker
wrapper.findComponent(MDatePickerContainer).vm.$emit('update-selected-date', {
year: 2020, // eslint-disable-line
from: 'yearPicker',
});
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerYearPicker).exists()).toBe(false);
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerMonthPicker).exists()).toBe(true);
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerDayPicker).exists()).toBe(false);
wrapper.findComponent(MDatePickerContainer).vm.$emit('update-selected-date', {
month: 10, // eslint-disable-line
year: 2021, // eslint-disable-line
from: 'monthPicker',
});
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerYearPicker).exists()).toBe(false);
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerMonthPicker).exists()).toBe(false);
expect(wrapper.findComponent(MDatePickerContainer).findComponent(MDatePickerDayPicker).exists()).toBe(true);
});
it('should update selected date when children component emitting "update-selected-date" then emit "input" if the date is changed', async () => {
wrapper = initWrapper();
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerContainer).vm.$emit('update-selected-date', {
date: 1, // eslint-disable-line
month: 11, // eslint-disable-line
year: 2022, // eslint-disable-line
from: 'datePicker',
});
expect(wrapper.emitted('input')[0][0]).toEqual(new Date(2022, 11, 1)); // eslint-disable-line
});
it('should update month shown on date picker if date picker container emitting "update-month"', async () => {
wrapper = initWrapper({
value: new Date(2020, 11, 1) // eslint-disable-line
});
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerInput).vm.$emit('show-date-picker');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).find('.date-picker-header-title').text()).toBe('December 2020');
await wrapper.vm.$nextTick();
wrapper.findComponent(MDatePickerContainer).vm.$emit('update-month', 1);
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).find('.date-picker-header-title').text()).toBe('January 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(MDatePickerContainer).exists()).toBe(false);
});
it('should not show the date picker container when props disabled toggled', async () => {
wrapper = initWrapper({
disabled: true,
});
expect(wrapper.findComponent(MDatePickerContainer).exists()).toBe(false);
await wrapper.vm.$nextTick();
wrapper.setProps({ disabled: false });
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).exists()).toBe(false);
});
it('should not show the date picker container when props clickableReadonly toggled', async () => {
wrapper = initWrapper({
clickableReadonly: false,
});
expect(wrapper.findComponent(MDatePickerContainer).exists()).toBe(false);
await wrapper.vm.$nextTick();
wrapper.setProps({ clickableReadonly: true });
await wrapper.vm.$nextTick();
expect(wrapper.findComponent(MDatePickerContainer).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(MDatePickerContainer).findComponent(MDatePickerDayPicker).attributes('disableddates')).toBeFalsy();
});
it('should be able to use datePickerInputContainer slot as trigger for date picker container', async () => {
wrapper = shallowMount(MDatePicker, {
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(MDatePickerContainer).exists()).toBe(true);
});
});