inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[APPS-2132] migrate components to date-fns (#9001)

Browse Source 
* migrate edit process filter to date-fns

* refresh unit tests

* fix a11y for date-fns

* Revert "fix a11y for date-fns"

This reverts commit 2e706d4aed1b8a50d1de62fe11d9d528530d628c.

* update e2e

* start task fixes

* cleanup code

* remove fdescribe

* remove moment, improve unit testing

* remove dependency on date util

* cleanup search date range component

* cleanup code

* migrate search date range component

* revert e2e changes for now

* extra fixes and tests

* add missing functionality, extra tests

* increase time constraints

* improved code, disabled e2e

* move e2e to unit tests, extra rework for insights

* extra unit test for date range validation

* migrate date-range to date-fns
This commit is contained in:
Denys Vuika
2023-10-17 17:24:46 +01:00
committed by GitHub
parent f7b0544172
commit e6d625253c
21 changed files with 857 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts
View File

@@ -16,22 +16,19 @@
*/
import { SearchDateRangeComponent } from './search-date-range.component';
import { DateAdapter } from '@angular/material/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ContentTestingModule } from '../../../testing/content.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
declare let moment: any;
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { startOfDay, endOfDay, isValid, addDays, format } from 'date-fns';
describe('SearchDateRangeComponent', () => {
let fixture: ComponentFixture<SearchDateRangeComponent>;
let component: SearchDateRangeComponent;
let adapter: MomentDateAdapter;
const fromDate = '2016-10-16';
const toDate = '2017-10-16';
const maxDate = '10-Mar-20';
const dateFormatFixture = 'DD-MMM-YY';
const dateFormatFixture = 'dd-MMM-yy';
const fromDate = new Date('2016-10-16');
const toDate = new Date('2017-10-16');
beforeEach(() => {
TestBed.configureTestingModule({
@@ -41,7 +38,6 @@ describe('SearchDateRangeComponent', () => {
]
});
fixture = TestBed.createComponent(SearchDateRangeComponent);
adapter = fixture.debugElement.injector.get(DateAdapter) as MomentDateAdapter;
component = fixture.componentInstance;
});
@@ -59,31 +55,26 @@ describe('SearchDateRangeComponent', () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
fixture.detectChanges();
const inputString = '20-feb-18';
const momentFromInput = moment(inputString, dateFormatFixture);
const date = new Date('20-feb-18');
expect(isValid(date)).toBeTrue();
expect(momentFromInput.isValid()).toBeTruthy();
component.onChangedHandler({ value: inputString }, component.from);
expect(component.from.value.toString()).toEqual(momentFromInput.toString());
component.onChangedHandler({ value: date } as MatDatepickerInputEvent<Date>, component.from);
expect(component.from.value.toString()).toEqual(date.toString());
});
it('should NOT setup form control with invalid date on change', () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture };
fixture.detectChanges();
const inputString = '20.f.18';
const momentFromInput = moment(inputString, dateFormatFixture);
const date = new Date('20.f.18');
expect(isValid(date)).toBeFalse();
expect(momentFromInput.isValid()).toBeFalsy();
component.onChangedHandler({ value: inputString }, component.from);
expect(component.from.value.toString()).not.toEqual(momentFromInput.toString());
component.onChangedHandler({ value: date } as MatDatepickerInputEvent<Date>, component.from);
expect(component.from.value).not.toEqual(date);
});
it('should reset form', () => {
fixture.detectChanges();
component.form.setValue({ from: fromDate, to: toDate });
@@ -92,9 +83,9 @@ describe('SearchDateRangeComponent', () => {
component.reset();
expect(component.from.value).toEqual('');
expect(component.to.value).toEqual('');
expect(component.form.value).toEqual({ from: '', to: '' });
expect(component.from.value).toBeNull();
expect(component.to.value).toBeNull();
expect(component.form.value).toEqual({ from: null, to: null });
});
it('should reset fromMaxDate on reset', () => {
@@ -143,8 +134,8 @@ describe('SearchDateRangeComponent', () => {
to: toDate
}, true);
const startDate = moment(fromDate).startOf('day').format();
const endDate = moment(toDate).endOf('day').format();
const startDate = startOfDay(fromDate).toISOString();
const endDate = endOfDay(toDate).toISOString();
const expectedQuery = `cm:created:['${startDate}' TO '${endDate}']`;
@@ -156,7 +147,7 @@ describe('SearchDateRangeComponent', () => {
fixture.detectChanges();
const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
input.value = '10-05-18';
input.value = '10-f-18';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
@@ -165,11 +156,82 @@ describe('SearchDateRangeComponent', () => {
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATE');
});
it('should hide date-format error when correcting input', async () => {
fixture.detectChanges();
const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
input.value = '10-f-18';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.INVALID-DATE');
input.value = '10-10-2018';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('');
});
it('should show error for max date constraint', async () => {
component.settings = { field: 'cm:created', maxDate: 'today' };
fixture.detectChanges();
const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
input.value = format(addDays(new Date(), 1), 'dd-MM-yyyy');
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.BEYOND-MAX-DATE');
});
it('should show error for required constraint', async () => {
fixture.detectChanges();
const fromInput = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
fromInput.value = '';
fromInput.dispatchEvent(new Event('input'));
const toInput = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-to-input"]');
toInput.value = '';
toInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.REQUIRED-VALUE');
expect(component.getToValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.REQUIRED-VALUE');
});
it('should show error for incorrect date range', async () => {
fixture.detectChanges();
const fromInput = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
fromInput.value = '11-10-2018';
fromInput.dispatchEvent(new Event('input'));
const toInput = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-to-input"]');
toInput.value = '10-10-2018';
toInput.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(component.getFromValidationMessage()).toEqual('');
expect(component.getToValidationMessage()).toEqual('SEARCH.FILTER.VALIDATION.NO-DAYS');
});
it('should not show date-format error when valid found', async () => {
fixture.detectChanges();
const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="date-range-from-input"]');
input.value = '10/10/2018';
input.value = '10-10-2018';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
@@ -182,31 +244,22 @@ describe('SearchDateRangeComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.debugElement.nativeElement.querySelector('input[ng-reflect-max]')).toBeNull();
expect(component.maxDate).toBeUndefined();
});
it('should be able to set a fixed maximum date', async () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate };
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: '10-Mar-20' };
fixture.detectChanges();
const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="Tue Mar 10 2020 23:59:59 GMT+0"]');
expect(inputs[0]).toBeDefined();
expect(inputs[0]).not.toBeNull();
expect(inputs[1]).toBeDefined();
expect(inputs[1]).not.toBeNull();
const expected = endOfDay(new Date(2020, 2, 10));
expect(component.maxDate).toEqual(expected);
});
it('should be able to set the maximum date to today', async () => {
component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: 'today' };
fixture.detectChanges();
const today = adapter.today().endOf('day').toString().slice(0, -3);
const today = endOfDay(new Date());
const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="' + today + '"]');
expect(inputs[0]).toBeDefined();
expect(inputs[0]).not.toBeNull();
expect(inputs[1]).toBeDefined();
expect(inputs[1]).not.toBeNull();
expect(component.maxDate).toEqual(today);
});
});

