From 3b3098ba5932242e1a5af8effa935ffb45dea8c8 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Wed, 12 Oct 2016 20:50:24 +0100 Subject: [PATCH] Date widget tests --- .../ng2-activiti-form/karma.conf.js | 3 + .../widgets/date/date.widget.spec.ts | 146 ++++++++++++++++++ .../components/widgets/date/date.widget.ts | 30 ++-- 3 files changed, 162 insertions(+), 17 deletions(-) create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts diff --git a/ng2-components/ng2-activiti-form/karma.conf.js b/ng2-components/ng2-activiti-form/karma.conf.js index 8f3adc54b4..1b8835cd42 100644 --- a/ng2-components/ng2-activiti-form/karma.conf.js +++ b/ng2-components/ng2-activiti-form/karma.conf.js @@ -33,6 +33,9 @@ module.exports = function (config) { {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, 'node_modules/alfresco-js-api/dist/alfresco-js-api.js', + 'node_modules/moment/min/moment.min.js', + 'node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js', + 'node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js', {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false}, {pattern: 'node_modules/ng2-translate/**/*.js.map', included: false, watched: false}, diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts new file mode 100644 index 0000000000..6c499fe980 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.spec.ts @@ -0,0 +1,146 @@ +/*! + * @license + * Copyright 2016 Alfresco Software, Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ElementRef } from '@angular/core'; +import { DateWidget } from './date.widget'; +import { FormFieldModel } from './../core/form-field.model'; + +describe('DateWidget', () => { + + let widget: DateWidget; + let nativeElement: any; + let elementRef: ElementRef; + + beforeEach(() => { + nativeElement = { + querySelector: function () { + return null; + } + }; + elementRef = new ElementRef(nativeElement); + widget = new DateWidget(elementRef); + }); + + it('should setup basic date picker settings on init ', () => { + expect(widget.datePicker).toBeUndefined(); + widget.ngOnInit(); + expect(widget.datePicker).toBeDefined(); + }); + + it('should setup min value for date picker', () => { + let minValue = '13-03-1982'; + widget.field = new FormFieldModel(null, { + minValue: minValue + }); + widget.ngOnInit(); + + let expected = moment(minValue, widget.DATE_FORMAT); + expect(widget.datePicker._past.isSame(expected)).toBeTruthy(); + }); + + it('should setup max value for date picker', () => { + let maxValue = '31-03-1982'; + widget.field = new FormFieldModel(null, { + maxValue: maxValue + }); + widget.ngOnInit(); + + let expected = moment(maxValue, widget.DATE_FORMAT); + expect(widget.datePicker._future.isSame(expected)).toBeTruthy(); + }); + + it('should setup default time value for date picker', () => { + let dateValue = '13-03-1982'; + widget.field = new FormFieldModel(null, { + type: 'date', + value: dateValue + }); + widget.ngOnInit(); + + let expected = moment(dateValue, widget.DATE_FORMAT); + expect(widget.datePicker.time.isSame(expected)).toBeTruthy(); + }); + + it('should setup trigger element', () => { + let el = {}; + spyOn(nativeElement, 'querySelector').and.returnValue(el); + widget.ngOnInit(); + expect(widget.datePicker.trigger).toBe(el); + }); + + it('should not setup trigger element', () => { + let w = new DateWidget(null); + w.ngOnInit(); + expect(w.datePicker.trigger).toBeFalsy(); + }); + + it('should eval visibility on date changed', () => { + spyOn(widget, 'checkVisibility').and.callThrough(); + + let field = new FormFieldModel(null); + widget.field = field; + + widget.onDateChanged(); + expect(widget.checkVisibility).toHaveBeenCalledWith(field); + }); + + it('should update picker value on input date changed', () => { + widget.field = new FormFieldModel(null, { + type: 'date', + value: '13-03-1982' + }); + widget.ngOnInit(); + widget.field.value = '31-03-1982'; + widget.onDateChanged(); + + let expected = moment('31-03-1982', widget.DATE_FORMAT); + expect(widget.datePicker.time.isSame(expected)).toBeTruthy(); + }); + + it('should update field value on date selected', () => { + widget.field = new FormFieldModel(null, { type: 'date' }); + widget.ngOnInit(); + + let date = '13-3-1982'; + widget.datePicker.time = moment(date, widget.DATE_FORMAT); + widget.onDateSelected(); + expect(widget.field.value).toBe(date); + }); + + it('should update material textfield on date selected', () => { + spyOn(widget, 'setupMaterialTextField').and.callThrough(); + + widget.field = new FormFieldModel(null, { type: 'date' }); + widget.ngOnInit(); + + widget.datePicker.time = moment(); + widget.onDateSelected(); + expect(widget.setupMaterialTextField).toHaveBeenCalled(); + }); + + it('should not update material textfield on date selected', () => { + let w = new DateWidget(null); + spyOn(w, 'setupMaterialTextField').and.callThrough(); + + w.field = new FormFieldModel(null, { type: 'date' }); + w.ngOnInit(); + + w.datePicker.time = moment(); + w.onDateSelected(); + expect(w.setupMaterialTextField).not.toHaveBeenCalled(); + }); +}); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts index 20444e5f01..4a6435e902 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts @@ -26,7 +26,7 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component'; }) export class DateWidget extends TextFieldWidgetComponent implements OnInit { - private dateFormat: string = 'D-M-YYYY'; + DATE_FORMAT: string = 'D-M-YYYY'; datePicker: any; @@ -44,41 +44,37 @@ export class DateWidget extends TextFieldWidgetComponent implements OnInit { if (this.field) { if (this.field.minValue) { - let min = moment(this.field.minValue, this.dateFormat); - if (min.isValid()) { - settings.past = min; - } + settings.past = moment(this.field.minValue, this.DATE_FORMAT); } if (this.field.maxValue) { - let max = moment(this.field.maxValue, this.dateFormat); - if (max.isValid()) { - settings.future = max; - } + settings.future = moment(this.field.maxValue, this.DATE_FORMAT); } if (this.field.value) { - settings.time = moment(this.field.value, this.dateFormat); + settings.init = moment(this.field.value, this.DATE_FORMAT); } } this.datePicker = new mdDateTimePicker.default(settings); - this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput'); + if (this.elementRef) { + this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput'); + } } onDateChanged() { if (this.field.value) { - this.datePicker.time = moment(this.field.value, this.dateFormat); + this.datePicker.time = moment(this.field.value, this.DATE_FORMAT); } this.checkVisibility(this.field); } onDateSelected() { - this.field.value = this.datePicker.time.format('DD-MM-YYYY'); - let el = this.elementRef.nativeElement; - let container = el.querySelector('.mdl-textfield'); - if (container) { - container.MaterialTextfield.change(this.field.value.toString()); + let newValue = this.datePicker.time.format(this.DATE_FORMAT); + this.field.value = newValue; + + if (this.elementRef) { + this.setupMaterialTextField(this.elementRef, componentHandler, newValue); } }