FIX: display-edit dev build errors (#106)

* refactor (display-edit): first not-so-elegant way of fixing dev build errors

* fix (display-edit): fixed a bug I introduced while fixing another bug

* tests (operations): add assertions to display edit comp.

* formatting

* Revert "refactor (display-edit): first not-so-elegant way of fixing dev build errors"

This reverts commit 2ea88b6.

# Conflicts:
#	projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts

* revert (display-edit): revert to original logic

* fix (display-edit): fixed incorrect member name

* fix (tests): display-edit unit tests now check for an instance of the appropriate readvalue. Also added some missing values

* reworded a comment

Co-authored-by: Tobias Schweizer <t.schweizer@unibas.ch>

projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.html

@@ -1,7 +1,7 @@
 <div class="grid-container">
   <div class="property-header">
     <h4 class="label">
-      {{displayValue.propertyLabel}}
+        {{displayValue.propertyLabel}}
     </h4>
     <button mat-button
             class="info"
@@ -11,22 +11,23 @@ <h4 class="label">
   </div>
   <div class="value-component">
     <span [ngSwitch]="valueTypeOrClass">
-      <dsp-text-value-as-string class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-text-value-as-string>
-      <dsp-text-value-as-html class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsHtml'" [mode]="mode" [displayValue]=$any(displayValue)></dsp-text-value-as-html>
-      <dsp-int-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-int-value>
-      <dsp-boolean-value class="parent-value-component" #displayVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-boolean-value>
-      <dsp-uri-value class="parent-value-component" #displayVal *ngSwitchCase="constants.UriValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-uri-value>
-      <dsp-decimal-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DecimalValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-decimal-value>
-      <dsp-color-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ColorValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-color-value>
-      <dsp-interval-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntervalValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-interval-value>
-      <dsp-time-value class="parent-value-component" #displayVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-time-value>
-      <dsp-geoname-value class="parent-value-component" #displayVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-geoname-value>
-      <dsp-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]=$any(displayValue)
+        <!-- display value is cast as 'any' because the compiler cannot infer the value type expected by the child component -->
+        <dsp-text-value-as-string class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-text-value-as-string>
+        <dsp-text-value-as-html class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsHtml'" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-text-value-as-html>
+        <dsp-int-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-int-value>
+        <dsp-boolean-value class="parent-value-component" #displayVal *ngSwitchCase="constants.BooleanValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-boolean-value>
+        <dsp-uri-value class="parent-value-component" #displayVal *ngSwitchCase="constants.UriValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-uri-value>
+        <dsp-decimal-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DecimalValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-decimal-value>
+        <dsp-color-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ColorValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-color-value>
+        <dsp-interval-value class="parent-value-component" #displayVal *ngSwitchCase="constants.IntervalValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-interval-value>
+        <dsp-time-value class="parent-value-component" #displayVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-time-value>
+        <dsp-geoname-value class="parent-value-component" #displayVal *ngSwitchCase="constants.GeonameValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-geoname-value>
+        <dsp-link-value class="parent-value-component" #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="$any(displayValue)"
                     [parentResource]="parentResource" [propIri]="displayValue.property"></dsp-link-value>
-      <dsp-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]=$any(displayValue)></dsp-date-value>
-      <dsp-list-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]=$any(displayValue)
+        <dsp-date-value class="parent-value-component" #displayVal *ngSwitchCase="constants.DateValue" [mode]="mode" [displayValue]="$any(displayValue)"></dsp-date-value>
+        <dsp-list-value class="parent-value-component" #displayVal *ngSwitchCase="constants.ListValue" [mode]="mode" [displayValue]="$any(displayValue)"
                     [propertyDef]="$any(parentResource.entityInfo.properties[displayValue.property])"></dsp-list-value>
-      <span *ngSwitchDefault>{{displayValue.strval}}</span>
+        <span *ngSwitchDefault>{{displayValue.strval}}</span>
     </span>
   </div>
   <!-- TEMPORARY CODE: TO HIDE BUTTONS FOR VALUE COMPONENTS NOT YET IMPLEMENTED -->

projects/dsp-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts

@@ -15,7 +15,16 @@ import {
     UpdateResource,
     UpdateValue,
     ValuesEndpointV2,
-    WriteValueResponse
+    WriteValueResponse,
+    ReadBooleanValue,
+    ReadUriValue,
+    ReadDecimalValue,
+    ReadColorValue,
+    ReadIntervalValue,
+    ReadTimeValue,
+    ReadLinkValue,
+    ReadListValue,
+    ReadGeonameValue
 } from '@knora/api';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -294,7 +303,7 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestTextValueAsStringComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadTextValueAsString).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -314,7 +323,7 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestTextValueAsHtmlComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadTextValueAsHtml).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -325,7 +334,7 @@ describe('DisplayEditComponent', () => {
       expect(testHostComponent.displayEditValueComponent).toBeTruthy();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestIntValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadIntValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -336,7 +345,7 @@ describe('DisplayEditComponent', () => {
       expect(testHostComponent.displayEditValueComponent).toBeTruthy();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestBooleanValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadBooleanValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -347,7 +356,7 @@ describe('DisplayEditComponent', () => {
       expect(testHostComponent.displayEditValueComponent).toBeTruthy();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestUriValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadUriValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -357,7 +366,7 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestDecimalValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadDecimalValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -367,7 +376,7 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestColorValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadColorValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -377,7 +386,7 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestIntervalValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadIntervalValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -387,7 +396,7 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestTimeValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadTimeValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
     });
 
@@ -397,13 +406,35 @@ describe('DisplayEditComponent', () => {
       testHostFixture.detectChanges();
 
       expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestLinkValueComponent).toBe(true);
-      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue).not.toBeUndefined();
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadLinkValue).toBe(true);
       expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
       expect((testHostComponent.displayEditValueComponent.displayValueComponent as unknown as TestLinkValueComponent).parentResource instanceof ReadResource).toBe(true);
       expect((testHostComponent.displayEditValueComponent.displayValueComponent as unknown as TestLinkValueComponent).propIri).toEqual('http://0.0.0.0:3333/ontology/0001/anything/v2#hasOtherThingValue');
 
     });
 
+    it('should choose the apt component for a list value in the template', () => {
+        testHostComponent.assignValue('http://0.0.0.0:3333/ontology/0001/anything/v2#hasListItem');
+        testHostFixture.detectChanges();
+
+        expect(testHostComponent.displayEditValueComponent).toBeTruthy();
+
+        expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestListValueComponent).toBe(true);
+        expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadListValue).toBe(true);
+        expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
+    });
+
+    it('should choose the apt component for a geoname value in the template', () => {
+        testHostComponent.assignValue('http://0.0.0.0:3333/ontology/0001/anything/v2#hasGeoname');
+        testHostFixture.detectChanges();
+
+        expect(testHostComponent.displayEditValueComponent).toBeTruthy();
+
+        expect(testHostComponent.displayEditValueComponent.displayValueComponent instanceof TestGeonameValueComponent).toBe(true);
+        expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue instanceof ReadGeonameValue).toBe(true);
+        expect(testHostComponent.displayEditValueComponent.displayValueComponent.mode).toEqual('read');
+    });
+
   });
 
   describe('methods getValueType and isReadOnly', () => {
@@ -580,6 +611,7 @@ describe('DisplayEditComponent', () => {
         'uuid');
 
       expect(testHostComponent.displayEditValueComponent.displayValue.id).toEqual('newID');
+      expect(testHostComponent.displayEditValueComponent.displayValueComponent.displayValue.id).toEqual('newID');
       expect(testHostComponent.displayEditValueComponent.mode).toEqual('read');
 
     });