fix(date-value-handler): add some null checks to ensure component has everything it needs before trying to use a property (#771)

Author: mdelez

angular.json

@@ -56,7 +56,7 @@
                     "configurations": {
                         "development": {
                             "optimization": false,
-                            "sourceMap": false,
+                            "sourceMap": true,
                             "namedChunks": true,
                             "aot": true,
                             "extractLicenses": false,

src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.html

@@ -12,8 +12,9 @@
             <mat-icon *ngIf="isPeriodControl.value">remove</mat-icon>
         </button>
 
-        <div *ngIf="isPeriodControl.value" class="date-form-field">
-            <app-date-picker class="end-date" [formControlName]="'endDate'" [disableCalendarSelector]="true" [calendar]="startDate.value.calendar">
+        <div *ngIf="isPeriodControl.value && startDate.value" class="date-form-field">
+            <app-date-picker class="end-date" [formControlName]="'endDate'" [disableCalendarSelector]="true"
+                [calendar]="startDate.value.calendar">
             </app-date-picker>
         </div>
     </div>
@@ -30,4 +31,4 @@
         </mat-error>
     </div>
 
-</div>
+</div>

src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.spec.ts

@@ -286,16 +286,25 @@ describe('DateValueHandlerComponent', () => {
         (startDateEditComponentDe.componentInstance as TestDatePickerComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
         (startDateEditComponentDe.componentInstance as TestDatePickerComponent)._handleInput();
 
+        testHostFixture.detectChanges();
+
         const endDateEditComponentDe = hostCompDe.query(By.css('.end-date'));
 
         (endDateEditComponentDe.componentInstance as TestDatePickerComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2020, 5, 19));
         (endDateEditComponentDe.componentInstance as TestDatePickerComponent)._handleInput();
 
+        testHostFixture.detectChanges();
+
         await testHostFixture.whenStable();
 
         expect(testHostComponent.dateValueHandlerComponent.form.valid).toBe(true);
 
         expect(testHostComponent.form.controls.date.value).toEqual(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2019, 5, 19), new KnoraDate('JULIAN', 'CE', 2020, 5, 19)));
+
+        // access private _subscriptions property and ensure that each subscription is still open
+        testHostComponent.dateValueHandlerComponent['_subscriptions'].forEach((sub) => {
+            expect(sub.closed).toBeFalse();
+        });
     });
 
     it('should return "null" for an invalid user input (start date greater than end date)', async () => {
@@ -373,7 +382,44 @@ describe('DateValueHandlerComponent (no validator required)', () => {
         expect(testHostComponent).toBeTruthy();
     });
 
-    it('should receive the propagated valueRequiredValidator from the parent component', () => {
+    it('should propagate changes made by the user for a period', async () => {
+        expect(testHostComponent.dateValueHandlerComponent.isPeriodControl.value).toBeFalse();
+
+        testHostComponent.dateValueHandlerComponent.isPeriodControl.setValue(true);
+
+        expect(testHostComponent.dateValueHandlerComponent.isPeriodControl.value).toBeTrue();
+
+        testHostFixture.detectChanges();
+
+        const hostCompDe = testHostFixture.debugElement;
+
+        const startDateEditComponentDe = hostCompDe.query(By.css('.start-date'));
+
+        (startDateEditComponentDe.componentInstance as TestDatePickerComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2019, 5, 19));
+        (startDateEditComponentDe.componentInstance as TestDatePickerComponent)._handleInput();
+
+        testHostFixture.detectChanges();
+
+        const endDateEditComponentDe = hostCompDe.query(By.css('.end-date'));
+
+        (endDateEditComponentDe.componentInstance as TestDatePickerComponent).writeValue(new KnoraDate('JULIAN', 'CE', 2020, 5, 19));
+        (endDateEditComponentDe.componentInstance as TestDatePickerComponent)._handleInput();
+
+        testHostFixture.detectChanges();
+
+        await testHostFixture.whenStable();
+
+        expect(testHostComponent.dateValueHandlerComponent.form.valid).toBe(true);
+
+        expect(testHostComponent.form.controls.date.value).toEqual(new KnoraPeriod(new KnoraDate('JULIAN', 'CE', 2019, 5, 19), new KnoraDate('JULIAN', 'CE', 2020, 5, 19)));
+
+        // access private _subscriptions property and ensure that each subscription is still open
+        testHostComponent.dateValueHandlerComponent['_subscriptions'].forEach((sub) => {
+            expect(sub.closed).toBeFalse();
+        });
+    });
+
+    it('should not receive the propagated valueRequiredValidator from the parent component', () => {
         expect(testHostComponent.dateValueHandlerComponent.valueRequiredValidator).toBe(false);
     });
 

src/app/workspace/resource/values/date-value/date-value-handler/date-value-handler.component.ts

@@ -100,7 +100,7 @@ export class DateValueHandlerComponent extends _MatInputMixinBase implements Con
         if (!this.isPeriodControl.value) {
             return this.startDate.value;
         } else {
-            if (this.startDate.value.calendar !== this.endDate.value.calendar) {
+            if (this.endDate.value && (this.startDate.value.calendar !== this.endDate.value.calendar)) {
                 this.endDate.value.calendar = this.startDate.value.calendar;
             }
 
@@ -109,7 +109,6 @@ export class DateValueHandlerComponent extends _MatInputMixinBase implements Con
     }
 
     set value(date: KnoraDate | KnoraPeriod | null) {
-
         if (date instanceof KnoraDate) {
             // single date
             this.calendarControl.setValue(date.calendar);