From 20177c9792f4e6ebdcdbd6d488e0ea6bb15234e4 Mon Sep 17 00:00:00 2001 From: Calson Chiatiah Date: Wed, 21 Feb 2024 14:03:00 +0100 Subject: [PATCH 1/4] test(ui/QDate): add tests for QDate --- ui/src/components/date/__tests__/QDate.cy.js | 774 +++++++++++++++++-- 1 file changed, 716 insertions(+), 58 deletions(-) diff --git a/ui/src/components/date/__tests__/QDate.cy.js b/ui/src/components/date/__tests__/QDate.cy.js index cfaaa2441c4..5a706e04073 100644 --- a/ui/src/components/date/__tests__/QDate.cy.js +++ b/ui/src/components/date/__tests__/QDate.cy.js @@ -1,5 +1,12 @@ +import QDate from '../QDate' +import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress' +import { ref } from 'vue' +import { date } from 'quasar' + +const { formatDate, addToDate } = date + describe('Date API', () => { - describe('Props', () => { + describe.skip('Props', () => { describe('Category: behavior', () => { describe('(prop): years-in-month-view', () => { it.skip(' ', () => { @@ -8,114 +15,575 @@ describe('Date API', () => { }) }) - describe('Category: content', () => { + describe.skip('Category: content', () => { describe('(prop): title', () => { - it.skip(' ', () => { - // + it('should override the default title header', () => { + const title = 'Birthday' + + cy.mount(QDate, { + props: { + title + } + }) + + cy.get('.q-date__header-title') + .should('contain', title) }) }) describe('(prop): subtitle', () => { - it.skip(' ', () => { - // + it('should override the default subtitle', () => { + const subtitle = 'Birthday' + + cy.mount(QDate, { + props: { + subtitle + } + }) + + cy.get('.q-date__header-subtitle') + .should('contain', subtitle) }) }) describe('(prop): today-btn', () => { - it.skip(' ', () => { - // + it('should display a button that selects the current day', () => { + const format = 'YYYY/MM/DD' + const currentDate = new Date() + const futureDate = addToDate(currentDate, { days: 5 }) + const fiveDaysFromToday = ref(formatDate(futureDate, format)) + + const today = formatDate(currentDate, format) + + cy.mount(QDate, { + props: { + ...vModelAdapter(fiveDaysFromToday), + todayBtn: true + } + }) + + cy.get('.q-date__header-today') + .should('exist') + + cy.get('.q-date').then(() => { + expect(fiveDaysFromToday.value).not.to.eq(today) + }) + + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', futureDate.getDate()) + .should('not.contain', currentDate.getDate()) + + cy.get('.q-date__header-today') + .click() + + cy.get('.q-date').then(() => { + expect(fiveDaysFromToday.value).to.eq(today) + }) + + cy.log('Visually check that the right date is selected') + cy.get('.q-date__calendar-item > .bg-primary') + .should('not.contain', futureDate.getDate()) + .should('contain', currentDate.getDate()) }) }) describe('(prop): minimal', () => { - it.skip(' ', () => { - // + it('should hide the header', () => { + cy.mount(QDate, { + props: { + minimal: true + } + }) + + cy.get('.q-date__header-title') + .should('not.exist') }) }) }) - describe('Category: model', () => { + describe.skip('Category: model', () => { describe('(prop): model-value', () => { - it.skip(' ', () => { - // + it('should select the correct date based on the model value', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model) + } + }) + + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', '3') + + cy.get('.q-date') + .then(async () => { + await Cypress.vueWrapper.setProps({ modelValue: '2018/06/05' }) + }) + + cy.get('.q-date__calendar-item > .bg-primary') + .should('not.contain', '3') + .should('contain', '5') }) }) describe('(prop): default-year-month', () => { - it.skip(' ', () => { - // + it('should display the date picker with a default year and month', () => { + cy.mount(QDate, { + props: { + defaultYearMonth: '1986/01' + } + }) + + const today = new Date() + const thisYear = today.getFullYear() + const thisMonth = today.toLocaleDateString('en-US', { month: 'long' }) + + cy.get('.q-date__navigation .q-btn__content') + .should('not.contain', thisYear) + .should('not.contain', thisMonth) + .should('contain', 'January') + .should('contain', '1986') }) }) describe('(prop): default-view', () => { - it.skip(' ', () => { - // + it('should display with a default years view', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + defaultView: 'Years' + } + }) + + cy.get('.q-date__years .bg-primary') + .should('contain', '2018') + cy.get('.q-date__calendar') + .should('not.exist') + cy.get('.q-date__months') + .should('not.exist') + }) + + it('should display with a default months view', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + defaultView: 'Months' + } + }) + + cy.get('.q-date__months .bg-primary') + .should('contain', 'Jun') + cy.get('.q-date__calendar') + .should('not.exist') + cy.get('.q-date__years') + .should('not.exist') + }) + + it('should display with a default calendar view', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + defaultView: 'Calendar' + } + }) + + cy.get('.q-date__calendar') + .should('contain', 'June') + .should('contain', '2018') + cy.get('.q-date__months') + .should('not.exist') + cy.get('.q-date__years') + .should('not.exist') }) }) describe('(prop): events', () => { - it.skip(' ', () => { - // + it('should highlight a single event on the calendar', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + events: '2018/06/12' + } + }) + + cy.get('.q-date__calendar-item') + .get('.q-date__event') + .parent() + .should('contain', '12') + }) + + it('should highlight multiple events on the calendar', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + events: [ '2018/06/12', '2018/06/17', '2018/06/20' ] + } + }) + + cy.get('.q-date__calendar-item') + .get('.q-date__event') + .parent() + .should('contain', '12') + .should('contain', '17') + .should('contain', '20') + }) + + it('should highlight an event on the calendar using a function', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + events: (date) => date > '2018/06/28' + } + }) + + cy.get('.q-date__calendar-item') + .get('.q-date__event') + .parent() + .should('contain', '29') + .should('contain', '30') }) }) describe('(prop): options', () => { - it.skip(' ', () => { - // + it('should set limited options for selection using an array', () => { + const model = ref('2018/06/03') + + const options = [ 10, 13, 15, 17, 30 ] + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + options: options.map((day) => `2018/06/${ day }`) + } + }) + + for (let day = 1; day <= 30; day++) { + if (options.includes(day)) { + cy.get('.q-date__calendar-item--in') + .should('contain', day) + } + else { + cy.get('.q-date__calendar-item--out') + .should('contain', day) + } + } + }) + + it('should set a limited options for selection using a function', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + options: (date) => date > '2018/06/28' + } + }) + + const validOptions = [ 29, 30 ] + for (let day = 1; day <= 30; day++) { + if (validOptions.includes(day)) { + cy.get('.q-date__calendar-item--in') + .should('contain', day) + } + else { + cy.get('.q-date__calendar-item--out') + .should('contain', day) + } + } }) }) describe('(prop): first-day-of-week', () => { - it.skip(' ', () => { - // + it('should set the first day of the week', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + firstDayOfWeek: '2' + } + }) + + const newWeekdaysFormat = [ 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon' ] + + cy.log('Check that first and third days are no longer the defaults') + cy.get('.q-date__calendar-weekdays') + .children() + .first() + .should('not.contain', 'Sun') + cy.get('.q-date__calendar-weekdays') + .children() + .eq(2) + .should('not.contain', 'Tue') + + cy.get('.q-date__calendar-weekdays') + .children() + .each((child, index) => { + cy.wrap(child).should('contain', newWeekdaysFormat[ index ]) + }) }) }) describe('(prop): emit-immediately', () => { - it.skip(' ', () => { - // + it('should emit event to change the model when the user browses years and months', () => { + const model = ref('2018/06/03') + + const fn = cy.stub() + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + 'onUpdate:modelValue': fn, + emitImmediately: true + } + }) + + cy.get('.q-date__navigation') + .contains('June') + .click() + + cy.get('.q-date__months') + .contains('Dec') + .click() + + cy.get('.q-date__navigation') + .should('contain', 'December') + .then(() => expect(fn).to.be.calledWith('2018/12/03')) }) }) }) describe('Category: model|selection', () => { describe('(prop): multiple', () => { - it.skip(' ', () => { - // + it('should not select multiple days by default', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model) + } + }) + + cy.get('.q-date__calendar-item--in') + .contains('28') + .click() + cy.get('.q-date__calendar-item--in') + .contains('29') + .click() + + cy.get('.q-date__calendar-item > .bg-primary') + .should('not.contain', '28') + .should('contain', '29') + }) + + it('should select multiple days', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + multiple: true + } + }) + + cy.get('.q-date__calendar-item--in') + .contains('28') + .click() + cy.get('.q-date__calendar-item--in') + .contains('29') + .click() + + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', '28') + .should('contain', '29') }) }) describe('(prop): range', () => { - it.skip(' ', () => { - // + it('should select a date range', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + range: true + } + }) + + cy.get('.q-date__calendar-item--in') + .contains('2') + .click() + cy.get('.q-date__calendar-item--in') + .contains('5') + .click() + + cy.get('.q-date__calendar-item--in > .bg-primary') + .get('.q-date__range-from') + .should('contain', '2') + cy.get('.q-date__calendar-item--in > .bg-primary') + .get('.q-date__range-to') + .should('contain', '5') + cy.get('.q-date__range') + .should('not.contain', '1') + .should('contain', '3') + .should('contain', '4') + .should('not.contain', '6') + + cy.get('.q-date__range') + .then(() => { + expect(model.value.from).to.equal('2018/06/02') + expect(model.value.to).to.equal('2018/06/05') + }) }) }) }) describe('Category: selection', () => { describe('(prop): navigation-min-year-month', () => { - it.skip(' ', () => { - // + it('should prevent user from navigating below a specific year+month', () => { + const model = ref('2018/05/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + navigationMinYearMonth: '2018/03' + } + }) + + cy.get('.q-date__navigation') + .contains('May') + .click() + cy.get('.q-date__months') + .contains('Jan') + .should('be.disabled') + cy.get('.q-date__months') + .contains('Feb') + .should('be.disabled') + cy.get('.q-date__months') + .contains('Mar') + .should('be.enabled') + cy.get('.q-date__months') + .contains('Jun') + .should('be.enabled') + .click() + + cy.get('.q-date__navigation') + .contains('2018') + .click() + cy.get('.q-date__years-content') + .contains('2017') + .should('be.disabled') + cy.get('.q-date__years-content') + .contains('2019') + .should('be.enabled') }) }) describe('(prop): navigation-max-year-month', () => { - it.skip(' ', () => { - // + it('should prevent a user from navigating above a specific year+month', () => { + const model = ref('2018/05/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + navigationMaxYearMonth: '2018/07' + } + }) + + cy.get('.q-date__navigation') + .contains('May') + .click() + cy.get('.q-date__months') + .contains('Aug') + .should('be.disabled') + cy.get('.q-date__months') + .contains('Sep') + .should('be.disabled') + cy.get('.q-date__months') + .contains('Mar') + .should('be.enabled') + cy.get('.q-date__months') + .contains('Apr') + .should('be.enabled') + .click() + + cy.get('.q-date__navigation') + .contains('2018') + .click() + cy.get('.q-date__years-content') + .contains('2017') + .should('be.enabled') + cy.get('.q-date__years-content') + .contains('2019') + .should('be.disabled') }) }) describe('(prop): no-unset', () => { - it.skip(' ', () => { - // + it('should prevent deselecting a day after it has been selected', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + multiple: true + } + }) + + cy.get('.q-date__calendar-item--in') + .contains('28') + .click() + cy.get('.q-date__calendar-item--in') + .contains('29') + .click() + cy.get('.q-date__calendar-item--in') + .contains('28') + .click() + + cy.get('.q-date__calendar-item > .bg-primary') + .should('not.contain', '28') + .should('contain', '29') + .then(async () => await Cypress.vueWrapper.setProps({ noUnset: true })) + + cy.log('Unselect a date and check that it is still selected') + cy.get('.q-date__calendar-item--in') + .contains('28') + .click() + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', '28') }) }) }) describe('Category: style', () => { describe('(prop): event-color', () => { - it.skip(' ', () => { - // + it('should mark an event on the calendar using a custom color', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + events: [ '2018/06/12' ], + eventColor: 'orange' + } + }) + + cy.get('.q-date__calendar-item') + .get('.q-date__event') + .should('not.have.class', 'bg-primary') + .should('have.class', 'bg-orange') + .parent() + .should('contain', '12') }) }) }) @@ -123,66 +591,256 @@ describe('Date API', () => { describe('Slots', () => { describe('(slot): default', () => { - it.skip(' ', () => { - // + it('should render a default slot', () => { + cy.mount(QDate, { + slots: { + default: () => 'Default' + } + }) + + cy.get('.q-date__actions') + .should('contain', 'Default') }) }) }) - describe('Events', () => { + describe.skip('Events', () => { describe('(event): update:model-value', () => { - it.skip(' ', () => { - // + it('should emit update:model-value event when selecting new date', () => { + const model = ref('2018/06/03') + + const fn = cy.stub() + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + todayBtn: true, + 'onUpdate:modelValue': fn + } + }) + + cy.get('.q-date') + .then(() => expect(fn).to.not.be.called) + cy.get('.q-date__header-today') + .click() + + const today = formatDate(new Date(), 'YYYY/MM/DD') + cy.get('.q-date__calendar-item') + .then(() => expect(fn).to.be.calledWith(today)) }) }) describe('(event): navigation', () => { - it.skip(' ', () => { - // + it('should emit the navigation() event when navigating', () => { + const model = ref('2018/06/03') + + const fn = cy.stub() + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + onNavigation: fn + } + }) + + cy.get('.q-date__calendar-item') + .then(() => expect(fn).not.to.be.calledOnce) + + cy.get('.q-date__navigation') + .contains('June') + .click() + + cy.get('.q-date__months') + .contains('Dec') + .click() + + cy.get('.q-date__calendar-item') + .then(() => expect(fn).to.be.calledOnce) }) }) describe('(event): range-start', () => { - it.skip(' ', () => { - // + it('should emit the range-start() event when selecting range start', () => { + const model = ref('2018/06/03') + + const fn = cy.stub() + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + range: true, + onRangeStart: fn + } + }) + + cy.get('.q-date__calendar-item > .bg-primary') + .then(() => expect(fn).not.to.be.called) + + cy.get('.q-date__calendar-item--in') + .contains('2') + .click() + cy.get('.q-date__calendar-item > .bg-primary') + .then(() => expect(fn).to.be.called) }) }) describe('(event): range-end', () => { - it.skip(' ', () => { - // + it('should emit the range-end() event when ending range selection', () => { + const model = ref('2018/06/03') + + const fn = cy.stub() + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + range: true, + onRangeEnd: fn + } + }) + + cy.get('.q-date__calendar-item > .bg-primary') + .then(() => expect(fn).not.to.be.called) + + cy.get('.q-date__calendar-item--in') + .contains('2') + .click() + cy.get('.q-date__calendar-item--in') + .contains('5') + .click() + cy.get('.q-date__calendar-item > .bg-primary') + .then(() => expect(fn).to.be.called) }) }) }) describe('Methods', () => { describe('(method): setToday', () => { - it.skip(' ', () => { - // + it('should set the selected date to today using the setToday method', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model) + } + }) + + const today = new Date() + + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', '3') + .should('not.contain', today.getDate()) + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.setToday() + }) + + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', today.getDate()) }) }) describe('(method): setView', () => { - it.skip(' ', () => { - // + it('should use the setView method to set the view', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model) + } + }) + + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.setView('Months') + }) + + cy.get('.q-date__months .bg-primary') + .should('contain', 'Jun') + cy.get('.q-date__calendar') + .should('not.exist') + cy.get('.q-date__years') + .should('not.exist') }) }) describe('(method): offsetCalendar', () => { - it.skip(' ', () => { - // + it('should decrement or increment the month or year calendar', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model) + } + }) + + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.offsetCalendar('month') + }) + cy.get('.q-date__navigation') + .should('not.contain', 'June') + .should('contain', 'July') + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.offsetCalendar('month', true) + }) + cy.get('.q-date__navigation') + .should('not.contain', 'July') + .should('contain', 'June') + + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.offsetCalendar('year') + }) + cy.get('.q-date__navigation') + .should('not.contain', '2018') + .should('contain', '2019') + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.offsetCalendar('year', true) + }) + cy.get('.q-date__navigation') + .should('not.contain', '2019') + .should('contain', '2018') }) }) describe('(method): setCalendarTo', () => { - it.skip(' ', () => { - // + it('should set the current month and year using the setCalendar method', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model) + } + }) + + cy.get('.q-date__navigation') + .should('not.contain', '2090') + .should('not.contain', 'January') + + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.setCalendarTo(2090, 1) + }) + + cy.get('.q-date__navigation') + .should('contain', '2090') + .should('contain', 'January') }) }) describe('(method): setEditingRange', () => { - it.skip(' ', () => { - // + it('should set the editing range using the setEditingRange method', () => { + const model = ref('2018/06/03') + + cy.mount(QDate, { + props: { + ...vModelAdapter(model), + range: true + } + }) + + cy.get('.q-date').then(async () => { + await Cypress.vueWrapper.vm.setEditingRange({ year: 2018, month: 6, day: 7 }, { year: 2018, month: 6, day: 10 }) + }) + + cy.get('.q-date__edit-range-from') + .should('contain', '7') + cy.get('.q-date__edit-range') + .should('contain', '8') + .should('contain', '9') + cy.get('.q-date__edit-range-to') + .should('contain', '10') }) }) }) From 8186c45b605bd3bdbc17a5b7e1be27c4a17a86c0 Mon Sep 17 00:00:00 2001 From: Calson Chiatiah Date: Thu, 22 Feb 2024 09:27:03 +0100 Subject: [PATCH 2/4] test(ui/QDate): improve tests --- ui/src/components/date/__tests__/QDate.cy.js | 78 ++++++++++---------- 1 file changed, 41 insertions(+), 37 deletions(-) diff --git a/ui/src/components/date/__tests__/QDate.cy.js b/ui/src/components/date/__tests__/QDate.cy.js index 5a706e04073..b5782b2a191 100644 --- a/ui/src/components/date/__tests__/QDate.cy.js +++ b/ui/src/components/date/__tests__/QDate.cy.js @@ -5,8 +5,12 @@ import { date } from 'quasar' const { formatDate, addToDate } = date +function mountQDate (options) { + return cy.mount(QDate, options) +} + describe('Date API', () => { - describe.skip('Props', () => { + describe('Props', () => { describe('Category: behavior', () => { describe('(prop): years-in-month-view', () => { it.skip(' ', () => { @@ -15,12 +19,12 @@ describe('Date API', () => { }) }) - describe.skip('Category: content', () => { + describe('Category: content', () => { describe('(prop): title', () => { it('should override the default title header', () => { const title = 'Birthday' - cy.mount(QDate, { + mountQDate({ props: { title } @@ -35,7 +39,7 @@ describe('Date API', () => { it('should override the default subtitle', () => { const subtitle = 'Birthday' - cy.mount(QDate, { + mountQDate({ props: { subtitle } @@ -55,7 +59,7 @@ describe('Date API', () => { const today = formatDate(currentDate, format) - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(fiveDaysFromToday), todayBtn: true @@ -89,7 +93,7 @@ describe('Date API', () => { describe('(prop): minimal', () => { it('should hide the header', () => { - cy.mount(QDate, { + mountQDate({ props: { minimal: true } @@ -101,12 +105,12 @@ describe('Date API', () => { }) }) - describe.skip('Category: model', () => { + describe('Category: model', () => { describe('(prop): model-value', () => { it('should select the correct date based on the model value', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model) } @@ -128,7 +132,7 @@ describe('Date API', () => { describe('(prop): default-year-month', () => { it('should display the date picker with a default year and month', () => { - cy.mount(QDate, { + mountQDate({ props: { defaultYearMonth: '1986/01' } @@ -150,7 +154,7 @@ describe('Date API', () => { it('should display with a default years view', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), defaultView: 'Years' @@ -168,7 +172,7 @@ describe('Date API', () => { it('should display with a default months view', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), defaultView: 'Months' @@ -186,7 +190,7 @@ describe('Date API', () => { it('should display with a default calendar view', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), defaultView: 'Calendar' @@ -207,7 +211,7 @@ describe('Date API', () => { it('should highlight a single event on the calendar', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), events: '2018/06/12' @@ -223,7 +227,7 @@ describe('Date API', () => { it('should highlight multiple events on the calendar', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), events: [ '2018/06/12', '2018/06/17', '2018/06/20' ] @@ -241,7 +245,7 @@ describe('Date API', () => { it('should highlight an event on the calendar using a function', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), events: (date) => date > '2018/06/28' @@ -261,7 +265,7 @@ describe('Date API', () => { const model = ref('2018/06/03') const options = [ 10, 13, 15, 17, 30 ] - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), options: options.map((day) => `2018/06/${ day }`) @@ -283,7 +287,7 @@ describe('Date API', () => { it('should set a limited options for selection using a function', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), options: (date) => date > '2018/06/28' @@ -308,7 +312,7 @@ describe('Date API', () => { it('should set the first day of the week', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), firstDayOfWeek: '2' @@ -340,7 +344,7 @@ describe('Date API', () => { const model = ref('2018/06/03') const fn = cy.stub() - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), 'onUpdate:modelValue': fn, @@ -368,7 +372,7 @@ describe('Date API', () => { it('should not select multiple days by default', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model) } @@ -389,7 +393,7 @@ describe('Date API', () => { it('should select multiple days', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), multiple: true @@ -413,7 +417,7 @@ describe('Date API', () => { it('should select a date range', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), range: true @@ -453,7 +457,7 @@ describe('Date API', () => { it('should prevent user from navigating below a specific year+month', () => { const model = ref('2018/05/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), navigationMinYearMonth: '2018/03' @@ -493,7 +497,7 @@ describe('Date API', () => { it('should prevent a user from navigating above a specific year+month', () => { const model = ref('2018/05/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), navigationMaxYearMonth: '2018/07' @@ -533,7 +537,7 @@ describe('Date API', () => { it('should prevent deselecting a day after it has been selected', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), multiple: true @@ -570,7 +574,7 @@ describe('Date API', () => { it('should mark an event on the calendar using a custom color', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), events: [ '2018/06/12' ], @@ -592,7 +596,7 @@ describe('Date API', () => { describe('Slots', () => { describe('(slot): default', () => { it('should render a default slot', () => { - cy.mount(QDate, { + mountQDate({ slots: { default: () => 'Default' } @@ -604,13 +608,13 @@ describe('Date API', () => { }) }) - describe.skip('Events', () => { + describe('Events', () => { describe('(event): update:model-value', () => { it('should emit update:model-value event when selecting new date', () => { const model = ref('2018/06/03') const fn = cy.stub() - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), todayBtn: true, @@ -634,7 +638,7 @@ describe('Date API', () => { const model = ref('2018/06/03') const fn = cy.stub() - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), onNavigation: fn @@ -662,7 +666,7 @@ describe('Date API', () => { const model = ref('2018/06/03') const fn = cy.stub() - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), range: true, @@ -686,7 +690,7 @@ describe('Date API', () => { const model = ref('2018/06/03') const fn = cy.stub() - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), range: true, @@ -714,7 +718,7 @@ describe('Date API', () => { it('should set the selected date to today using the setToday method', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model) } @@ -738,7 +742,7 @@ describe('Date API', () => { it('should use the setView method to set the view', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model) } @@ -761,7 +765,7 @@ describe('Date API', () => { it('should decrement or increment the month or year calendar', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model) } @@ -799,7 +803,7 @@ describe('Date API', () => { it('should set the current month and year using the setCalendar method', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model) } @@ -823,7 +827,7 @@ describe('Date API', () => { it('should set the editing range using the setEditingRange method', () => { const model = ref('2018/06/03') - cy.mount(QDate, { + mountQDate({ props: { ...vModelAdapter(model), range: true From 50ee868254c3700bfdf17b8d61801c6f4d99fa73 Mon Sep 17 00:00:00 2001 From: Calson Chiatiah Date: Thu, 22 Feb 2024 10:11:56 +0100 Subject: [PATCH 3/4] test(ui/QDate): add years-in-month-view prop test --- ui/src/components/date/__tests__/QDate.cy.js | 23 ++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/ui/src/components/date/__tests__/QDate.cy.js b/ui/src/components/date/__tests__/QDate.cy.js index b5782b2a191..ef656418806 100644 --- a/ui/src/components/date/__tests__/QDate.cy.js +++ b/ui/src/components/date/__tests__/QDate.cy.js @@ -13,8 +13,27 @@ describe('Date API', () => { describe('Props', () => { describe('Category: behavior', () => { describe('(prop): years-in-month-view', () => { - it.skip(' ', () => { - // + it('should show the years selector in months view', () => { + const model = ref('2018/06/03') + + mountQDate({ + props: { + ...vModelAdapter(model), + defaultView: 'Months', + yearsInMonthView: true + } + }) + + cy.get('.q-date__months .bg-primary') + .should('contain', 'Jun') + cy.get('.q-date__months') + .should('contain', '2018') + .then(async () => { + await Cypress.vueWrapper.setProps({ yearsInMonthView: false }) + }) + + cy.get('.q-date__months') + .should('not.contain', '2018') }) }) }) From e310a0127194cf7e54ff7186d47ede0d9af87bf1 Mon Sep 17 00:00:00 2001 From: Calson Chiatiah Date: Wed, 28 Feb 2024 08:48:01 +0100 Subject: [PATCH 4/4] test(ui/QDate): add tests for 'use-datetime' --- .../date/__tests__/use-datetime.cy.js | 202 +++++++++++++++--- 1 file changed, 171 insertions(+), 31 deletions(-) diff --git a/ui/src/components/date/__tests__/use-datetime.cy.js b/ui/src/components/date/__tests__/use-datetime.cy.js index 2fd14c73603..8738c112842 100644 --- a/ui/src/components/date/__tests__/use-datetime.cy.js +++ b/ui/src/components/date/__tests__/use-datetime.cy.js @@ -1,81 +1,221 @@ +import QDate from '../QDate' +import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress' +import { ref } from 'vue' +import { date } from 'quasar' + +const { formatDate } = date + +function mountQDate (options) { + return cy.mount(QDate, options) +} + describe('use-datetime API', () => { describe('Props', () => { describe('Category: behavior', () => { describe('(prop): landscape', () => { - it.skip(' ', () => { - // + it('should display the component in landscape mode', () => { + mountQDate({ + props: { + landscape: true + } + }) + + cy.get('.q-date--landscape') + .should('exist') }) }) }) describe('Category: model', () => { describe('(prop): mask', () => { - it.skip(' ', () => { - // + it('should mask the date in the format specified', () => { + const model = ref('2018/06/03') + + mountQDate({ + props: { + ...vModelAdapter(model), + mask: 'YYYY/MMMM/DD', + todayBtn: true + } + }) + + const today = formatDate(new Date(), 'YYYY/MMMM/DD') + cy.get('.q-date__header-today') + .should('exist') + .click() + cy.get('.q-date').then(() => { + expect(model.value).to.eq(today) + }) }) }) describe('(prop): locale', () => { - it.skip(' ', () => { - // + it('should use a custom locale', () => { + const model = ref('2018/11/03') + + mountQDate({ + props: { + ...vModelAdapter(model) + + } + }) + + cy.get('.q-date__header-title-label') + .should('not.contain', 'Beh, Hop 3') + .should('contain', 'Sat, Nov 3') + cy.get('.q-date__navigation') + .should('contain', 'November') + .should('not.contain', 'CustomMonth') + cy.get('.q-date') + .then(async () => { + await Cypress.vueWrapper.setProps({ + locale: { + monthsShort: [ 'Rtn', 'Tuh', 'Sha', 'Dfk', 'Net', 'Tes', 'Ken', 'Frw', 'You', 'Bet', 'Hop', 'Nta' ], + daysShort: [ 'Moh', 'Mpi', 'Tad', 'Lek', 'Ntw', 'Lep', 'Beh' ], + months: [ '', '', '', '', '', '', '', '', '', '', 'CustomMonth', '' ] + } + }) + }) + cy.get('.q-date__header-title-label') + .should('contain', 'Beh, Hop 3') + .should('not.contain', 'Sat, Nov 3') + cy.get('.q-date__navigation') + .should('not.contain', 'November') + .should('contain', 'CustomMonth') }) }) describe('(prop): calendar', () => { - it.skip(' ', () => { - // + it('should set the calendar type to gregorian or persian', () => { + const model = ref('2024/02/31') + + mountQDate({ + props: { + ...vModelAdapter(model), + calendar: 'gregorian' + } + }) + + cy.get('.q-date__calendar-item--in') + .should('not.contain', '31') + cy.get('.q-date__calendar-item > .bg-primary') + .should('not.exist') + + cy.get('.q-date') + .then(async () => { + await Cypress.vueWrapper.setProps({ calendar: 'persian' }) + }) + cy.get('.q-date__calendar-item--in') + .should('contain', '31') + cy.get('.q-date__calendar-item > .bg-primary') + .should('contain', '31') }) }) }) describe('Category: state', () => { describe('(prop): readonly', () => { - it.skip(' ', () => { - // + it('should set the component to readonly mode', () => { + const model = ref('2018/06/03') + + mountQDate({ + props: { + ...vModelAdapter(model), + readonly: true + } + }) + + cy.get('.q-date--readonly') + .should('exist') }) }) describe('(prop): disable', () => { - it.skip(' ', () => { - // + it('should set the component to readonly mode', () => { + const model = ref('2018/06/03') + + mountQDate({ + props: { + ...vModelAdapter(model), + disable: true + } + }) + + cy.get('.q-date.disabled') + .should('exist') }) }) }) describe('Category: style', () => { describe('(prop): color', () => { - it.skip(' ', () => { - // + it('should set the custom color value', () => { + mountQDate({ + props: { + color: 'orange' + } + }) + + cy.get('.q-date__header') + .should('have.class', 'bg-orange') + cy.get('.q-date__calendar-item') + .get('.bg-primary') + .should('not.exist') + .get('.bg-orange') + .should('exist') }) }) describe('(prop): text-color', () => { - it.skip(' ', () => { - // + it('should use the custom text-color', () => { + const model = ref('2018/06/03') + + mountQDate({ + props: { + ...vModelAdapter(model), + textColor: 'red' + } + }) + + cy.get('.q-date__header') + .should('have.class', 'text-red') + cy.get('.q-date__calendar-item') + .get('.bg-primary.text-red') + .should('exist') }) }) describe('(prop): dark', () => { - it.skip(' ', () => { - // - }) - }) + it('should set the component to dark mode', () => { + const model = ref('2018/06/03') - describe('(prop): square', () => { - it.skip(' ', () => { - // - }) - }) + mountQDate({ + props: { + ...vModelAdapter(model), + dark: true + } + }) - describe('(prop): flat', () => { - it.skip(' ', () => { - // + cy.get('.q-date--dark.q-dark') + .should('exist') + cy.get('.q-date__calendar-item') + .get('.bg-primary.text-white') + .should('exist') }) }) + const designs = [ 'square', 'flat', 'bordered' ] + designs.forEach((design) => { + describe(`(prop): ${ design }`, () => { + it(`should use ${ design } design`, () => { + mountQDate({ + props: { + [ design ]: true + } + }) - describe('(prop): bordered', () => { - it.skip(' ', () => { - // + cy.get(`.q-date.q-date--${ design }`) + .should('exist') + }) }) }) })