From c638460b9f4a1f195b1920504828b468d7a25b48 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Wed, 6 Nov 2024 21:34:30 +0100 Subject: [PATCH 01/10] Use signals for date-time-picker.component.ts --- .../date-time-picker.component.html | 26 ++++----- .../date-time-picker.component.ts | 56 +++++++++---------- 2 files changed, 41 insertions(+), 41 deletions(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html index b1983a2ef7d2..90af5cb06b92 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html @@ -1,14 +1,14 @@ @if (labelName) { } -@if (labelTooltip) { - +@if (labelTooltip()) { + } -@if (shouldDisplayTimeZoneWarning) { +@if (shouldDisplayTimeZoneWarning()) { @@ -19,12 +19,12 @@ #dateInput="ngModel" class="form-control position-relative ps-5" id="date-input-field" - [ngClass]="{ 'is-invalid': error || dateInput.invalid || (requiredField && !dateInput.value) || warning, 'border-warning': warning }" - [class.ng-invalid]="error || dateInput.invalid || (requiredField && !dateInput.value) || warning" + [ngClass]="{ 'is-invalid': error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning(), 'border-warning': warning() }" + [class.ng-invalid]="error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning()" [ngModel]="value" - [disabled]="disabled" - [min]="minDate" - [max]="maxDate" + [disabled]="disabled()" + [min]="minDate()" + [max]="maxDate()" (ngModelChange)="updateField($event)" [owlDateTime]="dt" name="datePicker" @@ -38,12 +38,12 @@ - + -@if (dateInput.invalid || (requiredField && !dateInput.value)) { -
+@if (dateInput.invalid || (requiredField() && !dateInput.value)) { +
} -@if (warning) { +@if (warning()) {
diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index 58196f94f02d..d02dba86213d 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output, ViewChild, forwardRef } from '@angular/core'; +import { Component, Input, ViewChild, computed, forwardRef, input, output } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms'; import { faCalendarAlt, faCircleXmark, faClock, faGlobe, faQuestionCircle, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'; import dayjs from 'dayjs/esm'; @@ -16,26 +16,26 @@ import dayjs from 'dayjs/esm'; ], }) export class FormDateTimePickerComponent implements ControlValueAccessor { + protected readonly faCalendarAlt = faCalendarAlt; + protected readonly faGlobe = faGlobe; + protected readonly faClock = faClock; + protected readonly faQuestionCircle = faQuestionCircle; + protected readonly faCircleXmark = faCircleXmark; + protected readonly faTriangleExclamation = faTriangleExclamation; + @ViewChild('dateInput', { static: false }) dateInput: NgModel; - @Input() labelName: string; - @Input() labelTooltip: string; + labelName = input(); + labelTooltip = input(); @Input() value: any; - @Input() disabled: boolean; - @Input() error: boolean; - @Input() warning: boolean; - @Input() requiredField: boolean = false; - @Input() startAt?: dayjs.Dayjs; // Default selected date. By default, this sets it to the current time without seconds or milliseconds; - @Input() min?: dayjs.Dayjs; // Dates before this date are not selectable. - @Input() max?: dayjs.Dayjs; // Dates after this date are not selectable. - @Input() shouldDisplayTimeZoneWarning = true; // Displays a warning that the current time zone might differ from the participants'. - @Output() valueChange = new EventEmitter(); - - readonly faCalendarAlt = faCalendarAlt; - readonly faGlobe = faGlobe; - readonly faClock = faClock; - readonly faQuestionCircle = faQuestionCircle; - readonly faCircleXmark = faCircleXmark; - readonly faTriangleExclamation = faTriangleExclamation; + disabled = input(); + error = input(); + warning = input(); + requiredField = input(false); + startAt? = input(); // Default selected date. By default, this sets it to the current time without seconds or milliseconds; + min? = input(); // Dates before this date are not selectable. + max? = input(); // Dates after this date are not selectable. + shouldDisplayTimeZoneWarning = input(true); // Displays a warning that the current time zone might differ from the participants'. + valueChange = output(); private onChange?: (val?: dayjs.Dayjs) => void; @@ -91,17 +91,17 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { return Intl.DateTimeFormat().resolvedOptions().timeZone; } - get startDate(): Date | null { - return this.convertToDate(this.startAt ?? dayjs().startOf('minutes')); - } + startDate = computed(() => { + return this.convertToDate(this.startAt?.() ?? dayjs().startOf('minutes')); + }); - get minDate(): Date | null { - return this.convertToDate(this.min); - } + minDate = computed(() => { + return this.convertToDate(this.min?.()); + }); - get maxDate(): Date | null { - return this.convertToDate(this.max); - } + maxDate = computed(() => { + return this.convertToDate(this.max?.()); + }); /** * Function that converts a possibly undefined dayjs value to a date or null. From 026a5700e025c131704bcec35f4aed54badb96f7 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Wed, 6 Nov 2024 21:37:47 +0100 Subject: [PATCH 02/10] Introduce signal for easy retrieval of valid state --- .../date-time-picker.component.html | 4 ++-- .../date-time-picker.component.ts | 18 +++++++++++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html index 90af5cb06b92..fcfa651b61a6 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html @@ -19,8 +19,8 @@ #dateInput="ngModel" class="form-control position-relative ps-5" id="date-input-field" - [ngClass]="{ 'is-invalid': error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning(), 'border-warning': warning() }" - [class.ng-invalid]="error() || dateInput.invalid || (requiredField() && !dateInput.value) || warning()" + [ngClass]="{ 'is-invalid': isValid(), 'border-warning': warning() }" + [class.ng-invalid]="!isValid()" [ngModel]="value" [disabled]="disabled()" [min]="minDate()" diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index d02dba86213d..eacc3eefcf02 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild, computed, forwardRef, input, output } from '@angular/core'; +import { Component, Input, ViewChild, computed, forwardRef, input, output, signal } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms'; import { faCalendarAlt, faCircleXmark, faClock, faGlobe, faQuestionCircle, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'; import dayjs from 'dayjs/esm'; @@ -37,6 +37,19 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { shouldDisplayTimeZoneWarning = input(true); // Displays a warning that the current time zone might differ from the participants'. valueChange = output(); + protected isInputValid = signal(false); + protected dateInputValue = signal(''); + + isValid = computed(() => { + const isInvalid = this.error() || !this.isInputValid() || (this.requiredField() && !this.dateInputValue()) || this.warning(); + return !isInvalid; + }); + + private updateSignals(): void { + this.isInputValid.set(!Boolean(this.dateInput.invalid)); + this.dateInputValue.set(this.dateInput.value); + } + private onChange?: (val?: dayjs.Dayjs) => void; /** @@ -44,6 +57,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { */ valueChanged() { this.valueChange.emit(); + this.updateSignals(); } /** @@ -57,6 +71,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { } else { this.value = value; } + this.updateSignals(); } /** @@ -117,5 +132,6 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { */ clearDate() { this.dateInput.reset(undefined); + this.updateSignals(); } } From 9b954b2c86c412539d046e78e652afbb9f2f9d3d Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Wed, 6 Nov 2024 21:40:51 +0100 Subject: [PATCH 03/10] Fix tests for date-time-picker.component.ts --- .../app/shared/date-time-picker/date-time-picker.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index eacc3eefcf02..c1f06c23a88e 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -46,8 +46,8 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { }); private updateSignals(): void { - this.isInputValid.set(!Boolean(this.dateInput.invalid)); - this.dateInputValue.set(this.dateInput.value); + this.isInputValid.set(!Boolean(this.dateInput?.invalid)); + this.dateInputValue.set(this.dateInput?.value); } private onChange?: (val?: dayjs.Dayjs) => void; From afed0909580a519bb0fe9243f29c9886a6a61593 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Wed, 6 Nov 2024 22:05:43 +0100 Subject: [PATCH 04/10] Adjust test --- .../shared/date-time-picker.component.spec.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts index ae0a2fbb29d7..2e6c6086c38e 100644 --- a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts +++ b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts @@ -98,16 +98,18 @@ describe('FormDateTimePickerComponent', () => { }); it('should have working getters', () => { - component.min = normalDate; - component.max = normalDate; - component.startAt = normalDate; + const expectedMinDate = normalDate.subtract(2, 'day'); + const expectedMaxDate = normalDate.add(2, 'day'); + const expectedStartDate = normalDate.add(1, 'day'); + + fixture.componentRef.setInput('min', expectedMinDate); + fixture.componentRef.setInput('max', expectedMaxDate); + fixture.componentRef.setInput('startAt', expectedStartDate); const timeZone = component.currentTimeZone; - const minDate = component.minDate; - const maxDate = component.maxDate; - const startDate = component.startDate; + expect(timeZone).toBeDefined(); - expect(minDate).toBeDefined(); - expect(maxDate).toBeDefined(); - expect(startDate).toBeDefined(); + expect(dayjs(component.minDate())).toEqual(expectedMinDate); + expect(dayjs(component.maxDate())).toEqual(expectedMaxDate); + expect(dayjs(component.startDate())).toEqual(expectedStartDate); }); }); From bf215cbd5379695ca86499232e0037541f4614de Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Wed, 6 Nov 2024 23:06:26 +0100 Subject: [PATCH 05/10] Fix compilation error --- .../date-time-picker/date-time-picker.component.html | 2 +- .../shared/date-time-picker/date-time-picker.component.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html index fcfa651b61a6..be3b713e9361 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html @@ -1,4 +1,4 @@ -@if (labelName) { +@if (labelName()) { diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index c1f06c23a88e..ff42d624166e 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -27,13 +27,13 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { labelName = input(); labelTooltip = input(); @Input() value: any; - disabled = input(); + disabled = input(false); error = input(); warning = input(); requiredField = input(false); - startAt? = input(); // Default selected date. By default, this sets it to the current time without seconds or milliseconds; - min? = input(); // Dates before this date are not selectable. - max? = input(); // Dates after this date are not selectable. + startAt = input(); // Default selected date. By default, this sets it to the current time without seconds or milliseconds; + min = input(); // Dates before this date are not selectable. + max = input(); // Dates after this date are not selectable. shouldDisplayTimeZoneWarning = input(true); // Displays a warning that the current time zone might differ from the participants'. valueChange = output(); From dcd52fde41187e9cdfc3fe3a07dee949302cd5c6 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Wed, 6 Nov 2024 23:12:17 +0100 Subject: [PATCH 06/10] Fix check for invalid --- .../app/shared/date-time-picker/date-time-picker.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html index be3b713e9361..691f2ef0b5af 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html @@ -19,7 +19,7 @@ #dateInput="ngModel" class="form-control position-relative ps-5" id="date-input-field" - [ngClass]="{ 'is-invalid': isValid(), 'border-warning': warning() }" + [ngClass]="{ 'is-invalid': !isValid(), 'border-warning': warning() }" [class.ng-invalid]="!isValid()" [ngModel]="value" [disabled]="disabled()" From ce2749b1630ab8b9fcd3eff828ac8d88529b54ac Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Thu, 7 Nov 2024 01:18:21 +0100 Subject: [PATCH 07/10] Use signals for value aswell --- .../date-time-picker.component.html | 2 +- .../date-time-picker/date-time-picker.component.ts | 12 ++++++------ .../shared/date-time-picker.component.spec.ts | 13 ++++++++----- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html index 691f2ef0b5af..e26c6b8f8633 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.html @@ -21,7 +21,7 @@ id="date-input-field" [ngClass]="{ 'is-invalid': !isValid(), 'border-warning': warning() }" [class.ng-invalid]="!isValid()" - [ngModel]="value" + [ngModel]="value()" [disabled]="disabled()" [min]="minDate()" [max]="maxDate()" diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index ff42d624166e..d42ece1ec51b 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild, computed, forwardRef, input, output, signal } from '@angular/core'; +import { Component, ViewChild, computed, forwardRef, input, model, output, signal } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgModel } from '@angular/forms'; import { faCalendarAlt, faCircleXmark, faClock, faGlobe, faQuestionCircle, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'; import dayjs from 'dayjs/esm'; @@ -26,7 +26,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { @ViewChild('dateInput', { static: false }) dateInput: NgModel; labelName = input(); labelTooltip = input(); - @Input() value: any; + value = model(); disabled = input(false); error = input(); warning = input(); @@ -67,9 +67,9 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { writeValue(value: any) { // convert dayjs to date, because owl-date-time only works correctly with date objects if (dayjs.isDayjs(value)) { - this.value = (value as dayjs.Dayjs).toDate(); + this.value.set((value as dayjs.Dayjs).toDate()); } else { - this.value = value; + this.value.set(value); } this.updateSignals(); } @@ -94,8 +94,8 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { * @param newValue */ updateField(newValue: dayjs.Dayjs) { - this.value = newValue; - this.onChange?.(dayjs(this.value)); + this.value.set(newValue); + this.onChange?.(dayjs(this.value())); this.valueChanged(); } diff --git a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts index 2e6c6086c38e..c69d3b8533ce 100644 --- a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts +++ b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts @@ -5,6 +5,8 @@ import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-ti import dayjs from 'dayjs/esm'; import { MockDirective, MockModule } from 'ng-mocks'; import { ArtemisTestModule } from '../../test.module'; +import { ArtemisTranslatePipe } from '../../../../../main/webapp/app/shared/pipes/artemis-translate.pipe'; +import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; describe('FormDateTimePickerComponent', () => { let component: FormDateTimePickerComponent; @@ -15,7 +17,7 @@ describe('FormDateTimePickerComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ArtemisTestModule, MockModule(OwlDateTimeModule)], + imports: [ArtemisTestModule, MockModule(OwlDateTimeModule), ArtemisTranslatePipe, NgbTooltipModule], declarations: [FormDateTimePickerComponent, MockDirective(NgModel)], }) .compileComponents() @@ -62,13 +64,13 @@ describe('FormDateTimePickerComponent', () => { it('should write the correct date if date is dayjs object', () => { component.writeValue(normalDate); - expect(component.value).toEqual(normalDateAsDateObject); + expect(component.value()).toEqual(normalDateAsDateObject); }); it('should write the correct date if date is date object', () => { component.writeValue(normalDateAsDateObject); - expect(component.value).toEqual(normalDateAsDateObject); + expect(component.value()).toEqual(normalDateAsDateObject); }); }); @@ -87,11 +89,12 @@ describe('FormDateTimePickerComponent', () => { component.registerOnChange(onChangeSpy); const valueChangedStub = jest.spyOn(component, 'valueChanged').mockImplementation(); const newDate = normalDate.add(2, 'days'); - component.value = normalDate; + fixture.componentRef.setInput('value', normalDate); + fixture.detectChanges(); component.updateField(newDate); - expect(component.value).toEqual(newDate); + expect(component.value()).toEqual(newDate); expect(onChangeSpy).toHaveBeenCalledOnce(); expect(onChangeSpy).toHaveBeenCalledWith(newDate); expect(valueChangedStub).toHaveBeenCalledOnce(); From 25d9d1dfdd653ccc42901f15dd28effda7225101 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Thu, 7 Nov 2024 01:19:28 +0100 Subject: [PATCH 08/10] Optimize tests by mocking modules --- .../spec/component/shared/date-time-picker.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts index c69d3b8533ce..31e118ad694d 100644 --- a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts +++ b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts @@ -3,7 +3,7 @@ import { NgModel } from '@angular/forms'; import { OwlDateTimeModule } from '@danielmoncada/angular-datetime-picker'; import { FormDateTimePickerComponent } from 'app/shared/date-time-picker/date-time-picker.component'; import dayjs from 'dayjs/esm'; -import { MockDirective, MockModule } from 'ng-mocks'; +import { MockDirective, MockModule, MockPipe } from 'ng-mocks'; import { ArtemisTestModule } from '../../test.module'; import { ArtemisTranslatePipe } from '../../../../../main/webapp/app/shared/pipes/artemis-translate.pipe'; import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; @@ -17,7 +17,7 @@ describe('FormDateTimePickerComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ArtemisTestModule, MockModule(OwlDateTimeModule), ArtemisTranslatePipe, NgbTooltipModule], + imports: [ArtemisTestModule, MockModule(OwlDateTimeModule), MockPipe(ArtemisTranslatePipe), MockModule(NgbTooltipModule)], declarations: [FormDateTimePickerComponent, MockDirective(NgModel)], }) .compileComponents() From aee3f417affed1e2bdeb7abeb1a2d6468fa976b2 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Thu, 7 Nov 2024 01:41:19 +0100 Subject: [PATCH 09/10] Make type more concrete --- .../app/shared/date-time-picker/date-time-picker.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index d42ece1ec51b..9a4bfa15c72b 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -26,7 +26,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { @ViewChild('dateInput', { static: false }) dateInput: NgModel; labelName = input(); labelTooltip = input(); - value = model(); + value = model(); disabled = input(false); error = input(); warning = input(); From 942792dfe50c1e4c0d22352028d3631131afd222 Mon Sep 17 00:00:00 2001 From: Florian Glombik Date: Fri, 8 Nov 2024 02:46:12 +0100 Subject: [PATCH 10/10] Increase test coverage --- .../date-time-picker/date-time-picker.component.ts | 2 +- .../shared/date-time-picker.component.spec.ts | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts index 9a4bfa15c72b..5d1c3bcaf164 100644 --- a/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts +++ b/src/main/webapp/app/shared/date-time-picker/date-time-picker.component.ts @@ -45,7 +45,7 @@ export class FormDateTimePickerComponent implements ControlValueAccessor { return !isInvalid; }); - private updateSignals(): void { + updateSignals(): void { this.isInputValid.set(!Boolean(this.dateInput?.invalid)); this.dateInputValue.set(this.dateInput?.value); } diff --git a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts index 31e118ad694d..2284476033cf 100644 --- a/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts +++ b/src/test/javascript/spec/component/shared/date-time-picker.component.spec.ts @@ -24,6 +24,7 @@ describe('FormDateTimePickerComponent', () => { .then(() => { fixture = TestBed.createComponent(FormDateTimePickerComponent); component = fixture.componentInstance; + component.dateInput = { reset: jest.fn() } as any; }); }); @@ -115,4 +116,14 @@ describe('FormDateTimePickerComponent', () => { expect(dayjs(component.maxDate())).toEqual(expectedMaxDate); expect(dayjs(component.startDate())).toEqual(expectedStartDate); }); + + it('should clear the datepicker value', () => { + const resetSpy = jest.spyOn(component.dateInput, 'reset').mockImplementation(); + const updateSignalsSpy = jest.spyOn(component, 'updateSignals').mockImplementation(); + + component.clearDate(); + + expect(resetSpy).toHaveBeenCalledWith(undefined); + expect(updateSignalsSpy).toHaveBeenCalled(); + }); });