diff --git a/README.md b/README.md index 3aa46d8f..cb31ebc9 100755 --- a/README.md +++ b/README.md @@ -102,7 +102,6 @@ Apply a loading indicator to an element. See the [Loading Indicator section](#l All of this functionality is provided through a combination of leveraging the best-of-breed of other component offerings as well as our own implementations when the existing offerings were deficient. Existing offerings that were leveraged include: * [Twitter Bootstrap](http://getbootstrap.com/) -* [Bootstrap-Datepicker](http://bootstrap-datepicker.readthedocs.org/en/release/#) * [Highcharts](http://www.highcharts.com/) * [Select2](http://ivaynberg.github.io/select2/) * [typeahead.js](https://twitter.github.io/typeahead.js/) @@ -112,9 +111,6 @@ All of this functionality is provided through a combination of leveraging the be While this library is MIT licensed not all of the third-party component libraries are. Specifically, Highcharts is only free for non-commercial use and requires a license for any other use. See [this FAQ page](http://shop.highsoft.com/faq/non-commercial#what-is-commercial-website) for more information. -Other libraries that are not MIT licensed, though it should not pose a problem, are: - -* [Bootstrap-Datepicker](https://github.com/eternicode/bootstrap-datepicker/blob/release/LICENSE) diff --git a/addon/components/sl-calendar-day.js b/addon/components/sl-calendar-day.js index 86ba8f9d..b449d644 100644 --- a/addon/components/sl-calendar-day.js +++ b/addon/components/sl-calendar-day.js @@ -1,5 +1,4 @@ import Ember from 'ember'; -import layout from '../templates/components/sl-calendar-day'; /** * @module @@ -13,11 +12,20 @@ export default Ember.Component.extend({ // ------------------------------------------------------------------------- // Attributes + /** @type {String[]} */ + attributeBindings: [ + 'ariaSelected:aria-selected', + 'tabIndex' + ], + /** @type {String[]} */ classNameBindings: [ - 'active', + 'active:selected', 'new', - 'old' + 'old', + 'isToday:today', + 'restricted:disabled', + 'hasEvents' ], /** @type {String[]} */ @@ -25,47 +33,80 @@ export default Ember.Component.extend({ 'day' ], - /** @type {Object} */ - layout, - /** @type {String} */ tagName: 'td', // ------------------------------------------------------------------------- // Actions + /** @type {Object} */ + actions: {}, + // ------------------------------------------------------------------------- // Events /** - * @function + * Send the click event up to sl-calendar + * * @returns {undefined} */ click() { - const content = this.get( 'content' ); + const events = this.get( 'events' ); + const date = this.get( 'date' ); - if ( content ) { - this.sendAction( 'action', content ); - } + this.sendAction( 'action', date, events ); + }, + + /** + * Focus this date on insert. + * Needed for keyboard navigation across months. + * + * @returns {undefined} + */ + didInsertElement() { + this._super( ...arguments ); + + this.focus(); }, // ------------------------------------------------------------------------- // Properties /** - * Whether the calendar day this cell represents is actively selected day + * Whether the calendar day this cell represents is actively selected * * @type {Boolean} */ active: false, /** - * The various data representing the day (created and passed in through - * sl-calendar) + * The role attribute to apply + * + * @private + * @type {String} + */ + ariaRole: 'gridcell', + + /** + * The specific moment date that this cell represents + * + * @type {?moment} + */ + date: null, + + /** + * An array of events bound to the date this cell represents * - * @type {?Object} + * @type {Object[]} */ - content: null, + events: [], + + /** + * Whether this day is currently focused by keyboard navigation + * + * @type {Boolean} + */ + focused: false, /** * Whether the calendar day this cell represents is part of the next month @@ -81,12 +122,90 @@ export default Ember.Component.extend({ * * @type {Boolean} */ - old: false + old: false, + + /** + * Whether the calendar day this cell represents is restricted by parent + * calendar's selectConstraint + * + * @type {Boolean} + */ + restricted: false, // ------------------------------------------------------------------------- // Observers + /** + * When tabIndex changes, check if we should apply focus. + * + * @function + * @returns {undefined} + */ + focus: Ember.observer( + 'tabIndex', + function() { + if ( this.get( 'focused' ) ) { + Ember.run.scheduleOnce( 'afterRender', this, function() { + this.$().get( 0 ).focus(); + }); + } + } + ), + // ------------------------------------------------------------------------- // Methods + /** + * Sets aria-selected attribute when active state is true. + * + * @function + * @returns {?Boolean} + */ + ariaSelected: Ember.computed( + 'active', + function() { + const active = this.get( 'active' ); + return active ? active : null; + } + ), + + /** + * Whether there are events bound to this date. + * + * @function + * @returns {Boolean} + */ + hasEvents: Ember.computed( + 'events', + function() { + return !Ember.isEmpty( this.get( 'events' ) ); + } + ), + + /** + * Calculate if this day is today's date. + * + * @function + * @returns {Boolean} + */ + isToday: Ember.computed( + 'date', + function() { + return window.moment().isSame( this.get( 'date' ), 'day' ); + } + ), + + /** + * Sets tabIndex attribute based on focused property. + * + * @function + * @returns {Number} + */ + tabIndex: Ember.computed( + 'focused', + function() { + return this.get( 'focused' ) ? 0 : -1; + } + ) + }); diff --git a/addon/components/sl-calendar-month.js b/addon/components/sl-calendar-month.js index e7af4987..1a7cbc1a 100755 --- a/addon/components/sl-calendar-month.js +++ b/addon/components/sl-calendar-month.js @@ -1,5 +1,4 @@ import Ember from 'ember'; -import layout from '../templates/components/sl-calendar-month'; /** * @module @@ -15,14 +14,16 @@ export default Ember.Component.extend({ /** @type {String[]} */ classNameBindings: [ - 'active' + 'active:selected' ], - /** @type {Object} */ - layout, + /** @type {String[]} */ + classNames: [ + 'month' + ], /** @type {String} */ - tagName: 'span', + tagName: 'td', // ------------------------------------------------------------------------- // Actions @@ -31,7 +32,8 @@ export default Ember.Component.extend({ // Events /** - * @function + * Send the click event up to sl-calendar + * * @returns {undefined} */ click() { @@ -42,26 +44,18 @@ export default Ember.Component.extend({ // Properties /** - * Whether the month that this component represents is selected by the - * overall calendar component + * Whether the month that this component represents is actively selected * * @type {Boolean} */ active: false, - /** - * The locale string to use for moment dates - * - * @type {String} - */ - locale: 'en', - /** * The number of the month (1-12) * * @type {?Number} */ - month: null, + month: null // ------------------------------------------------------------------------- // Observers @@ -69,19 +63,4 @@ export default Ember.Component.extend({ // ------------------------------------------------------------------------- // Methods - /** - * The short string name of the represented month - * - * @function - * @returns {String} - */ - shortName: Ember.computed( - 'month', - function() { - return window.moment([ 1, this.get( 'month' ) - 1 ]) - .locale( this.get( 'locale' ) ) - .format( 'MMM' ); - } - ) - }); diff --git a/addon/components/sl-calendar-year.js b/addon/components/sl-calendar-year.js index 27eb7b50..8a955ed1 100644 --- a/addon/components/sl-calendar-year.js +++ b/addon/components/sl-calendar-year.js @@ -15,16 +15,21 @@ export default Ember.Component.extend({ /** @type {String[]} */ classNameBindings: [ - 'active', + 'active:selected', 'new', 'old' ], + /** @type {String[]} */ + classNames: [ + 'year' + ], + /** @type {Object} */ layout, /** @type {String} */ - tagName: 'span', + tagName: 'td', // ------------------------------------------------------------------------- // Actions @@ -33,7 +38,8 @@ export default Ember.Component.extend({ // Events /** - * @function + * Send the click event up to sl-calendar + * * @returns {undefined} */ click() { @@ -44,8 +50,7 @@ export default Ember.Component.extend({ // Properties /** - * Whether the year this component represents is the currently active year - * of the parent calendar component + * Whether the year this component represents is actively selected * * @type {Boolean} */ diff --git a/addon/components/sl-calendar.js b/addon/components/sl-calendar.js index 29f4e742..a70cc6ff 100755 --- a/addon/components/sl-calendar.js +++ b/addon/components/sl-calendar.js @@ -2,6 +2,21 @@ import Ember from 'ember'; import ClassPrefix from '../mixins/class-prefix'; import layout from '../templates/components/sl-calendar'; +/** + * Valid view types for the sl-calendar component + * + * @memberof module:addon/components/sl-calendar + * @enum {String} + * @property {String} DAYS 'days', + * @property {String} MONTHS 'months', + * @property {String} YEARS 'years' + */ +export const View = Object.freeze({ + DAYS: 'days', + MONTHS: 'months', + YEARS: 'years' +}); + /** * @module * @augments ember/Component @@ -15,8 +30,8 @@ export default Ember.Component.extend( ClassPrefix, { // Attributes /** @type {String[]} */ - classNameBindings: [ - 'locked:sl-calendar-locked' + attributeBindings: [ + 'tabIndex' ], /** @type {Object} */ @@ -30,106 +45,89 @@ export default Ember.Component.extend( ClassPrefix, { /** * Change the currently-viewed decade by incrementing or decrementing - * the decadeStart year number + * the viewedDate by ten years at a time * * @function actions:changeDecade - * @param {Number} decadeMod - A number to adjust the decadeStart by + * @param {Number} decadeMod - A number to adjust the viewedDate year by * (positive to increment, negative to decrement) * @returns {undefined} */ changeDecade( decadeMod ) { - if ( this.get( 'locked' ) ) { - return; - } - - this.incrementProperty( 'currentYear', 10 * decadeMod ); + const newYear = this.get( 'viewingDate' ).year() + ( 10 * decadeMod ); + this.setYear( newYear ); }, /** * Change the currently-viewed month by incrementing or decrementing - * the currentMonth (and currentYear if needed) + * the viewedDate by one month at a time * * @function actions:changeMonth - * @param {Number} monthMod - A number to adjust the currentMonth by - * (positive to increment, negative to decrement). The - * currentYear is adjusted as needed. + * @param {Number} monthMod - A number to adjust the viewedDate month by + * (positive to increment, negative to decrement). * @returns {undefined} */ changeMonth( monthMod ) { - let month; - let year; - - if ( this.get( 'locked' ) ) { - return; - } - - month = this.get( 'currentMonth' ) + monthMod; - year = this.get( 'currentYear' ); - - while ( month < 1 ) { - month += 12; - year -= 1; - } + const newMonth = ( this.get( 'viewingDate' ).month() + 1 ) + monthMod; - while ( month > 12 ) { - month -= 12; - year += 1; - } - - this.setProperties({ - currentYear: year, - currentMonth: month - }); + this.setMonth( newMonth ); }, /** - * Change the currently-viewed year by increment or decrementing the - * currentYear + * Change the currently-viewed year by incrementing or decrementing + * the viewedDate by one year at a time * * @function actions:changeYear - * @param {Number} yearMod - A number to adjust the currentYear by + * @param {Number} yearMod - A number to adjust the viewedDate year by * (positive to increment, negative to decrement) * @returns {undefined} */ changeYear( yearMod ) { - if ( this.get( 'locked' ) ) { - return; - } + const newYear = this.get( 'viewingDate' ).year() + yearMod; - this.incrementProperty( 'currentYear', yearMod ); + this.setYear( newYear ); }, /** - * Action to trigger component's bound action and pass back content - * values with dates occurring on the clicked date + * Action to trigger component's bound action and pass back events + * associated with the clicked date * - * @function actions:sendDateContent - * @param {Array} dateContent - Collection of content objects with - * date values of the clicked date + * @function actions:selectDate + * @param {Object} date - Moment date object representing the clicked + * date + * @param {Array} events - Collection of event objects associated with + * the clicked date * @returns {undefined} */ - sendDateContent( dateContent ) { - if ( dateContent ) { - this.sendAction( 'action', dateContent ); + selectDate( date, events ) { + const isValid = this.setDate( date ); + + if ( isValid ) { + this.sendAction( 'action', date, events ); } }, /** * Set the current month and change view mode to that month * - * @function actions:setMonth + * @function actions:selectMonth * @param {Number} month - The number of the month to change view to * @returns {undefined} */ - setMonth( month ) { - if ( this.get( 'locked' ) ) { - return; - } + selectMonth( month ) { + this.setMonth( month ); + this.send( 'setView', 'days' ); + }, - this.setProperties({ - currentMonth: month, - viewMode: 'days' - }); + /** + * Set the current year and change the view mode to that year + * + * @function actions:selectYear + * @param {Number} year - The year to change the view to + * @returns {undefined} + */ + selectYear( year ) { + this.setYear( year ); + this.send( 'setView', 'months' ); }, /** @@ -141,35 +139,103 @@ export default Ember.Component.extend( ClassPrefix, { * @returns {undefined} */ setView( view ) { - if ( this.get( 'locked' ) ) { - return; - } - this.set( 'viewMode', view ); - }, - - /** - * Set the current year - * - * @function actions:setYear - * @param {Number} year - The year to set to the current value - * @returns {undefined} - */ - setYear( year ) { - if ( this.get( 'locked' ) ) { - return; - } - - this.setProperties({ - viewMode: 'months', - currentYear: year - }); + this.$().focus(); } }, // ------------------------------------------------------------------------- // Events + /** + * Track focus on the component + * + * @returns {undefined} + */ + focusIn() { + this._super( ...arguments ); + + this.set( 'hasFocus', true ); + }, + + /** + * Track focus on the component + * + * @returns {undefined} + */ + focusOut() { + this._super( ...arguments ); + + this.set( 'hasFocus', false ); + }, + + /** + * Capture keyDown events for WAI-ARIA + * + * @returns {undefined} + */ + keyDown( event ) { + this._super( ...arguments ); + + const viewingDate = window.moment( this.get( 'viewingDate' ) ); + + let timePeriod; + + switch ( event.keyCode ) { + case 38: // up arrow + this.set( 'viewingDate', viewingDate.subtract( 1, 'weeks' ) ); + break; + + case 40: // down arrow + this.set( 'viewingDate', viewingDate.add( 1, 'weeks' ) ); + break; + + case 37: // left arrow + this.set( 'viewingDate', viewingDate.subtract( 1, 'days' ) ); + break; + + case 39: // right arrow + this.set( 'viewingDate', viewingDate.add( 1, 'days' ) ); + break; + + case 33: // page up + timePeriod = 'months'; + if ( event.ctrlKey ) { + timePeriod = 'years'; + } + this.set( 'viewingDate', viewingDate.subtract( 1, timePeriod ) ); + break; + + case 34: // page down + timePeriod = 'months'; + if ( event.ctrlKey ) { + timePeriod = 'years'; + } + this.set( 'viewingDate', viewingDate.add( 1, timePeriod ) ); + break; + + case 35: // end + this.set( 'viewingDate', viewingDate.endOf( 'month' ) ); + break; + + case 36: // home + this.set( 'viewingDate', viewingDate.startOf( 'month' ) ); + break; + + case 32: // space + + case 13: // enter + this.send( 'selectDate', this.get( 'viewingDate' ) ); + break; + + default: + return true; + } + + // disallow default key event + return false; + }, + /** * Initialize default property values * @@ -178,15 +244,13 @@ export default Ember.Component.extend( ClassPrefix, { init() { this._super( ...arguments ); - const today = new Date(); + const today = window.moment(); - if ( !this.get( 'currentMonth' ) ) { - this.set( 'currentMonth', today.getMonth() + 1 ); + if ( !this.get( 'viewingDate' ) ) { + this.set( 'viewingDate', today ); } - if ( !this.get( 'currentYear' ) ) { - this.set( 'currentYear', today.getFullYear() ); - } + this.applyEvents(); }, // ------------------------------------------------------------------------- @@ -200,32 +264,33 @@ export default Ember.Component.extend( ClassPrefix, { componentClass: 'calendar', /** - * Array of date value objects + * Array of events to represent on the calendar * * @type {Object[]} */ - content: [], + events: [], /** - * The currently selected/viewed month (1-12) + * Whether to always show six weeks or a minimum of weeks. * - * @type {?Number} + * @type {Boolean} */ - currentMonth: null, + fixedWeekCount: false, /** - * The currently selected/viewed year + * Whether to allow the calendar to receive focus. + * Required for keyboard navigation. * - * @type {?Number} + * @type {Boolean} */ - currentYear: null, + focusable: true, /** - * String lookup for the date value on the content objects + * Whether the calendar currently has focus. * - * @type {String} + * @type {Boolean} */ - dateValuePath: 'date', + hasFocus: false, /** * The locale string to use for moment date values @@ -235,128 +300,213 @@ export default Ember.Component.extend( ClassPrefix, { locale: 'en', /** - * When true, the view mode is locked and users cannot navigate forward - * and back + * Constraints to enforce against selection of dates. + * An object of start and end Moment properties. + * + * @type {Object} + */ + selectConstraint: { + start: null, + end: null + }, + + /** + * The currently selected date. + * + * @type {moment} + */ + selectedDate: null, + + /** + * Whether to show controls for changing the view. * * @type {Boolean} */ - locked: false, + showControls: true, + + /** + * The currently shown month number. + * Helps determine if the calendar should be re-rendered. + * + * @private + * @type {?Number} + */ + showingMonth: null, + + /** + * The currently viewed date. + * Determines what month and year to display. + * + * @type {moment} + */ + viewingDate: null, /** * The current view mode for the calendar * * @type {String} */ - viewMode: 'days', + viewMode: View.DAYS, // ------------------------------------------------------------------------- // Observers - // ------------------------------------------------------------------------- - // Methods - /** - * Object of nested year, month, and day values, representing the dates - * supplied by the calendar's content values + * Keeps the day sub components up to date with the currently selected date. * * @function - * @returns {Object} + * @returns {undefined} */ - contentDates: Ember.computed( - 'content', - 'dateValuePath', + activeDateChange: Ember.observer( + 'selectedDate', function() { - const content = this.get( 'content' ); - const dates = {}; - const dateValuePath = this.get( 'dateValuePath' ); - - if ( content ) { - content.forEach( ( item ) => { - const date = new Date( Ember.get( item, dateValuePath ) ); - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const day = date.getDate(); - - if ( !dates.hasOwnProperty( year ) ) { - dates[ year ] = {}; - } + const selectedDate = this.get( 'selectedDate' ); + const weeksInMonthView = this.get( 'weeksInMonthView' ); - if ( !dates[ year ].hasOwnProperty( month ) ) { - dates[ year ][ month ] = {}; + for ( let week = 0; week < weeksInMonthView.length; week++ ) { + for ( let day = 0; day < weeksInMonthView[ week ].length; day++ ) { + if ( Ember.get( weeksInMonthView[ week ][ day ], 'active' ) ) { + Ember.set( weeksInMonthView[ week ][ day ], 'active', false ); } - if ( !dates[ year ][ month ].hasOwnProperty( day ) ) { - dates[ year ][ month ][ day ] = []; + if ( selectedDate.isSame( Ember.get( weeksInMonthView[ week ][ day ], 'date' ), 'day' ) ) { + Ember.set( weeksInMonthView[ week ][ day ], 'active', true ); } - - dates[ year ][ month ][ day ].push( item ); - }); + } } - - return dates; } ), /** - * Name of the currently selected/viewed month + * Keeps the day sub components up to date with the events array. * * @function - * @returns {String} + * @returns {undefined} */ - currentMonthString: Ember.computed( - 'currentMonth', - 'currentYear', - 'locale', + applyEvents: Ember.observer( + 'events', + 'weeksInMonthView', function() { - return window.moment([ - this.get( 'currentYear' ), - this.get( 'currentMonth' ) - 1 - ]).locale( this.get( 'locale' ) ).format( 'MMMM' ); + const events = this.get( 'events' ); + const viewingDate = this.get( 'viewingDate' ); + const weeksInMonthView = this.get( 'weeksInMonthView' ); + const eventsPerDay = []; + + eventsLoop: + for ( let event = 0; event < events.length; event++ ) { + const currentEvent = events[ event ]; + if ( currentEvent.startDate.isAfter( viewingDate, 'month' ) ) { + continue; + } + + if ( currentEvent.endDate ) { + if ( currentEvent.endDate.isBefore( viewingDate, 'month' ) ) { + continue; + } + } + + for ( let day = 0; day < eventsPerDay.length; day++ ) { + if ( currentEvent.startDate.isSame( eventsPerDay[ day ].date, 'day' ) ) { + eventsPerDay[ day ].events.push( currentEvent ); + continue eventsLoop; + } + } + + eventsPerDay.push( { + date: currentEvent.startDate, + events: [ currentEvent ] + }); + } + + for ( let week = 0; week < weeksInMonthView.length; week++ ) { + daysLoop: + for ( let day = 0; day < weeksInMonthView[ week ].length; day++ ) { + const date = Ember.get( weeksInMonthView[ week ][ day ], 'date' ); + + for ( let eventDay = 0; eventDay < eventsPerDay.length; eventDay++ ) { + if ( date.isSame( eventsPerDay[ eventDay ].date, 'day' ) ) { + Ember.set( weeksInMonthView[ week ][ day ], 'events', eventsPerDay[ eventDay ].events ); + continue daysLoop; + } + } + Ember.set( weeksInMonthView[ week ][ day ], 'events', null ); + } + } } ), /** - * The number of days in the current month + * Keeps the day sub components up to date with the currently viewed date. * * @function - * @returns {Number} + * @returns {undefined} */ - daysInMonth: Ember.computed( - 'currentMonth', - 'currentYear', + focusedDateChange: Ember.observer( + 'viewingDate', function() { - return window.moment([ - this.get( 'currentYear' ), - this.get( 'currentMonth' ) - 1 - ]).daysInMonth(); + const viewingDate = this.get( 'viewingDate' ); + const weeksInMonthView = this.get( 'weeksInMonthView' ); + + for ( let week = 0; week < weeksInMonthView.length; week++ ) { + for ( let day = 0; day < weeksInMonthView[ week ].length; day++ ) { + if ( Ember.get( weeksInMonthView[ week ][ day ], 'focused' ) ) { + Ember.set( weeksInMonthView[ week ][ day ], 'focused', false ); + } + + if ( viewingDate.isSame( Ember.get( weeksInMonthView[ week ][ day ], 'date' ), 'day' ) ) { + Ember.set( weeksInMonthView[ week ][ day ], 'focused', true ); + } + } + } } ), /** - * The last year in the currently selected/viewed decade + * Updates the showingMonth property to track when the calendar switches month. * * @function - * @returns {Number} + * @returns {undefined} */ - decadeEnd: Ember.computed( - 'decadeStart', + updateShowingMonth: Ember.observer( + 'viewingDate', function() { - return this.get( 'decadeStart' ) + 9; + this.set( 'showingMonth', this.get( 'viewingDate' ).month() ); } ), + // ------------------------------------------------------------------------- + // Methods + /** - * The first year in the currently selected/viewed decade + * Locale and viewMode based string title for the calendar * * @function - * @returns {Number} + * @returns {String} */ - decadeStart: Ember.computed( - 'currentYear', + calendarTitle: Ember.computed( + 'viewingDate', + 'locale', + 'viewMode', function() { - const currentYear = this.get( 'currentYear' ); - - return currentYear - ( currentYear % 10 ); + const viewMode = this.get( 'viewMode' ); + const locale = this.get( 'locale' ); + const viewingDate = this.get( 'viewingDate' ).locale( locale ); + let title = ''; + + switch( viewMode ) { + case View.DAYS: + title = viewingDate.format( 'MMMM YYYY' ); + break; + case View.MONTHS: + title = viewingDate.format( 'YYYY' ); + break; + case View.YEARS: + const decadeMod = viewingDate.year() % 10; + title = viewingDate.subtract( decadeMod, 'years' ).format( 'YYYY' ); + title += ' - ' + viewingDate.add( 9, 'years' ).format( 'YYYY' ); + break; + } + return title; } ), @@ -364,55 +514,133 @@ export default Ember.Component.extend( ClassPrefix, { * Get an array of objects representing months in the year view * * Each item contains the following values: - * - {Boolean} active - Whether a content item's date occurs on this month + * - {Boolean} active - Whether the month is currently selected * - {Number} month - The month number in the year (1-12) + * - {String} monthName - The localized string representation of the month * * @function * @returns {Object[]} */ monthsInYearView: Ember.computed( - 'contentDates', - 'currentYear', + 'viewingDate', + 'selectedDate', + 'locale', function() { - const contentDates = this.get( 'contentDates' ); - const currentYear = this.get( 'currentYear' ); + const showingYear = this.get( 'viewingDate' ).year(); + const selectedDate = this.get( 'selectedDate' ); + + window.moment().locale( this.get( 'locale' ) ); + + const monthNames = window.moment.monthsShort(); const months = Ember.A(); + let monthCount = 1; - for ( let month = 1; month <= 12; month++ ) { - months.push({ - active: ( - contentDates.hasOwnProperty( currentYear ) && - contentDates[ currentYear ].hasOwnProperty( month ) - ), + for ( let rowCount = 1; rowCount <= 3; rowCount++ ) { + const row = Ember.A(); - month - }); - } + for ( let colCount = 1; colCount <= 4; colCount++ ) { + let isActive = false; + if ( selectedDate ) { + isActive = ( selectedDate.month() + 1 ) === monthCount && selectedDate.year() === showingYear; + } + + row.push({ + active: isActive, + monthName: monthNames[ monthCount - 1 ], + month: monthCount + }); + + monthCount++; + } + + months.push( row ); + } return months; } ), + /** + * Sets the viewingDate to the specified date. + * + * @param {moment} date - the date to set + * @returns {Boolean} - true if date passes constraint check + */ + setDate( date ) { + const selectConstraint = this.get( 'selectConstraint' ); + + if ( selectConstraint.start ) { + if ( date.isBefore( selectConstraint.start ) ) { + return false; + } + } + + if ( selectConstraint.end ) { + if ( date.isAfter( selectConstraint.end ) ) { + return false; + } + } + + this.set( 'selectedDate', window.moment( date ) ); + this.set( 'viewingDate', window.moment( date ) ); + return true; + }, + + /** + * Sets the viewingDate to the specified month. + * + * @param {Number} month - the month to set + * @returns {undefined} + */ + setMonth( month ) { + const viewingDate = this.get( 'viewingDate' ); + + this.set( 'viewingDate', window.moment( viewingDate ).month( month - 1 ) ); + }, + + /** + * Sets the viewingDate to the specified year. + * + * @param {Number} year - the year to set + * @returns {undefined} + */ + setYear( year ) { + const viewingDate = this.get( 'viewingDate' ); + + this.set( 'viewingDate', window.moment( viewingDate ).year( year ) ); + }, + /** * An array of abbreviated, formatted day names of each week day * * @function - * @returns {ember/Array} + * @returns {Array} */ shortWeekDayNames: Ember.computed( 'locale', function() { const m = window.moment().locale( this.get( 'locale' ) ); - return Ember.A([ - m.day( 0 ).format( 'dd' ), - m.day( 1 ).format( 'dd' ), - m.day( 2 ).format( 'dd' ), - m.day( 3 ).format( 'dd' ), - m.day( 4 ).format( 'dd' ), - m.day( 5 ).format( 'dd' ), - m.day( 6 ).format( 'dd' ) - ]); + const weekdays = window.moment.weekdaysMin(); + + for ( let i = m.localeData().firstDayOfWeek(); i > 0; i-- ) { + weekdays.push( weekdays.shift() ); + } + + return weekdays; + } + ), + + /** + * Sets tabIndex attribute based on focusable property. + * + * @function + * @returns {Number} + */ + tabIndex: Ember.computed( + 'focusable', + function() { + return this.get( 'focusable' ) ? 0 : -1; } ), @@ -425,7 +653,7 @@ export default Ember.Component.extend( ClassPrefix, { viewingDays: Ember.computed( 'viewMode', function() { - return 'days' === this.get( 'viewMode' ); + return View.DAYS === this.get( 'viewMode' ); } ), @@ -438,7 +666,7 @@ export default Ember.Component.extend( ClassPrefix, { viewingMonths: Ember.computed( 'viewMode', function() { - return 'months' === this.get( 'viewMode' ); + return View.MONTHS === this.get( 'viewMode' ); } ), @@ -451,7 +679,7 @@ export default Ember.Component.extend( ClassPrefix, { viewingYears: Ember.computed( 'viewMode', function() { - return 'years' === this.get( 'viewMode' ); + return View.YEARS === this.get( 'viewMode' ); } ), @@ -459,105 +687,92 @@ export default Ember.Component.extend( ClassPrefix, { * An array of objects representing weeks and days in the month view * * Each day object contains the following values: - * - {Boolean} active - Whether a content item occurs on this date - * - {Array} content - Collection of content items occurring on this date - * - {Number} day - The day number of the month (1-31) + * - {Boolean} active - Whether the day is currently selected + * - {Array} events - Collection of event items occurring on this date + * - {Number} dayName - The day number of the month (1-31) + * - {Object} date - A moment object representing the date * - {Boolean} new - Whether the day occurs in the next month * - {Boolean} old - Whether the day occurs in the previous month + * - {Boolean} focused - Whether the day is currently focused + * - {Boolean} restricted - Whether the day is outside of the selectConstraint * * @function * @returns {ember.Array} */ weeksInMonthView: Ember.computed( - 'contentDates', - 'currentMonth', - 'currentYear', - 'daysInMonth', + 'fixedWeekCount', + 'locale', + 'selectConstraint', + 'showingMonth', + 'viewingDays', function() { - const contentDates = this.get( 'contentDates' ); - const currentMonth = this.get( 'currentMonth' ); - const currentYear = this.get( 'currentYear' ); - const daysInCurrentMonth = this.get( 'daysInMonth' ); - const firstWeekdayOfCurrentMonth = ( - new Date( currentYear, currentMonth - 1, 1 ) - ).getDay(); - const weeks = Ember.A(); - let inNextMonth = false; - - let previousMonth; - let previousMonthYear; - if ( 1 === currentMonth ) { - previousMonth = 12; - previousMonthYear = currentYear - 1; - } else { - previousMonth = currentMonth - 1; - previousMonthYear = currentYear; - } - const previousMonthDays = window.moment([ - previousMonthYear, - previousMonth - 1 - ]).daysInMonth(); - - let nextMonth; - let nextMonthYear; - if ( 12 === currentMonth ) { - nextMonth = 1; - nextMonthYear = currentYear + 1; - } else { - nextMonth = currentMonth + 1; - nextMonthYear = currentYear; + const selectedDate = this.get( 'selectedDate' ); + const viewingDate = this.get( 'viewingDate' ); + const showingMonth = viewingDate.month() + 1; + const showingYear = viewingDate.year(); + const selectConstraint = this.get( 'selectConstraint' ); + + const firstOfMonth = window.moment( '01-' + showingMonth + '-' + showingYear, 'DD-MM-YYYY' ).locale( + this.get( 'locale' ) + ); + const firstDayOfWeek = firstOfMonth.localeData().firstDayOfWeek(); + const nextDayToShow = window.moment( firstOfMonth ).subtract( firstOfMonth.day(), 'days' ); + + // support firstDayOfWeek via locale + nextDayToShow.add( firstDayOfWeek, 'days' ); + + // if the first day of the week has shifted the first onto last week + if ( nextDayToShow.date() < 6 && nextDayToShow.date() !== 1 ) { + nextDayToShow.subtract( 7, 'days' ); } - let inPreviousMonth; - let day; - let month; - let year; - if ( firstWeekdayOfCurrentMonth > 0 ) { - inPreviousMonth = true; - day = previousMonthDays - firstWeekdayOfCurrentMonth + 1; - month = previousMonth; - year = previousMonthYear; - } else { - inPreviousMonth = false; - day = 1; - month = currentMonth; - year = currentYear; + let weeksToShow = 6; + + if ( !this.get( 'fixedWeekCount' ) ) { + weeksToShow = window.moment( firstOfMonth ).add( + 1, + 'months' + ).subtract( 1, 'days' ).diff( nextDayToShow, 'weeks' ) + 1; } - for ( let week = 0; week < 6; week++ ) { + for ( let i = 1; i <= weeksToShow; i++ ) { const days = Ember.A(); - for ( let wday = 0; wday < 7; wday++ ) { - const active = !inPreviousMonth && !inNextMonth && - contentDates.hasOwnProperty( year ) && - contentDates[ year ].hasOwnProperty( month ) && - contentDates[ year ][ month ].hasOwnProperty( day ); - - days.push({ - active, - content: active ? - contentDates[ year ][ month ][ day ] : - null, - day: day++, - 'new': inNextMonth, - old: inPreviousMonth - }); + for ( let k = 0; k < 7; k++ ) { + let isActive = false; + const inNextMonth = nextDayToShow.isAfter( viewingDate, 'month' ); + const inPrevMonth = nextDayToShow.isBefore( viewingDate, 'month' ); + let isRestricted = false; + + if ( selectedDate ) { + isActive = nextDayToShow.isSame( selectedDate, 'day' ); + } - if ( inPreviousMonth ) { - if ( day > previousMonthDays ) { - inPreviousMonth = false; - day = 1; - month = currentMonth; - year = currentYear; + if ( selectConstraint.start ) { + if ( nextDayToShow.isBefore( selectConstraint.start ) ) { + isRestricted = true; } - } else if ( day > daysInCurrentMonth ) { - inNextMonth = true; - day = 1; - month = nextMonth; - year = nextMonthYear; } + + if ( selectConstraint.end ) { + if ( nextDayToShow.isAfter( selectConstraint.end ) ) { + isRestricted = true; + } + } + + const day = { + date: window.moment( nextDayToShow ), + dayName: nextDayToShow.date(), + old: inPrevMonth, + new: inNextMonth, + focused: nextDayToShow.isSame( viewingDate, 'day' ) && this.get( 'hasFocus' ), + active: isActive, + restricted: isRestricted + }; + days.push( day ); + nextDayToShow.add( 1, 'days' ); } weeks.push( days ); @@ -571,7 +786,7 @@ export default Ember.Component.extend( ClassPrefix, { * An array of objects representing years in the decade view * * Each object contains the following values: - * - {Boolean} active - Whether a content item occurs on this year + * - {Boolean} active - Whether the selected date is in the year * - {Boolean} new - Whether this year is in the next decade range * - {Boolean} old - Whether this year is in the previous decade range * - {Number} year - The year number @@ -580,22 +795,37 @@ export default Ember.Component.extend( ClassPrefix, { * @returns {Object[]} */ yearsInDecadeView: Ember.computed( - 'contentDates', - 'decadeEnd', - 'decadeStart', + 'viewingDate', + 'selectedDate', function() { - const contentDates = this.get( 'contentDates' ); - const decadeStart = this.get( 'decadeStart' ); - const decadeEnd = this.get( 'decadeEnd' ); + const viewingDate = this.get( 'viewingDate' ); + const decadeStart = viewingDate.year() - ( viewingDate.year() % 10 ); + const decadeEnd = decadeStart + 9; + const selectedDate = this.get( 'selectedDate' ); const years = Ember.A(); + let yearCount = decadeStart - 1; - for ( let year = decadeStart - 1; year <= decadeEnd + 1; year++ ) { - years.push({ - active: contentDates.hasOwnProperty( year ), - 'new': year > decadeEnd, - old: year < decadeStart, - year - }); + for ( let rowCount = 1; rowCount <= 3; rowCount++ ) { + const row = Ember.A(); + + for ( let colCount = 1; colCount <= 4; colCount++ ) { + let isActive = false; + + if ( selectedDate ) { + isActive = yearCount === selectedDate.year(); + } + + row.push({ + active: isActive, + 'new': yearCount > decadeEnd, + old: yearCount < decadeStart, + year: yearCount + }); + + yearCount++; + } + + years.push( row ); } return years; diff --git a/addon/components/sl-date-picker.js b/addon/components/sl-date-picker.js index 41f0a049..fefd7638 100755 --- a/addon/components/sl-date-picker.js +++ b/addon/components/sl-date-picker.js @@ -4,6 +4,9 @@ import ComponentInputId from '../mixins/sl-component-input-id'; import TooltipEnabled from '../mixins/sl-tooltip-enabled'; import Namespace from '../mixins/sl-namespace'; import layout from '../templates/components/sl-date-picker'; +import { + View as View +} from './sl-calendar'; /** * @module @@ -31,56 +34,115 @@ export default Ember.Component.extend( ClassPrefix, ComponentInputId, Namespace, // ------------------------------------------------------------------------- // Actions + /** @type {Object} */ + actions: { + + /** + * Watch focus-out from input helper + * + * @function actions:inputBlurred + * @returns {undefined} + */ + inputBlurred() { + this.trigger( 'focusOut' ); + }, + + /** + * Watch focus-in from input helper + * + * @function actions:inputFocused + * @returns {undefined} + */ + inputFocused() { + this.trigger( 'focusIn' ); + }, + + /** + * Watch for keyUp events from input helper + * Triggers parsing of input value if a non-command key was pressed + * + * @function actions:inputKeyUp + * @param {String} value - Current value property of the input + * @param {Event} event - keyUp event object + * @returns {undefined} + */ + inputKeyUp( value, event ) { + // not a tab or modifier key + if ( event.keyCode !== 9 && ( event.keyCode > 18 || event.keyCode < 16 ) ) { + this.checkInput(); + } + }, + + /** + * sl-calendar has triggered a date selection + * Triggers bound action "action" + * + * @function actions:selectDate + * @param {moment} date - date selected by sl-calendar + * @returns {undefined} + */ + selectDate( date ) { + this.selectDate( date ); + + if ( this.get( 'autoClose' ) ) { + this.set( 'hasFocus', false ); + } + + this.sendAction( 'action', date ); + } + + }, + // ------------------------------------------------------------------------- // Events /** - * didInsertElement event hook + * Track focus on the component for opening sl-calendar * * @returns {undefined} */ - didInsertElement() { + focusIn( event ) { this._super( ...arguments ); - this.setupDatepicker(); + + this.set( 'hasFocus', true ); + + const losingFocus = this.get( 'losingFocus' ); + Ember.run.cancel( losingFocus ); + + if ( event === undefined ) { + return; + } + + if ( event.target === this.$().get( 0 ) ) { + this.$( '> input' ).get( 0 ).focus(); + } }, /** - * willClearRender event hook + * Track focus on the component for closing sl-calendar * * @returns {undefined} */ - willClearRender() { + focusOut() { this._super( ...arguments ); - this.unregisterEvents(); + + const runNext = Ember.run.next( this, () => { + this.set( 'hasFocus', false ); + }); + + this.set( 'losingFocus', runNext ); }, // ------------------------------------------------------------------------- // Properties - /** - * Whether or not to close the datepicker immediately when a date - * is selected - * - * @type {Boolean} - */ - autoclose: true, /** - * Whether or not to show week numbers to the left of week rows + * Whether to close the datepicker immediately when a date is selected * * @type {Boolean} */ - calendarWeeks: false, - - /** - * When true, displays a "Clear" button at the bottom of the datepicker - * - * If "autoclose" is also set to true, this button will also close - * the datepicker. - * - * @type {Boolean} - */ - clearBtn: false, + autoClose: true, /** * Component class that will be prefixed with base component class @@ -89,16 +151,6 @@ export default Ember.Component.extend( ClassPrefix, ComponentInputId, Namespace, */ componentClass: 'date-picker', - /** - * Days of the week that should be disabled - * - * Values are 0 (Sunday) to 6 (Saturday). Multiple values should be - * comma-separated. - * - * @type {Array|String} - */ - daysOfWeekDisabled: [], - /** * When true, the input field is disabled and the datepicker will never display * @@ -107,243 +159,198 @@ export default Ember.Component.extend( ClassPrefix, ComponentInputId, Namespace, disabled: false, /** - * The latest date that may be selected; all later dates will be disabled + * The date format for input field + * Only effects how selected day is represented in the input value + * This is a moment-based format string * - * @type {?Date|String} + * @type {?String} */ - endDate: null, + format: null, /** - * Whether or not to force parsing of the input value when the picker is - * closed - * - * When an invalid date is left in the input field by the user, the picker - * will forcibly parse that value, and set the input's value to the new, - * valid date, conforming to the given _format_. + * Whether the component has focus and should display the sl-calendar * * @type {Boolean} */ - forceParse: true, - - /** - * The date format - * - * Combination of the following: - * - d, dd: Numeric date, no leading zero and leading zero, respectively - * - D, DD: Abbreviated and full weekday names, respectively - * - m, mm: Numeric month, no leading zero and leading zero, respectively - * - M, MM: Abbreviated and full month names, respectively - * - yy, yyyy: 2- and 4-digit years, respectively - * - * @type {String} - */ - format: 'mm/dd/yyyy', + hasFocus: false, /** * The help text below the datepicker * - * @type {String} + * @type {?String} */ helpText: null, - /** - * A list of inputs to be used in a range picker - * - * The inputs will be attached to the selected element. Allows for - * explicitly creating a range picker on a non-standard element. - * - * @type {?Array} - */ - inputs: null, - - /** - * Whether or not to allow date navigation by arrow keys - * - * @type {Boolean} - */ - keyboardNavigation: true, - /** * The label text above the datepicker's input field * - * @type {String} + * @type {?String} */ label: null, /** - * The IETF code of the language to use for month and day names + * The locale string to use for moment date values * * @type {String} */ - language: 'en', - - /** - * Set a limit for the view mode; accepts "days", "months", or "years" - * - * @type {String} - */ - minViewMode: 'days', - - /** - * Enable multidate picking - * - * Each date in month view acts as a toggle button, keeping track of which - * dates the user has selected in order. If a number is given, the picker - * will limit how many dates can be selected to that number, dropping the - * oldest dates from the list when the number is exceeded. true equates to - * no limit. The input’s value (if present) is set to a string generated by - * joining the dates, formatted, with multidateSeparator. - * - * @type {Boolean|Number} - */ - multidate: false, + locale: 'en', /** - * A space-separated string for the popup's anchor position - * - * Consists of one or two of "left" or "right", "top" or "bottom", - * and "auto" (may be omitted). + * An Ember.run object for cancelling closing of sl-calendar * - * @type {String} + * @private + * @type {Boolean|Object} */ - orientation: 'auto', + losingFocus: false, /** - * The placeholder text that the datepicker should show + * The placeholder text that the datepicker input should show * * @type {?String} */ placeholder: null, /** - * The earliest date that may be selected; all earlier dates will - * be disabled + * A constraint object to pass throught to sl-calendar * - * @type {?Date|String} + * @type {Object} */ - startDate: null, + selectConstraint: { + start: null, + end: null + }, /** - * The view that the datepicker should show when it is opened; accepts - * "month", "year", or "decade" + * The currently selected date * - * @type {String} + * @type {moment} */ - startView: 'month', + selectedDate: null, /** - * When true or "linked", displays a "Today" button at the bottom of the - * datepicker to select the current date + * The calendar view when open * - * If true, the "Today" button will only move the current date into view. - * If "linked", the current date will also be selected. - * - * @type {Boolean|String} + * @type {String} */ - todayBtn: false, + viewMode: View.DAYS, - /** - * Whether to highlight the current date or not - * - * @type {Boolean} - */ - todayHighlight: false, + // ------------------------------------------------------------------------- + // Observers - /** - * The date either selected by the datepicker or entered by the user - * - * @type {?String} - */ - value: null, + // ------------------------------------------------------------------------- + // Methods /** - * Day of the week to start on; 0 (Sunday) to 6 (Saturday) + * Check if the client entered string can be parsed to a moment * - * @type {Number} + * @returns {undefined} */ - weekStart: 0, + checkInput() { + let value = this.get( 'value' ); + const parseFormats = this.get( 'parseFormats' ); + const selectConstraint = this.get( 'selectConstraint' ); + + if ( !value ) { + return; + } + + value = value.replace( /\W+/g, '-' ); + + const date = window.moment( value, parseFormats, this.get( 'locale' ), true ); + + if ( selectConstraint.start ) { + if ( date.isBefore( selectConstraint.start ) ) { + return; + } + } + + if ( selectConstraint.end ) { + if ( date.isAfter( selectConstraint.end ) ) { + return; + } + } + + if ( !date.isValid() ) { + return; + } + + this.set( 'selectedDate', date ); + }, - // ------------------------------------------------------------------------- - // Observers /** - * Datepicker plugin options + * The string to parse client input against + * Defaults to long format from moment * - * @function - * @returns {Object} + * @returns {String} */ - options: Ember.computed( + formatString: Ember.computed( + 'format', function() { - return { - autoclose: this.get( 'autoclose' ), - calendarWeeks: this.get( 'calendarWeeks' ), - clearBtn: this.get( 'clearBtn' ), - daysOfWeekDisabled: this.get( 'daysOfWeekDisabled' ), - endDate: this.get( 'endDate' ), - forceParse: this.get( 'forceParse' ), - format: this.get( 'format' ), - inputs: this.get( 'inputs' ), - keyboardNavigation: this.get( 'keyboardNavigation' ), - language: this.get( 'language' ), - minViewMode: this.get( 'minViewMode' ), - multidate: this.get( 'multidate' ), - orientation: this.get( 'orientation' ), - startDate: this.get( 'startDate' ), - startView: this.get( 'startView' ), - todayBtn: this.get( 'todayBtn' ), - todayHighlight: this.get( 'todayHighlight' ), - weekStart: this.get( 'weekStart' ) - }; + return this.get( 'format' ) || window.moment().localeData().longDateFormat( 'L' ); } ), /** - * Dynamically update the startDate and endDate values for the datepicker + * Create an array of format strings to compare typed input against. * - * @function - * @returns {undefined} + * @returns {String[]} */ - updateDateRange: Ember.observer( - 'endDate', - 'startDate', + parseFormats: Ember.computed( + 'locale', function() { - const input = this.$( 'input.date-picker' ); - const datepicker = input.data( 'datepicker' ); + const formats = Ember.A(); + const localeData = window.moment().localeData(); - datepicker.setStartDate( this.get( 'startDate' ) ); - datepicker.setEndDate( this.get( 'endDate' ) ); + formats.push( + localeData.longDateFormat( 'L' ).replace( /\W+/g, '-' ), + localeData.longDateFormat( 'LL' ).replace( /\W+/g, '-' ), + localeData.longDateFormat( 'L' ).replace( 'DD', 'D' ).replace( 'MM', 'M' ).replace( /\W+/g, '-' ) + ); - if ( 'Invalid Date' === datepicker.getDate().toString() ) { - input.val( '' ); - } + return formats; } ), - // ------------------------------------------------------------------------- - // Methods - /** - * Setup the bootstrap-datepicker plugin and events + * Select a date. * - * @private + * @param {moment} date - date to select * @returns {undefined} */ - setupDatepicker() { - const datepicker = this.$( 'input.date-picker' ) - .datepicker( this.get( 'options' ) ); - - datepicker.on( this.namespaceEvent( 'changeDate' ), () => { - this.sendAction(); - }); + selectDate( date ) { + this.set( 'selectedDate', date ); }, /** - * Remove events + * Generate value for input field. * - * @private - * @returns {undefined} + * @returns {String} */ - unregisterEvents() { - this.$( 'input.date-picker' ).off( this.namespaceEvent( 'changeDate' ) ); - } + value: Ember.computed( + 'selectedDate', + 'formatString', + function() { + const selectedDate = this.get( 'selectedDate' ); + const format = this.get( 'formatString' ); + + if ( null === selectedDate ) { + return; + } + + return selectedDate.format( format ); + } + ), + + /** + * Sets the viewingDate to the selectedDate. + * + * @returns {moment} + */ + viewingDate: Ember.computed( + 'selectedDate', + function() { + return this.get( 'selectedDate' ); + } + ) }); diff --git a/addon/components/sl-date-range-picker.js b/addon/components/sl-date-range-picker.js index c9f704d9..44981fe1 100755 --- a/addon/components/sl-date-range-picker.js +++ b/addon/components/sl-date-range-picker.js @@ -24,73 +24,100 @@ export default Ember.Component.extend( ClassPrefix, ComponentInputId, Namespace, // ------------------------------------------------------------------------- // Actions + /** @type {Object} */ + actions: { + + /** + * Move focus to the endDate picker when startDate is selected + * + * @function actions:startSelected + * @returns {undefined} + */ + startSelected() { + this.$( '.sl-daterange-end-date input' ).focus(); + } + + }, + // ------------------------------------------------------------------------- // Events + // ------------------------------------------------------------------------- + // Properties + /** - * didInsertElement event hook + * Component class that will be prefixed with base component class * - * @returns {undefined} + * @type {String} */ - didInsertElement() { - this._super( ...arguments ); - this.setupFocusTransition(); - }, + componentClass: 'date-range-picker', /** - * willClearRender event hook + * The currently selected date in the end datepicker * - * @returns {undefined} + * @type {moment} */ - willClearRender() { - this._super( ...arguments ); - this.unregisterEvents(); - }, + endDate: null, - // ------------------------------------------------------------------------- - // Properties + /** + * The placeholder text that the end datepicker input should show + * + * @type {?String} + */ + endDatePlaceholder: null, /** - * Component class that will be prefixed with base component class + * The string format for date values * * @type {String} */ - componentClass: 'date-range-picker', + format: null, /** - * The value for the endDate input + * The help text below the date-range-pickers * * @type {?String} */ - endDateValue: null, + helpText: null, /** - * The string format for date values + * The label text above the date-range-pickers' input fields + * + * @type {?String} + */ + label: null, + + /** + * The locale string to use for moment date values * * @type {String} */ - format: 'mm/dd/yyyy', + locale: 'en', /** - * The last valid date for the date range + * Constraints to enforce against selection of dates. + * An object of start and end Moment properties. * - * @type {?Date|String} + * @type {Object} */ - maxDate: null, + selectConstraint: { + start: null, + end: null + }, /** - * The earliest date selectable in the range + * The currently selected date in the start datepicker * - * @type {?Date|String} + * @type {moment} */ - minDate: null, + startDate: null, /** - * The value for the startDate input + * The placeholder text that the start datepicker input should show * * @type {?String} */ - startDateValue: null, + startDatePlaceholder: null, // ------------------------------------------------------------------------- // Observers @@ -99,80 +126,43 @@ export default Ember.Component.extend( ClassPrefix, ComponentInputId, Namespace, // Methods /** - * The earliest selectable endDate, based on minDate and - * current startDateValue + * Modification of selectConstraint for the startDate picker * * @function - * @returns {?Date|String} Defaults to null + * @returns {Object} */ - earliestEndDate: Ember.computed( - 'minDate', - 'startDateValue', + endSelectConstraint: Ember.computed( + 'endDate', + 'selectConstraint', function() { - const minDate = this.get( 'minDate' ); - const startDateValue = this.get( 'startDateValue' ); - - if ( startDateValue ) { - return startDateValue; - } - - if ( minDate ) { - return minDate; - } + const endDate = this.get( 'endDate' ); + const selectConstraint = this.get( 'selectConstraint' ); - return null; + return { + start: selectConstraint.start, + end: endDate ? endDate : selectConstraint.end + }; } ), /** - * The latest selectable startDate, based on maxDate and - * current endDateValue + * Modification of selectConstraint for the endDate picker * * @function - * @returns {Date|String} Defaults to null + * @returns {Object} */ - latestStartDate: Ember.computed( - 'endDateValue', - 'maxDate', + startSelectConstraint: Ember.computed( + 'startDate', + 'selectConstraint', function() { - const endDateValue = this.get( 'endDateValue' ); - const maxDate = this.get( 'maxDate' ); - - if ( endDateValue ) { - return endDateValue; - } - - if ( maxDate ) { - return maxDate; - } + const startDate = this.get( 'startDate' ); + const selectConstraint = this.get( 'selectConstraint' ); - return null; + return { + start: startDate ? startDate : selectConstraint.start, + end: selectConstraint.end + }; } - ), - - /** - * Set up a transition that moves focus to the endDate input when the - * startDate input is changed - * - * @private - * @returns {undefined} - */ - setupFocusTransition() { - this.set( 'startDateInput', this.$( '.sl-daterange-start-date input' ) ); - this.set( 'endDateInput', this.$( '.sl-daterange-end-date input' ) ); - this.get( 'startDateInput' ).on( this.namespaceEvent( 'changeDate' ), () => { - this.get( 'endDateInput' ).trigger( 'focus' ); - }); - }, - - /** - * Remove events - * - * @private - * @returns {undefined} - */ - unregisterEvents() { - this.get( 'startDateInput' ).off( this.namespaceEvent( 'changeDate' ) ); - } + ) }); diff --git a/addon/templates/components/sl-calendar-day.hbs b/addon/templates/components/sl-calendar-day.hbs deleted file mode 100644 index 9737f608..00000000 --- a/addon/templates/components/sl-calendar-day.hbs +++ /dev/null @@ -1 +0,0 @@ -{{day}} \ No newline at end of file diff --git a/addon/templates/components/sl-calendar-month.hbs b/addon/templates/components/sl-calendar-month.hbs deleted file mode 100644 index d4e68439..00000000 --- a/addon/templates/components/sl-calendar-month.hbs +++ /dev/null @@ -1 +0,0 @@ -{{shortName}} \ No newline at end of file diff --git a/addon/templates/components/sl-calendar.hbs b/addon/templates/components/sl-calendar.hbs index 8cfd3117..c12a0b9b 100644 --- a/addon/templates/components/sl-calendar.hbs +++ b/addon/templates/components/sl-calendar.hbs @@ -1,111 +1,148 @@ -
+
+ {{#if viewingDays}} -
- - - -
+ {{#if showControls}} + + + - - + + - + + + +
+ - {{currentMonthString}} {{currentYear}} - + + + + {{calendarTitle}} + + +
+ {{else}} + {{calendarTitle}} + {{/if}} + + + + + {{#each shortWeekDayNames as |dayName|}} + + {{/each}} + + + + {{#each weeksInMonthView as |weekDays|}} - {{#each shortWeekDayNames as |dayName|}} - + {{#each weekDays as |day|}} + {{#sl-calendar-day + action="selectDate" + active=day.active + events=day.events + new=day.new + old=day.old + date=day.date + focused=day.focused + restricted=day.restricted + }} + {{day.dayName}} + {{/sl-calendar-day}} {{/each}} - - - {{#each weeksInMonthView as |weekDays|}} - - {{#each weekDays as |day|}} - {{sl-calendar-day - action="sendDateContent" - active=day.active - content=day.content - day=day.day - new=day.new - old=day.old - }} - {{/each}} - - {{/each}} - -
{{dayName}}
{{dayName}}
- + {{/each}} + +
{{/if}} {{#if viewingMonths}} -
- - - -
+ {{#if showControls}} + + + - - + + - - - + + + +
+ - {{currentYear}} - + + + + {{calendarTitle}} + + +
+ {{else}} + {{calendarTitle}} + {{/if}} + + + + {{#each monthsInYearView as |monthRow|}} - + {{#each monthRow as |month|}} + {{#sl-calendar-month + action="selectMonth" + active=month.active + locale=locale + month=month.month + }} + {{month.monthName}} + {{/sl-calendar-month}} + {{/each}} - -
- {{#each monthsInYearView as |month|}} - {{sl-calendar-month - action="setMonth" - active=month.active - locale=locale - month=month.month - }} - {{/each}} -
- + {{/each}} + +
{{/if}} {{#if viewingYears}} -
- - - -
+ {{#if showControls}} + + + - - + + - - - + + + +
+ - {{decadeStart}}-{{decadeEnd}} - + + + + {{calendarTitle}} + + +
+ {{else}} + {{calendarTitle}} + {{/if}} + + + + {{#each yearsInDecadeView as |yearRow|}} - + {{#each yearRow as |year|}} + {{sl-calendar-year + action="selectYear" + active=year.active + old=year.old + new=year.new + year=year.year + }} + {{/each}} - -
- {{#each yearsInDecadeView as |year|}} - {{sl-calendar-year - action="setYear" - active=year.active - old=year.old - new=year.new - year=year.year - }} - {{/each}} -
- + {{/each}} + +
{{/if}} +
diff --git a/addon/templates/components/sl-date-picker.hbs b/addon/templates/components/sl-date-picker.hbs index 0083f863..59478e74 100644 --- a/addon/templates/components/sl-date-picker.hbs +++ b/addon/templates/components/sl-date-picker.hbs @@ -9,8 +9,28 @@ id=inputId placeholder=placeholder value=value + focus-in="inputFocused" + focus-out="inputBlurred" + key-up="inputKeyUp" }} +{{#if hasFocus}} +
+
+
+ {{sl-calendar + action="selectDate" + fixedWeekCount=true + locale=locale + selectedDate=selectedDate + viewingDate=viewingDate + viewMode=viewMode + selectConstraint=selectConstraint + }} +
+
+{{/if}} + {{#if helpText}}

{{helpText}}

{{/if}} diff --git a/addon/templates/components/sl-date-range-picker.hbs b/addon/templates/components/sl-date-range-picker.hbs index f2a251bb..95bd19ce 100755 --- a/addon/templates/components/sl-date-range-picker.hbs +++ b/addon/templates/components/sl-date-range-picker.hbs @@ -5,21 +5,22 @@
{{sl-date-picker class="sl-daterange-start-date col-md-6" - endDate=latestStartDate placeholder=startDatePlaceholder - startDate=minDate - value=startDateValue inputId=inputId + format=format + selectConstraint=endSelectConstraint + selectedDate=startDate + action="startSelected" }} {{sl-date-picker class="sl-daterange-end-date col-md-6" - endDate=maxDate placeholder=endDatePlaceholder - startDate=earliestEndDate - value=endDateValue + format=format + selectConstraint=startSelectConstraint + selectedDate=endDate }}
diff --git a/app/styles/sl-calendar.less b/app/styles/sl-calendar.less index fbf2d310..99ae507f 100644 --- a/app/styles/sl-calendar.less +++ b/app/styles/sl-calendar.less @@ -1,4 +1,34 @@ -.@{component-class-prefix}-calendar{ +@calendar-border-radius-small: @border-radius-small; + +@calendar-default-color: @btn-default-color; + +@calendar-disabled-bg: @gray-lighter; +@calendar-today-bg: @state-warning-bg;//@btn-warning-bg; +@calendar-today-border: @state-warning-border;//@btn-warning-border; +@calendar-selected-bg: @btn-primary-bg; +@calendar-selected-color: @btn-primary-color; +@calendar-focus-bg: @gray-lighter;//@table-bg-active; + +.@{component-class-prefix}-calendar { + + display: inline-block; + + & > div > span.calendar-title { + display: block; + text-align: center; + font-weight: bold; + margin-bottom: @table-condensed-cell-padding; + } + + table.calendar-controls { + width: 100%; + margin-bottom: @table-condensed-cell-padding; + + th:first-child, th:last-child { + width: 20%; + } + } + .sl-icon-previous::before { content: @icon-calendar-previous; } @@ -7,13 +37,82 @@ content: @icon-calendar-next; } - .datepicker-months, - .datepicker-days, - .datepicker-years { - display: block; + table { + border-collapse: separate; + + th, td { + text-align: center; + } + + td { + border-radius: @calendar-border-radius-small; + } + + td.today { + background-color: @calendar-today-bg; + border: 1px solid @calendar-today-border; + } + + td:focus, td.focused, td:hover { + background-color: @calendar-focus-bg; + /*color: @calendar-default-color;*/ + } + + td.selected { + background-color: @calendar-selected-bg; + color: @calendar-selected-color; + } + + td.old, td.new { + /*color: @gray-light;*/ + opacity: .5; + } + + td.disabled { + background-color: @calendar-disabled-bg; + border-radius: 0; + + &.old, &.new { + //background-color: lighten( @calendar-disabled-bg, 4%, relative ); + } + } + + td.has-events { + position: relative; + + &::after { + content: ''; + display: block; + width: 100%; + position: absolute; + bottom: 0; + height: 3px; + background-color: @brand-info; + border-radius: 0 0 @calendar-border-radius-small @calendar-border-radius-small; + } + } + + & > tbody > tr > td > span { + width: 25%; + display: inline-block; + } } } -.sl-icon-previous, .sl-icon-next { - &:extend( .sl-ember-components-icons all ); +.sl-icon-previous { + &:extend(.sl-ember-components-icons all); +} + +.sl-icon-next { + &:extend(.sl-ember-components-icons all); +} + + +.calendar-days td { + width: 2.2em; + height: 2.2em; } +.calendar-months td, .calendar-years td { + width: 3.875em; + height: 4.25em; +} \ No newline at end of file diff --git a/app/styles/sl-ember-components.less b/app/styles/sl-ember-components.less index 49e0f645..e8e67b4f 100755 --- a/app/styles/sl-ember-components.less +++ b/app/styles/sl-ember-components.less @@ -10,12 +10,6 @@ @import 'variables.less'; -// ------------------------------------------------------------------------- -// Bootstrap Datepicker - -@import 'bower_components/bootstrap-datepicker/less/datepicker3'; - - // ------------------------------------------------------------------------- // sl-ember-components diff --git a/blueprints/sl-ember-components/index.js b/blueprints/sl-ember-components/index.js index 4917e829..33062d17 100755 --- a/blueprints/sl-ember-components/index.js +++ b/blueprints/sl-ember-components/index.js @@ -4,9 +4,6 @@ module.exports = { { name: 'bootstrap', target: '3.3.6' - }, { - name: 'bootstrap-datepicker', - target: '~1.3.0' }, { name: 'highcharts', target: '~4.1.10' diff --git a/bower.json b/bower.json index 14a08e79..b98153d3 100755 --- a/bower.json +++ b/bower.json @@ -2,7 +2,6 @@ "name": "sl-ember-components", "dependencies": { "bootstrap": "3.3.6", - "bootstrap-datepicker": "~1.3.0", "ember": "~2.4.3", "ember-cli-shims": "0.1.1", "ember-cli-test-loader": "0.2.2", diff --git a/index.js b/index.js index 59b6c21a..73b9964e 100755 --- a/index.js +++ b/index.js @@ -152,7 +152,6 @@ module.exports = { // Javascript app.import( app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js' ); - app.import( app.bowerDirectory + '/bootstrap-datepicker/js/bootstrap-datepicker.js' ); app.import( app.bowerDirectory + '/highcharts/highcharts.src.js' ); app.import( app.bowerDirectory + '/jquery-mousewheel/jquery.mousewheel.js' ); app.import( app.bowerDirectory + '/moment/min/moment-with-locales.js' ); diff --git a/tests/dummy/app/controllers/browsers.js b/tests/dummy/app/controllers/browsers.js index acfddc30..9d4565cf 100755 --- a/tests/dummy/app/controllers/browsers.js +++ b/tests/dummy/app/controllers/browsers.js @@ -24,11 +24,11 @@ export default Ember.Controller.extend({ }, { name: 'sl-date-picker', - lib: { 'bd': true } + lib: { 'sec': true } }, { name: 'sl-date-range-picker', - lib: { 'bd': true } + lib: { 'sec': true } }, { name: 'sl-date-time', diff --git a/tests/dummy/app/controllers/demos/sl-calendar.js b/tests/dummy/app/controllers/demos/sl-calendar.js index d1bdcae9..745b4a27 100644 --- a/tests/dummy/app/controllers/demos/sl-calendar.js +++ b/tests/dummy/app/controllers/demos/sl-calendar.js @@ -2,8 +2,12 @@ import Ember from 'ember'; export default Ember.Controller.extend({ actions: { - logLabel( dateObjects ) { - window.console.log( dateObjects ); + logLabel( date, data ) { + window.console.log( 'logLabel: ', date, data ); } + }, + + tempdates: { + start: '01/05/2016' } }); diff --git a/tests/dummy/app/controllers/demos/sl-date-picker.js b/tests/dummy/app/controllers/demos/sl-date-picker.js new file mode 100644 index 00000000..86564ec0 --- /dev/null +++ b/tests/dummy/app/controllers/demos/sl-date-picker.js @@ -0,0 +1,16 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + actions: { + logLabel( date, data ) { + window.console.log( 'logLabel: ', date, data ); + } + }, + + selectConstraint: { + start: '01/05/2016', + end: '02/05/2016' + }, + + selectedDate: window.moment( '01/11/2016', 'MM/DD/YYYY' ) +}); diff --git a/tests/dummy/app/controllers/demos/sl-date-range-picker.js b/tests/dummy/app/controllers/demos/sl-date-range-picker.js new file mode 100644 index 00000000..d8767acc --- /dev/null +++ b/tests/dummy/app/controllers/demos/sl-date-range-picker.js @@ -0,0 +1,17 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + actions: { + logLabel( date, data ) { + window.console.log( 'logLabel: ', date, data ); + } + }, + + selectConstraint: { + start: '01/05/2016', + end: '02/05/2016' + }, + + startDate: window.moment( '01/07/2016', 'MM/DD/YYYY' ), + endDate: window.moment( '01/28/2016', 'MM/DD/YYYY' ) +}); diff --git a/tests/dummy/app/routes/demos/sl-calendar.js b/tests/dummy/app/routes/demos/sl-calendar.js index e0a52895..c2ea07de 100644 --- a/tests/dummy/app/routes/demos/sl-calendar.js +++ b/tests/dummy/app/routes/demos/sl-calendar.js @@ -4,8 +4,12 @@ export default Ember.Route.extend({ model() { return Ember.A([ { - date: new Date(), - label: 'Today!' + startDate: window.moment().subtract( 5, 'days' ), + title: 'Some meeting five days ago' + }, + { + startDate: window.moment().add( 3, 'days' ), + title: 'Lunch meeting three days from now' } ]); } diff --git a/tests/dummy/app/templates/browsers.hbs b/tests/dummy/app/templates/browsers.hbs index 4967bb5e..0a1b8894 100644 --- a/tests/dummy/app/templates/browsers.hbs +++ b/tests/dummy/app/templates/browsers.hbs @@ -31,15 +31,6 @@
-
-
- BD -
-
- Bootstrap-Datepicker -
-
-
TA @@ -63,11 +54,10 @@ - + - @@ -85,9 +75,6 @@ - @@ -122,14 +109,6 @@

See provided link for most up-to-date information.

-
-
Bootstrap-Datepicker
- -

From http://bootstrap-datepicker.readthedocs.org/en/release/#:

-

Has a dependency on Twitter Bootstrap so same support previously listed.

-

See provided link for most up-to-date information.

-
-
typeahead.js
diff --git a/tests/dummy/app/templates/demos/sl-calendar.hbs b/tests/dummy/app/templates/demos/sl-calendar.hbs index 06b20a25..7b2aff86 100755 --- a/tests/dummy/app/templates/demos/sl-calendar.hbs +++ b/tests/dummy/app/templates/demos/sl-calendar.hbs @@ -8,20 +8,35 @@
Template
- 
\{{sl-calendar action="logLabel" content=content}}
+ 
\{{sl-calendar action="logLabel" events=content locale="en" selectConstraint=tempdates}}
-
Route/Controller
- 
model: [
+        
Route

+
model: [
     {
-        date: new Date(),
-        label: 'Today!'
+        startDate: window.moment().subtract( 5, 'days' ),
+        title: 'Some meeting five days ago'
+    },
+    {
+        startDate: window.moment().add( 3, 'days' ),
+        title: 'Lunch meeting three days from now'
     }
 ]

+
+        
Controller

+
actions: {
+    logLabel( date, data ) {
+        window.console.log( 'logLabel: ', date, data );
+    }
+},
+
+tempdates: {
+    start: '01/05/2016'
+}
Rendered Component
- {{sl-calendar action="logLabel" class="col-sm-6" content=content}} + {{sl-calendar action="logLabel" events=content locale="en" selectConstraint=tempdates}}
@@ -42,31 +57,41 @@
{{#property-text name="action" type="Function"}} - Action to call when a day is clicked that contains one of the content dates. An array of content objects with dates occurring on the clicked date will be returned to this action. - {{/property-text}} - - {{#property-text name="content" type="Object[]"}} - Bound array of objects with date values, looked up using the dateValuePath property. + Action to call when a day is clicked. The date and an array of events occurring on the clicked date will be returned to this action. {{/property-text}} - {{#property-text name="currentMonth" type="Number" default="current month"}} - The month number to display (1-12). + {{#property-text name="events" type="Object[]"}} + Array of objects with properties: startDate, endDate, title. {{/property-text}} - {{#property-text name="currentYear" type="Number" default="current year"}} - The year to display. + {{#property-text name="fixedWeekCount" type="Boolean" default="false"}} + Whether to show a full six weeks for every month. {{/property-text}} - {{#property-text name="dateValuePath" type="String" default="\"date\""}} - Path to the content objects' date value. + {{#property-text name="focusable" type="Boolean" default="true"}} + Whether to allow the calendar to gain focus. Also allows keyboard navigation of the calendar. {{/property-text}} {{#property-text name="locale" type="String" default="\"en\""}} The locale string to use for moment date formats. {{/property-text}} - {{#property-text name="locked" type="Boolean" default="false"}} - When true, the view is locked in the initial mode, and forward and back buttons are disabled. + {{#property-text name="selectConstraint" type="Object"}} + Object representation of a date constraint. Has properties: start, end. + Dates outside of this range will not be selectable. + {{/property-text}} + + {{#property-text name="selectedDate" type="Moment"}} + A moment object representing the currently selected date. + {{/property-text}} + + {{#property-text name="showControls" type="Boolean" default="true"}} + Whether to show the calendar controls for changing the view. + {{/property-text}} + + {{#property-text name="viewingDate" type="Moment"}} + A moment object representing the currently viewed date. + The calendar determines which month and year to show based on this date. {{/property-text}} {{#property-text name="viewMode" type="String" default="\"days\""}} diff --git a/tests/dummy/app/templates/demos/sl-date-picker.hbs b/tests/dummy/app/templates/demos/sl-date-picker.hbs index d1d874cd..bdedd672 100755 --- a/tests/dummy/app/templates/demos/sl-date-picker.hbs +++ b/tests/dummy/app/templates/demos/sl-date-picker.hbs @@ -1,5 +1,5 @@

sl-date-picker

-

An input component to select date values. Based on bootstrap-datepicker.

+

A component to use for picking dates from a calendar, using {{#link-to "demos.sl-calendar"}}sl-calendar{{/link-to}}.

@@ -8,12 +8,27 @@
Template
- 
\{{sl-date-picker label="Date picker"}}
+ 
\{{sl-date-picker action="logLabel" label="Date picker" selectedDate=selectedDate}}
+ +
Controller
+
actions: {
+    logLabel( date, data ) {
+        window.console.log( 'logLabel: ', date, data );
+    }
+},
+
+selectConstraint: {
+    start: '01/05/2016',
+    end: '02/05/2016'
+},
+
+selectedDate: window.moment( '01/11/2016', 'MM/DD/YYYY' )
+
Rendered Component
- {{sl-date-picker label="Date picker"}} + {{sl-date-picker action="logLabel" label="Date picker" selectedDate=selectedDate}}
@@ -50,75 +65,33 @@ Action to call when the date is changed. {{/property-text}} - {{#property-text name="autoclose" type="Boolean" default="true"}} - Whether or not to close the datepicker immediately when a date is selected. - {{/property-text}} - - {{#property-text name="calendarWeeks" type="Boolean" default="false"}} - When true, show week numbers to the left of the week rows. - {{/property-text}} - - {{#property-text name="clearBtn" type="Boolean" default="false"}} - When true, displays a "Clear" button at the bottom of the datepicker to clear the input value. If autoclose is also set to true, this button will also close the datepicker. - {{/property-text}} - - {{#property-text name="daysOfWeekDisabled" type="Array"}} - Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. + {{#property-text name="autoClose" type="Boolean" default="true"}} + Whether to close the datepicker immediately when a date is selected. {{/property-text}} {{#property-text name="disabled" type="String" default="false"}} When true, the input field is disabled and the datepicker will never display. {{/property-text}} - {{#property-text name="endDate" type="Date/String"}} - The latest date that may be selected. All later dates will be disabled. - {{/property-text}} - - {{#property-text name="forceParse" type="Boolean" default="true"}} - When true, forces parsing of the input value when the picker is close. That is, when an invalid date is left in the input field by the user, the picker will forcibly parse that value, and set the input's value to the new, valid date, conforming to the given format. + {{#property-text name="format" type="String"}} + The formatting to be applied to typed dates and selected dates in the input field. + This format is seeded by moment long format when not provided. {{/property-text}} - {{#property-text name="format" type="String" default="\"mm/dd/yyyy\""}} - The date format; combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy -
    -
  • d, dd : Numeric date, no leading zero and leading zero, respectively
    • -
  • D, DD : Abbreviated and full weekday names, respectively
    • -
  • m, mm : Numeric month, no leading zero and leading zero, respectively
    • -
  • M, MM : Abbreviated and full month names, respectively
    • -
  • yy, yyyy : 2- and 4-digit years, respectively
    • -
+ {{#property-text name="hasFocus" type="Boolean" default="false"}} + Whether the component has focus. Triggers opening of sl-calendar. {{/property-text}} {{#property-text name="helpText" type="String"}} The help text below the datepicker's input field. {{/property-text}} - {{#property-text name="inputs" type="Array"}} - A list of inputs to be used in a range picker, which will be attached to the selected element. Allows for explicitly creating a range picker on a non-standard element. - {{/property-text}} - - {{#property-text name="keyboardNavigation" type="Boolean" default="true"}} - Whether or not to allow date navigation by arrow keys. - {{/property-text}} - {{#property-text name="label" type="String"}} The label text above the datepicker's input field. {{/property-text}} - {{#property-text name="language" type="String" default="\"en\""}} - The IETF code of the language to use for month and day names. - {{/property-text}} - - {{#property-text name="minViewMode" type="String"}} - Set a limit for the view mode. Accepts "days", "months", or "years". - {{/property-text}} - - {{#property-text name="multidate" type="Boolean/Number" default="false"}} - Enable multidate picking. Each date in month view acts as a toggle button, keeping track of which dates the user has selected in order. If a number is given, the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded. true equates to no limit. The input’s value (if present) is set to a string generated by joining the dates, formatted, with multidateSeparator. - {{/property-text}} - - {{#property-text name="orientation" type="String" default="\"auto\""}} - A space-separated string consisting of one or two of "left" or "right", "top" or "bottom", and "auto" (may be omitted). Refers to the location of the picker popup's "anchor". + {{#property-text name="locale" type="String" default="\"en\""}} + The locale string to use for moment date formats. {{/property-text}} {{#property-text name="placeholder" type="String"}} @@ -129,31 +102,20 @@ Popover content text. {{/property-text}} - {{#property-text name="startDate" type="Date/String"}} - The earliest date that may be selected. All earlier dates will be disabled. - {{/property-text}} - - {{#property-text name="startView" type="String" default="\"month\""}} - The view that the calendar's datepicker should show when created. - {{/property-text}} - - {{#property-text name="title" type="String"}} - Tooltip text string, or becomes popover title with supplied popover property. + {{#property-text name="selectConstraint" type="Object"}} + Object representation of a date constraint. Has properties: start, end. + Passes through to sl-calendar for selection constraint. {{/property-text}} - {{#property-text name="todayBtn" type="Boolean/String" default="false"}} - Displays a "Today" button at the bottom of the datepicker to select the current date. If true, the "Today" button will only move the current date into view. If "linked", the current date will also be selected. + {{#property-text name="selectedDate" type="moment"}} + A moment object representing the currently selected date. {{/property-text}} - {{#property-text name="todayHighlight" type="Boolean" default="false"}} - When true, highlight the current date. + {{#property-text name="viewMode" type="String" default="\"days\""}} + The view to display the calendar in; "days", "months", or "years". {{/property-text}} - {{#property-text name="value" type="String"}} - The date either selected by the datepicker or entered by the user. - {{/property-text}} - - {{#property-text name="weekStart" type="Number/String"}} - Day of the week to start on. 0 (Sunday) to 6 (Saturday). + {{#property-text name="title" type="String"}} + Tooltip text string, or becomes popover title with supplied popover property. {{/property-text}}
diff --git a/tests/dummy/app/templates/demos/sl-date-range-picker.hbs b/tests/dummy/app/templates/demos/sl-date-range-picker.hbs index ba5c31cf..604d0c4a 100755 --- a/tests/dummy/app/templates/demos/sl-date-range-picker.hbs +++ b/tests/dummy/app/templates/demos/sl-date-range-picker.hbs @@ -8,19 +8,35 @@
Template
- 
\{{sl-date-range-picker
+
\{{sl-date-range-picker
     label="Select date range"
+    selectConstraint=selectConstraint
     startDatePlaceholder="Select start date"
     endDatePlaceholder="Select end date"
+    startDate=startDate
+    endDate=endDate
 }}

+
+        
Controller

+
selectConstraint: {
+    start: '01/05/2016',
+    end: '02/05/2016'
+},
+
+startDate: window.moment( '01/07/2016', 'MM/DD/YYYY' ),
+endDate: window.moment( '01/28/2016', 'MM/DD/YYYY' )
+
Rendered Component
{{sl-date-range-picker label="Select date range" + selectConstraint=selectConstraint startDatePlaceholder="Select start date" endDatePlaceholder="Select end date" + startDate=startDate + endDate=endDate }}
@@ -51,38 +67,41 @@

Properties

+ {{#property-text name="endDate" type="moment"}} + The selected date in the end date picker. + {{/property-text}} + {{#property-text name="endDatePlaceholder" type="String"}} The placeholder attribute text for the end date input. {{/property-text}} - {{#property-text name="endDateValue" type="String" default="null"}} - The binding value for the endDate input. + {{#property-text name="format" type="String"}} + The formatting to be applied to typed dates and selected dates in the input fields. + This value is passed through to each sl-date-picker. {{/property-text}} - {{#property-text name="format" type="String" default="\"mm/dd/yyyy\""}} - The date format used for both inputs; combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy -
    -
  • d, dd : Numeric date, no leading zero and leading zero, respectively
    • -
  • D, DD : Abbreviated and full weekday names, respectively
    • -
  • m, mm : Numeric month, no leading zero and leading zero, respectively
    • -
  • M, MM : Abbreviated and full month names, respectively
    • -
  • yy, yyyy : 2- and 4-digit years, respectively
    • -
+ {{#property-text name="helpText" type="String"}} + The help text below the date-range-picker's input fields. {{/property-text}} - {{#property-text name="maxDate" type="Date/String" default="null"}} - The latest possible date for the range. + {{#property-text name="label" type="String"}} + The label text above the date-range-picker's input fields. {{/property-text}} - {{#property-text name="minDate" type="Date/String" default="null"}} - The earliest possible date for the range. + {{#property-text name="locale" type="String" default="\"en\""}} + The locale string to use for moment date formats. + This value is passed through to each sl-date-picker. {{/property-text}} - {{#property-text name="startDatePlaceholder" type="String"}} - The placeholder attribute text for the start date input. + {{#property-text name="selectConstraint" type="Object"}} + Object representation of a date constraint. Has properties: start, end. + {{/property-text}} + + {{#property-text name="startDate" type="moment"}} + The selected date in the start date picker. {{/property-text}} - {{#property-text name="startDateValue" type="String" default="null"}} - The binding value for the startDate input. + {{#property-text name="startDatePlaceholder" type="String"}} + The placeholder attribute text for the start date input. {{/property-text}}
diff --git a/tests/integration/components/sl-calendar-day-test.js b/tests/integration/components/sl-calendar-day-test.js new file mode 100644 index 00000000..06e7380e --- /dev/null +++ b/tests/integration/components/sl-calendar-day-test.js @@ -0,0 +1,156 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent( 'sl-calendar-day', 'Integration | Component | sl calendar day', { + integration: true +}); + +const template = hbs` + {{#sl-calendar-day}} + 5 + {{/sl-calendar-day}} +`; + +test( 'Default rendered state', function( assert ) { + this.render( template ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'day' ), + 'Has class "day"' + ); + + assert.strictEqual( + this.$( '>:first-child' ).attr( 'role' ), + 'gridcell', + 'Has role "gridcell"' + ); +}); + +test( 'Selected class is present when in active state', function( assert ) { + this.render( hbs` + {{sl-calendar-day active=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'selected' ), + 'Has class "selected" when active' + ); +}); + +test( 'New class is present when new is true', function( assert ) { + this.render( hbs` + {{sl-calendar-day new=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'new' ), + 'Has class "new" when new' + ); +}); + +test( 'Old class is present when old is true', function( assert ) { + this.render( hbs` + {{sl-calendar-day old=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'old' ), + 'Has class "old" when old' + ); +}); + +test( 'Today class is present when isToday is true', function( assert ) { + this.render( hbs` + {{sl-calendar-day isToday=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'today' ), + 'Has class "today" when isToday' + ); +}); + +test( 'Disabled class is present when in restricted state', function( assert ) { + this.render( hbs` + {{sl-calendar-day restricted=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'disabled' ), + 'Has class "disabled" when restricted' + ); +}); + +test( 'has-events class is present when events are present', function( assert ) { + const events = [ + { + startDate: window.moment( [ 2015, 0, 1 ] ) + } + ]; + + this.set( 'events', events ); + + this.render( hbs` + {{sl-calendar-day events=events}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'has-events' ), + 'Has class "has-events" when events are present' + ); +}); + +test( 'Default action is triggered when element is clicked', function( assert ) { + assert.expect( 1 ); + + const done = assert.async(); + + this.render( hbs` + {{sl-calendar-day action="testAction"}} + ` ); + + this.on( 'testAction', function() { + assert.ok( + true, + 'Action was fired' + ); + + done(); + }); + + this.$( '>:first-child' ).click(); +}); + +test( 'ariaSelected', function( assert ) { + this.render( hbs` + {{sl-calendar-day active=true}} + ` ); + + assert.strictEqual( + this.$( '>:first-child' ).attr( 'aria-selected' ), + 'true', + 'aria-selected is true when calendar-day is active' + ); +}); + +test( 'tabIndex', function( assert ) { + this.render( hbs` + {{sl-calendar-day focused=true}} + ` ); + + assert.strictEqual( + this.$( '>:first-child' ).attr( 'tabIndex' ), + '0', + 'tabIndex is set when calendar-day has focus' + ); +}); + +test( 'Content is yielded', function( assert ) { + this.render( template ); + + assert.strictEqual( + this.$( '>:first-child' ).text().trim(), + '5', + 'Content yields successfully' + ); +}); diff --git a/tests/integration/components/sl-calendar-month-test.js b/tests/integration/components/sl-calendar-month-test.js new file mode 100644 index 00000000..e8e0ce5f --- /dev/null +++ b/tests/integration/components/sl-calendar-month-test.js @@ -0,0 +1,63 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent( 'sl-calendar-month', 'Integration | Component | sl calendar month', { + integration: true +}); + +const template = hbs` + {{#sl-calendar-month}} + June + {{/sl-calendar-month}} +`; + +test( 'Default rendered state', function( assert ) { + this.render( template ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'month' ), + 'Has class "month"' + ); +}); + +test( 'Selected class is present when in active state', function( assert ) { + this.render( hbs` + {{sl-calendar-month active=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'selected' ), + 'Has class "selected" when active' + ); +}); + +test( 'Default action is triggered when element is clicked', function( assert ) { + assert.expect( 1 ); + + const done = assert.async(); + + this.render( hbs` + {{sl-calendar-month action="testAction"}} + ` ); + + this.on( 'testAction', function() { + assert.ok( + true, + 'Action was fired' + ); + + done(); + }); + + this.$( '>:first-child' ).click(); +}); + +test( 'Content is yielded', function( assert ) { + this.render( template ); + + assert.strictEqual( + this.$( '>:first-child' ).text().trim(), + 'June', + 'Content yields successfully' + ); +}); diff --git a/tests/integration/components/sl-calendar-test.js b/tests/integration/components/sl-calendar-test.js index 3f9d6453..58d4eebd 100755 --- a/tests/integration/components/sl-calendar-test.js +++ b/tests/integration/components/sl-calendar-test.js @@ -1,32 +1,23 @@ import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -import { skip } from 'qunit'; -import sinon from 'sinon'; -const testContent = Ember.A([ +const testEvents = Ember.A([ { - date: new Date( 2022, 8, 17 ), - label: 'Today!' - } -]); - -const multipleTestContent = Ember.A([ - { - date: new Date( 2022, 8, 17 ), - label: 'Event 1 Today!' + startDate: window.moment( [ 2015, 2, 12 ] ), + title: 'Event 1 Today!' }, { - date: new Date( 2022, 8, 17 ), - label: 'Event 2 Today!' + startDate: window.moment( [ 2015, 2, 12 ] ), + title: 'Event 2 Today!' }, { - date: new Date( 2022, 8, 17 ), - label: 'Event 3 Today!' + startDate: window.moment( [ 2015, 2, 17 ] ), + title: 'Event 3 Today!' }, { - date: new Date( 2022, 8, 20 ), - label: 'Event 1 Another Day!' + startDate: window.moment( [ 2015, 2, 20 ] ), + title: 'Event 1 Another Day!' } ]); @@ -45,18 +36,13 @@ test( 'Default rendered state', function( assert ) { ); assert.ok( - this.$( '>:first-child' ).find( '> div:first-child' ).hasClass( 'datepicker' ), - 'First child of component has class "datepicker"' + this.$( '>:first-child' ).find( '> div:first-child' ).hasClass( 'calendar-days' ), + 'First child of component has class "calendar-days"' ); assert.ok( - this.$( '>:first-child' ).find( '> div:first-child' ).hasClass( 'datepicker-inline' ), - 'First child of component has class "datepicker-inline"' - ); - - assert.ok( - this.$( '>:first-child' ).find( '> .datepicker > div:first-child' ).hasClass( 'datepicker-days' ), - 'Day view is visible' + this.$( '>:first-child' ).find( '.calendar-days > table:first-child' ).hasClass( 'calendar-controls' ), + 'Controls are visible' ); }); @@ -65,49 +51,118 @@ test( 'Next and Previous buttons have appropriate classes', function( assert ) { {{sl-calendar}} ` ); + const hasButtonClasses = function( button ) { + let hasClasses = true; + + if ( !button.hasClass( 'btn' ) ) { + hasClasses = false; + } + + if ( !button.hasClass( 'btn-xs' ) ) { + hasClasses = false; + } + + if ( !button.hasClass( 'btn-default' ) ) { + hasClasses = false; + } + + return hasClasses; + }; + + let previousButton = this.$( '>:first-child' ).find( '.calendar-controls button' ).first(); + let nextButton = this.$( '>:first-child' ).find( '.calendar-controls button' ).last(); + assert.ok( - this.$( '.table-condensed > thead > tr > th:first-child span' ).hasClass( 'sl-icon-previous' ), - 'day view has previous button class' + hasButtonClasses( previousButton ), + 'day view previous button has "btn", "btn-xs", and "btn-default" classes' ); assert.ok( - this.$( '.table-condensed > thead > tr > th:last-child span' ).hasClass( 'sl-icon-next' ), - 'day view has next button class' + previousButton.find( 'span' ).hasClass( 'sl-icon-previous' ), + 'day view previous button has span with "sl-icon-previous" class' ); - this.$( '.datepicker-switch' ).click(); + assert.ok( + hasButtonClasses( nextButton ), + 'day view next button has "btn", "btn-xs", and "btn-default" classes' + ); + + assert.ok( + nextButton.find( 'span' ).hasClass( 'sl-icon-next' ), + 'day view next button has span with "sl-icon-next" class' + ); + + this.$( '>:first-child' ).find( '.calendar-controls a' ).click(); + + previousButton = this.$( '>:first-child' ).find( '.calendar-controls button' ).first(); + nextButton = this.$( '>:first-child' ).find( '.calendar-controls button' ).last(); + + assert.ok( + hasButtonClasses( previousButton ), + 'month view previous button has "btn", "btn-xs", and "btn-default" classes' + ); + + assert.ok( + previousButton.find( 'span' ).hasClass( 'sl-icon-previous' ), + 'month view previous button has span with "sl-icon-previous" class' + ); + + assert.ok( + hasButtonClasses( nextButton ), + 'month view next button has "btn", "btn-xs", and "btn-default" classes' + ); assert.ok( - this.$( '.table-condensed > thead > tr > th:first-child span' ).hasClass( 'sl-icon-previous' ), - 'month view has previous button class' + nextButton.find( 'span' ).hasClass( 'sl-icon-next' ), + 'month view next button has span with "sl-icon-next" class' ); + this.$( '>:first-child' ).find( '.calendar-controls a' ).click(); + + previousButton = this.$( '>:first-child' ).find( '.calendar-controls button' ).first(); + nextButton = this.$( '>:first-child' ).find( '.calendar-controls button' ).last(); + assert.ok( - this.$( '.table-condensed > thead > tr > th:last-child span' ).hasClass( 'sl-icon-next' ), - 'month view has next button class' + hasButtonClasses( previousButton ), + 'year view previous button has "btn", "btn-xs", and "btn-default" classes' ); - this.$( '.datepicker-switch' ).click(); + assert.ok( + previousButton.find( 'span' ).hasClass( 'sl-icon-previous' ), + 'year view previous button has span with "sl-icon-previous" class' + ); assert.ok( - this.$( '.table-condensed > thead > tr > th:first-child span' ).hasClass( 'sl-icon-previous' ), - 'year view has previous button class' + hasButtonClasses( nextButton ), + 'year view next button has "btn", "btn-xs", and "btn-default" classes' ); assert.ok( - this.$( '.table-condensed > thead > tr > th:last-child span' ).hasClass( 'sl-icon-next' ), - 'year view has next button class' + nextButton.find( 'span' ).hasClass( 'sl-icon-next' ), + 'year view next button has span with "sl-icon-next" class' + ); +}); + +test( 'Controls are not available when showControls is false', function( assert ) { + this.render( hbs` + {{sl-calendar showControls=false}} + ` ); + + assert.strictEqual( + this.$( '>:first-child' ).find( '.calendar-controls' ).length, + 0, + 'calendar controls not available when showControls is false' ); }); test( 'Check for classes set on items outside of range in picker', function( assert ) { - this.set( 'currentYear', 2015 ); - this.set( 'currentMonth', 1 ); + this.set( 'viewingDate', window.moment( [ 2015, 1, 1 ] ) ); + this.set( 'viewMode', 'days' ); this.render( hbs` {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate + viewMode=viewMode }} ` ); @@ -116,7 +171,7 @@ test( 'Check for classes set on items outside of range in picker', function( ass // test the days - const days = this.$( '>:first-child' ).find( '.datepicker-days .day' ); + const days = this.$( '>:first-child' ).find( '.calendar-days .day' ); let firstReached = false; let lastReached = false; @@ -157,11 +212,12 @@ test( 'Check for classes set on items outside of range in picker', function( ass // test the years - this.$( '>:first-child' ).find( '.datepicker-switch' ).trigger( 'click' ); // open month picker - this.$( '>:first-child' ).find( '.datepicker-switch' ).trigger( 'click' ); // open year picker - const yearSpan = this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim().split( '-' ); + this.set( 'viewMode', 'years' ); + + const startYear = 2010; + const endYear = 2019; - const years = this.$( '>:first-child' ).find( '.datepicker-years > table > tbody > tr > td > *' ); + const years = this.$( '>:first-child' ).find( 'td.year' ); missingOld = false; missingNew = false; @@ -169,13 +225,13 @@ test( 'Check for classes set on items outside of range in picker', function( ass years.each( function() { const testYear = parseInt( $( this ).text() ); - if ( testYear > parseInt( yearSpan[1] ) ) { + if ( testYear > endYear ) { if ( !$( this ).hasClass( 'new' ) ) { missingNew = true; } } - if ( testYear < parseInt( yearSpan[0] ) ) { + if ( testYear < startYear ) { if ( !$( this ).hasClass( 'old' ) ) { missingOld = true; } @@ -193,166 +249,73 @@ test( 'Check for classes set on items outside of range in picker', function( ass ); }); -test( 'Setting currentYear and currentMonth modifies the view correctly', function( assert ) { - - const currentYear = 2025; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 1 ); +test( 'Setting viewingDate modifies the view correctly', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2025, 3, 1 ] ) ); this.render( hbs` - {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth - }} + {{sl-calendar viewingDate=viewingDate}} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'January ' + currentYear, + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'April 2025', 'Current month and year are set correctly in the view' ); }); -skip( 'Setting dateValuePath modifies the view correctly', function( assert ) { - - const modifiedValuePath = Ember.A([ - { - modifiedDatePath: new Date( 2022, 8, 17 ), - label: 'Today!' - } - ]); - - this.set( 'currentYear', 2022 ); - - this.set( 'currentMonth', 9 ); - - this.set( 'content', modifiedValuePath ); - - this.render( hbs` - {{sl-calendar - content=content - dateValuePath="modifiedDatePath" - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.active' ).text().trim(), - 17, - 'Active day is set correctly' - ); -}); - -skip( 'Active day is set correctly', function( assert ) { - - this.set( 'currentYear', 2022 ); - - this.set( 'currentMonth', 9 ); - - this.set( 'content', Ember.A() ); - - this.render( hbs` - {{sl-calendar - content=content - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.active' ).text().trim(), - '', - 'No active day is set' - ); - - this.set( 'content', testContent ); +test( 'selectedDate is set correctly', function( assert ) { + this.set( 'selectedDate', window.moment( [ 2015, 1, 15 ] ) ); + this.set( 'viewingDate', window.moment( [ 2015, 1, 1 ] ) ); this.render( hbs` {{sl-calendar - content=content - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate }} ` ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.active' ).text().trim(), - 17, - 'Active day is set correctly' + assert.notOk( + this.$( '>:first-child' ).find( 'td.selected' ).length, + 'No days are set as selected' ); - this.set( 'content', multipleTestContent ); - this.render( hbs` {{sl-calendar - content=content - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate + selectedDate=selectedDate }} ` ); - const active = this.$( '>:first-child' ).find( '.active' ); - - assert.strictEqual( - active.length, - 2, - 'There are two unique dates assigned the .active class' - ); - - assert.strictEqual( - active[ 0 ].innerHTML, - '17', - 'First unique date instance is correct' - ); - assert.strictEqual( - active[ 1 ].innerHTML, - '20', - 'Second unique date instance is correct' + this.$( '>:first-child' ).find( 'td.selected' ).text().trim(), + '15', + 'Proper date is set as selected' ); }); test( 'Setting locale to Spanish modifies the view correctly', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 9 ); + this.set( 'viewingDate', window.moment( [ 2022, 8, 1 ] ) ); this.render( hbs` {{sl-calendar locale="es" - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'Septiembre ' + currentYear, + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'Septiembre 2022', 'Current month in Spanish is set correctly in the view' ); }); test( 'Action fires when day is clicked', function( assert ) { - assert.expect( 1 ); const done = assert.async(); - this.set( 'currentYear', 2022 ); - - this.set( 'currentMonth', 9 ); - - this.set( 'content', testContent ); - this.render( hbs` - {{sl-calendar - action="testAction" - content=content - currentYear=currentYear - currentMonth=currentMonth - }} + {{sl-calendar action="testAction"}} ` ); this.on( 'testAction', () => { @@ -364,1112 +327,477 @@ test( 'Action fires when day is clicked', function( assert ) { done(); }); - this.$( '>:first-child' ).find( '.active' ).click(); + this.$( '>:first-child' ).find( '.today' ).click(); }); -skip( 'Action passes through expected objects in content array', function( assert ) { - - assert.expect( 8 ); +test( 'Action passes through expected objects in content array', function( assert ) { + assert.expect( 1 ); const done = assert.async(); - this.set( 'currentYear', 2022 ); + this.set( 'viewingDate', window.moment( [ 2015, 2, 15 ] ) ); + this.set( 'selectedDate', window.moment( [ 2015, 2, 12 ] ) ); - this.set( 'currentMonth', 9 ); - - this.set( 'content', multipleTestContent ); + this.set( 'events', testEvents ); this.render( hbs` {{sl-calendar action="testAction" - content=content - currentYear=currentYear - currentMonth=currentMonth + events=events + viewingDate=viewingDate + selectedDate=selectedDate }} ` ); - this.on( 'testAction', ( dateContent ) => { - - // This group of asserts verifies the multiple events on Sep. 17th - if ( 'Event 1 Today!' === dateContent[ 0 ].label ) { - assert.strictEqual( - dateContent[ 0 ].date.toString(), - 'Sat Sep 17 2022 00:00:00 GMT-0500 (CDT)', - 'The date property was passed through' - ); - - assert.strictEqual( - dateContent[ 0 ].label, - 'Event 1 Today!', - 'The label property was passed through' - ); - - assert.strictEqual( - dateContent[ 1 ].date.toString(), - 'Sat Sep 17 2022 00:00:00 GMT-0500 (CDT)', - 'The date property was passed through' - ); - - assert.strictEqual( - dateContent[ 1 ].label, - 'Event 2 Today!', - 'The label property was passed through' - ); - - assert.strictEqual( - dateContent[ 2 ].date.toString(), - 'Sat Sep 17 2022 00:00:00 GMT-0500 (CDT)', - 'The date property was passed through' - ); - - assert.strictEqual( - dateContent[ 2 ].label, - 'Event 3 Today!', - 'The label property was passed through' - ); - // This group of asserts verifies the event on Sep. 20th - } else { - assert.strictEqual( - dateContent[ 0 ].date.toString(), - 'Tue Sep 20 2022 00:00:00 GMT-0500 (CDT)', - 'The date property was passed through' - ); - - assert.strictEqual( - dateContent[ 0 ].label, - 'Event 1 Another Day!', - 'The label property was passed through' - ); - } + this.on( 'testAction', ( date, events ) => { + assert.strictEqual( + events.length, + 2, + 'two events retrieved' + ); done(); }); - this.$( '>:first-child' ).find( '.active' ).click(); + this.$( '>:first-child' ).find( '.selected' ).click(); }); -skip( 'Setting viewMode modifies the view correctly', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 9 ); - - this.set( 'content', testContent ); +test( 'Setting viewMode modifies the view correctly', function( assert ) { + this.set( 'selectedDate', window.moment( [ 2015, 1, 15 ] ) ); + this.set( 'viewingDate', window.moment( [ 2015, 1, 1 ] ) ); + this.set( 'viewMode', 'days' ); this.render( hbs` {{sl-calendar - content=content + selectedDate=selectedDate + viewingDate=viewingDate + viewMode=viewMode }} ` ); - assert.ok( - this.$( '>:first-child' ), + assert.strictEqual( + this.$( '>:first-child' ).find( '.selected' ).text().trim(), + '15', '"viewMode" of days renders' ); - this.render( hbs` - {{sl-calendar - content=content - viewMode="months" - }} - ` ); + this.set( 'viewMode', 'months' ); - assert.ok( - this.$( '>:first-child' ), + assert.strictEqual( + this.$( '>:first-child' ).find( '.selected' ).text().trim(), + 'Feb', '"viewMode" of months renders' ); - this.render( hbs` - {{sl-calendar - content=content - viewMode="years" - }} - ` ); + this.set( 'viewMode', 'years' ); - assert.ok( - this.$( '>:first-child' ), + assert.strictEqual( + this.$( '>:first-child' ).find( '.selected' ).text().trim(), + '2015', '"viewMode" of years renders' ); +}); + +test( 'Navigating Forward and Backward by Month', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2015, 8, 1 ] ) ); this.render( hbs` {{sl-calendar - content=content - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'The current month and year are set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'September 2015', + 'The current month is set correctly' ); + this.$( '>:first-child' ).find( '.sl-icon-next' ).trigger( 'click' ); + assert.strictEqual( - this.$( '>:first-child' ).find( '.active' ).text().trim(), - 17, - 'The current day is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'October 2015', + 'The next month is set correctly' ); - this.render( hbs` - {{sl-calendar - content=content - viewMode="months" - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); + this.$( '>:first-child' ).find( '.sl-icon-previous' ).trigger( 'click' ).trigger( 'click' ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'August 2015', + 'The previous month is set correctly' ); + this.set( 'viewingDate', window.moment( [ 2015, 11, 1 ] ) ); + assert.strictEqual( - this.$( '>:first-child' ).find( '.active' ).text().trim(), - 'Sep', - 'The current month is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'December 2015', + 'The month is set correctly' ); - this.render( hbs` - {{sl-calendar - content=content - viewMode="years" - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); + this.$( '>:first-child' ).find( '.sl-icon-next' ).trigger( 'click' ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'The year range is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'January 2016', + 'The month and year are set correctly' ); + this.$( '>:first-child' ).find( '.sl-icon-previous' ).trigger( 'click' ); + assert.strictEqual( - this.$( '>:first-child' ).find( '.active' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + 'December 2015', + 'The month and year are set correctly' ); }); -test( 'Navigating Forward by Month', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 9 ); +test( 'Navigating Forward and Backward by Year', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2015, 8, 1 ] ) ); + this.set( 'viewMode', 'months' ); this.render( hbs` {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate + viewMode=viewMode }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'The current month is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + '2015', + 'The current year is set correctly' ); - this.$( '>:first-child' ).find( '.sl-icon-next' ).click(); + this.$( '>:first-child' ).find( '.sl-icon-next' ).trigger( 'click' ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'October ' + currentYear, - 'The next month is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + '2016', + 'The next year is set correctly' ); -}); -test( 'Navigating Backward by Month', function( assert ) { + this.$( '>:first-child' ).find( '.sl-icon-previous' ).trigger( 'click' ).trigger( 'click' ); - const currentYear = 2022; - this.set( 'currentYear', currentYear ); + assert.strictEqual( + this.$( '>:first-child' ).find( '.calendar-controls a' ).text().trim(), + '2014', + 'The previous year is set correctly' + ); +}); - this.set( 'currentMonth', 9 ); +test( 'Navigating Forward and Backward by Decade', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2015, 8, 1 ] ) ); + this.set( 'viewMode', 'years' ); this.render( hbs` {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate + viewMode=viewMode }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'The current month is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls th:first-child + th' ).text().trim(), + '2010 - 2019', + 'The current decade is set correctly' ); - this.$( '>:first-child' ).find( '.sl-icon-previous' ).click(); + this.$( '>:first-child' ).find( '.sl-icon-next' ).trigger( 'click' ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'August ' + currentYear, - 'The previous month is set correctly' + this.$( '>:first-child' ).find( '.calendar-controls th:first-child + th' ).text().trim(), + '2020 - 2029', + 'The next decade is set correctly' ); -}); -test( 'Navigating Forward by Year', function( assert ) { + this.$( '>:first-child' ).find( '.sl-icon-previous' ).trigger( 'click' ).trigger( 'click' ); + + assert.strictEqual( + this.$( '>:first-child' ).find( '.calendar-controls th:first-child + th' ).text().trim(), + '2000 - 2009', + 'The previous decade is set correctly' + ); +}); - const currentYear = 2022; - this.set( 'currentYear', currentYear ); +test( 'Changing viewMode by View Switcher', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2015, 8, 1 ] ) ); + this.set( 'viewMode', 'days' ); this.render( hbs` {{sl-calendar - currentYear=currentYear - viewMode="months" + viewingDate=viewingDate + viewMode=viewMode }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' + this.get( 'viewMode' ), + 'days', + 'The current viewMode is "days"' ); - this.$( '>:first-child' ).find( '.sl-icon-next' ).click(); + this.$( '>:first-child' ).find( '.calendar-controls a' ).trigger( 'click' ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - ( currentYear + 1 ).toString(), - 'The next year is set correctly' + this.get( 'viewMode' ), + 'months', + 'The current viewMode is "months"' ); -}); -test( 'Navigating Backward by Year', function( assert ) { + this.$( '>:first-child' ).find( '.calendar-controls a' ).trigger( 'click' ); + + assert.strictEqual( + this.get( 'viewMode' ), + 'years', + 'The current viewMode is "years"' + ); +}); - const currentYear = 2022; - this.set( 'currentYear', currentYear ); +test( 'Changing viewMode by Selection', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2015, 8, 1 ] ) ); + this.set( 'selectedDate', window.moment( [ 2015, 8, 1 ] ) ); + this.set( 'viewMode', 'years' ); this.render( hbs` {{sl-calendar - currentYear=currentYear - viewMode="months" + viewingDate=viewingDate + selectedDate=selectedDate + viewMode=viewMode }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' + this.get( 'viewMode' ), + 'years', + 'The current viewMode is "years"' ); - this.$( '>:first-child' ).find( '.sl-icon-previous' ).click(); + this.$( '>:first-child' ).find( 'td.selected' ).trigger( 'click' ); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - ( currentYear - 1 ).toString(), - 'The previous year is set correctly' + this.get( 'viewMode' ), + 'months', + 'The current viewMode is "months"' ); -}); -test( 'Navigating Forward by Decade', function( assert ) { + this.$( '>:first-child' ).find( 'td.selected' ).trigger( 'click' ); + + assert.strictEqual( + this.get( 'viewMode' ), + 'days', + 'The current viewMode is "days"' + ); +}); - this.set( 'currentYear', 2022 ); +test( 'All Days are Displayed in Order', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2015, 0, 1 ] ) ); + this.set( 'fixedWeekCount', false ); this.render( hbs` {{sl-calendar - currentYear=currentYear - viewMode="years" + fixedWeekCount=fixedWeekCount + viewingDate=viewingDate }} ` ); + let daysString = ''; + + this.$( '>:first-child' ).find( 'td.day' ).each( function() { + daysString += $( this ).text().trim(); + }); + assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'The current Decade is set correctly' + daysString, + '2829303112345678910111213141516171819202122232425262728293031', + 'All days listed in order for specified month as expected' ); - this.$( '>:first-child' ).find( '.sl-icon-next' ).click(); + this.set( 'fixedWeekCount', true ); + + daysString = ''; + + this.$( '>:first-child' ).find( 'td.day' ).each( function() { + daysString += $( this ).text().trim(); + }); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2030-2039', - 'The next Decade is set correctly' + daysString, + '28293031123456789101112131415161718192021222324252627282930311234567', + 'All days listed in order for specified month when fixedWeekCount as expected' ); }); -test( 'Navigating Backward by Decade', function( assert ) { - - this.set( 'currentYear', 2022 ); +test( 'All Twelve Months are Displayed in Order', function( assert ) { this.render( hbs` {{sl-calendar - currentYear=currentYear - viewMode="years" + viewMode="months" }} ` ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'The current Decade is set correctly' - ); + let monthsString = ''; - this.$( '>:first-child' ).find( '.sl-icon-previous' ).click(); + this.$( '>:first-child' ).find( 'td.month' ).each( function() { + monthsString += $( this ).text().trim(); + }); assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2010-2019', - 'The previous Decade is set correctly' + monthsString, + 'JanFebMarAprMayJunJulAugSepOctNovDec', + 'Twelve months are listed in order' ); }); -test( 'When Locked, interacting with the view is not Possible', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 8 ); +test( 'Twelve Years are Displayed in Order', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2022, 0, 1 ] ) ); this.render( hbs` - {{sl-calendar}} + {{sl-calendar + viewMode="years" + viewingDate=viewingDate + }} ` ); + let yearsString = ''; + + this.$( '>:first-child' ).find( 'td.year' ).each( function() { + yearsString += $( this ).text().trim(); + }); + assert.strictEqual( - this.$( '>:first-child' ).hasClass( 'sl-calendar-locked' ), - false, - 'Default rendered component does not have class "sl-calendar-locked"' + yearsString, + '201920202021202220232024202520262027202820292030', + 'Twelve years are listed in order' ); +}); + +test( 'Wai-Aria keyboard navigation', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2016, 0, 15 ] ) ); + this.set( 'selectedDate', window.moment( [ 2016, 0, 15 ] ) ); this.render( hbs` {{sl-calendar - locked=true - currentYear=currentYear - currentMonth=currentMonth + viewingDate=viewingDate + selectedDate=selectedDate }} ` ); - assert.ok( - this.$( '>:first-child' ).hasClass( 'sl-calendar-locked' ), - 'Locked, rendered component has class "sl-calendar-locked"' - ); + const calendar = this.$( '>:first-child' ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'August ' + currentYear, - 'The current month is set correctly' - ); + calendar.trigger( 'focusin' ); - this.$( '>:first-child' ).find( '.sl-icon-next' ).click(); + let event = new Ember.$.Event( 'keydown' ); + event.keyCode = 33; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'August ' + currentYear, - 'The next month is set correctly' + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2015, 11, 15 ] ), 'day' ), + 'correctly decreased the date by one month' ); - this.$( '>:first-child' ).find( '.sl-icon-next' ).click(); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 34; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'August ' + currentYear, - 'The next month is set correctly' + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2016, 0, 15 ] ), 'day' ), + 'correctly increased the date by one month' ); - this.$( '>:first-child' ).find( '.datepicker-switch' ).click(); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 35; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'August ' + currentYear, - 'The next month is set correctly' + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2016, 0, 31 ] ), 'day' ), + 'correctly moved to the last day in the current month' ); -}); -test( 'Navigating from Month to Year', function( assert ) { + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 36; + calendar.trigger( event ); + + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2016, 0, 1 ] ), 'day' ), + 'correctly moved to the first day in the current month' + ); - const currentYear = 2022; - this.set( 'currentYear', currentYear ); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 37; + calendar.trigger( event ); - this.set( 'currentMonth', 9 ); + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2015, 11, 31 ] ), 'day' ), + 'correctly decreased the date by one day' + ); - this.render( hbs` - {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 38; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'The current month is set correctly' + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2015, 11, 24 ] ), 'day' ), + 'correctly decreased the date by one week' ); - this.$( '>:first-child' ).find( '.datepicker-switch' ).click(); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 39; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2015, 11, 25 ] ), 'day' ), + 'correctly increased the date by one day' ); -}); -test( 'Navigating from Year to Month', function( assert ) { + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 40; + calendar.trigger( event ); - const currentYear = 2022; - this.set( 'currentYear', currentYear ); + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2016, 0, 1 ] ), 'day' ), + 'correctly increased the date by one week' + ); - this.set( 'currentMonth', 9 ); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 33; + event.ctrlKey = true; + calendar.trigger( event ); - this.set( 'content', testContent ); + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2015, 0, 1 ] ), 'day' ), + 'correctly decreased the date by one year' + ); - this.render( hbs` - {{sl-calendar - content=content - currentYear=currentYear - currentMonth=currentMonth - viewMode="months" - }} - ` ); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 34; + event.ctrlKey = true; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' + assert.ok( + this.get( 'viewingDate' ).isSame( window.moment( [ 2016, 0, 1 ] ), 'day' ), + 'correctly increased the date by one year' ); - this.$( '>:first-child' ).find( '.active' ).click(); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 32; + calendar.trigger( event ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'The current month is set correctly' + assert.ok( + this.get( 'selectedDate' ).isSame( window.moment( [ 2016, 0, 1 ] ), 'day' ), + 'correctly set the selectedDate to the currently focused date' ); -}); -test( 'Navigating from Year to Decade', function( assert ) { + this.set( 'viewingDate', window.moment( [ 2016, 0, 15 ] ) ); - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear - viewMode="months" - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' - ); - - this.$( '>:first-child' ).find( '.datepicker-switch' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'The current decade is set correctly' - ); -}); - -test( 'Navigating from Decade to Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'content', testContent ); - - this.render( hbs` - {{sl-calendar - content=content - currentYear=currentYear - viewMode="years" - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'The current decade is set correctly' - ); - - this.$( '>:first-child' ).find( '.active' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'The current year is set correctly' - ); -}); - -test( 'Navigating Forward by Month Crosses to Next Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 12 ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'December ' + currentYear, - 'The current month is set correctly' - ); - - this.$( '>:first-child' ).find( '.sl-icon-next' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'January ' + ( currentYear + 1 ), - 'The next month is in the next year' - ); -}); - -test( 'Navigating Backward by Month Crosses to Previous Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear', currentYear ); - - this.set( 'currentMonth', 1 ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'January ' + currentYear, - 'The current month is set correctly' - ); - - this.$( '>:first-child' ).find( '.sl-icon-previous' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'December ' + ( currentYear - 1 ), - 'The previous month is in the previous year' - ); -}); - -test( 'All Days are Displayed in Order', function( assert ) { - this.set( 'currentYear', 2015 ); - this.set( 'currentMonth', 1 ); - - this.render( hbs` - {{sl-calendar - viewMode="days" - currentYear=currentYear - currentMonth=currentMonth - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( 'td' ).text().trim(), - '28293031123456789101112131415161718192021222324252627282930311234567', - 'All days listed in order for specified month as expected' - ); -}); - -test( 'All Twelve Months are Displayed in Order', function( assert ) { - - this.render( hbs` - {{sl-calendar - viewMode="months" - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( 'tbody span' ).text().trim(), - 'JanFebMarAprMayJunJulAugSepOctNovDec', - 'Twelve months are listed in order' - ); -}); - -test( 'Twelve Years are Displayed in Order', function( assert ) { - - this.set( 'currentYear', 2022 ); - - this.render( hbs` - {{sl-calendar - viewMode="years" - currentYear=currentYear - }} - ` ); - - assert.strictEqual( - this.$( '>:first-child' ).find( 'tbody span' ).text().trim(), - '201920202021202220232024202520262027202820292030', - 'Twelve years are listed in order' - ); -}); - -// ------------------------------------------------------------------------- -// Start of Dual Component Tests - -test( 'Dual instance: Action fires when day is clicked', function( assert ) { - - const testAction1 = sinon.spy(); - const testAction2 = sinon.spy(); - - this.set( 'currentYear1', 2035 ); - this.set( 'currentMonth1', 1 ); - - this.set( 'currentYear2', 2022 ); - this.set( 'currentMonth2', 9 ); - - this.set( 'content', testContent ); - - this.render( hbs` - {{sl-calendar - action="testAction1" - content=content - currentYear=currentYear1 - currentMonth=currentMonth1 - }} - {{sl-calendar - action="testAction2" - content=content - currentYear=currentYear2 - currentMonth=currentMonth2 - }} - ` ); - - this.on( 'testAction1', testAction1 ); - this.on( 'testAction2', testAction2 ); - - this.$( '>:nth-child(2)' ).find( '.active' ).click(); - - assert.notOk( - testAction1.called, - 'Component instance one: did not fire an action' - ); + event = new Ember.$.Event( 'keydown' ); + event.keyCode = 13; + calendar.trigger( event ); assert.ok( - testAction2.called, - 'Component instance two: fired an action' - ); -}); - -test( 'Dual instance: Navigating Forward by Month', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - const currentMonth = 9; - this.set( 'currentMonth1', currentMonth ); - this.set( 'currentMonth2', currentMonth ); - - this.render( hbs` - {{sl-calendar - currentMonth=currentMonth1 - currentYear=currentYear1 - }} - {{sl-calendar - currentMonth=currentMonth2 - currentYear=currentYear2 - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-next' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'Component instance one: current month has not changed' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - 'October ' + currentYear, - 'Component instance two: Current month advances one month' - ); -}); - -test( 'Dual instance: Navigating Backward by Month', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - const currentMonth = 9; - this.set( 'currentMonth1', currentMonth ); - this.set( 'currentMonth2', currentMonth ); - - this.render( hbs` - {{sl-calendar - currentMonth=currentMonth1 - currentYear=currentYear1 - }} - {{sl-calendar - currentMonth=currentMonth2 - currentYear=currentYear2 - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-previous' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'Component instance one: current month has not changed' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - 'August ' + currentYear, - 'Component instance two: Current month adjusts to previous month' - ); -}); - -test( 'Dual instance: Navigating Forward by Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - viewMode="months" - }} - {{sl-calendar - currentYear=currentYear2 - viewMode="months" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-next' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'Component instance one: year did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - ( currentYear + 1 ).toString(), - 'Component instance two: year advances by one year' - ); -}); - -test( 'Dual instance: Navigating Backward by Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - viewMode="months" - }} - {{sl-calendar - currentYear=currentYear2 - viewMode="months" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-previous' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'Component instance one: year did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - ( currentYear - 1 ).toString(), - 'Component instance two: year adjusts to previous year' - ); -}); - -test( 'Dual instance: Navigating Forward by Decade', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - viewMode="years" - }} - {{sl-calendar - currentYear=currentYear2 - viewMode="years" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-next' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'Component instance one: decade did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - '2030-2039', - 'Component instance two: next decade is set correctly' - ); -}); - -test( 'Dual instance: Navigating Backward by Decade', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - viewMode="years" - }} - {{sl-calendar - currentYear=currentYear2 - viewMode="years" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-previous' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'Component instance one: decade did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - '2010-2019', - 'Component instance two: decade is set to the previous decade' - ); -}); - -test( 'Dual instance: Navigating from Month to Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - const currentMonth = 9; - this.set( 'currentMonth1', currentMonth ); - this.set( 'currentMonth2', currentMonth ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - currentMonth=currentMonth1 - }} - {{sl-calendar - currentYear=currentYear2 - currentMonth=currentMonth2 - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'Component instance one: current month did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'Component instance two: current year is set correctly' - ); -}); - -test( 'Dual instance: Navigating from Year to Month', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - const currentMonth = 9; - this.set( 'currentMonth1', currentMonth ); - this.set( 'currentMonth2', currentMonth ); - - this.set( 'content', testContent ); - - this.render( hbs` - {{sl-calendar - content=content - currentYear=currentYear1 - currentMonth=currentMonth1 - viewMode="months" - }} - {{sl-calendar - content=content - currentYear=currentYear2 - currentMonth=currentMonth2 - viewMode="months" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.active' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'Component instance one: current year did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - 'September ' + currentYear, - 'Component instance two: current month is set correctly' - ); -}); - -test( 'Dual instance: Navigating from Year to Decade', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - viewMode="months" - }} - {{sl-calendar - currentYear=currentYear2 - viewMode="months" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'Component instance one: current year did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'Component instance two: current decade is set correctly' - ); -}); - -test( 'Dual instance: Navigating from Decade to Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - this.set( 'content', testContent ); - - this.render( hbs` - {{sl-calendar - content=content - currentYear=currentYear1 - viewMode="years" - }} - {{sl-calendar - content=content - currentYear=currentYear2 - viewMode="years" - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.active' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - '2020-2029', - 'Component instance two: current decade did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - currentYear.toString(), - 'Component instance two: current year is set correctly' - ); -}); - -test( 'Dual instance: Navigating Forward by Month Crosses to Next Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - const currentMonth = 12; - this.set( 'currentMonth1', currentMonth ); - this.set( 'currentMonth2', currentMonth ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - currentMonth=currentMonth1 - }} - {{sl-calendar - currentYear=currentYear2 - currentMonth=currentMonth2 - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-next' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'December ' + currentYear, - 'Component instance one: current month did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - 'January ' + ( currentYear + 1 ), - 'Component instance two: next month is in the next year' - ); -}); - -test( 'Dual instance: Navigating Backward by Month Crosses to Previous Year', function( assert ) { - - const currentYear = 2022; - this.set( 'currentYear1', currentYear ); - this.set( 'currentYear2', currentYear ); - - const currentMonth = 1; - this.set( 'currentMonth1', currentMonth ); - this.set( 'currentMonth2', currentMonth ); - - this.render( hbs` - {{sl-calendar - currentYear=currentYear1 - currentMonth=currentMonth1 - }} - {{sl-calendar - currentYear=currentYear2 - currentMonth=currentMonth2 - }} - ` ); - - this.$( '>:nth-child(2)' ).find( '.sl-icon-previous' ).click(); - - assert.strictEqual( - this.$( '>:first-child' ).find( '.datepicker-switch' ).text().trim(), - 'January ' + currentYear, - 'Component instance one: current month did not change' - ); - - assert.strictEqual( - this.$( '>:nth-child(2)' ).find( '.datepicker-switch' ).text().trim(), - 'December ' + ( currentYear - 1 ), - 'Component instance two: previous month is in the previous year' + this.get( 'selectedDate' ).isSame( window.moment( [ 2016, 0, 15 ] ), 'day' ), + 'correctly set the selectedDate to the currently focused date' ); }); diff --git a/tests/integration/components/sl-calendar-year-test.js b/tests/integration/components/sl-calendar-year-test.js new file mode 100644 index 00000000..04433dcd --- /dev/null +++ b/tests/integration/components/sl-calendar-year-test.js @@ -0,0 +1,75 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent( 'sl-calendar-year', 'Integration | Component | sl calendar year', { + integration: true +}); + +const template = hbs` + {{#sl-calendar-year}} + 1999 + {{/sl-calendar-year}} +`; + +test( 'Default rendered state', function( assert ) { + this.render( template ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'year' ), + 'Has class "year"' + ); +}); + +test( 'Selected class is present when in active state', function( assert ) { + this.render( hbs` + {{sl-calendar-year active=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'selected' ), + 'Has class "selected" when active' + ); +}); + +test( 'New class is present when new is true', function( assert ) { + this.render( hbs` + {{sl-calendar-year new=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'new' ), + 'Has class "new" when new' + ); +}); + +test( 'Old class is present when old is true', function( assert ) { + this.render( hbs` + {{sl-calendar-year old=true}} + ` ); + + assert.ok( + this.$( '>:first-child' ).hasClass( 'old' ), + 'Has class "old" when old' + ); +}); + +test( 'Default action is triggered when element is clicked', function( assert ) { + assert.expect( 1 ); + + const done = assert.async(); + + this.render( hbs` + {{sl-calendar-year action="testAction"}} + ` ); + + this.on( 'testAction', function() { + assert.ok( + true, + 'Action was fired' + ); + + done(); + }); + + this.$( '>:first-child' ).click(); +}); diff --git a/tests/integration/components/sl-date-picker-test.js b/tests/integration/components/sl-date-picker-test.js index 93e157c0..89eb04a5 100644 --- a/tests/integration/components/sl-date-picker-test.js +++ b/tests/integration/components/sl-date-picker-test.js @@ -1,18 +1,14 @@ import { moduleForComponent, test } from 'ember-qunit'; import Ember from 'ember'; import hbs from 'htmlbars-inline-precompile'; -import sinon from 'sinon'; +import { skip } from 'qunit'; const defaultTemplate = hbs` {{sl-date-picker}} `; moduleForComponent( 'sl-date-picker', 'Integration | Component | sl date picker', { - integration: true, - - afterEach() { - Ember.$( '.datepicker' ).remove(); - } + integration: true }); test( 'Default rendered state', function( assert ) { @@ -73,7 +69,8 @@ test( 'helpText is accepted as a parameter', function( assert ) { ); }); -test( 'value is accepted as a parameter', function( assert ) { +// not proper way to seed value +skip( 'value is accepted as a parameter', function( assert ) { this.render( defaultTemplate ); let input = this.$( '>:first-child' ).find( 'input' ); @@ -120,7 +117,7 @@ test( 'label is accepted as a parameter', function( assert ) { const first = this.$( '>:first-child' ); assert.strictEqual( - first.find( 'label' ).html(), + first.find( 'label' ).text().trim(), labeltext, 'label element was created with label parameter text' ); @@ -158,120 +155,146 @@ test( 'placeholder is accepted as a parameter', function( assert ) { ); }); -test( 'action is fired when date changes on datepicker', function( assert ) { - assert.expect( 1 ); - - const done = assert.async(); - - this.on( 'action', function() { - assert.ok( - 'Action was fired' - ); - - done(); - }); - - this.render( hbs` - {{sl-date-picker action="action"}} - ` ); +test( 'Selected day is set in the input field', function( assert ) { + const selectedDate = window.moment( [ 2015, 0, 5 ] ); + const format = 'MM/DD/YYYY'; - this.$( '>:first-child' ) - .find( 'input.date-picker' ) - .triggerHandler( 'focus' ); - - Ember.$( '.day:first' ).click(); -}); - -test( 'updateDateRange() - clears input date when outside of startDate range', function( assert ) { - this.set( 'startDate' ); + this.set( 'selectedDate', selectedDate ); + this.set( 'format', format ); this.render( hbs` - {{sl-date-picker startDate=startDate }} + {{sl-date-picker + selectedDate=selectedDate + format=format + }} ` ); - const input = this.$( '>:first-child' ).find( 'input.date-picker' ); + const input = this.$( '>:first-child' ).find( 'input' ); - input.triggerHandler( 'focus' ); + assert.strictEqual( + input.val(), + '01/05/2015', + 'The selected day is set in the input field' + ); - Ember.$( '.day:first' ).click(); + const newDate = window.moment( selectedDate.add( 5, 'months' ) ); - this.set( 'startDate', window.moment().add( 30, 'days' ).toDate() ); + this.set( 'selectedDate', newDate ); assert.strictEqual( - input.datepicker().val(), - '', - 'The datepicker input value was cleared successfully' + input.val(), + '06/05/2015', + 'The selected day is updated in the input field' ); }); -test( 'updateDateRange() - clears input date when outside of endDate range', function( assert ) { - this.set( 'endDate' ); +test( 'properties are properly passed to sl-calendar', function( assert ) { + const mockCalendarTemplate = hbs` + {{testAttrs}} + `; - this.render( hbs` - {{sl-date-picker endDate=endDate}} - ` ); + this.registry.register( 'template:sl-calendar', mockCalendarTemplate ); - const input = this.$( '>:first-child' ).find( 'input.date-picker' ); + this.registry.register( 'component:sl-calendar', + Ember.Component.extend({ + layoutName: 'sl-calendar', - input.triggerHandler( 'focus' ); + testAttrs: null, - Ember.$( '.day:first' ).click(); + init() { + this._super( ...arguments ); - this.set( 'endDate', window.moment().subtract( 60, 'days' ).toDate() ); + const attrs = this.get( 'attrs' ); - assert.strictEqual( - input.datepicker().val(), - '', - 'The datepicker input value was cleared successfully' + this.set( 'testAttrs', JSON.stringify( attrs ) ); + } + }) ); -}); -test( 'End date is set on datepicker when endDate property is updated', function( assert ) { - const endDate = window.moment( '2016-01-01' ).toDate(); - const endDateTwo = window.moment( '2016-02-02' ).toDate(); + const locale = 'fr'; + const selectedDate = window.moment( [ 2015, 0, 1 ] ); + const viewingDate = window.moment( [ 2015, 0, 1 ] ); + const selectConstraint = { + start: window.moment( [ 2015, 0, 1 ] ), + end: window.moment( [ 2015, 0, 5 ] ) + }; - this.set( 'endDate', endDate ); + this.set( 'locale', locale ); + this.set( 'selectedDate', selectedDate ); + this.set( 'viewingDate', viewingDate ); + this.set( 'selectConstraint', selectConstraint ); this.render( hbs` - {{sl-date-picker endDate=endDate}} + {{sl-date-picker + locale=locale + selectedDate=selectedDate + viewingDate=viewingDate + selectConstraint=selectConstraint + hasFocus=true + }} ` ); - const input = this.$( '>:first-child' ).find( 'input.date-picker' ); - const datePicker = input.data( 'datepicker' ); - const spy = sinon.spy( Object.getPrototypeOf( datePicker ), 'setEndDate' ); + const testAttrs = { + locale: locale, + selectedDate: selectedDate, + viewingDate: viewingDate, + selectConstraint: selectConstraint + }; - this.set( 'endDate', endDateTwo ); + const assertAttrs = JSON.parse( JSON.stringify( testAttrs ) ); - assert.ok( - spy.calledWith( endDateTwo ), - 'endDate is set when property is updated' + const attrs = JSON.parse( this.$( '>:first-child' ).find( 'span.testAttrs' ).text() ); + + assert.strictEqual( + attrs.fixedWeekCount, + true, + 'fixedWeekCount is passed through to calendar' + ); + + assert.strictEqual( + attrs.locale.value, + assertAttrs.locale, + 'locale is passed through to calendar' + ); + + assert.strictEqual( + attrs.selectedDate.value, + assertAttrs.selectedDate, + 'selectedDate is passed through to calendar' + ); + + assert.strictEqual( + attrs.viewingDate.value, + assertAttrs.viewingDate, + 'viewingDate is passed through to calendar' ); - datePicker.setEndDate.restore(); + assert.deepEqual( + attrs.selectConstraint.value, + assertAttrs.selectConstraint, + 'selectConstraint is passed through to calendar' + ); }); -test( 'Start date is set on datepicker when startDate property is updated', function( assert ) { - const startDate = window.moment( '2016-01-01' ).toDate(); - const startDateTwo = window.moment( '2016-02-02' ).toDate(); +test( 'action is fired when date changes on datepicker', function( assert ) { + assert.expect( 1 ); - this.set( 'startDate', startDate ); + const done = assert.async(); this.render( hbs` - {{sl-date-picker startDate=startDate}} + {{sl-date-picker action="testAction" hasFocus=true}} ` ); - const input = this.$( '>:first-child' ).find( 'input.date-picker' ); - const datePicker = input.data( 'datepicker' ); - const spy = sinon.spy( Object.getPrototypeOf( datePicker ), 'setStartDate' ); - - this.set( 'startDate', startDateTwo ); + this.on( 'testAction', function() { + assert.ok( + true, + 'Action was fired' + ); - assert.ok( - spy.calledWith( startDateTwo ), - 'startDate is set when property is updated' - ); + done(); + }); - datePicker.setStartDate.restore(); + this.$( 'td.day:first' ).click(); }); test( 'Tooltip properties are set correctly when title parameter is set', function( assert ) { diff --git a/tests/integration/components/sl-date-range-picker-test.js b/tests/integration/components/sl-date-range-picker-test.js index 5c589c0b..1f35ebdd 100644 --- a/tests/integration/components/sl-date-range-picker-test.js +++ b/tests/integration/components/sl-date-range-picker-test.js @@ -1,7 +1,6 @@ import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -import { skip } from 'qunit'; moduleForComponent( 'sl-date-range-picker', 'Integration | Component | sl date range picker', { afterEach() { @@ -26,280 +25,230 @@ test( 'Default rendered state', function( assert ) { ); }); -test( 'placeholders are accepted', function( assert ) { - this.render( hbs` - {{sl-date-range-picker - label="Select date range" - startDatePlaceholder="__StartPlaceholder__" - endDatePlaceholder="__EndPlaceholder__" - }} - ` ); +test( 'properties are properly passed to first sl-date-picker', function( assert ) { + const mockDatePickerTemplate = hbs` + {{testAttrs}} + `; - assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).prop( 'placeholder' ), - '__StartPlaceholder__', - 'Start date input placeholder is set' - ); + this.registry.register( 'template:sl-date-picker', mockDatePickerTemplate ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ).prop( 'placeholder' ), - '__EndPlaceholder__', - 'End date input placeholder is set' - ); -}); + this.registry.register( 'component:sl-date-picker', + Ember.Component.extend({ + layoutName: 'sl-date-picker', -test( 'label is accepted as a parameter', function( assert ) { + testAttrs: null, - this.render( hbs` - {{sl-date-range-picker - label="lorem ipsum" - }} - ` ); + init() { + this._super( ...arguments ); - assert.strictEqual( - this.$( '>:first-child' ).find( 'label' ).html(), - 'lorem ipsum', - 'The "label" property text was set' - ); + const attrs = this.get( 'attrs' ); - assert.strictEqual( - this.$( '>:first-child' ).find( 'label' ).prop( 'for' ), - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).prop( 'id' ), - '"label for" property has the correct value' + this.set( 'testAttrs', JSON.stringify( attrs ) ); + } + }) ); -}); -test( 'endDatePlaceholder is accepted as a parameter', function( assert ) { + const placeholder = '__startPlaceholder__'; + const format = 'YYYY+MM-DD'; + const selectConstraint = { + start: window.moment( [ 2015, 0, 1 ] ), + end: window.moment( [ 2015, 0, 5 ] ) + }; + const selectedDate = window.moment( [ 2015, 0, 1 ] ); + + this.set( 'placeholder', placeholder ); + this.set( 'format', format ); + this.set( 'selectConstraint', selectConstraint ); + this.set( 'selectedDate', selectedDate ); this.render( hbs` {{sl-date-range-picker - endDatePlaceholder="Select end date" + startDatePlaceholder=placeholder + format=format + selectConstraint=selectConstraint + startDate=selectedDate }} ` ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ).attr( 'placeholder' ), - 'Select end date', - 'The "endDatePlaceholder" property text was set' - ); -}); + const testAttrs = { + placeholder: placeholder, + format: format, + selectConstraint: selectConstraint, + selectedDate: selectedDate + }; -test( 'startDatePlaceholder is accepted as a parameter', function( assert ) { + const assertAttrs = JSON.parse( JSON.stringify( testAttrs ) ); - this.render( hbs` - {{sl-date-range-picker - startDatePlaceholder="Select start date" - }} - ` ); + const attrs = JSON.parse( this.$( '>:first-child' ).find( 'span.testAttrs' ).first().text() ); assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).attr( 'placeholder' ), - 'Select start date', - 'The "startDatePlaceholder" property text was set' + attrs.placeholder.value, + assertAttrs.placeholder, + 'placeholder is passed through to date-picker' ); -}); - -test( 'helpText is accepted as a parameter', function( assert ) { - - this.render( hbs` - {{sl-date-range-picker - helpText="This is helpful" - }} - ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.help-block' ).html(), - 'This is helpful', - 'The "helpText" property text was set' + attrs.format.value, + assertAttrs.format, + 'format is passed through to date-picker' ); -}); - -test( 'startDateValue is accepted as a parameter', function( assert ) { - this.render( hbs` - {{sl-date-range-picker - startDateValue="09/25/2015" - }} - ` ); + assert.deepEqual( + attrs.selectConstraint.value, + assertAttrs.selectConstraint, + 'selectConstraint is passed through to date-picker' + ); assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).val(), - '09/25/2015', - 'The "startDateValue" property text was set' + attrs.selectedDate.value, + assertAttrs.selectedDate, + 'selectedDate is passed through to date-picker' ); }); -test( 'endDateValue is accepted as a parameter', function( assert ) { +test( 'properties are properly passed to second sl-date-picker', function( assert ) { + const mockDatePickerTemplate = hbs` + {{testAttrs}} + `; - this.render( hbs` - {{sl-date-range-picker - endDateValue="12/25/2015" - }} - ` ); + this.registry.register( 'template:sl-date-picker', mockDatePickerTemplate ); - assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ).val(), - '12/25/2015', - 'The "endDateValue" property text was set' - ); -}); - -test( 'format is accepted as a parameter', function( assert ) { + this.registry.register( 'component:sl-date-picker', + Ember.Component.extend({ + layoutName: 'sl-date-picker', - this.render( hbs` - {{sl-date-range-picker - format="m/d/yyyy" - startDateValue="09/25/2015" - }} - ` ); + testAttrs: null, - const input = this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ); - input.triggerHandler( 'focus' ); + init() { + this._super( ...arguments ); - Ember.$( '.datepicker' ).last().find( '.datepicker-days' ).find( 'td' ).not( '.old' ).first().trigger( 'click' ); + const attrs = this.get( 'attrs' ); - assert.strictEqual( - input.val(), - '9/1/2015', - 'The selected date was formatted based on the "format" property' + this.set( 'testAttrs', JSON.stringify( attrs ) ); + } + }) ); -}); -test( 'minDate is accepted as a parameter', function( assert ) { + const placeholder = '__endPlaceholder__'; + const format = 'YYYY+MM-DD'; + const selectConstraint = { + start: window.moment( [ 2015, 0, 1 ] ), + end: window.moment( [ 2015, 0, 5 ] ) + }; + const selectedDate = window.moment( [ 2015, 0, 1 ] ); + + this.set( 'placeholder', placeholder ); + this.set( 'format', format ); + this.set( 'selectConstraint', selectConstraint ); + this.set( 'selectedDate', selectedDate ); this.render( hbs` {{sl-date-range-picker - minDate="09/15/2015" - startDateValue="09/25/2015" + endDatePlaceholder=placeholder + format=format + selectConstraint=selectConstraint + endDate=selectedDate }} ` ); - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).triggerHandler( 'focus' ); + const testAttrs = { + placeholder: placeholder, + format: format, + selectConstraint: selectConstraint, + selectedDate: selectedDate + }; - assert.strictEqual( - Ember.$( '.datepicker' ).last().find( '.datepicker-days' ).find( 'td' ).not( '.disabled' ).first().text(), - '15', - 'The "minDate" was set correctly' - ); -}); - -test( 'maxDate is accepted as a parameter', function( assert ) { - - this.render( hbs` - {{sl-date-range-picker - maxDate="09/28/2015" - endDateValue="09/25/2015" - }} - ` ); + const assertAttrs = JSON.parse( JSON.stringify( testAttrs ) ); - this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ).triggerHandler( 'focus' ); + const attrs = JSON.parse( this.$( '>:first-child' ).find( 'span.testAttrs' ).last().text() ); assert.strictEqual( - Ember.$( '.datepicker' ).last().find( '.datepicker-days' ).find( 'td' ).not( '.disabled' ).last().text(), - '28', - 'The "maxDate" was set correctly' + attrs.placeholder.value, + assertAttrs.placeholder, + 'placeholder is passed through to date-picker' ); -}); - -test( 'Selected day is set in the start date input field', function( assert ) { - - this.render( hbs` - {{sl-date-range-picker - startDateValue="09/25/2015" - }} - ` ); - - const input = this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ); - input.triggerHandler( 'focus' ); - - Ember.$( '.datepicker' ).last().find( '.datepicker-days' ).find( 'td' ).not( '.old' ).first().trigger( 'click' ); assert.strictEqual( - input.val(), - '09/01/2015', - 'The selected day is set in the input field' + attrs.format.value, + assertAttrs.format, + 'format is passed through to date-picker' ); -}); - -test( 'Selected day is set in the end date input field', function( assert ) { - this.render( hbs` - {{sl-date-range-picker - endDateValue="09/25/2015" - }} - ` ); - - const input = this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ); - input.triggerHandler( 'focus' ); - Ember.$( '.datepicker' ).last().find( '.datepicker-days' ).find( 'td' ).not( '.old' ).first().trigger( 'click' ); + assert.deepEqual( + attrs.selectConstraint.value, + assertAttrs.selectConstraint, + 'selectConstraint is passed through to date-picker' + ); assert.strictEqual( - input.val(), - '09/01/2015', - 'The selected day is set in the input field' + attrs.selectedDate.value, + assertAttrs.selectedDate, + 'selectedDate is passed through to date-picker' ); }); -skip( '"startDateValue" cannot be less than "minDate"', function( assert ) { +test( 'label is accepted as a parameter', function( assert ) { this.render( hbs` {{sl-date-range-picker - minDate="09/28/2015" - startDateValue="09/25/2015" + label="lorem ipsum" }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).val(), - '09/28/2015', - 'The "startDateValue" is not less than the "minDate"' + this.$( '>:first-child' ).find( 'label' ).html(), + 'lorem ipsum', + 'The "label" property text was set' + ); + + assert.strictEqual( + this.$( '>:first-child' ).find( 'label' ).prop( 'for' ), + this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).prop( 'id' ), + '"label for" property has the correct value' ); }); -skip( '"endDateValue" cannot be more than "maxDate"', function( assert ) { +test( 'helpText is accepted as a parameter', function( assert ) { this.render( hbs` {{sl-date-range-picker - maxDate="09/25/2015" - endDateValue="09/28/2015" + helpText="This is helpful" }} ` ); assert.strictEqual( - this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ).val(), - '09/25/2015', - 'The "endDateValue" is not more than the "maxDate"' + this.$( '>:first-child' ).find( '.help-block' ).html(), + 'This is helpful', + 'The "helpText" property text was set' ); }); -skip( '"endDateValue" cannot be less than "startDateValue"', function( assert ) { +test( 'Change focus to end date input upon start date selection', function( assert ) { + assert.expect( 1 ); - this.render( hbs` - {{sl-date-range-picker - startDateValue="09/25/2015" - endDateValue="09/20/2015" - }} - ` ); + const done = assert.async(); - assert.notEqual( - this.$( '>:first-child' ).find( '.sl-daterange-end-date' ).find( 'input' ).val(), - '09/20/2015', - 'The "endDateValue" is not less than the "startDateValue"' - ); -}); + const mockFocus = function() { + assert.ok( + true, + 'focus was given to the end date input' + ); -skip( '"startDateValue" cannot be more than "endDateValue"', function( assert ) { + done(); + }; + + this.set( 'mock', function() { + return { focus: mockFocus }; + } ); this.render( hbs` {{sl-date-range-picker - startDateValue="09/25/2015" - endDateValue="09/20/2015" + $=mock }} ` ); - assert.notEqual( - this.$( '>:first-child' ).find( '.sl-daterange-start-date' ).find( 'input' ).val(), - '09/25/2015', - 'The "startDateValue" is not more than the "endDateValue"' - ); + const startDatePicker = this.$( '>:first-child' ).find( '.sl-daterange-start-date' ); + + startDatePicker.find( 'input' ).trigger( 'focusin' ); + startDatePicker.find( 'td.day:first' ).click(); }); diff --git a/tests/unit/components/sl-calendar-day-test.js b/tests/unit/components/sl-calendar-day-test.js index ce336472..b1d623e1 100644 --- a/tests/unit/components/sl-calendar-day-test.js +++ b/tests/unit/components/sl-calendar-day-test.js @@ -1,4 +1,3 @@ -import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import globalLibraries from '../../helpers/sl/synchronous/global-libraries'; @@ -6,114 +5,87 @@ moduleForComponent( 'sl-calendar-day', 'Unit | Component | sl calendar day', { unit: true }); -test( 'Default state of calendar-day is not active, new or old', function( assert ) { +test( 'Default property values', function( assert ) { const component = this.subject(); assert.strictEqual( component.get( 'active' ), false, - 'Default component is not active' + 'active is false by default' ); assert.strictEqual( - this.$().hasClass( 'active' ), - false, - 'Default component does not have "active" class' + component.get( 'ariaRole' ), + 'gridcell', + 'ariaRole is "gridcell" by default' ); assert.strictEqual( - component.get( 'new' ), - false, - 'Default component is not "new"' + component.get( 'date' ), + null, + 'date is null by default' ); - assert.strictEqual( - this.$().hasClass( 'new' ), - false, - 'Default component does not have "new" class' + assert.deepEqual( + component.get( 'events' ), + [], + 'events is an empty array by default' ); assert.strictEqual( - component.get( 'old' ), + component.get( 'focused' ), false, - 'Default component is not "old"' + 'focused is false by default' ); assert.strictEqual( - this.$().hasClass( 'old' ), - false, - 'Default component does not have "old" class' - ); -}); - -test( 'Active state is applied correctly', function( assert ) { - const component = this.subject({ active: true }); - - assert.ok( - component.get( 'active' ), - 'Component is set to active state' - ); - - assert.ok( - this.$().hasClass( 'active' ), - 'Component element has class "active"' - ); -}); - -test( 'New state is applied correctly', function( assert ) { - const component = this.subject({ 'new': true }); - - assert.ok( component.get( 'new' ), - 'Component is set to new state' - ); - - assert.ok( - this.$().hasClass( 'new' ), - 'Component element has class "new"' + false, + 'new is false by default' ); -}); - -test( 'Old state is applied correctly', function( assert ) { - const component = this.subject({ old: true }); - assert.ok( + assert.strictEqual( component.get( 'old' ), - 'Component is set to old state' - ); - - assert.ok( - this.$().hasClass( 'old' ), - 'Component element has class "old"' + false, + 'old is false by default' ); -}); - -test( 'Property "day" populates component content', function( assert ) { - this.subject({ day: 42 }); assert.strictEqual( - Ember.$.trim( this.$().text() ), - '42', - '"day" value is set to element content' + component.get( 'restricted' ), + false, + 'restricted is false by default' ); }); test( 'Action bindings sends action with expected day content', function( assert ) { - assert.expect( 1 ); + assert.expect( 2 ); const done = assert.async(); - const dayContent = { day: 42 }; + const events = [ + { + startDate: window.moment( [ 2015, 0, 1 ] ) + } + ]; + + const currentDate = window.moment( [ 2014, 1, 4 ] ); this.subject({ action: 'test', - content: dayContent, + events: events, + date: currentDate, targetObject: { - test( content ) { + test( date, eventData ) { + assert.strictEqual( + date, + currentDate, + 'Test action fired with proper date' + ); + assert.strictEqual( - content, - dayContent, - 'Test action fired with expected value' + eventData, + events, + 'Test action fired with expected events' ); done(); @@ -124,6 +96,64 @@ test( 'Action bindings sends action with expected day content', function( assert this.$().trigger( 'click' ); }); +test( 'Observer keys are correct', function( assert ) { + const component = this.subject(); + + const focusKeys = [ + 'tabIndex' + ]; + + assert.deepEqual( + component.focus.__ember_observes__, + focusKeys, + 'Observer keys are correct for focus()' + ); +}); + +test( 'Dependent keys are correct', function( assert ) { + const component = this.subject(); + + const ariaSelectedDependentKeys = [ + 'active' + ]; + + const hasEventsDependentKeys = [ + 'events' + ]; + + const isTodayDependentKeys = [ + 'date' + ]; + + const tabIndexDependentKeys = [ + 'focused' + ]; + + assert.deepEqual( + component.ariaSelected._dependentKeys, + ariaSelectedDependentKeys, + 'Dependent keys are correct for ariaSelected()' + ); + + assert.deepEqual( + component.hasEvents._dependentKeys, + hasEventsDependentKeys, + 'Dependent keys are correct for hasEvents()' + ); + + assert.deepEqual( + component.isToday._dependentKeys, + isTodayDependentKeys, + 'Dependent keys are correct for isToday()' + ); + + assert.deepEqual( + component.tabIndex._dependentKeys, + tabIndexDependentKeys, + 'Dependent keys are correct for tabIndex()' + ); +}); + test( 'There are no references to Ember.$, $ or jQuery', function( assert ) { globalLibraries.setupSpies(); diff --git a/tests/unit/components/sl-calendar-month-test.js b/tests/unit/components/sl-calendar-month-test.js index 2d41123f..06efb3e8 100644 --- a/tests/unit/components/sl-calendar-month-test.js +++ b/tests/unit/components/sl-calendar-month-test.js @@ -8,33 +8,19 @@ moduleForComponent( } ); -test( 'Default state is inactive', function( assert ) { +test( 'Default property values', function( assert ) { const component = this.subject(); assert.strictEqual( component.get( 'active' ), false, - 'Component is not active' + 'active is false by default' ); assert.strictEqual( - this.$().hasClass( 'active' ), - false, - 'Component does not have "active" class' - ); -}); - -test( 'Active state is set correctly', function( assert ) { - const component = this.subject({ active: true }); - - assert.ok( - component.get( 'active' ), - 'Component is active' - ); - - assert.ok( - this.$().hasClass( 'active' ), - '"active" class is present' + component.get( 'month' ), + null, + 'month is null by default' ); }); @@ -58,40 +44,6 @@ test( 'Action binding sends action with month', function( assert ) { this.$().trigger( 'click' ); }); -test( 'Short name property is invalid without month', function( assert ) { - const component = this.subject(); - - assert.strictEqual( - component.get( 'shortName' ), - 'Invalid date', - 'Invalid month results in invalid shortName' - ); -}); - -test( 'Short name property is defined with valid month', function( assert ) { - const component = this.subject({ month: 1 }); - - assert.strictEqual( - component.get( 'shortName' ), - 'Jan', - 'Valid shortName with valid month' - ); -}); - -test( 'Dependent keys are correct', function( assert ) { - const component = this.subject(); - - const shortNameDependentKeys = [ - 'month' - ]; - - assert.deepEqual( - component.shortName._dependentKeys, - shortNameDependentKeys, - 'Dependent keys are correct for shortName()' - ); -}); - test( 'There are no references to Ember.$, $ or jQuery', function( assert ) { globalLibraries.setupSpies(); diff --git a/tests/unit/components/sl-calendar-test.js b/tests/unit/components/sl-calendar-test.js index 532e9698..25f43726 100755 --- a/tests/unit/components/sl-calendar-test.js +++ b/tests/unit/components/sl-calendar-test.js @@ -2,9 +2,27 @@ import Ember from 'ember'; import ClassPrefix from 'sl-ember-components/mixins/class-prefix'; import { moduleForComponent, test } from 'ember-qunit'; import sinon from 'sinon'; -import { skip } from 'qunit'; import globalLibraries from '../../helpers/sl/synchronous/global-libraries'; +const testEvents = Ember.A([ + { + startDate: window.moment( [ 2015, 2, 12 ] ), + title: 'Event 1 Today!' + }, + { + startDate: window.moment( [ 2015, 2, 12 ] ), + title: 'Event 2 Today!' + }, + { + startDate: window.moment( [ 2015, 2, 17 ] ), + title: 'Event 3 Today!' + }, + { + startDate: window.moment( [ 2015, 2, 20 ] ), + title: 'Event 1 Another Day!' + } +]); + moduleForComponent( 'sl-calendar', 'Unit | Component | sl calendar', { needs: [ 'component:sl-calendar-day', @@ -26,13 +44,15 @@ test( 'Default property values are set correctly', function( assert ) { const component = this.subject(); assert.deepEqual( - component.get( 'content' ), + component.get( 'events' ), [], - 'content: []' + 'content is [] by default' ); - const today = new Date(); - const month = today.getMonth() + 1; + assert.notOk( + component.get( 'fixedWeekCount' ), + 'fixedWeekCount is false by default' + ); assert.strictEqual( component.get( 'componentClass' ), @@ -40,279 +60,500 @@ test( 'Default property values are set correctly', function( assert ) { '"componentClass" property defaults to calendar' ); - assert.strictEqual( - component.get( 'currentMonth' ), - month, - `currentMonth: ${month}` + assert.ok( + component.get( 'focusable' ), + 'focusable is true by default' ); - const year = today.getFullYear(); + assert.notOk( + component.get( 'hasFocus' ), + 'hasFocus is false by default' + ); assert.strictEqual( - component.get( 'currentYear' ), - year, - `currentYear: ${year}` + component.get( 'locale' ), + 'en', + 'locale is "en" by default' + ); + + assert.deepEqual( + component.get( 'selectConstraint' ), + { + start: null, + end: null + }, + 'selectConstraint is an object with start and end properties by default' ); assert.strictEqual( - component.get( 'dateValuePath' ), - 'date', - 'dateValuePath: "date"' + component.get( 'selectedDate' ), + null, + 'selectedDate is null by default' ); assert.strictEqual( - component.get( 'locale' ), - 'en', - 'locale: "en"' + component.get( 'showControls' ), + true, + 'showControls is true by default' ); assert.strictEqual( - component.get( 'locked' ), - false, - 'locked: false' + component.get( 'showingMonth' ), + null, + 'showingMonth is null by default' + ); + + assert.ok( + window.moment().isSame( component.get( 'viewingDate' ), 'day' ), + 'viewingDate is a moment object representing today by default' ); assert.strictEqual( component.get( 'viewMode' ), 'days', - 'viewMode: "days"' + 'viewMode is "days" by default' ); }); -test( 'Lock mode prevents changing state', function( assert ) { - const component = this.subject({ locked: true }); +test( 'setDate method sets the viewingDate and selectedDate', function( assert ) { + const selectConstraint = { + start: window.moment( [ 2014, 2, 1 ] ) + }; - const initialDecadeStart = component.get( 'decadeStart' ); - component.send( 'changeDecade', 1 ); - assert.strictEqual( - initialDecadeStart, - component.get( 'decadeStart' ), - 'Value decadeStart is unchanged from actions.changeDecade' + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ), + selectConstraint: selectConstraint + }); + + const newDate = window.moment( [ 2014, 3, 3 ] ); + + component.setDate( newDate ); + + assert.ok( + component.get( 'selectedDate' ).isSame( newDate, 'day' ), + 'selectedDate was set to the new date' ); - const initialMonth = component.get( 'currentMonth' ); - component.send( 'changeMonth', 1 ); + assert.ok( + component.get( 'viewingDate' ).isSame( newDate, 'day' ), + 'viewingDate was set to the new date' + ); + + const tooEarlyDate = window.moment( [ 2014, 1, 1 ] ); + + component.setDate( tooEarlyDate ); + + assert.notOk( + component.get( 'selectedDate' ).isSame( tooEarlyDate, 'day' ), + 'selectedDate was not set to the new date' + ); + + assert.notOk( + component.get( 'viewingDate' ).isSame( tooEarlyDate, 'day' ), + 'viewingDate was not set to the new date' + ); +}); + +test( 'setMonth method modifies the viewingDate', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); + + const newMonth = 4; + + component.setMonth( newMonth ); + assert.strictEqual( - initialMonth, - component.get( 'currentMonth' ), - 'Value currentMonth is unchanged from actions.changeMonth' + component.get( 'viewingDate' ).month() + 1, + newMonth, + 'view set to the selected month' ); +}); + +test( 'setYear method modifies the viewingDate', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); + + const newYear = 2013; + + component.setYear( newYear ); - const initialYear = component.get( 'currentYear' ); - component.send( 'changeYear', 1 ); assert.strictEqual( - initialYear, - component.get( 'currentYear' ), - 'Value currentYear is unchanged from actions.changeYear' + component.get( 'viewingDate' ).year(), + newYear, + 'view set to the selected year' ); +}); + +test( 'calendar title is correctly generated for each viewMode', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 2, 15 ] ), + viewMode: 'days' + }); - component.send( 'setMonth', initialMonth + 1 ); assert.strictEqual( - initialMonth, - component.get( 'currentMonth' ), - 'Value currentMonth is unchanged from actions.setMonth' + component.get( 'calendarTitle' ), + 'March 2015', + 'Calendar title is correct in days view' ); - const initialViewMode = component.get( 'viewMode' ); - component.send( 'setView', 'something' ); + component.set( 'viewMode', 'months' ); + assert.strictEqual( - initialViewMode, - component.get( 'viewMode' ), - 'Value viewMode is unchanged from actions.setView' + component.get( 'calendarTitle' ), + '2015', + 'Calendar title is correct in days view' ); - component.send( 'setYear', initialYear + 1 ); + component.set( 'viewMode', 'years' ); + assert.strictEqual( - initialYear, - component.get( 'currentYear' ), - 'Value currentYear is unchanged from actions.setYear' + component.get( 'calendarTitle' ), + '2010 - 2019', + 'Calendar title is correct in days view' ); }); -skip( 'locale - Setting causes default of en (English) to be updated', function() { -}); +test( 'shortWeekDayNames - returns array of day names in short name format (Su, Mo, Tu...)', function( assert ) { + const component = this.subject({}); -skip( 'currentMonthString - current month string formatted as full word (January, November, ...)', function() { + assert.deepEqual( + component.get( 'shortWeekDayNames' ), + [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ], + 'short week day names are generated correctly' + ); }); -skip( 'contentDates - Verify dates array', function() { -}); +test( 'activeDateChange - active property is set on the correct day object', function( assert ) { + const startingSelected = window.moment( [ 2015, 0, 15 ] ); -skip( 'setYear - viewMode and currentYear set correctly', function() { -}); + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ), + selectedDate: startingSelected + }); -skip( 'setView - viewMode set correctly', function() { -}); + function findDay( dateNeedle ) { + const weeksInMonthView = component.get( 'weeksInMonthView' ); + + for ( let week = 0; week < weeksInMonthView.length; week++ ) { + for ( let day = 0; day < weeksInMonthView[ week ].length; day++ ) { + if ( weeksInMonthView[ week ][ day ].date.isSame( dateNeedle, 'day' ) ) { + return weeksInMonthView[ week ][ day ]; + } + } + } + } + + assert.ok( + findDay( startingSelected ).active, + 'the correct day is set to "active"' + ); -skip( 'setMonth - currentMonth and viewMode set correctly', function() { + const newSelected = window.moment( [ 2015, 1, 12 ] ); + + component.set( 'viewingDate', newSelected ); + component.set( 'selectedDate', newSelected ); + + assert.ok( + findDay( newSelected ).active, + 'the correct day is set to "active"' + ); }); -test( 'changeDecade action works', function( assert ) { - const component = this.subject({ currentYear: 2015 }); +test( 'applyEvents - events are set on each day object', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 2, 1 ] ), + events: testEvents + }); + + function findDay( dateNeedle ) { + const weeksInMonthView = component.get( 'weeksInMonthView' ); + + for ( let week = 0; week < weeksInMonthView.length; week++ ) { + for ( let day = 0; day < weeksInMonthView[ week ].length; day++ ) { + if ( weeksInMonthView[ week ][ day ].date.isSame( dateNeedle, 'day' ) ) { + return weeksInMonthView[ week ][ day ]; + } + } + } + } assert.strictEqual( - component.get( 'decadeStart' ), - 2010, - 'Initial decadeStart is expected value' + findDay( testEvents[ 0 ].startDate ).events.length, + 2, + 'event day has 3 events as expected' ); assert.strictEqual( - component.get( 'decadeEnd' ), - 2019, - 'Initial decadeEnd is expected value' + findDay( testEvents[ 3 ].startDate ).events.length, + 1, + 'event day has 1 event as expected' ); +}); - Ember.run( () => { - component.send( 'changeDecade', 1 ); +test( 'focusedDateChange - focused property is set on the correct day object', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) }); - assert.strictEqual( - component.get( 'decadeStart' ), - 2020, - 'Altered decadeStart is expected value' + const newViewing = window.moment( [ 2015, 0, 15 ] ); + + component.set( 'viewingDate', newViewing ); + + function findDay( dateNeedle ) { + const weeksInMonthView = component.get( 'weeksInMonthView' ); + + for ( let week = 0; week < weeksInMonthView.length; week++ ) { + for ( let day = 0; day < weeksInMonthView[ week ].length; day++ ) { + if ( weeksInMonthView[ week ][ day ].date.isSame( dateNeedle, 'day' ) ) { + return weeksInMonthView[ week ][ day ]; + } + } + } + } + + assert.ok( + findDay( newViewing ).focused, + 'the correct day is set to "focused"' ); +}); + +test( 'updateShowingMonth - showingMonth is updated', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); + + const newMonth = 5; + + component.set( 'viewingDate', window.moment( [ 2015, newMonth, 1 ] ) ); assert.strictEqual( - component.get( 'decadeEnd' ), - 2029, - 'Altered decadeEnd is expected value' + component.get( 'showingMonth' ), + newMonth, + 'showingMonth updated correctly' ); }); -test( 'changeMonth action works', function( assert ) { - const component = this.subject({ currentMonth: 1 }); +test( 'changeDecade action works', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); + + Ember.run( () => { + component.send( 'changeDecade', 1 ); + }); assert.strictEqual( - component.get( 'currentMonth' ), - 1, - 'Initial currentMonth is expected value' + component.get( 'viewingDate' ).year(), + 2025, + 'Altered viewingDate is expected value' ); +}); + +test( 'changeMonth action works', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); Ember.run( () => { component.send( 'changeMonth', 1 ); }); assert.strictEqual( - component.get( 'currentMonth' ), - 2, - 'Altered currentMonth is expected value' + component.get( 'viewingDate' ).month(), + 1, + 'Altered viewingDate is expected value' ); }); test( 'changeYear action works', function( assert ) { - const component = this.subject({ currentYear: 2015 }); - - assert.strictEqual( - component.get( 'currentYear' ), - 2015, - 'Initial currentYear is expected value' - ); + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); Ember.run( () => { component.send( 'changeYear', 1 ); }); assert.strictEqual( - component.get( 'currentYear' ), + component.get( 'viewingDate' ).year(), 2016, - 'Altered currentYear is expected value' + 'Altered viewingDate is expected value' ); }); +test( 'selectDate action works', function( assert ) { + assert.expect( 2 ); + + const done = assert.async(); + + const selectedDate = window.moment( [ 2015, 0, 1 ] ); + const events = [ + { + startDate: window.moment( [ 2015, 1, 4 ] ) + } + ]; -test( 'Decrementing month from January causes year to decrement', function( assert ) { const component = this.subject({ - currentMonth: 1, - currentYear: 2015 + action: 'test', + events: events, + date: selectedDate, + targetObject: { + test( sentDate, sentEvents ) { + assert.strictEqual( + sentDate, + selectedDate, + 'date value is as expected' + ); + + assert.deepEqual( + sentEvents, + events, + 'events are sent as expected' + ); + + done(); + } + } }); - Ember.run( () => { - component.send( 'changeMonth', -1 ); + component.send( 'selectDate', selectedDate, events ); +}); + +test( 'selectMonth action works', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ), + $: function() { + return { + focus: sinon.spy() + }; + } }); + const newMonth = 8; + + component.send( 'selectMonth', newMonth ); + assert.strictEqual( - component.get( 'currentYear' ), - 2014, - 'currentYear is decremented' + component.get( 'viewMode' ), + 'days', + 'viewMode is switched to "days" when a month is selected' + ); + + assert.strictEqual( + component.get( 'viewingDate' ).month() + 1, + newMonth, + 'viewingDate was changed to the selected month' ); }); -test( 'Incrementing month from December causes year to increment', function( assert ) { +test( 'selectYear action works', function( assert ) { const component = this.subject({ - currentMonth: 12, - currentYear: 2015 + viewingDate: window.moment( [ 2015, 0, 1 ] ), + $: function() { + return { + focus: sinon.spy() + }; + } }); - Ember.run( () => { - component.send( 'changeMonth', 1 ); - }); + const newYear = 2013; + + component.send( 'selectYear', newYear ); assert.strictEqual( - component.get( 'currentYear' ), - 2016, - 'currentYear is incremented' + component.get( 'viewMode' ), + 'months', + 'viewMode is switched to "months" when a year is selected' ); -}); -test( 'daysInMonth - Number of days in month is set correctly', function( assert ) { - const daysInMonthStub = sinon.stub().returns( 31 ); + assert.strictEqual( + component.get( 'viewingDate' ).year(), + newYear, + 'viewingDate was changed to the selected year' + ); +}); - const momentStub = sinon.stub( window, 'moment' ) - .returns( { daysInMonth: daysInMonthStub } ); +test( 'setView action works', function( assert ) { + const focusSpy = sinon.spy(); const component = this.subject({ - currentMonth: 12, - currentYear: 2015 + viewingDate: window.moment( [ 2015, 0, 1 ] ), + $: function() { + return { + focus: focusSpy + }; + } }); assert.strictEqual( - component.get( 'daysInMonth' ), - 31, - '"daysInMonth" is set correctly' + component.get( 'viewMode' ), + 'days', + 'viewMode is "days"' ); - assert.deepEqual( - momentStub.args[ 0 ][ 0 ], - [ - component.get( 'currentYear' ), - component.get( 'currentMonth' ) - 1 - ], - 'Moment called with currentYear and currentMonth' + component.send( 'setView', 'months' ); + + assert.strictEqual( + component.get( 'viewMode' ), + 'months', + 'viewMode is "months"' ); - window.moment.restore(); -}); + component.send( 'setView', 'years' ); -test( 'Decade range is correctly based on currentYear', function( assert ) { - const component = this.subject({ currentYear: 2023 }); + assert.strictEqual( + component.get( 'viewMode' ), + 'years', + 'viewMode is "years"' + ); + + component.send( 'setView', 'days' ); assert.strictEqual( - component.get( 'decadeStart' ), - 2020, - 'decadeStart is expected value' + component.get( 'viewMode' ), + 'days', + 'viewMode is "days"' ); assert.strictEqual( - component.get( 'decadeEnd' ), - 2029, - 'decadeEnd is expected value' + focusSpy.callCount, + 3, + 'component was focused 3 times' ); }); -test( 'Months for year view are generated validly', function( assert ) { - const component = this.subject(); +test( 'Decrementing month from January causes year to decrement', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 0, 1 ] ) + }); + + Ember.run( () => { + component.send( 'changeMonth', -1 ); + }); assert.strictEqual( - component.get( 'monthsInYearView' ).length, - 12, - 'Twelve months are created' + component.get( 'viewingDate' ).year(), + 2014, + 'viewingDate is the appropriate year' ); }); -skip( 'monthsInYearView - active month set correctly', function() { - /* Expand 'Months for year view are generated validly' test to also - check that the active month is set correctly. - */ +test( 'Incrementing month from December causes year to increment', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 11, 1 ] ) + }); + + Ember.run( () => { + component.send( 'changeMonth', 1 ); + }); + + assert.strictEqual( + component.get( 'viewingDate' ).year(), + 2016, + 'viewingDate is the appropriate year' + ); }); test( 'View mode is settable to "days"', function( assert ) { @@ -372,402 +613,205 @@ test( 'View mode is settable to "years"', function( assert ) { ); }); -test( 'weeksInMonthView - set previousMonth when: currentMonth is anything other than 1', function( assert ) { - const daysInMonthStub = sinon.stub().returns( 31 ); - - const momentStub = sinon.stub( window, 'moment' ) - .returns( { daysInMonth: daysInMonthStub } ); - - const weeksInMonthView = [ - [ - { - 'active': false, - 'content': null, - 'day': 30, - 'new': false, - 'old': true - }, - { - 'active': false, - 'content': null, - 'day': 31, - 'new': false, - 'old': true - }, - { - 'active': false, - 'content': null, - 'day': 1, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 2, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 3, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 4, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 5, - 'new': false, - 'old': false - } - ], - [ - { - 'active': false, - 'content': null, - 'day': 6, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 7, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 8, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 9, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 10, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 11, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 12, - 'new': false, - 'old': false - } - ], - [ - { - 'active': false, - 'content': null, - 'day': 13, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 14, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 15, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 16, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 17, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 18, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 19, - 'new': false, - 'old': false - } - ], - [ - { - 'active': false, - 'content': null, - 'day': 20, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 21, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 22, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 23, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 24, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 25, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 26, - 'new': false, - 'old': false - } - ], - [ - { - 'active': false, - 'content': null, - 'day': 27, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 28, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 29, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 30, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 31, - 'new': false, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 1, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 2, - 'new': true, - 'old': false - } - ], - [ - { - 'active': false, - 'content': null, - 'day': 3, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 4, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 5, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 6, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 7, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 8, - 'new': true, - 'old': false - }, - { - 'active': false, - 'content': null, - 'day': 9, - 'new': true, - 'old': false - } - ] - ]; +test( 'Weeks for month view are assembled correctly', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 1, 1 ] ) + }); + + let allWeeks = component.get( 'weeksInMonthView' ); + let flattenedWeeks = []; + + for ( let weekGroup = 0; weekGroup < allWeeks.length; weekGroup++ ) { + for ( let week = 0; week < allWeeks[ weekGroup ].length; week++ ) { + flattenedWeeks.push( allWeeks[ weekGroup ][ week ] ); + } + } + + assert.strictEqual( + flattenedWeeks.length, + 28, + 'Twenty eight days were generated for the month view' + ); + + component.set( 'fixedWeekCount', true ); + + allWeeks = component.get( 'weeksInMonthView' ); + flattenedWeeks = []; + for ( let weekGroup = 0; weekGroup < allWeeks.length; weekGroup++ ) { + for ( let week = 0; week < allWeeks[ weekGroup ].length; week++ ) { + flattenedWeeks.push( allWeeks[ weekGroup ][ week ] ); + } + } + + assert.strictEqual( + flattenedWeeks.length, + 42, + 'Forty two days were generated for the month view' + ); +}); + +test( 'Weeks for month view are assembled with correct properties', function( assert ) { const component = this.subject({ - currentMonth: 12, - currentYear: 2015 + viewingDate: window.moment( [ 2016, 2, 1 ] ), + selectedDate: window.moment( [ 2016, 2, 16 ] ), + fixedWeekCount: true }); - assert.deepEqual( - component.get( 'weeksInMonthView' ), - weeksInMonthView, - '"weeksInMonthView" is set correctly' + const allWeeks = component.get( 'weeksInMonthView' ); + const flattenedWeeks = []; + + for ( let weekGroup = 0; weekGroup < allWeeks.length; weekGroup++ ) { + for ( let week = 0; week < allWeeks[ weekGroup ].length; week++ ) { + flattenedWeeks.push( allWeeks[ weekGroup ][ week ] ); + } + } + + const firstTwo = flattenedWeeks.slice( 0, 1 ); + const lastTwo = flattenedWeeks.slice( 33 ); + + assert.ok( + firstTwo.every( ( day ) => { + return day.old; + }), + 'Expected days have the old property set' ); - assert.deepEqual( - momentStub.args[ 0 ][ 0 ], - [ - component.get( 'currentYear' ), - component.get( 'currentMonth' ) - 1 - ], - 'Moment called with currentYear and currentMonth' + assert.ok( + lastTwo.every( ( day ) => { + return day.new; + }), + 'Expected days have the new property set' ); - window.moment.restore(); + assert.ok( + flattenedWeeks[ 17 ].active, + 'Expected day has active property set' + ); }); -skip( 'weeksInMonthView - set previousMonth when: currentMonth equals 1', function() { -}); +test( 'Months for year view are assembled correctly', function( assert ) { + const component = this.subject({ + viewingDate: window.moment( [ 2015, 2, 1 ] ), + selectedDate: window.moment( [ 2015, 2, 1 ] ) + }); -skip( 'weeksInMonthView - set nextMonth when: currentMonth is anything other than 12', function() { -}); + const allMonths = component.get( 'monthsInYearView' ); + const flattenedMonths = []; -skip( 'weeksInMonthView - when firstWeekdayOfCurrentMonth is 0 (Sunday)', function() { -}); + for ( let monthGroup = 0; monthGroup < allMonths.length; monthGroup++ ) { + for ( let month = 0; month < allMonths[ monthGroup ].length; month++ ) { + flattenedMonths.push( allMonths[ monthGroup ][ month ] ); + } + } -skip( 'shortWeekDayNames - returns array of day names in short name format (Su, Mo, Tu...)', function() { + assert.strictEqual( + flattenedMonths.length, + 12, + 'Twelve months were generated for the year view' + ); + + assert.ok( + flattenedMonths[2].active, + 'Expected month is set as active' + ); }); test( 'Years for decade view are assembled correctly', function( assert ) { - const component = this.subject(); + const component = this.subject({ + viewingDate: window.moment( [ 2015, 2, 1 ] ), + selectedDate: window.moment( [ 2015, 2, 1 ] ) + }); + + const allYears = component.get( 'yearsInDecadeView' ); + const flattenedYears = []; + + for ( let yearGroup = 0; yearGroup < allYears.length; yearGroup++ ) { + for ( let year = 0; year < allYears[ yearGroup ].length; year++ ) { + flattenedYears.push( allYears[ yearGroup ][ year ] ); + } + } assert.strictEqual( - component.get( 'yearsInDecadeView' ).length, + flattenedYears.length, 12, 'Twelve years were generated for the decade view' ); + + assert.ok( + flattenedYears[6].active, + 'Expected year is set as active' + ); }); -test( 'Dependent keys are correct', function( assert ) { +test( 'Observer keys are correct', function( assert ) { const component = this.subject(); - const contentDatesDependentKeys = [ - 'content', - 'dateValuePath' + const activeDateChangeKeys = [ + 'selectedDate' ]; - const currentMonthStringDependentKeys = [ - 'currentMonth', - 'currentYear', - 'locale' + const applyEventsKeys = [ + 'events', + 'weeksInMonthView' ]; - const daysInMonthDependentKeys = [ - 'currentMonth', - 'currentYear' + const focusedDateChangeKeys = [ + 'viewingDate' ]; - const decadeEndDependentKeys = [ - 'decadeStart' + const updateShowingMonthKeys = [ + 'viewingDate' ]; - const decadeStartDependentKeys = [ - 'currentYear' + assert.deepEqual( + component.activeDateChange.__ember_observes__, + activeDateChangeKeys, + 'Observer keys are correct for activeDateChange()' + ); + + assert.deepEqual( + component.applyEvents.__ember_observes__, + applyEventsKeys, + 'Observer keys are correct for applyEvents()' + ); + + assert.deepEqual( + component.focusedDateChange.__ember_observes__, + focusedDateChangeKeys, + 'Observer keys are correct for focusedDateChange()' + ); + + assert.deepEqual( + component.updateShowingMonth.__ember_observes__, + updateShowingMonthKeys, + 'Observer keys are correct for updateShowingMonth()' + ); +}); + +test( 'Dependent keys are correct', function( assert ) { + const component = this.subject(); + + const calendarTitleDependentKeys = [ + 'viewingDate', + 'locale', + 'viewMode' ]; const monthsInYearViewDependentKeys = [ - 'contentDates', - 'currentYear' + 'viewingDate', + 'selectedDate', + 'locale' ]; const shortWeekDayNamesDependentKeys = [ 'locale' ]; + const tabIndexDependentKeys = [ + 'focusable' + ]; + const viewingDaysDependentKeys = [ 'viewMode' ]; @@ -781,46 +825,22 @@ test( 'Dependent keys are correct', function( assert ) { ]; const weeksInMonthViewDependentKeys = [ - 'contentDates', - 'currentMonth', - 'currentYear', - 'daysInMonth' + 'fixedWeekCount', + 'locale', + 'selectConstraint', + 'showingMonth', + 'viewingDays' ]; const yearsInDecadeViewDependentKeys = [ - 'contentDates', - 'decadeEnd', - 'decadeStart' + 'viewingDate', + 'selectedDate' ]; assert.deepEqual( - component.contentDates._dependentKeys, - contentDatesDependentKeys, - 'Dependent keys are correct for contentDates()' - ); - - assert.deepEqual( - component.currentMonthString._dependentKeys, - currentMonthStringDependentKeys, - 'Dependent keys are correct for currentMonthString()' - ); - - assert.deepEqual( - component.daysInMonth._dependentKeys, - daysInMonthDependentKeys, - 'Dependent keys are correct for daysInMonth()' - ); - - assert.deepEqual( - component.decadeEnd._dependentKeys, - decadeEndDependentKeys, - 'Dependent keys are correct for decadeEnd()' - ); - - assert.deepEqual( - component.decadeStart._dependentKeys, - decadeStartDependentKeys, - 'Dependent keys are correct for decadeStart()' + component.calendarTitle._dependentKeys, + calendarTitleDependentKeys, + 'Dependent keys are correct for calendarTitle()' ); assert.deepEqual( @@ -835,6 +855,12 @@ test( 'Dependent keys are correct', function( assert ) { 'Dependent keys are correct for shortWeekDayNames()' ); + assert.deepEqual( + component.tabIndex._dependentKeys, + tabIndexDependentKeys, + 'Dependent keys are correct for tabIndex()' + ); + assert.deepEqual( component.viewingDays._dependentKeys, viewingDaysDependentKeys, diff --git a/tests/unit/components/sl-calendar-year-test.js b/tests/unit/components/sl-calendar-year-test.js index 57bb3a18..8e0d941f 100644 --- a/tests/unit/components/sl-calendar-year-test.js +++ b/tests/unit/components/sl-calendar-year-test.js @@ -5,43 +5,25 @@ moduleForComponent( 'sl-calendar-year', 'Unit | Component | sl calendar year', { unit: true }); -test( 'Default state is not active, new, or old', function( assert ) { +test( 'Default property values', function( assert ) { const component = this.subject(); assert.strictEqual( component.get( 'active' ), false, - 'Default component is not active' + 'active is false by default' ); assert.strictEqual( component.get( 'new' ), false, - 'Default component is not in new state' + 'new is false by default' ); assert.strictEqual( component.get( 'old' ), false, - 'Default component is not in old state' - ); - - assert.strictEqual( - this.$().hasClass( 'active' ), - false, - 'Default rendered component does not have class "active"' - ); - - assert.strictEqual( - this.$().hasClass( 'new' ), - false, - 'Default rendered component does not have class "new"' - ); - - assert.strictEqual( - this.$().hasClass( 'old' ), - false, - 'Default rendered component does not have class "old"' + 'old is false by default' ); }); diff --git a/tests/unit/components/sl-date-picker-test.js b/tests/unit/components/sl-date-picker-test.js index 1e98acb5..0396425d 100755 --- a/tests/unit/components/sl-date-picker-test.js +++ b/tests/unit/components/sl-date-picker-test.js @@ -1,9 +1,7 @@ -import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import ClassPrefix from 'sl-ember-components/mixins/class-prefix'; import ComponentInputId from 'sl-ember-components/mixins/sl-component-input-id'; import TooltipEnabled from 'sl-ember-components/mixins/sl-tooltip-enabled'; -import sinon from 'sinon'; import globalLibraries from '../../helpers/sl/synchronous/global-libraries'; moduleForComponent( 'sl-date-picker', 'Unit | Component | sl date picker', { @@ -30,483 +28,118 @@ test( 'Expected Mixins are present', function( assert ) { test( 'Default properties are set correctly', function( assert ) { const component = this.subject(); - assert.equal( + assert.strictEqual( component.get( 'componentClass' ), 'date-picker', 'componentClass is set to date-picker' ); - assert.equal( - component.get( 'autoclose' ), + assert.strictEqual( + component.get( 'autoClose' ), true, - '"autoclose" default vaue is correct' - ); - - assert.equal( - component.get( 'calendarWeeks' ), - false, - '"calendarWeeks" default value is correct' - ); - - assert.equal( - component.get( 'clearBtn' ), - false, - '"clearBtn" default value is correct' + 'autoClose is true by default' ); assert.strictEqual( - component.get( 'componentClass' ), - 'date-picker', - 'componentClass is set to date-picker' - ); - - assert.deepEqual( - component.get( 'daysOfWeekDisabled' ), - [], - '"daysOfWeekDisabled" default value is correct' - ); - - assert.equal( component.get( 'disabled' ), false, - '"disabled" default value is correct' + 'disabled is false by default' ); - assert.equal( - component.get( 'endDate' ), + assert.strictEqual( + component.get( 'format' ), null, - '"endDate" default value is correct' + 'format is null by default' ); - assert.equal( - component.get( 'forceParse' ), - true, - '"forceParse" default value is correct' - ); - - assert.equal( - component.get( 'format' ), - 'mm/dd/yyyy', - '"forceParse" default value is correct' + assert.strictEqual( + component.get( 'hasFocus' ), + false, + 'hasFocus is false by default' ); - assert.equal( + assert.strictEqual( component.get( 'helpText' ), null, - '"helpText" default value is correct' + 'helpText is null by default' ); - assert.equal( - component.get( 'inputs' ), - null, - '"inputs" default value is correct' - ); - - assert.equal( - component.get( 'keyboardNavigation' ), - true, - '"keyboardNavigation" default value is correct' - ); - - assert.equal( + assert.strictEqual( component.get( 'label' ), null, - '"label" default value is correct' + 'label is null by default' ); - assert.equal( - component.get( 'language' ), + assert.strictEqual( + component.get( 'locale' ), 'en', - '"language" default value is correct' - ); - - assert.equal( - component.get( 'minViewMode' ), - 'days', - '"minViewMode" default value is correct' - ); - - assert.equal( - component.get( 'multidate' ), - false, - '"multidate" default value is correct' + 'locale is "en" by default' ); - assert.equal( - component.get( 'orientation' ), - 'auto', - '"orientation" default value is correct' - ); - - assert.equal( + assert.strictEqual( component.get( 'placeholder' ), null, - '"placeholder" default value is correct' - ); - - assert.equal( - component.get( 'startDate' ), - null, - '"startDate" default value is correct' - ); - - assert.equal( - component.get( 'startView' ), - 'month', - '"startView" default value is correct' - ); - - assert.equal( - component.get( 'todayBtn' ), - false, - '"todayBtn" default value is correct' - ); - - assert.equal( - component.get( 'todayHighlight' ), - false, - '"todayHighlight" default value is correct' - ); - - assert.equal( - component.get( 'value' ), - null, - '"value" default value is correct' - ); - - assert.equal( - component.get( 'weekStart' ), - 0, - '"weekStart" default value is correct' - ); -}); - -test( 'Event handlers are registered and unregistered', function( assert ) { - const spyOn = sinon.spy( Ember.$.fn, 'on' ); - const spyOff = sinon.spy( Ember.$.fn, 'off' ); - const component = this.subject(); - const input = this.$( 'input.date-picker' ); - - const matchElement = sinon.match( ( value ) => { - return value.get( 0 ) === input.get( 0 ); - }); - - this.render(); - - spyOn.reset(); - - component.trigger( 'didInsertElement' ); - - assert.ok( - spyOn.calledWith( component.namespaceEvent( 'changeDate' ) ), - 'on() was called with namespaced changeDate event' - ); - - assert.ok( - spyOn.calledOn( matchElement ), - 'on() was called on expected input' - ); - - spyOff.reset(); - - component.trigger( 'willClearRender' ); - - assert.ok( - spyOff.calledWith( component.namespaceEvent( 'changeDate' ) ), - 'off() was called with namespaced changeDate event' + 'placeholder is null by default' ); - assert.ok( - spyOff.calledOn( matchElement ), - 'off() was called on expected input' - ); - - Ember.$.fn.on.restore(); - Ember.$.fn.off.restore(); -}); - -test( 'Changing "autoclose" to non default value works as expected', function( assert ) { - const autoclose = false; - - const component = this.subject({ - autoclose: autoclose - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.autoclose, - autoclose - ); -}); - -test( 'Changing "calenderWeeks" to a non default value works as expected', function( assert ) { - const calendarWeeks = true; - - const component = this.subject({ - calendarWeeks: calendarWeeks - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.calendarWeeks, - calendarWeeks - ); -}); - -test( 'Changing "clearBtn" to a non default value works as expected', function( assert ) { - const clearBtn = true; - - const component = this.subject({ - clearBtn: clearBtn - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.clearBtn, - clearBtn - ); -}); - -test( 'Changing "daysOfWeekDisabled" to a non default value works as expected', function( assert ) { - const daysOfWeek = [ 1, 2, 3 ]; - - const component = this.subject({ - daysOfWeekDisabled: daysOfWeek - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.daysOfWeekDisabled, - daysOfWeek - ); -}); - -test( 'Changing "endDate" to a non default value works as expected', function( assert ) { - const endDate = window.moment( '2015-06-08' ); - - const component = this.subject({ - endDate: endDate - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.endDate, - endDate - ); -}); - -test( 'Changing "forceParse" to a non default value works as expected', function( assert ) { - const forceParse = false; - - const component = this.subject({ - forceParse: forceParse - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.forceParse, - forceParse - ); -}); - -test( 'Changing "format" to a non default value works as expected', function( assert ) { - const format = 'dd/mm/yyyy'; - - const component = this.subject({ - format: format - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.format, - format - ); -}); - -test( 'Changing "inputs" to a non default value works as expected', function( assert ) { - const inputs = [ Ember.$( '' ), Ember.$( '' ) ]; - - const component = this.subject({ - inputs: inputs - }); - - const options = component.get( 'options' ); - assert.deepEqual( - options.inputs, - inputs + component.get( 'selectConstraint' ), + { + start: null, + end: null + }, + 'selectConstraint is an object with start and end properties by default' ); -}); - -test( 'Changing "keyboardNavigation" to a non default value works as expected', function( assert ) { - const keyboardNavigation = false; - - const component = this.subject({ - keyboardNavigation: keyboardNavigation - }); - - const options = component.get( 'options' ); assert.strictEqual( - options.keyboardNavigation, - keyboardNavigation - ); -}); - -test( 'Changing "language" to a non default value works as expected', function( assert ) { - const language = 'eu'; - - const component = this.subject({ - language: language - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.language, - language - ); -}); - -test( 'Changing "minViewMode" to a non default value works as expected', function( assert ) { - const minViewMode = 'months'; - - const component = this.subject({ - minViewMode: minViewMode - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.minViewMode, - minViewMode - ); -}); - -test( 'Changing "multidate" to a non default value works as expected', function( assert ) { - const multidate = false; - - const component = this.subject({ - multidate: multidate - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.multidate, - multidate - ); -}); - -test( 'Changing "orientation" to a non default value works as expected', function( assert ) { - const orientation = 'top'; - - const component = this.subject({ - orientation: orientation - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.orientation, - orientation - ); -}); - -test( 'Changing "startDate" to a non default value works as expected', function( assert ) { - const startDate = window.moment( '2015-01-01' ); - - const component = this.subject({ - startDate: startDate - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.startDate, - startDate + component.get( 'viewMode' ), + 'days', + 'viewMode is "days" by default' ); }); -test( 'Changing "startView" to a non default value works as expected', function( assert ) { - const startView = 'year'; - - const component = this.subject({ - startView: startView - }); - - const options = component.get( 'options' ); +test( 'Dependent keys are correct', function( assert ) { + const component = this.subject(); - assert.strictEqual( - options.startView, - startView - ); -}); + const formatStringDependentKeys = [ + 'format' + ]; -test( 'Changing "todayBtn" to a non default value works as expected', function( assert ) { - const todayBtn = true; + const parseFormatsDependentKeys = [ + 'locale' + ]; - const component = this.subject({ - todayBtn: todayBtn - }); + const valueDependentKeys = [ + 'selectedDate', + 'formatString' + ]; - const options = component.get( 'options' ); + const viewingDateDependentKeys = [ + 'selectedDate' + ]; - assert.strictEqual( - options.todayBtn, - todayBtn + assert.deepEqual( + component.formatString._dependentKeys, + formatStringDependentKeys, + 'Dependent keys are correct for formatString()' ); -}); - -test( 'Changing "todayHighlight" to a non default value works as expected', function( assert ) { - const todayHighlight = true; - const component = this.subject({ - todayHighlight: todayHighlight - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.todayHighlight, - todayHighlight + assert.deepEqual( + component.parseFormats._dependentKeys, + parseFormatsDependentKeys, + 'Dependent keys are correct for parseFormats()' ); -}); - -test( 'Changing "weekStart" to a non default value works as expected', function( assert ) { - const weekStart = 1; - const component = this.subject({ - weekStart: weekStart - }); - - const options = component.get( 'options' ); - - assert.strictEqual( - options.weekStart, - weekStart + assert.deepEqual( + component.value._dependentKeys, + valueDependentKeys, + 'Dependent keys are correct for value()' ); -}); - -test( 'Observer keys are correct', function( assert ) { - const component = this.subject(); - - const updateDateRangeKeys = [ - 'endDate', - 'startDate' - ]; assert.deepEqual( - component.updateDateRange.__ember_observes__, - updateDateRangeKeys, - 'Observer keys are correct for updateDateRange()' + component.viewingDate._dependentKeys, + viewingDateDependentKeys, + 'Dependent keys are correct for viewingDate()' ); }); diff --git a/tests/unit/components/sl-date-range-picker-test.js b/tests/unit/components/sl-date-range-picker-test.js index cbd11b35..0b925ee8 100755 --- a/tests/unit/components/sl-date-range-picker-test.js +++ b/tests/unit/components/sl-date-range-picker-test.js @@ -1,7 +1,4 @@ -import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; -import { skip } from 'qunit'; -import sinon from 'sinon'; import ClassPrefix from 'sl-ember-components/mixins/class-prefix'; import ComponentInputId from 'sl-ember-components/mixins/sl-component-input-id'; import globalLibraries from '../../helpers/sl/synchronous/global-libraries'; @@ -40,167 +37,118 @@ test( 'Default property values are set correctly', function( assert ) { ); assert.strictEqual( - component.get( 'endDateValue' ), + component.get( 'endDate' ), null, - 'endDateValue: null' + 'endDate is null by default' ); assert.strictEqual( - component.get( 'format' ), - 'mm/dd/yyyy', - 'format: "mm/dd/yyyy"' + component.get( 'endDatePlaceholder' ), + null, + 'endDatePlaceholder is null by default' ); assert.strictEqual( - component.get( 'maxDate' ), + component.get( 'format' ), null, - 'maxDate: null' + 'format is null by default' ); assert.strictEqual( - component.get( 'minDate' ), + component.get( 'label' ), null, - 'minDate: null' + 'label is null by default' ); assert.strictEqual( - component.get( 'startDateValue' ), - null, - 'startDateValue: null' + component.get( 'locale' ), + 'en', + 'locale is "en" by default' ); -}); - -test( 'Change focus to end date input upon start date change', function( assert ) { - const component = this.subject(); - this.render(); - - const daterangeEndDate = component.get( 'endDateInput' ); - const spy = sinon.spy( daterangeEndDate, 'trigger' ); - - component.get( 'startDateInput' ).trigger( 'changeDate' ); - assert.ok( - spy.calledWithExactly( 'focus' ), - 'End date input was given focus on start date change' + assert.deepEqual( + component.get( 'selectConstraint' ), + { + start: null, + end: null + }, + 'selectConstraint is an object with start and end properties by default' ); - $( '.datepicker' ).remove(); - daterangeEndDate.trigger.restore(); -}); - -test( 'Earliest end date is the based on min date and start date', function( assert ) { - const component = this.subject(); - assert.strictEqual( - component.get( 'earliestEndDate' ), - null - ); - - Ember.run( () => { - component.set( 'minDate', '01/01/2001' ); - }); - - assert.equal( - component.get( 'earliestEndDate' ), - '01/01/2001' + component.get( 'startDate' ), + null, + 'startDate is null by default' ); - Ember.run( () => { - component.set( 'startDateValue', '01/01/2015' ); - }); - - assert.equal( - component.get( 'earliestEndDate' ), - '01/01/2015' + assert.strictEqual( + component.get( 'startDatePlaceholder' ), + null, + 'startDatePlaceholder is null by default' ); }); -test( 'Latest start date is the based on max date and end date', function( assert ) { +test( 'Earliest end date is based on selectConstraint and startDate', function( assert ) { const component = this.subject(); + const startConstraint = window.moment( [ 2015, 0, 1 ] ); + const startDate = window.moment( [ 2015, 1, 1 ] ); + assert.strictEqual( - component.get( 'latestStartDate' ), - null + component.get( 'startSelectConstraint' ).start, + null, + 'Earliest end date is null by default' ); - Ember.run( () => { - component.set( 'maxDate', '01/01/2029' ); - }); + component.set( 'selectConstraint', { + start: startConstraint, + end: null + } ); - assert.equal( - component.get( 'latestStartDate' ), - '01/01/2029' + assert.strictEqual( + component.get( 'startSelectConstraint' ).start, + startConstraint, + 'Earliest end date is selectConstraint.start if there is one' ); - Ember.run( () => { - component.set( 'endDateValue', '01/01/2015' ); - }); + component.set( 'startDate', startDate ); - assert.equal( - component.get( 'latestStartDate' ), - '01/01/2015' + assert.strictEqual( + component.get( 'startSelectConstraint' ).start, + startDate, + 'Earliest end date is startDate if there is one' ); }); -test( 'Events from start date input are removed upon willClearRender', function( assert ) { - const spyOn = sinon.spy( Ember.$.fn, 'on' ); - const spyOff = sinon.spy( Ember.$.fn, 'off' ); - +test( 'Latest start date is based on selectConstraint and endDate', function( assert ) { const component = this.subject(); - this.render(); - - spyOn.reset(); - - component.trigger( 'didInsertElement' ); - - assert.ok( - spyOn.calledWith( component.namespaceEvent( 'changeDate' ) ), - 'changeDate bootstrap date picker event bound' - ); - - assert.ok( - spyOn.alwaysCalledOn( component.get( 'startDateInput' ) ), - 'changeDate bind was called on startDateInput' - ); - - spyOff.reset(); - - component.trigger( 'willClearRender' ); - - assert.ok( - spyOff.calledWith( component.namespaceEvent( 'changeDate' ) ), - 'changeDate bootstrap date picker event unbound' - ); + const endConstraint = window.moment( [ 2015, 1, 1 ] ); + const endDate = window.moment( [ 2015, 0, 1 ] ); - assert.ok( - spyOff.alwaysCalledOn( component.get( 'startDateInput' ) ), - 'changeDate unbind was called on startDateInput' + assert.strictEqual( + component.get( 'endSelectConstraint' ).end, + null, + 'Latest start date is null by default' ); - Ember.$.fn.on.restore(); - Ember.$.fn.off.restore(); -}); - -test( 'label, startDatePlaceholder, and endDatePlaceholder are undefined by default', function( assert ) { - const component = this.subject(); + component.set( 'selectConstraint', { + start: null, + end: endConstraint + } ); assert.strictEqual( - component.get( 'label' ), - undefined, - 'label is undefined by default' + component.get( 'endSelectConstraint' ).end, + endConstraint, + 'Latest start date is selectConstraint.end if there is one' ); - assert.strictEqual( - component.get( 'startDatePlaceholder' ), - undefined, - 'startDatePlaceholder is undefined by default' - ); + component.set( 'endDate', endDate ); assert.strictEqual( - component.get( 'endDatePlaceholder' ), - undefined, - 'endDatePlaceholder is undefined by default' + component.get( 'endSelectConstraint' ).end, + endDate, + 'Latest start date is endDate if there is one' ); }); @@ -227,84 +175,30 @@ test( 'label is accepted as a parameter', function( assert ) { ); }); -test( 'Default format gets passed to child date pickers', function( assert ) { +test( 'Dependent keys are correct', function( assert ) { const component = this.subject(); - assert.equal( - this.$( '.sl-daterange-start-date input.date-picker' ).data().datepicker.o.format, - component.get( 'format' ), - 'Default format gets passed to start date picker' - ); - - assert.equal( - this.$( '.sl-daterange-end-date input.date-picker' ).data().datepicker.o.format, - component.get( 'format' ), - 'Default format gets passed to end date picker' - ); -}); - -test( 'Format parameter gets passed to child date pickers', function( assert ) { - const format = 'yyyy/mm/dd'; - - this.subject({ format: format }); + const endSelectConstraintDependentKeys = [ + 'endDate', + 'selectConstraint' + ]; - assert.equal( - this.$( '.sl-daterange-start-date input.date-picker' ).data().datepicker.o.format, - format, - 'Format parameter gets passed to start date picker' - ); - - assert.equal( - this.$( '.sl-daterange-end-date input.date-picker' ).data().datepicker.o.format, - format, - 'Format parameter gets passed to end date picker' - ); -}); + const startSelectConstraintDependentKeys = [ + 'startDate', + 'selectConstraint' + ]; -// @todo This needs to be updated when upgrading to 1.13 to spy on the child -// sl-date-pickers rather than directly accessing bootstrap-datepicker values -test( 'Date pickers have unbound start and end dates by default', function( assert ) { - this.subject(); - - assert.equal( - this.$( '.sl-daterange-start-date input.date-picker' ).data().datepicker.o.startDate, - -Infinity, - 'Start date picker start date is unboundt' - ); - - assert.equal( - this.$( '.sl-daterange-start-date input.date-picker' ).data().datepicker.o.endDate, - Infinity, - 'Start date picker end date is unbound' + assert.deepEqual( + component.endSelectConstraint._dependentKeys, + endSelectConstraintDependentKeys, + 'Dependent keys are correct for endSelectConstraint()' ); - assert.equal( - this.$( '.sl-daterange-end-date input.date-picker' ).data().datepicker.o.startDate, - -Infinity, - 'End date picker start date is unbound' + assert.deepEqual( + component.startSelectConstraint._dependentKeys, + startSelectConstraintDependentKeys, + 'Dependent keys are correct for startSelectConstraint()' ); - - assert.equal( - this.$( '.sl-daterange-end-date input.date-picker' ).data().datepicker.o.endDate, - Infinity, - 'End date picker end date is unbound' - ); -}); - -skip( 'Date pickers respects minDate', function() { - // waiting for 1.13 for a way to mock and spy on child components -}); - -skip( 'Date pickers respects maxDate', function() { - // waiting for 1.13 for a way to mock and spy on child components -}); - -skip( 'End date picker respects startDateValue over minDate due to earliestEndDate', function() { - // waiting for 1.13 for a way to mock and spy on child components -}); - -skip( 'Start date picker respects endDateValue over maxDate due to latestStartDate', function() { - // waiting for 1.13 for a way to mock and spy on child components }); test( 'There are no references to Ember.$, $ or jQuery', function( assert ) {
ComponentComponent {{#sl-tooltip title="Twitter Bootstrap"}}TWB{{/sl-tooltip}} {{#sl-tooltip title="sl-ember-components"}}SEC{{/sl-tooltip}} {{#sl-tooltip title="Highcharts"}}HC{{/sl-tooltip}}{{#sl-tooltip title="Bootstrap-Datepicker"}}BD{{/sl-tooltip}} {{#sl-tooltip title="typeahead.js"}}TA{{/sl-tooltip}} {{#sl-tooltip title="Select2"}}S2{{/sl-tooltip}}
{{#if component.lib.hc}}{{else}}—{{/if}} - {{#if component.lib.bd}}{{else}}—{{/if}} - {{#if component.lib.ta}}{{else}}—{{/if}}