2963 lines
140 KiB
JavaScript
Executable File
2963 lines
140 KiB
JavaScript
Executable File
import selectors from '../selectors'
|
|
import pickerProperties from '../pickerProperties'
|
|
|
|
const {
|
|
singleDatepickerInput,
|
|
daterangeInputStart,
|
|
daterangeInputEnd,
|
|
} = selectors
|
|
const { singleDatepickerProperties, getDaterangeProperties } = pickerProperties
|
|
|
|
function checkPickerProperties(picker, isDaterange, id) {
|
|
return function({ property, defaultValue, domElement, selector, deepEqual, isFunction, notOwnProperty }) {
|
|
const value = picker[property]
|
|
|
|
if (!notOwnProperty) {
|
|
// The property should exist on the picker.
|
|
expect(picker, `(checkPickerProperties) isDaterange<${isDaterange}>`).to.haveOwnProperty(property)
|
|
}
|
|
|
|
// Special case for id.
|
|
if (isDaterange && property === 'id') {
|
|
expect(value, 'id').to.equal(id)
|
|
|
|
// First get the dom element, then ensure it has the correct default value.
|
|
} else if (domElement) {
|
|
cy.get(selector).then(elements => {
|
|
expect(value, `(checkPickerProperties) ${property}`).to.equal(defaultValue(elements))
|
|
expect(elements, `(checkPickerProperties) ${selector}`).to.have.lengthOf(1)
|
|
})
|
|
|
|
// Ensure the value is a function.
|
|
} else if (isFunction) {
|
|
expect(value, `(checkPickerProperties) method<${property}>`).to.be.a('function')
|
|
|
|
// The property should have the correct default value.
|
|
} else if (deepEqual) {
|
|
expect(value, `(checkPickerProperties) ${property}`).to.deep.equal(defaultValue)
|
|
} else {
|
|
expect(value, `(checkPickerProperties) ${property}`).to.equal(defaultValue)
|
|
}
|
|
}
|
|
}
|
|
|
|
function testDomStructure(pickerType, selectorObj) {
|
|
const date = new Date()
|
|
const multiplier = pickerType === 'single' ? 1 : 2
|
|
|
|
cy.get(selectorObj.calendarContainer).as('calendarContainer')
|
|
cy.get(selectorObj.calendar).as('calendar')
|
|
cy.get(selectorObj.controls).as('controls')
|
|
cy.get(`${selectorObj.controls} .qs-arrow`).as('arrows')
|
|
cy.get(`${selectorObj.controls} .qs-month-year`).as('monthYear')
|
|
cy.get(`${selectorObj.controls} .qs-month`).as('month')
|
|
cy.get(`${selectorObj.controls} .qs-year`).as('year')
|
|
cy.get(selectorObj.squaresContainer).as('squaresContainer')
|
|
cy.get(`${selectorObj.squaresContainer} ${selectors.common.everySquare}`).as('squares')
|
|
cy.get(selectorObj.overlay).as('overlay')
|
|
cy.get(selectorObj.overlayInputContainer).as('overlayInputContainer')
|
|
cy.get(`${selectorObj.overlayInputContainer} .qs-overlay-year`).as('overlayYearInput')
|
|
cy.get(`${selectorObj.overlayInputContainer} .qs-close`).as('overlayClose')
|
|
cy.get(selectorObj.overlayMonthContainer).as('overlayMonthContainer')
|
|
|
|
|
|
// calendarContainer
|
|
cy.get(selectors.common.container).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@calendarContainer').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@calendarContainer').children().should('have.length', 1)
|
|
cy.get('@calendarContainer').should('have.attr', 'class', 'qs-datepicker-container qs-hidden')
|
|
|
|
// calendar
|
|
cy.get(selectors.common.calendar).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@calendar').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@calendar').children().should('have.length', 3)
|
|
cy.get('@calendar').should('have.attr', 'class', 'qs-datepicker')
|
|
|
|
// calendar => controls
|
|
cy.get(selectors.common.controls).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@controls').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@controls').children().should('have.length', 3)
|
|
cy.get('@controls').should('have.attr', 'class', 'qs-controls')
|
|
|
|
// calendar => controls => arrows
|
|
cy.get(`${selectors.common.controls} .qs-arrow`).should('have.length', 2 * multiplier) // Searching the whole document.
|
|
cy.get('@arrows').should('have.length', 2) // Searching within the specified section of the document.
|
|
cy.get('@arrows').then($arrows => {
|
|
cy.get($arrows[0]).children().should('have.length', 0)
|
|
cy.get($arrows[1]).children().should('have.length', 0)
|
|
|
|
expect($arrows[0], '@arrows - left').to.have.attr('class', 'qs-arrow qs-left')
|
|
expect($arrows[1], '@arrows - right').to.have.attr('class', 'qs-arrow qs-right')
|
|
})
|
|
|
|
// calendar => controls => month/year
|
|
cy.get(`${selectors.common.controls} .qs-month-year`).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@monthYear').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@monthYear').children().should('have.length', 2)
|
|
cy.get('@monthYear').should('have.attr', 'class', 'qs-month-year')
|
|
|
|
// calendar => controls => month/year => month
|
|
cy.get(`${selectors.common.controls} .qs-month`).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@month').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@month').children().should('have.length', 0)
|
|
cy.get('@month').should('have.text', pickerProperties.months[date.getMonth()])
|
|
cy.get('@month').should('have.attr', 'class', 'qs-month')
|
|
|
|
// calendar => controls => month/year => year
|
|
cy.get(`${selectors.common.controls} .qs-year`).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@year').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@year').children().should('have.length', 0)
|
|
cy.get('@year').should('have.text', date.getFullYear())
|
|
cy.get('@year').should('have.attr', 'class', 'qs-year')
|
|
|
|
// calendar => squares
|
|
cy.get(selectors.common.squaresContainer).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@squaresContainer').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@squaresContainer').should('have.attr', 'class', 'qs-squares')
|
|
|
|
// calendar => squares => various types of squares
|
|
cy.get('@squaresContainer').children().then($allSquares => {
|
|
cy.get(selectors.common.everySquare).should('have.length', $allSquares.length * multiplier)
|
|
|
|
/*
|
|
It's a little hard to test the correct number of total squares since there's a lot
|
|
of logic involved. I don't want to simply repeat the logic in the library, defeating the
|
|
purpose of testing.
|
|
|
|
https://github.com/qodesmith/datepicker/issues/86
|
|
One thing we can do to guage if we have extra days is to test the 1st 7 and last 7 calendar days.
|
|
If any one of those sets are completely empty, we've got an extra row that shouldn't be there.
|
|
*/
|
|
|
|
const arrayOfSquares = Array.from($allSquares)
|
|
|
|
// 1st 7 days - NOT the days of the week header.
|
|
const firstWeekHasContent = arrayOfSquares.slice(7, 14).some(square => square.textContent === '1')
|
|
|
|
// Last 7 days.
|
|
const lastWeekHasContent = arrayOfSquares.slice(-7).some(square => {
|
|
// The last day of any month will be on of these numbers. One of them should be found in the last week.
|
|
return ['28', '29', '30', '31'].some(num => square.textContent === num)
|
|
})
|
|
|
|
expect(firstWeekHasContent, '@squaresContainer - First week has content').to.equal(true)
|
|
expect(lastWeekHasContent, '@squaresContainer - Last week has content').to.equal(true)
|
|
})
|
|
cy.get('@squares').filter('.qs-day')
|
|
.should('have.length', 7)
|
|
.should('have.attr', 'class', 'qs-square qs-day')
|
|
.then($qsDays => {
|
|
const message = '@squaresContainer/.qs-day'
|
|
$qsDays.each((i, qsDay) => {
|
|
pickerProperties.days.forEach(day => {
|
|
expect(qsDay.classList.contains(day), `${message} (day of week class: ${day})`).to.equal(false)
|
|
})
|
|
expect(qsDay.textContent, message).to.be.oneOf(pickerProperties.days)
|
|
expect(qsDay, message).to.not.have.attr('data-direction')
|
|
})
|
|
})
|
|
cy.get('@squares').filter('.qs-outside-current-month').then($outsides => {
|
|
$outsides.each((_, outside) => {
|
|
const message = '@squaresContainer/.qs-outside-current-month'
|
|
const hasDayClass = pickerProperties.days.reduce((found, day) => {
|
|
return found || outside.classList.contains(day)
|
|
}, false)
|
|
|
|
expect(hasDayClass, `${message} (has day of week class)`).to.equal(true)
|
|
expect(outside, message).to.have.text('')
|
|
expect(outside, message).to.have.class('qs-empty')
|
|
expect(outside, message).to.have.attr('data-direction')
|
|
expect(outside.dataset.direction, message).to.be.oneOf(['-1', '1'])
|
|
})
|
|
})
|
|
cy.get('@squares').filter('.qs-num').then($qsNums => {
|
|
const numOfDays = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
|
|
const message = '@squaresContainer/.qs-num'
|
|
|
|
expect($qsNums.length, message).to.equal(numOfDays)
|
|
|
|
$qsNums.each((i, qsNum) => {
|
|
const hasDayClass = pickerProperties.days.reduce((found, day) => {
|
|
return found || qsNum.classList.contains(day)
|
|
}, false)
|
|
|
|
expect(hasDayClass, `${message} (has day of week class)`).to.equal(true)
|
|
expect(qsNum.dataset.direction, message).to.equal('0')
|
|
expect(qsNum.textContent, message).to.equal(`${i + 1}`)
|
|
})
|
|
})
|
|
cy.get('@squares').filter('.qs-current').then($qsCurrent => {
|
|
const message = '@squaresContainer/.qs-num/.qs-current'
|
|
const hasDayClass = pickerProperties.days.reduce((found, day) => {
|
|
return found || $qsCurrent[0].classList.contains(day)
|
|
}, false)
|
|
|
|
expect(hasDayClass, `${message} (has day of week class)`).to.equal(true)
|
|
|
|
expect($qsCurrent, message).to.have.length(1)
|
|
expect($qsCurrent.text(), message).to.equal(`${date.getDate()}`)
|
|
})
|
|
|
|
// calendar => overlay
|
|
cy.get(selectors.common.overlay).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@overlay').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@overlay').should('have.attr', 'class', 'qs-overlay qs-hidden')
|
|
cy.get('@overlay').children().should('have.length', 3)
|
|
|
|
// calendar => overlay => overlayInputContainer
|
|
cy.get(selectors.common.overlayInputContainer).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@overlayInputContainer').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@overlayInputContainer').children().should('have.length', 2)
|
|
cy.get('@overlayInputContainer').should('not.have.attr', 'class')
|
|
cy.get('@overlayInputContainer').then($overlayInputContainer => {
|
|
expect($overlayInputContainer[0].getAttributeNames(), '@overlayInputContainer - getAttributeNames()').to.deep.equal([])
|
|
})
|
|
|
|
// calendar => overlay => overlayInputContainer => year input
|
|
cy.get(selectors.common.overlayYearInput).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@overlayYearInput').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@overlayYearInput').should('have.prop', 'tagName').should('eq', 'INPUT')
|
|
cy.get('@overlayYearInput').should('have.attr', 'class', 'qs-overlay-year')
|
|
cy.get('@overlayYearInput').should('have.attr', 'placeholder', '4-digit year')
|
|
cy.get('@overlayYearInput').should('have.prop', 'value', '')
|
|
cy.get('@overlayYearInput').should('have.attr', 'inputmode', 'numeric')
|
|
|
|
// calendar => overlay => overlayInputContainer => close
|
|
cy.get(selectors.common.overlayClose).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@overlayClose').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@overlayClose').should('have.attr', 'class', 'qs-close')
|
|
cy.get('@overlayClose').should('have.text', '✕')
|
|
|
|
// calendar => overlay => overlayMonthContainer
|
|
cy.get(selectors.common.overlayMonthContainer).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@overlayMonthContainer').should('have.length', 1) // Searching within the specified section of the document.
|
|
cy.get('@overlayMonthContainer').children().should('have.length', 12)
|
|
cy.get('@overlayMonthContainer').should('have.attr', 'class', 'qs-overlay-month-container')
|
|
|
|
// calendar => overlay => overlayMonthContainer => overlayMonth
|
|
cy.get(selectors.common.overlayMonth).should('have.length', 12 * multiplier) // Searching the whole document.
|
|
cy.get('@overlayMonthContainer').children().then($qsOverlayMonths => {
|
|
$qsOverlayMonths.each((i, overlayMonth) => {
|
|
const message = `.qs-overlay-month [${i}]`
|
|
|
|
expect(overlayMonth.textContent, message).to.have.length(3)
|
|
expect(overlayMonth.textContent, message).to.equal(pickerProperties.months[i].slice(0, 3))
|
|
expect(overlayMonth, message).to.have.attr('class', 'qs-overlay-month')
|
|
expect(overlayMonth, message).to.have.attr('data-month-num', `${i}`)
|
|
})
|
|
})
|
|
|
|
// calendar => overlay => overlaySubmit
|
|
cy.get(selectors.common.overlaySubmit).should('have.length', 1 * multiplier) // Searching the whole document.
|
|
cy.get('@overlay').find(selectors.common.overlaySubmit) // Searching within the specified section of the document.
|
|
.should('have.length', 1)
|
|
.should('have.text', 'Submit')
|
|
.should('have.attr', 'class', 'qs-submit qs-disabled')
|
|
.should('have.prop', 'tagName').should('eq', 'DIV') // This element is not a <button> or <input type="submit"/>.
|
|
}
|
|
|
|
function daterangeSanityCheck(pickerStart, pickerEnd) {
|
|
expect(pickerStart.id, 'pickerStart.id (sanity check)').not.to.be.undefined
|
|
expect(pickerEnd.id, 'pickerEnd.id (sanity check)').not.to.be.undefined
|
|
|
|
expect(pickerStart.id, 'pickerStart.id (sanity check)').to.equal(pickerEnd.id)
|
|
expect(pickerEnd.id, 'pickerEnd.id (sanity check)').to.equal(pickerStart.id)
|
|
|
|
expect(pickerStart.sibling, 'pickerStart.sibling (sanity check)').to.equal(pickerEnd)
|
|
expect(pickerEnd.sibling, 'pickerEnd.sibling (sanity check)').to.equal(pickerStart)
|
|
}
|
|
|
|
describe('Default properties and behavior', function() {
|
|
beforeEach(function() {
|
|
cy.visit('http://localhost:9001')
|
|
|
|
/*
|
|
We can't simply import the datepicker library up at the top because it will not
|
|
be associated with the correct window object. Instead, we can use a Cypress alias
|
|
that will expose what we want on `this`, so long as we avoid using arrow functions.
|
|
This is possible because datepicker is assigned a value on the window object in `sandbox.js`.
|
|
*/
|
|
cy.window().then(global => cy.wrap(global.datepicker).as('datepicker'))
|
|
})
|
|
|
|
describe('Single instance', function() {
|
|
it('should have the correct properties and values', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const pickerProperties = Object.keys(picker)
|
|
const trackedProperties = singleDatepickerProperties.reduce((acc, {property}) => ({...acc, [property]: true}), {})
|
|
|
|
// Ensure that all the properties on the picker are tracked in our test data.
|
|
pickerProperties.forEach(property => {
|
|
expect(trackedProperties, `(trackedProperties) ${property}`).to.haveOwnProperty(property)
|
|
})
|
|
|
|
// Ensure all the properties in our test data are on the instance.
|
|
singleDatepickerProperties.forEach(({ property }) => {
|
|
expect(picker, property).to.haveOwnProperty(property)
|
|
})
|
|
|
|
// singleDatepickerProperties.forEach(checkPickerProperties(picker))
|
|
})
|
|
|
|
it('should have the correct DOM structure', function() {
|
|
this.datepicker(singleDatepickerInput)
|
|
testDomStructure('single', selectors.single)
|
|
})
|
|
|
|
describe('Basic visuals, behavior, and property changes', function() {
|
|
it('is initially hidden in the DOM', function() {
|
|
this.datepicker(singleDatepickerInput)
|
|
cy.get(selectors.single.calendarContainer).should('not.be.visible')
|
|
})
|
|
|
|
it('should show the calendar when clicking into the input (and not show the overlay)', function() {
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(selectors.single.calendarContainer).should('be.visible')
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
const message = '.qs-overlay styles'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
})
|
|
|
|
it('should show todays date bold and underlined, all others regular', function() {
|
|
const today = new Date()
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.squaresContainer} .qs-current`)
|
|
.should('have.text', today.getDate())
|
|
.then($qsCurrent => {
|
|
const message = '.qs-current styles'
|
|
const styles = getComputedStyle($qsCurrent[0])
|
|
|
|
expect(styles.fontWeight, message).to.equal('700')
|
|
expect(styles.textDecoration, message).to.equal('underline solid rgb(0, 0, 0)')
|
|
expect(styles.backgroundColor, message).to.equal('rgba(0, 0, 0, 0)')
|
|
})
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]:not(.qs-current)`)
|
|
.should('have.length', new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate() - 1)
|
|
.then($allDaysButCurrentDay => {
|
|
const message = 'calendar day styles (not .qs-current)'
|
|
|
|
cy.wait(1).then(() => {
|
|
Array.from($allDaysButCurrentDay).forEach(el => {
|
|
const styles = getComputedStyle(el)
|
|
|
|
expect(styles.fontWeight, message).to.equal('400')
|
|
expect(styles.textDecoration, message).to.equal('none solid rgb(0, 0, 0)')
|
|
expect(styles.backgroundColor, message).to.equal('rgba(0, 0, 0, 0)')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
it('hides the calendar when clicking outside the calendar and input', function() {
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(selectors.single.calendarContainer).should('be.visible')
|
|
cy.get('body').click()
|
|
cy.get(selectors.single.calendarContainer).should('not.be.visible')
|
|
})
|
|
|
|
it('should change months when the arrows are clicked', function() {
|
|
const today = new Date()
|
|
const previousMonthDate = new Date(today.getFullYear(), today.getMonth() - 1, 1)
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
expect(picker.currentMonth, 'picker.currentMonth').to.equal(today.getMonth())
|
|
expect(picker.currentMonthName, 'picker.currentMonthName').to.equal(pickerProperties.months[today.getMonth()])
|
|
expect(picker.currentYear, 'picker.currentYear').to.equal(today.getFullYear())
|
|
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[previousMonthDate.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`)
|
|
.should('have.text', `${previousMonthDate.getFullYear()}`)
|
|
.then(() => {
|
|
expect(picker.currentMonth, 'picker.currentMonth').to.equal(previousMonthDate.getMonth())
|
|
expect(picker.currentMonthName, 'picker.currentMonthName').to.equal(pickerProperties.months[previousMonthDate.getMonth()])
|
|
expect(picker.currentYear, 'picker.currentYear').to.equal(previousMonthDate.getFullYear())
|
|
})
|
|
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
})
|
|
|
|
describe('Overlay', function() {
|
|
it('should show the overlay when the month/year is clicked', function() {
|
|
cy.clock()
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.get(selectors.single.controls).then($controls => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-controls blurred when overlay is open'
|
|
const styles = getComputedStyle($controls[0])
|
|
|
|
expect(styles.filter, message).to.equal('blur(5px)')
|
|
})
|
|
})
|
|
})
|
|
cy.get(selectors.single.squaresContainer).then($squaresContainer => {
|
|
const message = '.qs-squares (container) blurred when overlay is open'
|
|
const styles = getComputedStyle($squaresContainer[0])
|
|
|
|
expect(styles.filter, message).to.equal('blur(5px)')
|
|
})
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
const message = '.qs-overlay styles when open'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
|
|
it('should show the overlay if "defaultView" is set to "overlay"', function() {
|
|
this.datepicker(singleDatepickerInput, {defaultView: 'overlay'})
|
|
|
|
cy.get(selectors.single.overlay).should('not.be.visible')
|
|
cy.get(singleDatepickerInput).click().then(() => {
|
|
cy.get(selectors.single.overlay).should('be.visible')
|
|
cy.get(`${selectors.single.overlay} .qs-close`).click().then(() => {
|
|
cy.get(selectors.single.overlay).should('not.be.visible')
|
|
cy.get('body').click()
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(selectors.single.overlay).should('be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should focus the overlay year input', function() {
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.wait(1)
|
|
cy.focused().should('have.attr', 'class', 'qs-overlay-year')
|
|
})
|
|
|
|
it('should change the year when using the input and hitting enter or clicking the submit button', function() {
|
|
/*
|
|
Datepicker uses requestAnimationFrame in order to toggle the overlay.
|
|
cy.clock will help us cy.wait the correct way. Look, it just works, k?
|
|
*/
|
|
cy.clock()
|
|
|
|
const today = new Date()
|
|
const nextYear = today.getFullYear() + 1
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
cy.get(`${selectors.single.overlay} .qs-submit`).should('have.attr', 'class', 'qs-submit qs-disabled')
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.wait(1)
|
|
cy.get(`${selectors.single.overlayInputContainer} .qs-overlay-year`).type(`${nextYear}`)
|
|
cy.get(`${selectors.single.overlay} .qs-submit`).should('have.attr', 'class', 'qs-submit')
|
|
cy.get(`${selectors.single.overlayInputContainer} .qs-overlay-year`).focus().type('{enter}')
|
|
|
|
/*
|
|
Why do we need both cy.tick AND cy.wait? Because it's the only way the tests pass
|
|
for when the test browser is visible and when it's not. Don't ask me why.
|
|
*/
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
const message = '.qs-overlay styles after entering year'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
})
|
|
})
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${nextYear}`)
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.wait(1)
|
|
cy.get(`${selectors.single.overlayInputContainer} .qs-overlay-year`).type(`${today.getFullYear()}`)
|
|
cy.get(`${selectors.single.overlay} .qs-submit`)
|
|
.should('have.attr', 'class', 'qs-submit')
|
|
.click()
|
|
cy.wait(1)
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
})
|
|
|
|
it('should not allow leading zeros or change the year if 4 digits have not been entered', function() {
|
|
cy.clock()
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
// Set up some variables
|
|
cy.get(selectors.single.overlay).as('overlay')
|
|
cy.get(`${selectors.single.overlay} .qs-submit`).as('submit')
|
|
cy.get(`${selectors.single.overlayInputContainer} .qs-overlay-year`).as('yearInput')
|
|
|
|
// Open the overlay.
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.get('@overlay').then($overlay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
})
|
|
|
|
// Clicking the submit button should not change any styles (since it's a noop).
|
|
cy.get('@submit').click()
|
|
cy.get('@overlay').then($overlay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
})
|
|
|
|
// Hitting the enter button while focused in the input should not change any styles (since it's a noop).
|
|
cy.get('@yearInput').focus().type('{enter}')
|
|
cy.get('@overlay').then($overlay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
})
|
|
|
|
cy.get('@yearInput')
|
|
.should('have.value', '')
|
|
.type('0000')
|
|
.should('have.value', '')
|
|
|
|
cy.get('@submit').should('have.attr', 'class', 'qs-submit qs-disabled')
|
|
cy.get('@yearInput').type('1').should('have.value', '1')
|
|
cy.get('@submit').should('have.attr', 'class', 'qs-submit qs-disabled')
|
|
cy.get('@yearInput').type('2').should('have.value', '12')
|
|
cy.get('@submit').should('have.attr', 'class', 'qs-submit qs-disabled')
|
|
cy.get('@yearInput').type('3').should('have.value', '123')
|
|
cy.get('@submit').should('have.attr', 'class', 'qs-submit qs-disabled')
|
|
cy.get('@yearInput').type('4').should('have.value', '1234')
|
|
cy.get('@submit').should('have.attr', 'class', 'qs-submit')
|
|
})
|
|
|
|
it('should change the month when a month name is clicked', function() {
|
|
cy.clock()
|
|
const today = new Date()
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay styles after clicking month'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.single.overlayMonthContainer} [data-month-num="0"]`).click()
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
const message = '.qs-overlay styles after clicking month'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
})
|
|
})
|
|
cy.get(`${selectors.single.controls} .qs-month-year .qs-month`)
|
|
.should('have.text', pickerProperties.months[0])
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.tick(400).then(() => {
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay styles after clicking month'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
})
|
|
cy.get(`${selectors.single.overlayMonthContainer} [data-month-num="11"]`).click()
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
const message = '.qs-overlay styles after clicking month'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
})
|
|
})
|
|
cy.get(`${selectors.single.controls} .qs-month-year .qs-month`)
|
|
.should('have.text', pickerProperties.months[11])
|
|
})
|
|
|
|
it('should close the overlay when clicking the close button', function() {
|
|
/*
|
|
Datepicker uses requestAnimationFrame in order to toggle the overlay.
|
|
cy.clock will help us cy.wait the correct way. Look, it just works, k?
|
|
*/
|
|
cy.clock()
|
|
|
|
this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-month-year`).click()
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('1')
|
|
expect(styles.zIndex, message).to.equal('1')
|
|
})
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.single.overlay} .qs-close`).click()
|
|
cy.get(selectors.single.overlay).then($overlay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const message = '.qs-overlay'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('Date changes', function() {
|
|
it('should select a date when clicking a day, fill in the input field, and change a picker prop', function() {
|
|
const today = new Date()
|
|
const todaysDate = today.getDate()
|
|
const dayIndex = todaysDate === 1 ? 1 : 0
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const dateSelected = new Date(today.getFullYear(), today.getMonth(), dayIndex + 1)
|
|
|
|
expect(picker.dateSelected, 'picker.dateSelected').to.be.undefined
|
|
cy.get(selectors.single.calendarContainer).should('not.be.visible')
|
|
cy.get(singleDatepickerInput).should('have.value', '').click()
|
|
cy.get(selectors.single.calendarContainer).should('be.visible')
|
|
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`).should('have.length', 0)
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(dayIndex).click()
|
|
cy.get(selectors.single.calendarContainer).should('not.be.visible')
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`).should('have.length', 1)
|
|
cy.get(singleDatepickerInput).then($input => {
|
|
const message = 'The input should be populated with the `toDateString()` method'
|
|
expect($input.val(), message).to.equal(dateSelected.toDateString())
|
|
expect(+picker.dateSelected, '`picker.dateSelected` date value').to.equal(+dateSelected)
|
|
})
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(dayIndex).then($selectedDay => {
|
|
const styles = getComputedStyle($selectedDay[0])
|
|
expect(styles.backgroundColor, 'Selected day').to.equal('rgb(173, 216, 230)')
|
|
})
|
|
})
|
|
|
|
it('should de-select a date, clear the input field, and clear the picker prop', function() {
|
|
cy.clock()
|
|
const today = new Date()
|
|
const todaysDate = today.getDate()
|
|
const dayIndex = todaysDate === 1 ? 1 : 0
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const dateSelected = new Date(today.getFullYear(), today.getMonth(), dayIndex + 1)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(dayIndex).click()
|
|
cy.get(selectors.single.calendarContainer).should('not.be.visible')
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`).should('have.length', 1).then(() => {
|
|
expect(+picker.dateSelected, '`picker.dateSelected` should be filled').to.equal(+dateSelected)
|
|
})
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`)
|
|
.then($selectedDay => {
|
|
const styles = getComputedStyle($selectedDay[0])
|
|
expect(styles.backgroundColor, 'Selected day color').to.equal('rgb(173, 216, 230)')
|
|
})
|
|
.click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(dayIndex).then($selectedDay => {
|
|
cy.tick(400).then(() => {
|
|
cy.wait(400).then(() => {
|
|
const styles = getComputedStyle($selectedDay[0])
|
|
expect(styles.backgroundColor, 'Selected day color after de-selecting').to.equal('rgba(0, 0, 0, 0)')
|
|
})
|
|
})
|
|
})
|
|
cy.get(selectors.single.calendarContainer).should('be.visible')
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`).should('have.length', 0).then(() => {
|
|
expect(picker.dateSelected, 'picker.dateSelected').to.be.undefined
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('Instance methods', function() {
|
|
it('should not have a getRange method', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.getRange).to.be.undefined
|
|
})
|
|
|
|
describe('setMin', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.setMin).to.be.a('function')
|
|
})
|
|
|
|
it('should populate `minDate` on the instance object', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
|
|
expect(picker.minDate).to.be.undefined
|
|
picker.setMin(date)
|
|
expect(+picker.minDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('should disable dates prior to the provided value (including previous months)', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `Days shouldn't have qs-disabled class prior to calling setMin.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
picker.setMin(date)
|
|
})
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < (minDay - 1) ? '0.2' : '1')
|
|
|
|
if (i < (minDay - 1)) {
|
|
expect(day, 'Disabled days from setMin').to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, 'Unaffected days from setMin').not.to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should prevent disabled dates from being selected', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
picker.setMin(date)
|
|
|
|
// Assert a few values prior to clicking.
|
|
cy.get(singleDatepickerInput).should('have.value', '')
|
|
expect(picker.dateSelected).to.be.undefined
|
|
|
|
// Click a disabled date (the 1st of the month) and assert a few more values.
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(singleDatepickerInput).should('have.value', '')
|
|
expect(picker.dateSelected).to.be.undefined
|
|
})
|
|
|
|
// Navigate to the previous month and assert you can't click dates.
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-left`).click().then(() => {
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(singleDatepickerInput).should('have.value', '')
|
|
expect(picker.dateSelected).to.be.undefined
|
|
})
|
|
})
|
|
|
|
// For sanity reasons, assert that clicking a non-disabled date works.
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(14).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(singleDatepickerInput).should('not.have.value', '')
|
|
expect(picker.dateSelected).not.to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('should remove the minimum selectable date when called with no argument', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
picker.setMin(date)
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', minDay - 1)
|
|
.then(() => {
|
|
expect(picker.minDate).not.to.be.undefined
|
|
picker.setMin()
|
|
})
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', 0)
|
|
.then(() => expect(picker.minDate).to.be.undefined)
|
|
})
|
|
})
|
|
|
|
describe('setMax', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.setMax).to.be.a('function')
|
|
})
|
|
|
|
it('should populate `maxDate` on the instance object', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
|
|
expect(picker.maxDate).to.be.undefined
|
|
picker.setMax(date)
|
|
expect(+picker.maxDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('should disable dates after to the provided value (including later months)', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `Days shouldn't have qs-disabled class prior to calling setMax.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
picker.setMax(date)
|
|
})
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < maxDay ? '1' : '0.2')
|
|
|
|
if (i < maxDay) {
|
|
expect(day, 'Unaffected days from setMax').not.to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, 'Disabled days from setMax').to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should prevent disabled dates from being selected', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
picker.setMax(date)
|
|
|
|
// Assert a few values prior to clicking.
|
|
cy.get(singleDatepickerInput).should('have.value', '')
|
|
expect(picker.dateSelected).to.be.undefined
|
|
|
|
// Click a disabled date and assert a few more values.
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(maxDay + 1).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(singleDatepickerInput).should('have.value', '')
|
|
expect(picker.dateSelected).to.be.undefined
|
|
})
|
|
|
|
// Navigate to the next month and assert you can't click dates.
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-right`).click().then(() => {
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(singleDatepickerInput).should('have.value', '')
|
|
expect(picker.dateSelected).to.be.undefined
|
|
})
|
|
})
|
|
|
|
// For sanity reasons, assert that clicking a non-disabled date works.
|
|
cy.get(`${selectors.single.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"]`).eq(maxDay - 1).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(singleDatepickerInput).should('not.have.value', '')
|
|
expect(picker.dateSelected).not.to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('should remove the maximum selectable date when called with no argument', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
const daysInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()
|
|
picker.setMax(date)
|
|
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', daysInMonth - maxDay)
|
|
.then(() => {
|
|
expect(picker.maxDate).not.to.be.undefined
|
|
picker.setMax()
|
|
})
|
|
cy.get(`${selectors.single.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', 0)
|
|
.then(() => expect(picker.maxDate).to.be.undefined)
|
|
})
|
|
})
|
|
|
|
describe('show', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.show).to.be.a('function')
|
|
})
|
|
|
|
it('should show the calendar when called', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(`${selectors.single.calendarContainer}`)
|
|
.should('not.be.visible')
|
|
.then(() => picker.show())
|
|
cy.get(`${selectors.single.calendarContainer}`).should('be.visible')
|
|
})
|
|
})
|
|
|
|
describe('hide', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.hide).to.be.a('function')
|
|
})
|
|
|
|
it('should hide the calendar when called', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(`${selectors.single.calendarContainer}`)
|
|
.should('be.visible')
|
|
.then(() => picker.hide())
|
|
cy.get(`${selectors.single.calendarContainer}`).should('not.be.visible')
|
|
})
|
|
})
|
|
|
|
describe('remove', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.remove).to.be.a('function')
|
|
})
|
|
|
|
it('should remove the calendar from the DOM', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(`${selectors.single.calendarContainer}`)
|
|
.should('have.length', 1)
|
|
.then(() => picker.remove())
|
|
cy.get(`${selectors.single.calendarContainer}`).should('have.length', 0)
|
|
})
|
|
|
|
it('should remove all properties from the instance object', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
|
|
expect(Object.keys(picker).length).to.be.greaterThan(0)
|
|
picker.remove()
|
|
expect(Object.keys(picker).length).to.equal(0)
|
|
})
|
|
})
|
|
|
|
describe('setDate', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.setDate).to.be.a('function')
|
|
})
|
|
|
|
it('should set a date on the calendar', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
const dateNum = date.getDate()
|
|
|
|
cy.get('.qs-active').should('have.length', 0).then(() => picker.setDate(date))
|
|
cy.get('.qs-active').should('have.length', 1)
|
|
cy.get(`${selectors.single.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
})
|
|
|
|
it('should set the input value', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
|
|
cy.get(singleDatepickerInput).should('have.value', '').then(() => picker.setDate(date))
|
|
cy.get(singleDatepickerInput).should('have.value', date.toDateString())
|
|
})
|
|
|
|
it('should set the `dateSelected` prop on the instance object', function () {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
|
|
expect(picker.dateSelected).to.be.undefined
|
|
picker.setDate(date)
|
|
expect(+picker.dateSelected).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('should change the date on the same month if a date was already selected', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const dateNum = 15
|
|
const dateNum2 = 16
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), dateNum)
|
|
const date2 = new Date(date.getFullYear(), date.getMonth(), dateNum2)
|
|
|
|
picker.setDate(date)
|
|
cy.get(`${selectors.single.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
.then(() => picker.setDate(date2))
|
|
cy.get(`${selectors.single.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('not.have.class', 'qs-active')
|
|
|
|
cy.get(`${selectors.single.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2 - 1)
|
|
.should('have.class', 'qs-active')
|
|
})
|
|
|
|
it('should remove the selected date on the current month if a different month was provided', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
const dateNum = date.getDate()
|
|
const date2 = new Date(date.getFullYear(), date.getMonth() + 1, dateNum)
|
|
|
|
picker.setDate(date)
|
|
cy.get(`${selectors.single.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
.then(() => picker.setDate(date2))
|
|
|
|
cy.get(`${selectors.single.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('not.have.class', 'qs-active')
|
|
})
|
|
|
|
it('should set a date and navigate to that date via the 2nd argument', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`)
|
|
.should('have.text', `${today.getFullYear()}`)
|
|
.then(() => picker.setDate(date, true))
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[date.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${date.getFullYear()}`)
|
|
})
|
|
|
|
it('should not navigate to a future date when the 2nd argument is not used', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`)
|
|
.should('have.text', `${today.getFullYear()}`)
|
|
.then(() => picker.setDate(date))
|
|
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
})
|
|
|
|
it('should remove the selected date when no arguments are passed', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const date = new Date()
|
|
|
|
expect(picker.dateSelected).to.be.undefined
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`)
|
|
.should('have.length', 0)
|
|
.then(() => {
|
|
picker.setDate(date)
|
|
expect(+picker.dateSelected).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`)
|
|
.should('have.length', 1)
|
|
.then(() => {
|
|
picker.setDate()
|
|
expect(picker.dateSelected).to.be.undefined
|
|
})
|
|
cy.get(`${selectors.single.squaresContainer} .qs-active`)
|
|
.should('have.length', 0)
|
|
})
|
|
})
|
|
|
|
describe('navigate', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.navigate).to.be.a('function')
|
|
})
|
|
|
|
it('should navigate to a given date without affecting the selection', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
picker.setDate(today)
|
|
expect(+picker.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
|
|
picker.navigate(date)
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${date.getFullYear()}`)
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[date.getMonth()])
|
|
expect(+picker.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
|
|
cy.wait(1).then(() => {
|
|
picker.navigate(today)
|
|
cy.get(`${selectors.single.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
cy.get(`${selectors.single.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
expect(+picker.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
})
|
|
})
|
|
|
|
it('should navigate to a given date and trigger `onMonthChange` when the 2nd argument is used', function() {
|
|
const pickerOptions = { onMonthChange: () => {} }
|
|
cy.spy(pickerOptions, 'onMonthChange')
|
|
|
|
const picker = this.datepicker(singleDatepickerInput, pickerOptions)
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
expect(pickerOptions.onMonthChange).not.to.be.called
|
|
picker.navigate(date, true)
|
|
expect(pickerOptions.onMonthChange).to.be.called
|
|
})
|
|
})
|
|
|
|
describe('toggleOverlay', function() {
|
|
it('should be a function', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
expect(picker.toggleOverlay).to.be.a('function')
|
|
})
|
|
|
|
it('should toggle the overlay', function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
|
|
cy.get(singleDatepickerInput).click()
|
|
cy.get(selectors.common.overlay).should('not.be.visible').then(() => {
|
|
picker.toggleOverlay()
|
|
cy.get(selectors.common.overlay).should('be.visible')
|
|
cy.wait(500).then(() => {
|
|
picker.toggleOverlay()
|
|
cy.get(selectors.common.overlay).should('not.be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
it(`should do nothing when the calendar isn't shown`, function() {
|
|
const picker = this.datepicker(singleDatepickerInput)
|
|
picker.toggleOverlay()
|
|
cy.get(singleDatepickerInput).click().then(() => {
|
|
cy.wait(500)
|
|
cy.get(selectors.common.overlay).should('not.be.visible')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('Daterange pair', function() {
|
|
it('(they) should have the correct properties and values', function() {
|
|
const options = { id: Math.random() } // Using Math.random to showcase that the id just needs to be consistent between both instances.
|
|
const startPicker = this.datepicker(daterangeInputStart, options)
|
|
const endPicker = this.datepicker(daterangeInputEnd, options)
|
|
|
|
daterangeSanityCheck(startPicker, endPicker)
|
|
|
|
;['start', 'end'].forEach(type => {
|
|
const pickerToCheck = type === 'start' ? startPicker : endPicker
|
|
const pickerProperties = getDaterangeProperties(type, startPicker, endPicker)
|
|
pickerProperties.forEach(checkPickerProperties(pickerToCheck, true, options.id))
|
|
|
|
// Ensure that only and all the properties are in the picker instance.
|
|
const pickerKeys = Object.keys(pickerToCheck)
|
|
const numOfPropertiesExpected = pickerProperties.length
|
|
|
|
expect(pickerKeys).to.have.length(numOfPropertiesExpected)
|
|
|
|
pickerProperties.forEach(({ property }) => {
|
|
expect(pickerToCheck, property).to.haveOwnProperty(property)
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(they) should have the correct DOM structure(s)', function() {
|
|
const startPicker = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const endPicker = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
daterangeSanityCheck(startPicker, endPicker)
|
|
testDomStructure('daterangeStart', selectors.range.start)
|
|
testDomStructure('daterangeEnd', selectors.range.end)
|
|
})
|
|
|
|
describe('Basic visuals and behavior', function() {
|
|
it('(they) are initially hidden in the DOM', function() {
|
|
const startPicker = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const endPicker = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
daterangeSanityCheck(startPicker, endPicker)
|
|
|
|
cy.get(selectors.range.start.calendarContainer).should('not.be.visible')
|
|
cy.get(selectors.range.end.calendarContainer).should('not.be.visible')
|
|
})
|
|
|
|
it('(they) should show the calendar (individually) when clicking into the input (and not show the overlay)', function() {
|
|
const startPicker = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const endPicker = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
daterangeSanityCheck(startPicker, endPicker)
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(selectors.range.start.calendarContainer).should('be.visible')
|
|
cy.get(selectors.range.start.overlay).then($overlay => {
|
|
const message = '.qs-overlay (start) styles'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(selectors.range.start.calendarContainer).should('not.be.visible')
|
|
cy.get(selectors.range.end.calendarContainer).should('be.visible')
|
|
cy.get(selectors.range.end.overlay).then($overlay => {
|
|
const message = '.qs-overlay (end) styles'
|
|
const styles = getComputedStyle($overlay[0])
|
|
|
|
expect(styles.opacity, message).to.equal('0')
|
|
expect(styles.zIndex, message).to.equal('-1')
|
|
})
|
|
})
|
|
|
|
it('(they) should change months when the arrows are clicked, not affecting the other', function() {
|
|
const today = new Date()
|
|
const previousMonthDate = new Date(today.getFullYear(), today.getMonth() - 1, 1)
|
|
const startPicker = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const endPicker = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
daterangeSanityCheck(startPicker, endPicker)
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[previousMonthDate.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${previousMonthDate.getFullYear()}`)
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
})
|
|
})
|
|
|
|
describe('Date changes', function() {
|
|
let today
|
|
let todaysDate
|
|
let startDayIndex
|
|
let endDayIndex
|
|
let startDateSelected
|
|
let endDateSelected
|
|
let dataDir0
|
|
let pickerStart
|
|
let pickerEnd
|
|
let daysInRange
|
|
|
|
beforeEach(function () {
|
|
today = new Date()
|
|
todaysDate = today.getDate()
|
|
startDayIndex = todaysDate === 1 ? 1 : 0
|
|
endDayIndex = 19
|
|
startDateSelected = new Date(today.getFullYear(), today.getMonth(), startDayIndex + 1)
|
|
endDateSelected = new Date(today.getFullYear(), today.getMonth(), endDayIndex + 1)
|
|
dataDir0 = '[data-direction="0"]'
|
|
pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
daysInRange = (endDayIndex + 1) - (startDayIndex + 1) - 1
|
|
|
|
daterangeSanityCheck(pickerStart, pickerEnd)
|
|
})
|
|
|
|
function selectStartDate() {
|
|
// Open the START calendar and click on a day.
|
|
cy.get(daterangeInputStart).should('have.value', '').click()
|
|
cy.get(selectors.range.start.calendarContainer).should('be.visible')
|
|
cy.get(`${selectors.range.start.squaresContainer} ${dataDir0}`).eq(startDayIndex).click()
|
|
}
|
|
|
|
function selectEndDate() {
|
|
// Open the END calendar and click on a day.
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(selectors.range.end.calendarContainer).should('be.visible')
|
|
cy.get(`${selectors.range.end.squaresContainer} ${dataDir0}`).eq(endDayIndex).click()
|
|
}
|
|
|
|
it('should have the correct props on both pickers prior to date selection', function() {
|
|
expect(pickerStart.dateSelected, 'pickerStart.dateSelected - before start date selection').to.be.undefined
|
|
expect(pickerStart.minDate, 'pickerStart.minDate - before start date selection').to.be.undefined
|
|
expect(pickerStart.maxDate, 'pickerStart.maxDate - before start date selection').to.be.undefined
|
|
expect(pickerEnd.dateSelected, 'pickerEnd.dateSelected - before start date selection').to.be.undefined
|
|
expect(pickerEnd.minDate, 'pickerEnd.minDate - before start date selection').to.be.undefined
|
|
expect(pickerEnd.maxDate, 'pickerEnd.maxDate - before start date selection').to.be.undefined
|
|
})
|
|
|
|
it('should have both calendars hidden prior to any action', function() {
|
|
cy.get(selectors.range.start.calendarContainer).should('not.be.visible')
|
|
cy.get(selectors.range.end.calendarContainer).should('not.be.visible')
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
})
|
|
|
|
// SELECTING START DATE ONLY
|
|
|
|
it('should select a day on the start calendar and highlight it', function() {
|
|
selectStartDate()
|
|
|
|
cy.get('.qs-active').should('have.length', 1) // Only 1 selected day in the entire DOM.
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-active`)
|
|
.should('have.text', `${startDayIndex + 1}`)
|
|
.should('not.have.class', 'qs-range-start') // This class should only be added once a range is selected.
|
|
.then($selectedDay => {
|
|
const { backgroundColor, borderRadius } = getComputedStyle($selectedDay[0])
|
|
|
|
// Background color "highlighted" check.
|
|
expect(backgroundColor, 'Selected day').to.equal('rgb(173, 216, 230)')
|
|
|
|
// All 4 corners should have a border radius.
|
|
expect(borderRadius.split(' ').length, 'border radius - 1 value for all 4 corners').to.equal(1)
|
|
expect(borderRadius.endsWith('px'), 'border radius value ends with "px"').to.be.true
|
|
expect(borderRadius.startsWith('0'), 'border radius should not be 0').to.be.false
|
|
})
|
|
})
|
|
|
|
it('should only populate the start input field after selecting a start date', function() {
|
|
selectStartDate()
|
|
|
|
cy.get(daterangeInputStart).should('have.value', startDateSelected.toDateString())
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
})
|
|
|
|
it('should set some props on both pickers after selecting a start date', function() {
|
|
selectStartDate()
|
|
|
|
cy.wait(1).then(() => {
|
|
expect(+pickerStart.dateSelected, 'pickerStart.dateSelected - after start date selection').to.equal(+startDateSelected)
|
|
expect(pickerStart.minDate, 'pickerStart.minDate - after start date selection').to.be.undefined
|
|
expect(pickerStart.maxDate, 'pickerStart.maxDate - after start date selection').to.be.undefined
|
|
expect(pickerEnd.dateSelected, 'pickerEnd.dateSelected - after start date selection').to.be.undefined
|
|
expect(+pickerEnd.minDate, 'pickerEnd.minDate - after start date selection').to.equal(+startDateSelected)
|
|
expect(pickerEnd.maxDate, 'pickerEnd.maxDate - after start date selection').to.be.undefined
|
|
})
|
|
})
|
|
|
|
// SELECTING END DATE ONLY
|
|
|
|
it('should select a day on the end calendar and highlight it', function() {
|
|
selectEndDate()
|
|
|
|
cy.get('.qs-active').should('have.length', 1) // Only 1 selected day in the entire DOM.
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-active`)
|
|
.should('have.text', `${endDayIndex + 1}`)
|
|
.should('not.have.class', 'qs-range-endf') // This class should only be added once a range is selected.
|
|
.then($selectedDay => {
|
|
const { backgroundColor, borderRadius } = getComputedStyle($selectedDay[0])
|
|
|
|
// Background color "highlighted" check.
|
|
expect(backgroundColor, 'Selected day').to.equal('rgb(173, 216, 230)')
|
|
|
|
// All 4 corners should have a border radius.
|
|
expect(borderRadius.split(' ').length, 'border radius - 1 value for all 4 corners').to.equal(1)
|
|
expect(borderRadius.endsWith('px'), 'border radius value ends with "px"').to.be.true
|
|
expect(borderRadius.startsWith('0'), 'border radius should not be 0').to.be.false
|
|
})
|
|
})
|
|
|
|
it('should only populate the end input field after selecting an end date', function() {
|
|
selectEndDate()
|
|
|
|
cy.get(daterangeInputEnd).should('have.value', endDateSelected.toDateString())
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
})
|
|
|
|
it('should set some props on both pickers after selecting an end date', function() {
|
|
selectEndDate()
|
|
|
|
cy.wait(1).then(() => {
|
|
expect(pickerStart.dateSelected, 'pickerStart.dateSelected - after end date selection').to.be.undefined
|
|
expect(pickerStart.minDate, 'pickerStart.minDate - after end date selection').to.be.undefined
|
|
expect(+pickerStart.maxDate, 'pickerStart.maxDate - after end date selection').to.equal(+endDateSelected)
|
|
expect(+pickerEnd.dateSelected, 'pickerEnd.dateSelected - after end date selection').to.equal(+endDateSelected)
|
|
expect(pickerEnd.minDate, 'pickerEnd.minDate - after end date selection').to.be.undefined
|
|
expect(pickerEnd.maxDate, 'pickerEnd.maxDate - after end date selection').to.be.undefined
|
|
})
|
|
})
|
|
|
|
// SELECTING START AND END DATES
|
|
|
|
it('should have two highlighted days and a range on each calendar after selecting start and end dates', function() {
|
|
selectStartDate()
|
|
selectEndDate()
|
|
|
|
// We should now have 2 highlighted days (start and end dates) and a range on each calendar.
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-active`)
|
|
.should('have.length', 1)
|
|
.should('have.class', 'qs-range-start')
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-range-start`).should('have.length', 1)
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-range-end`).should('have.length', 1)
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-active`)
|
|
.should('have.length', 1)
|
|
.should('have.class', 'qs-range-end')
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-range-start`).should('have.length', 1)
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-range-end`).should('have.length', 1)
|
|
|
|
// We should now have a range on each calendar (not including the start & end dates).
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-range-middle`).should('have.length', daysInRange)
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-range-middle`).should('have.length', daysInRange)
|
|
|
|
// The selected dates on both calendars should have the correct bg-color & some rounded corners.
|
|
;[
|
|
`${selectors.range.start.squaresContainer} .qs-active.qs-range-start`,
|
|
`${selectors.range.start.squaresContainer} .qs-range-end`,
|
|
].forEach((selector, i) => {
|
|
const isStart = i === 0
|
|
cy.get(selector).then($el => {
|
|
const { backgroundColor, borderRadius } = getComputedStyle($el[0])
|
|
const radii = borderRadius.split(' ')
|
|
const [topLeft, topRight, bottomRight, bottomLeft] = radii
|
|
|
|
// Background color "highlighted" check.
|
|
expect(backgroundColor, `Selected day (range ${isStart ? 'start' : 'end'} date) bg color`).to.equal('rgb(173, 216, 230)')
|
|
|
|
// Only the right 2 corners should have a border radius.
|
|
expect(radii.length, 'border radius - 4 values').to.equal(4)
|
|
expect(topLeft.startsWith('0'), 'border-radius value - top left').to.equal(!isStart)
|
|
expect(topRight.startsWith('0'), 'border-radius value - top right').to.equal(isStart)
|
|
expect(bottomRight.startsWith('0'), 'border-radius value - bottom right').to.equal(isStart)
|
|
expect(bottomLeft.startsWith('0'), 'border-radius value - bottom left').to.equal(!isStart)
|
|
})
|
|
})
|
|
|
|
// The ranges on both calendars should have the correct bg-color and no rounded corners.
|
|
;[
|
|
`${selectors.range.start.squaresContainer} .qs-range-middle`,
|
|
`${selectors.range.start.squaresContainer} .qs-range-middle`,
|
|
].forEach((selector, i) => {
|
|
const isStart = i === 0
|
|
cy.get(selector).then($rangeDates => {
|
|
Array.from($rangeDates).forEach(rangeDate => {
|
|
const { backgroundColor, borderRadius } = getComputedStyle(rangeDate)
|
|
|
|
// Background color "highlighted" check.
|
|
expect(backgroundColor, `Range day (${isStart ? 'start' : 'end'} calendar) bg color`).to.equal('rgb(212, 235, 242)')
|
|
|
|
// All 4 corners should have no radius
|
|
expect(borderRadius, `border-radius value - ${isStart ? 'start' : 'end'} calendar`).to.equal('0px')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
it('should populate both input fields after selecting both dates', function() {
|
|
selectStartDate()
|
|
selectEndDate()
|
|
|
|
cy.get(daterangeInputStart).should('have.value', startDateSelected.toDateString())
|
|
cy.get(daterangeInputEnd).should('have.value', endDateSelected.toDateString())
|
|
})
|
|
|
|
it('should set some props on both pickers after selecting both dates', function() {
|
|
selectStartDate()
|
|
selectEndDate()
|
|
|
|
cy.wait(1).then(() => {
|
|
expect(+pickerStart.dateSelected, 'pickerStart.dateSelected - after end date selection').to.equal(+startDateSelected)
|
|
expect(pickerStart.minDate, 'pickerStart.minDate - after end date selection').to.be.undefined
|
|
expect(+pickerStart.maxDate, 'pickerStart.maxDate - after end date selection').to.equal(+endDateSelected)
|
|
expect(+pickerEnd.dateSelected, 'pickerEnd.dateSelected - after end date selection').to.equal(+endDateSelected)
|
|
expect(+pickerEnd.minDate, 'pickerEnd.minDate - after end date selection').to.equal(+startDateSelected)
|
|
expect(pickerEnd.maxDate, 'pickerEnd.maxDate - after end date selection').to.be.undefined
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('Instance methods', function() {
|
|
describe('getRange', function() {
|
|
it('should be function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.getRange).to.be.a('function')
|
|
expect(pickerEnd.getRange).to.be.a('function')
|
|
})
|
|
|
|
it('should return an object with `start` and `end` properties', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const results = { start: undefined, end: undefined }
|
|
|
|
expect(pickerStart.getRange()).to.deep.equal(results)
|
|
expect(pickerEnd.getRange()).to.deep.equal(results)
|
|
})
|
|
|
|
it('should return the correct values for `start` when a start date is selected', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const startDate = new Date(today.getFullYear(), today.getMonth(), 1)
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
const startRange = pickerStart.getRange()
|
|
const endRange = pickerEnd.getRange()
|
|
|
|
expect(+startRange.start).to.equal(+startDate)
|
|
expect(startRange.end).to.be.undefined
|
|
expect(+endRange.start).to.equal(+startDate)
|
|
expect(endRange.end).to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('should return the correct values for `end` when an end date is selected', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const endDate = new Date(today.getFullYear(), today.getMonth(), 1)
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
const startRange = pickerStart.getRange()
|
|
const endRange = pickerEnd.getRange()
|
|
|
|
expect(startRange.start).to.be.undefined
|
|
expect(+startRange.end).to.equal(+endDate)
|
|
expect(endRange.start).to.be.undefined
|
|
expect(+endRange.end).to.equal(+endDate)
|
|
})
|
|
})
|
|
|
|
it('should return the correct values for `start` and `end` when both dates are selected', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const startDate = new Date(today.getFullYear(), today.getMonth(), 1)
|
|
const endDate = new Date(today.getFullYear(), today.getMonth(), 20)
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(19).click()
|
|
cy.wait(1).then(() => {
|
|
const startRange = pickerStart.getRange()
|
|
const endRange = pickerEnd.getRange()
|
|
|
|
expect(+startRange.start).to.equal(+startDate)
|
|
expect(+startRange.end).to.equal(+endDate)
|
|
expect(+endRange.start).to.equal(+startDate)
|
|
expect(+endRange.end).to.equal(+endDate)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('setMin', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.setMin).to.be.a('function')
|
|
expect(pickerEnd.setMin).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should populate `minDate` on the instance objects', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerStart.minDate).to.be.undefined
|
|
expect(pickerEnd.minDate).to.be.undefined
|
|
pickerStart.setMin(date)
|
|
expect(+pickerStart.minDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
expect(+pickerEnd.minDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('(end) should populate `minDate` on the instance objects', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerStart.minDate).to.be.undefined
|
|
expect(pickerEnd.minDate).to.be.undefined
|
|
pickerEnd.setMin(date)
|
|
expect(+pickerStart.minDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
expect(+pickerEnd.minDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('(start) should disable dates prior to the provided value (including previous months)', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(start cal) Days shouldn't have qs-disabled class prior to calling setMin.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(end cal) Days shouldn't have qs-disabled class prior to calling setMin.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
pickerStart.setMin(date)
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < (minDay - 1) ? '0.2' : '1')
|
|
|
|
if (i < (minDay - 1)) {
|
|
expect(day, '(start cal) Disabled days from setMin').to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, '(start cal) Unaffected days from setMin').not.to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < (minDay - 1) ? '0.2' : '1')
|
|
|
|
if (i < (minDay - 1)) {
|
|
expect(day, '(end cal) Disabled days from setMin').to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, '(end cal) Unaffected days from setMin').not.to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(end) should disable dates prior to the provided value (including previous months)', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(start cal) Days shouldn't have qs-disabled class prior to calling setMin.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(end cal) Days shouldn't have qs-disabled class prior to calling setMin.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
pickerEnd.setMin(date)
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < (minDay - 1) ? '0.2' : '1')
|
|
|
|
if (i < (minDay - 1)) {
|
|
expect(day, '(start cal) Disabled days from setMin').to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, '(start cal) Unaffected days from setMin').not.to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < (minDay - 1) ? '0.2' : '1')
|
|
|
|
if (i < (minDay - 1)) {
|
|
expect(day, '(end cal) Disabled days from setMin').to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, '(end cal) Unaffected days from setMin').not.to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(start) should prevent disabled dates from being selected', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
pickerStart.setMin(date)
|
|
|
|
// Assert a few values prior to clicking.
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
|
|
// Click a disabled date (the 1st of the month) and assert a few more values.
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
})
|
|
|
|
// Navigate to the previous month and assert you can't click dates.
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click().then(() => {
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
})
|
|
})
|
|
|
|
// For sanity reasons, assert that clicking a non-disabled date works.
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(14).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputStart).should('not.have.value', '')
|
|
expect(pickerStart.dateSelected).not.to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('(end) should prevent disabled dates from being selected', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
pickerEnd.setMin(date)
|
|
|
|
// Assert a few values prior to clicking.
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
|
|
// Click a disabled date (the 1st of the month) and assert a few more values.
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
})
|
|
|
|
// Navigate to the previous month and assert you can't click dates.
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click().then(() => {
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
})
|
|
})
|
|
|
|
// For sanity reasons, assert that clicking a non-disabled date works.
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(14).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputEnd).should('not.have.value', '')
|
|
expect(pickerEnd.dateSelected).not.to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('(start) should remove the minimum selectable date when called with no argument', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
pickerStart.setMin(date)
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', minDay - 1)
|
|
.then(() => {
|
|
expect(pickerStart.minDate).not.to.be.undefined
|
|
pickerStart.setMin()
|
|
})
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', 0)
|
|
.then(() => expect(pickerStart.minDate).to.be.undefined)
|
|
})
|
|
|
|
it('(end) should remove the minimum selectable date when called with no argument', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const minDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), minDay)
|
|
pickerEnd.setMin(date)
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', minDay - 1)
|
|
.then(() => {
|
|
expect(pickerEnd.minDate).not.to.be.undefined
|
|
pickerEnd.setMin()
|
|
})
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', 0)
|
|
.then(() => expect(pickerEnd.minDate).to.be.undefined)
|
|
})
|
|
})
|
|
|
|
describe('setMax', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.setMax).to.be.a('function')
|
|
expect(pickerEnd.setMax).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should populate `maxDate` on the instance objects', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerStart.maxDate).to.be.undefined
|
|
pickerStart.setMax(date)
|
|
expect(+pickerStart.maxDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('(end) should populate `maxDate` on the instance objects', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerEnd.maxDate).to.be.undefined
|
|
pickerEnd.setMax(date)
|
|
expect(+pickerEnd.maxDate).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
|
|
it('(start) should disable dates after to the provided value (including later months)', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(start cal) Days shouldn't have qs-disabled class prior to calling setMax.`).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(end cal) Days shouldn't have qs-disabled class prior to calling setMax.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
pickerStart.setMax(date)
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < maxDay ? '1' : '0.2')
|
|
|
|
if (i < maxDay) {
|
|
expect(day, 'Unaffected days from setMax').not.to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, 'Disabled days from setMax').to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < maxDay ? '1' : '0.2')
|
|
|
|
if (i < maxDay) {
|
|
expect(day, 'Unaffected days from setMax').not.to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, 'Disabled days from setMax').to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(end) should disable dates after to the provided value (including later months)', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(start cal) Days shouldn't have qs-disabled class prior to calling setMax.`).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day, `(end cal) Days shouldn't have qs-disabled class prior to calling setMax.`).not.to.have.class('qs-disabled')
|
|
})
|
|
|
|
pickerEnd.setMax(date)
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < maxDay ? '1' : '0.2')
|
|
|
|
if (i < maxDay) {
|
|
expect(day, 'Unaffected days from setMax').not.to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, 'Disabled days from setMax').to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach((day, i) => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal(i < maxDay ? '1' : '0.2')
|
|
|
|
if (i < maxDay) {
|
|
expect(day, 'Unaffected days from setMax').not.to.have.class('qs-disabled')
|
|
} else {
|
|
expect(day, 'Disabled days from setMax').to.have.class('qs-disabled')
|
|
}
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('0.2')
|
|
expect(day).to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
const styles = getComputedStyle(day)
|
|
|
|
expect(styles.opacity).to.equal('1')
|
|
expect(day).not.to.have.class('qs-disabled')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(start) should prevent disabled dates from being selected', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
pickerStart.setMax(date)
|
|
|
|
// Assert a few values prior to clicking.
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
|
|
// Click a disabled date and assert a few more values.
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(maxDay + 1).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
})
|
|
|
|
// Navigate to the next month and assert you can't click dates.
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-right`).click().then(() => {
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
})
|
|
})
|
|
|
|
// For sanity reasons, assert that clicking a non-disabled date works.
|
|
cy.get(`${selectors.range.start.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"]`).eq(maxDay - 1).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputStart).should('not.have.value', '')
|
|
expect(pickerStart.dateSelected).not.to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('(end) should prevent disabled dates from being selected', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
pickerEnd.setMax(date)
|
|
|
|
// Assert a few values prior to clicking.
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
|
|
// Click a disabled date and assert a few more values.
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(maxDay + 1).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
})
|
|
|
|
// Navigate to the next month and assert you can't click dates.
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-right`).click().then(() => {
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(0).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
})
|
|
})
|
|
|
|
// For sanity reasons, assert that clicking a non-disabled date works.
|
|
cy.get(`${selectors.range.end.controls} .qs-arrow.qs-left`).click()
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"]`).eq(maxDay - 1).click()
|
|
cy.wait(1).then(() => {
|
|
cy.get(daterangeInputEnd).should('not.have.value', '')
|
|
expect(pickerEnd.dateSelected).not.to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('(start) should remove the maximum selectable date when called with no argument', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
const daysInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()
|
|
|
|
expect(pickerStart.maxDate).to.be.undefined
|
|
expect(pickerEnd.maxDate).to.be.undefined
|
|
pickerStart.setMax(date)
|
|
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', daysInMonth - maxDay)
|
|
.then(() => {
|
|
expect(pickerStart.maxDate).not.to.be.undefined
|
|
expect(pickerEnd.maxDate).not.to.be.undefined
|
|
pickerStart.setMax()
|
|
})
|
|
cy.get(`${selectors.range.start.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', 0)
|
|
.then(() => {
|
|
expect(pickerStart.maxDate).to.be.undefined
|
|
expect(pickerEnd.maxDate).to.be.undefined
|
|
})
|
|
})
|
|
|
|
it('(end) should remove the maximum selectable date when called with no argument', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const maxDay = 15
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), maxDay)
|
|
const daysInMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()
|
|
|
|
expect(pickerStart.maxDate).to.be.undefined
|
|
expect(pickerEnd.maxDate).to.be.undefined
|
|
pickerEnd.setMax(date)
|
|
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', daysInMonth - maxDay)
|
|
.then(() => {
|
|
expect(pickerStart.maxDate).not.to.be.undefined
|
|
expect(pickerEnd.maxDate).not.to.be.undefined
|
|
pickerEnd.setMax()
|
|
})
|
|
cy.get(`${selectors.range.end.squaresContainer} [data-direction="0"].qs-disabled`)
|
|
.should('have.length', 0)
|
|
.then(() => {
|
|
expect(pickerStart.maxDate).to.be.undefined
|
|
expect(pickerEnd.maxDate).to.be.undefined
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('show', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.show).to.be.a('function')
|
|
expect(pickerEnd.show).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should show the calendar when called', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
cy.get(`${selectors.range.start.calendarContainer}`)
|
|
.should('not.be.visible')
|
|
.then(() => pickerStart.show())
|
|
cy.get(`${selectors.range.start.calendarContainer}`).should('be.visible')
|
|
})
|
|
|
|
it('(end) should show the calendar when called', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
cy.get(`${selectors.range.end.calendarContainer}`)
|
|
.should('not.be.visible')
|
|
.then(() => pickerEnd.show())
|
|
cy.get(`${selectors.range.end.calendarContainer}`).should('be.visible')
|
|
})
|
|
})
|
|
|
|
describe('hide', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.hide).to.be.a('function')
|
|
expect(pickerEnd.hide).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should hide the calendar when called', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(`${selectors.range.start.calendarContainer}`)
|
|
.should('be.visible')
|
|
.then(() => pickerStart.hide())
|
|
cy.get(`${selectors.range.start.calendarContainer}`).should('not.be.visible')
|
|
})
|
|
|
|
it('(end) should hide the calendar when called', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(`${selectors.range.end.calendarContainer}`)
|
|
.should('be.visible')
|
|
.then(() => pickerEnd.hide())
|
|
cy.get(`${selectors.range.end.calendarContainer}`).should('not.be.visible')
|
|
})
|
|
})
|
|
|
|
describe('remove', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.remove).to.be.a('function')
|
|
expect(pickerEnd.remove).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should remove the calendar from the DOM', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
cy.get(`${selectors.range.end.calendarContainer}`).should('have.length', 1)
|
|
cy.get(`${selectors.range.start.calendarContainer}`)
|
|
.should('have.length', 1)
|
|
.then(() => pickerStart.remove())
|
|
cy.get(`${selectors.range.start.calendarContainer}`).should('have.length', 0)
|
|
cy.get(`${selectors.range.end.calendarContainer}`).should('have.length', 1)
|
|
})
|
|
|
|
it('(end) should remove the calendar from the DOM', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
cy.get(`${selectors.range.end.calendarContainer}`)
|
|
.should('have.length', 1)
|
|
.then(() => pickerEnd.remove())
|
|
cy.get(`${selectors.range.end.calendarContainer}`).should('have.length', 0)
|
|
cy.get(`${selectors.range.start.calendarContainer}`).should('have.length', 1)
|
|
})
|
|
|
|
it('should remove all properties from the instance object', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(Object.keys(pickerStart).length).to.be.greaterThan(0)
|
|
expect(Object.keys(pickerEnd).length).to.be.greaterThan(0)
|
|
|
|
pickerStart.remove()
|
|
expect(Object.keys(pickerStart).length).to.equal(0)
|
|
expect(Object.keys(pickerEnd).length).to.be.greaterThan(0)
|
|
|
|
pickerEnd.remove()
|
|
expect(Object.keys(pickerEnd).length).to.equal(0)
|
|
})
|
|
|
|
it('(start) should remove the sibling property from the sibling still active', function () {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.sibling).to.equal(pickerEnd)
|
|
expect(pickerEnd.sibling).to.equal(pickerStart)
|
|
|
|
pickerStart.remove()
|
|
expect(pickerEnd.sibling).to.be.undefined
|
|
})
|
|
|
|
it('(end) should remove the sibling property from the sibling still active', function () {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.sibling).to.equal(pickerEnd)
|
|
expect(pickerEnd.sibling).to.equal(pickerStart)
|
|
|
|
pickerEnd.remove()
|
|
expect(pickerStart.sibling).to.be.undefined
|
|
})
|
|
})
|
|
|
|
describe('setDate', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.setDate).to.be.a('function')
|
|
expect(pickerEnd.setDate).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should set a date on the calendar', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
const dateNum = date.getDate()
|
|
|
|
cy.get('.qs-active').should('have.length', 0).then(() => pickerStart.setDate(date))
|
|
cy.get('.qs-active').should('have.length', 1)
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
})
|
|
|
|
it('(end) should set a date on the calendar', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
const dateNum = date.getDate()
|
|
|
|
cy.get('.qs-active').should('have.length', 0).then(() => pickerEnd.setDate(date))
|
|
cy.get('.qs-active').should('have.length', 1)
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
})
|
|
|
|
it('(start) should set the input value', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
cy.get(daterangeInputStart).should('have.value', '').then(() => pickerStart.setDate(date))
|
|
cy.get(daterangeInputStart).should('have.value', date.toDateString())
|
|
cy.get(daterangeInputEnd).should('have.value', '')
|
|
})
|
|
|
|
it('(end) should set the input value', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
cy.get(daterangeInputEnd).should('have.value', '').then(() => pickerEnd.setDate(date))
|
|
cy.get(daterangeInputEnd).should('have.value', date.toDateString())
|
|
cy.get(daterangeInputStart).should('have.value', '')
|
|
})
|
|
|
|
it('(start) should set the `dateSelected` prop on the instance object', function () {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
pickerStart.setDate(date)
|
|
expect(+pickerStart.dateSelected).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
})
|
|
|
|
it('(end) should set the `dateSelected` prop on the instance object', function () {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
pickerEnd.setDate(date)
|
|
expect(+pickerEnd.dateSelected).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
})
|
|
|
|
it('(start) should change the date on the same month if a date was already selected', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const dateNum = 15
|
|
const dateNum2 = 16
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), dateNum)
|
|
const date2 = new Date(date.getFullYear(), date.getMonth(), dateNum2)
|
|
pickerStart.setDate(date)
|
|
|
|
// The end calendar should have the correct disabled / enabled range.
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('not.have.class', 'qs-disabled')
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 2)
|
|
.should('have.class', 'qs-disabled')
|
|
|
|
// Check the start calendar, then call `setDate` again, then check the start calendar again.
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
.then(() => pickerStart.setDate(date2))
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('not.have.class', 'qs-active')
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2 - 1)
|
|
.should('have.class', 'qs-active')
|
|
|
|
// Finally, check that the end calendar's range has changed accordingly.
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2 - 1)
|
|
.should('not.have.class', 'qs-disabled')
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2 - 2)
|
|
.should('have.class', 'qs-disabled')
|
|
})
|
|
|
|
it('(end) should change the date on the same month if a date was already selected', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const dateNum = 15
|
|
const dateNum2 = 16
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear(), today.getMonth(), dateNum)
|
|
const date2 = new Date(date.getFullYear(), date.getMonth(), dateNum2)
|
|
pickerEnd.setDate(date)
|
|
|
|
// The start calendar should have the correct disabled / enabled range.
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('not.have.class', 'qs-disabled')
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum)
|
|
.should('have.class', 'qs-disabled')
|
|
|
|
// Check the end calendar, then call `setDate` again, then check the end calendar again.
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
.then(() => pickerEnd.setDate(date2))
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('not.have.class', 'qs-active')
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2 - 1)
|
|
.should('have.class', 'qs-active')
|
|
|
|
// Finally, check that the start calendar's range has changed accordingly.
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2 - 1)
|
|
.should('not.have.class', 'qs-disabled')
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum2)
|
|
.should('have.class', 'qs-disabled')
|
|
})
|
|
|
|
it('(start) should remove the selected date on the current month if a different month was provided', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
const dateNum = date.getDate()
|
|
const date2 = new Date(date.getFullYear(), date.getMonth() + 1, dateNum)
|
|
|
|
pickerStart.setDate(date)
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
.then(() => pickerStart.setDate(date2))
|
|
|
|
cy.get(`${selectors.range.start.calendarContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
expect(day).not.to.have.class('qs-active')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(end) should remove the selected date on the current month if a different month was provided', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
const dateNum = date.getDate()
|
|
const date2 = new Date(date.getFullYear(), date.getMonth() + 1, dateNum)
|
|
|
|
pickerEnd.setDate(date)
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`)
|
|
.eq(dateNum - 1)
|
|
.should('have.class', 'qs-active')
|
|
.then(() => pickerEnd.setDate(date2))
|
|
|
|
cy.get(`${selectors.range.end.calendarContainer} [data-direction="0"]`).then($days => {
|
|
Array.from($days).forEach(day => {
|
|
expect(day).not.to.have.class('qs-active')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(start) should set a date and navigate to that date via the 2nd argument', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`)
|
|
.should('have.text', `${today.getFullYear()}`)
|
|
.then(() => pickerStart.setDate(date, true))
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[date.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${date.getFullYear()}`)
|
|
})
|
|
|
|
it('(start) should set a date and navigate to that date via the 2nd argument', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`)
|
|
.should('have.text', `${today.getFullYear()}`)
|
|
.then(() => pickerEnd.setDate(date, true))
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[date.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${date.getFullYear()}`)
|
|
})
|
|
|
|
it('(start) should not navigate to a future date when the 2nd argument is not used', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`)
|
|
.should('have.text', `${today.getFullYear()}`)
|
|
.then(() => pickerStart.setDate(date))
|
|
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
})
|
|
|
|
it('(end) should not navigate to a future date when the 2nd argument is not used', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`)
|
|
.should('have.text', `${today.getFullYear()}`)
|
|
.then(() => pickerEnd.setDate(date))
|
|
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
})
|
|
|
|
it('(start) should remove the selected date when no arguments are passed', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-active`)
|
|
.should('have.length', 0)
|
|
.then(() => {
|
|
pickerStart.setDate(date)
|
|
expect(+pickerStart.dateSelected).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-active`)
|
|
.should('have.length', 1)
|
|
.then(() => {
|
|
pickerStart.setDate()
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
})
|
|
cy.get(`${selectors.range.start.squaresContainer} .qs-active`)
|
|
.should('have.length', 0)
|
|
})
|
|
|
|
it('(end) should remove the selected date when no arguments are passed', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const date = new Date()
|
|
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-active`)
|
|
.should('have.length', 0)
|
|
.then(() => {
|
|
pickerEnd.setDate(date)
|
|
expect(+pickerEnd.dateSelected).to.equal(+new Date(date.getFullYear(), date.getMonth(), date.getDate()))
|
|
})
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-active`)
|
|
.should('have.length', 1)
|
|
.then(() => {
|
|
pickerEnd.setDate()
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
})
|
|
cy.get(`${selectors.range.end.squaresContainer} .qs-active`)
|
|
.should('have.length', 0)
|
|
})
|
|
})
|
|
|
|
describe('navigate', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.navigate).to.be.a('function')
|
|
expect(pickerEnd.navigate).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should navigate to a given date without affecting the selection', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
pickerStart.setDate(today)
|
|
expect(+pickerStart.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
expect(pickerEnd.dateSelected).to.be.undefined
|
|
|
|
pickerStart.navigate(date)
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${date.getFullYear()}`)
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[date.getMonth()])
|
|
expect(+pickerStart.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
|
|
cy.wait(1).then(() => {
|
|
pickerStart.navigate(today)
|
|
cy.get(`${selectors.range.start.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
cy.get(`${selectors.range.start.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
expect(+pickerStart.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
})
|
|
})
|
|
|
|
it('(end) should navigate to a given date without affecting the selection', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
pickerEnd.setDate(today)
|
|
expect(+pickerEnd.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
expect(pickerStart.dateSelected).to.be.undefined
|
|
|
|
pickerEnd.navigate(date)
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${date.getFullYear()}`)
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[date.getMonth()])
|
|
expect(+pickerEnd.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
|
|
cy.wait(1).then(() => {
|
|
pickerEnd.navigate(today)
|
|
cy.get(`${selectors.range.end.controls} .qs-year`).should('have.text', `${today.getFullYear()}`)
|
|
cy.get(`${selectors.range.end.controls} .qs-month`).should('have.text', pickerProperties.months[today.getMonth()])
|
|
expect(+pickerEnd.dateSelected).to.equal(+new Date(today.getFullYear(), today.getMonth(), today.getDate()))
|
|
})
|
|
})
|
|
|
|
it('(start) should navigate to a given date and trigger `onMonthChange` when the 2nd argument is used', function() {
|
|
const pickerStartOptions = { onMonthChange: () => {}, id: 1 }
|
|
const pickerEndOptions = { onMonthChange: () => {}, id: 1 }
|
|
cy.spy(pickerStartOptions, 'onMonthChange')
|
|
cy.spy(pickerEndOptions, 'onMonthChange')
|
|
|
|
const pickerStart = this.datepicker(daterangeInputStart, pickerStartOptions)
|
|
this.datepicker(daterangeInputEnd, pickerEndOptions)
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
expect(pickerStartOptions.onMonthChange).not.to.be.called
|
|
expect(pickerEndOptions.onMonthChange).not.to.be.called
|
|
pickerStart.navigate(date, true)
|
|
expect(pickerStartOptions.onMonthChange).to.be.called
|
|
expect(pickerEndOptions.onMonthChange).not.to.be.called
|
|
})
|
|
|
|
it('(end) should navigate to a given date and trigger `onMonthChange` when the 2nd argument is used', function() {
|
|
const pickerStartOptions = { onMonthChange: () => {}, id: 1 }
|
|
const pickerEndOptions = { onMonthChange: () => {}, id: 1 }
|
|
cy.spy(pickerStartOptions, 'onMonthChange')
|
|
cy.spy(pickerEndOptions, 'onMonthChange')
|
|
|
|
this.datepicker(daterangeInputStart, pickerStartOptions)
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, pickerEndOptions)
|
|
const today = new Date()
|
|
const date = new Date(today.getFullYear() + 1, today.getMonth() + 1, today.getDate())
|
|
|
|
expect(pickerStartOptions.onMonthChange).not.to.be.called
|
|
expect(pickerEndOptions.onMonthChange).not.to.be.called
|
|
pickerEnd.navigate(date, true)
|
|
expect(pickerStartOptions.onMonthChange).not.to.be.called
|
|
expect(pickerEndOptions.onMonthChange).to.be.called
|
|
})
|
|
})
|
|
|
|
describe('toggleOverlay', function() {
|
|
it('should be a function', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
expect(pickerStart.toggleOverlay).to.be.a('function')
|
|
expect(pickerEnd.toggleOverlay).to.be.a('function')
|
|
})
|
|
|
|
it('(start) should toggle the overlay', function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
cy.get(daterangeInputStart).click()
|
|
cy.get(selectors.range.start.overlay).should('not.be.visible').then(() => {
|
|
pickerStart.toggleOverlay()
|
|
cy.get(selectors.range.start.overlay).should('be.visible')
|
|
cy.wait(500).then(() => {
|
|
pickerStart.toggleOverlay()
|
|
cy.get(selectors.range.start.overlay).should('not.be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
it('(end) should toggle the overlay', function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
cy.get(daterangeInputEnd).click()
|
|
cy.get(selectors.range.end.overlay).should('not.be.visible').then(() => {
|
|
pickerEnd.toggleOverlay()
|
|
cy.get(selectors.range.end.overlay).should('be.visible')
|
|
cy.wait(500).then(() => {
|
|
pickerEnd.toggleOverlay()
|
|
cy.get(selectors.range.end.overlay).should('not.be.visible')
|
|
})
|
|
})
|
|
})
|
|
|
|
it(`(start) should do nothing when the calendar isn't shown`, function() {
|
|
const pickerStart = this.datepicker(daterangeInputStart, { id: 1 })
|
|
this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
pickerStart.toggleOverlay()
|
|
cy.get(daterangeInputStart).click().then(() => {
|
|
cy.wait(500)
|
|
cy.get(selectors.range.start.overlay).should('not.be.visible')
|
|
})
|
|
})
|
|
|
|
it(`(end) should do nothing when the calendar isn't shown`, function() {
|
|
this.datepicker(daterangeInputStart, { id: 1 })
|
|
const pickerEnd = this.datepicker(daterangeInputEnd, { id: 1 })
|
|
|
|
pickerEnd.toggleOverlay()
|
|
cy.get(daterangeInputEnd).click().then(() => {
|
|
cy.wait(500)
|
|
cy.get(selectors.range.end.overlay).should('not.be.visible')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|