vanillajs-datepicker
Version:
A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks
246 lines (196 loc) • 8.52 kB
JavaScript
describe('Datepicker', function () {
let input;
before(function () {
input = document.createElement('input');
testContainer.appendChild(input);
});
after(function () {
if (input.datepicker) {
input.datepicker.destroy();
}
testContainer.removeChild(input);
});
it('input element\'s value is used for the initial date', function () {
input.value = '04/22/2020';
const dp = new Datepicker(input);
expect(dp.dates, 'to equal', [dateValue(2020, 3, 22)]);
dp.destroy();
input.value = '';
});
it('the picker is hidden at start', function () {
const dp = new Datepicker(input);
expect(isVisible(document.querySelector('.datepicker')), 'to be false');
expect(dp.active, 'to be false');
dp.destroy();
});
it('the picker becomes visible when the input element get focused', function () {
const dp = new Datepicker(input);
input.focus();
expect(isVisible(document.querySelector('.datepicker')), 'to be true');
expect(dp.active, 'to be true');
dp.destroy();
});
describe('hide()', function () {
it('makes the picker invisible', function () {
const dp = new Datepicker(input);
input.focus();
dp.hide();
expect(isVisible(document.querySelector('.datepicker')), 'to be false');
expect(dp.active, 'to be false');
dp.destroy();
});
});
describe('show()', function () {
it('makes the picker visible', function () {
const dp = new Datepicker(input);
dp.show();
expect(isVisible(document.querySelector('.datepicker')), 'to be true');
expect(dp.active, 'to be true');
dp.destroy();
});
it('moves the focus onto the input field', function () {
// related to issue #52
const dp = new Datepicker(input);
const spyShow = sinon.spy(dp, 'show');
input.blur();
dp.show();
expect(document.activeElement, 'to be', input);
// the focus listener's calling show() is prevented
expect(spyShow.calledOnce, 'to be true');
spyShow.restore();
dp.destroy();
});
it('adds or removes dir attribute to/from the picker if picker\'s text direction != input\'s', function (done) {
// input's direction differs from the parent's
input.dir = 'rtl';
const {dp, picker} = createDP(input);
dp.show();
expect(picker.dir, 'to be', 'rtl');
dp.hide();
// parent's direction becomes the same as the input's
testContainer.dir = 'rtl';
dp.show();
expect(picker.hasAttribute('dir'), 'to be false');
dp.hide();
input.removeAttribute('dir');
testContainer.removeAttribute('dir');
// input's direction differs from the document's
const htmlElem = document.querySelector('html');
htmlElem.dir = 'rtl';
input.style.direction = 'ltr';
dp.show();
// input's direction becomes the same as the document's
expect(picker.dir, 'to be', 'ltr');
dp.hide();
input.removeAttribute('style');
dp.show();
expect(picker.hasAttribute('dir'), 'to be false');
dp.destroy();
htmlElem.removeAttribute('dir');
htmlElem.style.direction = 'ltr';
const checkDirChange = () => {
if (window.getComputedStyle(htmlElem).direction === 'ltr') {
htmlElem.removeAttribute('style');
done();
} else {
setTimeout(checkDirChange, 10);
}
};
checkDirChange();
});
});
describe('picker', function () {
it('displays current month with current date as focued date if no initial date is provided', function () {
let clock = sinon.useFakeTimers({now: new Date(2020, 1, 14), shouldAdvanceTime: true});
const {dp, picker} = createDP(input);
const days = Array.from(picker.querySelector('.datepicker-grid').children);
dp.show();
expect(getViewSwitch(picker).textContent, 'to be', 'February 2020');
expect(days, 'to have length', 42);
expect(getCellIndices(days, '.datepicker-cell'), 'to have length', 42);
expect(days[0].textContent, 'to be', '26');
expect(days[0].classList.contains('prev'), 'to be true');
expect(days[0].classList.contains('next'), 'to be false');
expect(days[5].textContent, 'to be', '31');
expect(days[5].classList.contains('prev'), 'to be true');
expect(days[5].classList.contains('next'), 'to be false');
expect(days[6].textContent, 'to be', '1');
expect(days[6].classList.contains('prev'), 'to be false');
expect(days[6].classList.contains('next'), 'to be false');
expect(days[34].textContent, 'to be', '29');
expect(days[34].classList.contains('prev'), 'to be false');
expect(days[34].classList.contains('next'), 'to be false');
expect(days[35].textContent, 'to be', '1');
expect(days[35].classList.contains('prev'), 'to be false');
expect(days[35].classList.contains('next'), 'to be true');
expect(days[41].textContent, 'to be', '7');
expect(days[41].classList.contains('prev'), 'to be false');
expect(days[41].classList.contains('next'), 'to be true');
expect(getCellIndices(days, '.focused'), 'to equal', [19]);
expect(getCellIndices(days, '.selected'), 'to be empty');
expect(days[19].textContent, 'to be', '14');
dp.destroy();
clock.restore();
});
it('displays iniial date\'s month with the date as selected and focued date', function () {
input.value = '04/22/2020';
const {dp, picker} = createDP(input);
const days = Array.from(picker.querySelector('.datepicker-grid').children);
dp.show();
expect(getViewSwitch(picker).textContent, 'to be', 'April 2020');
expect(days, 'to have length', 42);
expect(getCellIndices(days, '.datepicker-cell'), 'to have length', 42);
expect(days[0].textContent, 'to be', '29');
expect(days[0].classList.contains('prev'), 'to be true');
expect(days[0].classList.contains('next'), 'to be false');
expect(days[2].textContent, 'to be', '31');
expect(days[2].classList.contains('prev'), 'to be true');
expect(days[2].classList.contains('next'), 'to be false');
expect(days[3].textContent, 'to be', '1');
expect(days[3].classList.contains('prev'), 'to be false');
expect(days[3].classList.contains('next'), 'to be false');
expect(days[32].textContent, 'to be', '30');
expect(days[32].classList.contains('prev'), 'to be false');
expect(days[32].classList.contains('next'), 'to be false');
expect(days[33].textContent, 'to be', '1');
expect(days[33].classList.contains('prev'), 'to be false');
expect(days[33].classList.contains('next'), 'to be true');
expect(days[41].textContent, 'to be', '9');
expect(days[41].classList.contains('prev'), 'to be false');
expect(days[41].classList.contains('next'), 'to be true');
expect(getCellIndices(days, '.focused'), 'to equal', [24]);
expect(getCellIndices(days, '.selected'), 'to equal', [24]);
expect(days[24].textContent, 'to be', '22');
dp.destroy();
input.value = '';
});
it('displays day names of week by default', function () {
const {dp, picker} = createDP(input);
const daysOfWeek = picker.querySelector('.days-of-week');
const days = Array.from(daysOfWeek.children).map(el => el.textContent);
expect(days, 'to equal', ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);
dp.destroy();
});
it('does not display calendar weeks by default', function () {
const {dp, picker} = createDP(input);
expect(picker.querySelectorAll('.calendar-weeks').length, 'to be', 0);
dp.destroy();
});
it('uses "button" for the main class of button element', function () {
const {dp, picker} = createDP(input);
const [viewSwitch, prevButton, nextButton, todayButton, clearButton] = getParts(picker, [
'.view-switch',
'.prev-button',
'.next-button',
'.today-button',
'.clear-button',
]);
expect(viewSwitch.className, 'to be', 'button view-switch');
expect(prevButton.className, 'to be', 'button prev-button prev-btn');
expect(nextButton.className, 'to be', 'button next-button next-btn');
expect(todayButton.className, 'to be', 'button today-button today-btn');
expect(clearButton.className, 'to be', 'button clear-button clear-btn');
dp.destroy();
});
});
});