mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-08 14:51:32 +00:00
[ADF-2984] Show date invalid message on search date range picker (#3323)
* [ADF-2984] Show date invalid message on search date range picker * [ADF-2984] test that required format is displayed when date input is invalid * [ADF-2984] More space above buttons
This commit is contained in:
Suzana Dirla
committed by
Eugenio Romano
Eugenio Romano
parent
2ad5dac77a
commit
67e0c02a5a
@@ -17,140 +17,184 @@
|
||||
|
||||
import { CustomMomentDateAdapter, SearchDateRangeComponent } from './search-date-range.component';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { ContentTestingModule } from '../../../testing/content.testing.module';
|
||||
import { setupTestBed } from '@alfresco/adf-core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
declare let moment: any;
|
||||
|
||||
describe('SearchDateRangeComponent', () => {
|
||||
describe('component class', () => {
|
||||
|
||||
let component: SearchDateRangeComponent;
|
||||
let fromDate = '2016-10-16';
|
||||
let toDate = '2017-10-16';
|
||||
const localeFixture = 'it';
|
||||
const dateFormatFixture = 'DD-MMM-YY';
|
||||
let component: SearchDateRangeComponent;
|
||||
let fromDate = '2016-10-16';
|
||||
let toDate = '2017-10-16';
|
||||
const localeFixture = 'it';
|
||||
const dateFormatFixture = 'DD-MMM-YY';
|
||||
|
||||
const buildAdapter = (): CustomMomentDateAdapter => {
|
||||
const dateAdapter = new CustomMomentDateAdapter(null);
|
||||
dateAdapter.customDateFormat = null;
|
||||
return dateAdapter;
|
||||
};
|
||||
|
||||
const buildUserPreferences = (): any => {
|
||||
const userPreferences = {
|
||||
userPreferenceStatus: { LOCALE: localeFixture },
|
||||
select: (property) => {
|
||||
return Observable.of(userPreferences.userPreferenceStatus[property]);
|
||||
}
|
||||
};
|
||||
return userPreferences;
|
||||
};
|
||||
|
||||
const theDateAdapter = <any> buildAdapter();
|
||||
|
||||
beforeEach(() => {
|
||||
component = new SearchDateRangeComponent(theDateAdapter, buildUserPreferences());
|
||||
});
|
||||
|
||||
it('should setup form elements on init', () => {
|
||||
component.ngOnInit();
|
||||
expect(component.from).toBeDefined();
|
||||
expect(component.to).toBeDefined();
|
||||
expect(component.form).toBeDefined();
|
||||
});
|
||||
|
||||
it('should setup locale from userPreferencesService', () => {
|
||||
spyOn(component, 'setLocale').and.stub();
|
||||
component.ngOnInit();
|
||||
expect(component.setLocale).toHaveBeenCalledWith(localeFixture);
|
||||
});
|
||||
|
||||
it('should setup the format of the date from configuration', () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
|
||||
component.ngOnInit();
|
||||
expect(theDateAdapter.customDateFormat).toBe(dateFormatFixture);
|
||||
});
|
||||
|
||||
it('should setup form control with formatted valid date on change', () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
|
||||
component.ngOnInit();
|
||||
|
||||
const inputString = '20.feb.18';
|
||||
const momentFromInput = moment(inputString, dateFormatFixture);
|
||||
expect(momentFromInput.isValid()).toBeTruthy();
|
||||
|
||||
component.onChangedHandler({ srcElement: { value: inputString }}, component.from);
|
||||
expect(component.from.value).toEqual(momentFromInput);
|
||||
});
|
||||
|
||||
it('should NOT setup form control with invalid date on change', () => {
|
||||
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
|
||||
component.ngOnInit();
|
||||
|
||||
const inputString = '20.f.18';
|
||||
const momentFromInput = moment(inputString, dateFormatFixture);
|
||||
expect(momentFromInput.isValid()).toBeFalsy();
|
||||
|
||||
component.onChangedHandler({ srcElement: { value: inputString }}, component.from);
|
||||
expect(component.from.value).not.toEqual(momentFromInput);
|
||||
});
|
||||
|
||||
it('should reset form', () => {
|
||||
component.ngOnInit();
|
||||
component.form.setValue({ from: fromDate, to: toDate });
|
||||
|
||||
expect(component.from.value).toEqual(fromDate);
|
||||
expect(component.to.value).toEqual(toDate);
|
||||
|
||||
component.reset();
|
||||
|
||||
expect(component.from.value).toEqual('');
|
||||
expect(component.to.value).toEqual('');
|
||||
expect(component.form.value).toEqual({ from: '', to: '' });
|
||||
});
|
||||
|
||||
it('should update query builder on reset', () => {
|
||||
const context: any = {
|
||||
queryFragments: {
|
||||
createdDateRange: 'query'
|
||||
},
|
||||
update() {}
|
||||
const buildAdapter = (): CustomMomentDateAdapter => {
|
||||
const dateAdapter = new CustomMomentDateAdapter(null);
|
||||
dateAdapter.customDateFormat = null;
|
||||
return dateAdapter;
|
||||
};
|
||||
|
||||
component.id = 'createdDateRange';
|
||||
component.context = context;
|
||||
|
||||
spyOn(context, 'update').and.stub();
|
||||
|
||||
component.ngOnInit();
|
||||
component.reset();
|
||||
|
||||
expect(context.queryFragments.createdDateRange).toEqual('');
|
||||
expect(context.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update query builder on value changes', () => {
|
||||
const context: any = {
|
||||
queryFragments: {},
|
||||
update() {}
|
||||
const buildUserPreferences = (): any => {
|
||||
const userPreferences = {
|
||||
userPreferenceStatus: {LOCALE: localeFixture},
|
||||
select: (property) => {
|
||||
return Observable.of(userPreferences.userPreferenceStatus[property]);
|
||||
}
|
||||
};
|
||||
return userPreferences;
|
||||
};
|
||||
|
||||
component.id = 'createdDateRange';
|
||||
component.context = context;
|
||||
component.settings = { field: 'cm:created' };
|
||||
const theDateAdapter = <any> buildAdapter();
|
||||
|
||||
spyOn(context, 'update').and.stub();
|
||||
beforeEach(() => {
|
||||
component = new SearchDateRangeComponent(theDateAdapter, buildUserPreferences());
|
||||
});
|
||||
|
||||
component.ngOnInit();
|
||||
component.apply({
|
||||
from: fromDate,
|
||||
to: toDate
|
||||
}, true);
|
||||
it('should setup form elements on init', () => {
|
||||
component.ngOnInit();
|
||||
expect(component.from).toBeDefined();
|
||||
expect(component.to).toBeDefined();
|
||||
expect(component.form).toBeDefined();
|
||||
});
|
||||
|
||||
const startDate = moment(fromDate).startOf('day').format();
|
||||
const endDate = moment(toDate).endOf('day').format();
|
||||
it('should setup locale from userPreferencesService', () => {
|
||||
spyOn(component, 'setLocale').and.stub();
|
||||
component.ngOnInit();
|
||||
expect(component.setLocale).toHaveBeenCalledWith(localeFixture);
|
||||
});
|
||||
|
||||
const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`;
|
||||
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
|
||||
expect(context.update).toHaveBeenCalled();
|
||||
it('should setup the format of the date from configuration', () => {
|
||||
component.settings = {field: 'cm:created', dateFormat: dateFormatFixture};
|
||||
component.ngOnInit();
|
||||
expect(theDateAdapter.customDateFormat).toBe(dateFormatFixture);
|
||||
});
|
||||
|
||||
it('should setup form control with formatted valid date on change', () => {
|
||||
component.settings = {field: 'cm:created', dateFormat: dateFormatFixture};
|
||||
component.ngOnInit();
|
||||
|
||||
const inputString = '20.feb.18';
|
||||
const momentFromInput = moment(inputString, dateFormatFixture);
|
||||
expect(momentFromInput.isValid()).toBeTruthy();
|
||||
|
||||
component.onChangedHandler({srcElement: {value: inputString}}, component.from);
|
||||
expect(component.from.value.toString()).toEqual(momentFromInput.toString());
|
||||
});
|
||||
|
||||
it('should NOT setup form control with invalid date on change', () => {
|
||||
component.settings = {field: 'cm:created', dateFormat: dateFormatFixture};
|
||||
component.ngOnInit();
|
||||
|
||||
const inputString = '20.f.18';
|
||||
const momentFromInput = moment(inputString, dateFormatFixture);
|
||||
expect(momentFromInput.isValid()).toBeFalsy();
|
||||
|
||||
component.onChangedHandler({srcElement: {value: inputString}}, component.from);
|
||||
expect(component.from.value.toString()).not.toEqual(momentFromInput.toString());
|
||||
});
|
||||
|
||||
it('should reset form', () => {
|
||||
component.ngOnInit();
|
||||
component.form.setValue({from: fromDate, to: toDate});
|
||||
|
||||
expect(component.from.value).toEqual(fromDate);
|
||||
expect(component.to.value).toEqual(toDate);
|
||||
|
||||
component.reset();
|
||||
|
||||
expect(component.from.value).toEqual('');
|
||||
expect(component.to.value).toEqual('');
|
||||
expect(component.form.value).toEqual({from: '', to: ''});
|
||||
});
|
||||
|
||||
it('should update query builder on reset', () => {
|
||||
const context: any = {
|
||||
queryFragments: {
|
||||
createdDateRange: 'query'
|
||||
},
|
||||
update() {}
|
||||
};
|
||||
|
||||
component.id = 'createdDateRange';
|
||||
component.context = context;
|
||||
|
||||
spyOn(context, 'update').and.stub();
|
||||
|
||||
component.ngOnInit();
|
||||
component.reset();
|
||||
|
||||
expect(context.queryFragments.createdDateRange).toEqual('');
|
||||
expect(context.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update query builder on value changes', () => {
|
||||
const context: any = {
|
||||
queryFragments: {},
|
||||
update() {}
|
||||
};
|
||||
|
||||
component.id = 'createdDateRange';
|
||||
component.context = context;
|
||||
component.settings = {field: 'cm:created'};
|
||||
|
||||
spyOn(context, 'update').and.stub();
|
||||
|
||||
component.ngOnInit();
|
||||
component.apply({
|
||||
from: fromDate,
|
||||
to: toDate
|
||||
}, true);
|
||||
|
||||
const startDate = moment(fromDate).startOf('day').format();
|
||||
const endDate = moment(toDate).endOf('day').format();
|
||||
|
||||
const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`;
|
||||
expect(context.queryFragments[component.id]).toEqual(expectedQuery);
|
||||
expect(context.update).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('component DOM', () => {
|
||||
let component: SearchDateRangeComponent;
|
||||
let fixture: ComponentFixture<SearchDateRangeComponent>;
|
||||
let translateService: TranslateService;
|
||||
let translationSpy: jasmine.Spy;
|
||||
const dateFormatFixture = 'DD MMM YYYY';
|
||||
|
||||
setupTestBed({
|
||||
imports: [ContentTestingModule]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SearchDateRangeComponent);
|
||||
component = fixture.componentInstance;
|
||||
|
||||
translateService = TestBed.get(TranslateService);
|
||||
translationSpy = spyOn(translateService, 'get').and.callFake((key) => {
|
||||
return Observable.of(key);
|
||||
});
|
||||
|
||||
component.settings = {'dateFormat': dateFormatFixture, field: 'cm:created'};
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should display the required format when input date is invalid', () => {
|
||||
const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
|
||||
|
||||
inputEl.value = 'invalid-date';
|
||||
inputEl.dispatchEvent(new Event('input'));
|
||||
fixture.detectChanges();
|
||||
inputEl.dispatchEvent(new Event('blur'));
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(translationSpy.calls.mostRecent().args)
|
||||
.toEqual(['SEARCH.FILTER.VALIDATION.INVALID-DATE', {requiredFormat: dateFormatFixture}]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user