91
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.ts
View File

@@ -15,60 +15,60 @@
* limitations under the License.
*/
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';
import { MomentDateAdapter, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { ADF_DATE_FORMATS, AdfDateFnsAdapter } from '@alfresco/adf-core';
import { SearchWidget } from '../../models/search-widget.interface';
import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
import { Moment } from 'moment';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { startOfDay, endOfDay, isBefore, isValid as isValidDate } from 'date-fns';
export interface DateRangeValue {
from: string;
to: string;
}
declare let moment: any;
const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
interface DateRangeForm {
from: FormControl<Date>;
to: FormControl<Date>;
}
@Component({
selector: 'adf-search-date-range',
templateUrl: './search-date-range.component.html',
styleUrls: ['./search-date-range.component.scss'],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { strict: true } }
{ provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
{ provide: DateAdapter, useClass: AdfDateFnsAdapter }
],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-date-range' }
})
export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy {
from: FormControl;
to: FormControl;
export class SearchDateRangeComponent implements SearchWidget, OnInit {
from: FormControl<Date>;
to: FormControl<Date>;
form: FormGroup;
form: FormGroup<DateRangeForm>;
matcher = new LiveErrorStateMatcher();
id: string;
settings?: SearchWidgetSettings;
context?: SearchQueryBuilderService;
datePickerFormat: string;
maxDate: any;
fromMaxDate: any;
maxDate: Date;
fromMaxDate: Date;
isActive = false;
startValue: any;
enableChangeUpdate: boolean;
displayValue$: Subject<string> = new Subject<string>();
displayValue$ = new Subject<string>();
private onDestroy$ = new Subject<boolean>();
constructor(private dateAdapter: DateAdapter<Moment>, private userPreferencesService: UserPreferencesService) {}
constructor(private dateAdapter: DateAdapter<Date>) {}
getFromValidationMessage(): string {
return this.from.hasError('invalidOnChange') || this.hasParseError(this.from)
@@ -95,21 +95,16 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
ngOnInit() {
this.datePickerFormat = this.settings?.dateFormat ? this.settings.dateFormat : DEFAULT_FORMAT_DATE;
this.userPreferencesService
.select<string>(UserPreferenceValues.Locale)
.pipe(takeUntil(this.onDestroy$))
.subscribe((locale) => this.setLocale(locale));
const customDateAdapter = this.dateAdapter as MomentDateAdapter;
customDateAdapter.overrideDisplayFormat = this.datePickerFormat;
const customDateAdapter = this.dateAdapter as AdfDateFnsAdapter;
customDateAdapter.displayFormat = this.datePickerFormat;
const validators = Validators.compose([Validators.required]);
if (this.settings?.maxDate) {
if (this.settings.maxDate === 'today') {
this.maxDate = this.dateAdapter.today().endOf('day');
this.maxDate = endOfDay(this.dateAdapter.today());
} else {
this.maxDate = moment(this.settings.maxDate).endOf('day');
this.maxDate = endOfDay(this.dateAdapter.parse(this.settings.maxDate, this.datePickerFormat));
}
}
@@ -120,8 +115,8 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.from = new FormControl(fromValue, validators);
this.to = new FormControl(toValue, validators);
} else {
this.from = new FormControl('', validators);
this.to = new FormControl('', validators);
this.from = new FormControl(null, validators);
this.to = new FormControl(null, validators);
}
this.form = new FormGroup({
@@ -133,17 +128,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.enableChangeUpdate = this.settings?.allowUpdateOnChange ?? true;
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
apply(model: { from: string; to: string }, isValid: boolean) {
apply(model: Partial<{ from: Date; to: Date }>, isValid: boolean) {
if (isValid && this.id && this.context && this.settings && this.settings.field) {
this.isActive = true;
const start = moment(model.from).startOf('day').format();
const end = moment(model.to).endOf('day').format();
const start = startOfDay(model.from).toISOString();
const end = endOfDay(model.to).toISOString();
this.context.queryFragments[this.id] = `${this.settings.field}:['${start}' TO '${end}']`;
@@ -192,11 +182,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.to.markAsTouched();
this.submitValues();
}
clear() {
this.isActive = false;
this.form.reset({
from: '',
to: ''
from: null,
to: null
});
if (this.id && this.context) {
@@ -205,6 +196,7 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.updateQuery();
}
}
this.setFromMaxDate();
}
@@ -220,12 +212,12 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
}
}
onChangedHandler(event: any, formControl: FormControl) {
onChangedHandler(event: MatDatepickerInputEvent<Date>, formControl: FormControl) {
const inputValue = event.value;
const formatDate = this.dateAdapter.parse(inputValue, this.datePickerFormat);
if (formatDate?.isValid()) {
formControl.setValue(formatDate);
} else if (formatDate) {
if (isValidDate(inputValue)) {
formControl.setValue(inputValue);
} else if (inputValue) {
formControl.setErrors({
invalidOnChange: true
});
@@ -234,11 +226,6 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
this.setFromMaxDate();
}
setLocale(locale: string) {
this.dateAdapter.setLocale(locale);
moment.locale(locale);
}
hasParseError(formControl: FormControl): boolean {
return formControl.hasError('matDatepickerParse') && formControl.getError('matDatepickerParse').text;
}
@@ -248,6 +235,6 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy
}
setFromMaxDate() {
this.fromMaxDate = !this.to.value || (this.maxDate && moment(this.maxDate).isBefore(this.to.value)) ? this.maxDate : moment(this.to.value);
this.fromMaxDate = !this.to.value || (this.maxDate && isBefore(this.maxDate, this.to.value)) ? this.maxDate : this.to.value;
}
}