Adapt list value component (#139)

* fix (list value comp): adapt list value comp. (ongoing) * test (travis): use yalc in travis * test (list comp.): fix test * refactor (package.json): update Knora-ui
dasch-swiss · Jun 14, 2019 · ba99748 · ba99748
1 parent 5bebc5f
commit ba99748
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -25,10 +25,10 @@
     "@angular/platform-browser": "^7.2.8",
     "@angular/platform-browser-dynamic": "^7.2.8",
     "@angular/router": "^7.2.8",
-    "@knora/action": "7.3.0",
-    "@knora/core": " 7.3.0",
-    "@knora/search": "7.3.0",
-    "@knora/viewer": "7.3.0",
+    "@knora/action": "7.6.0",
+    "@knora/core": " 7.6.0",
+    "@knora/search": "7.6.0",
+    "@knora/viewer": "7.6.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "jdnconvertiblecalendar": "^0.0.3",

diff --git a/src/app/properties/read-list-value/read-list-value.component.html b/src/app/properties/read-list-value/read-list-value.component.html
@@ -1 +1 @@
-<span [renderMath]="renderMath" [mathJax]="valueObject.listNodeLabel" [bindEvents]="false"></span>
+<span *ngIf="node | async" [renderMath]="renderMath" [mathJax]="(node | async )?.label" [bindEvents]="false"></span>
diff --git a/src/app/properties/read-list-value/read-list-value.component.spec.ts b/src/app/properties/read-list-value/read-list-value.component.spec.ts
@@ -4,45 +4,55 @@ import { MathJaxDirective } from '../../directives/mathjax.directive';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MatSnackBarModule } from '@angular/material';
 import { Component, DebugElement, OnInit, ViewChild } from '@angular/core';
-import { KuiCoreConfig, KuiCoreConfigToken, ReadListValue } from '@knora/core';
+import { KuiCoreConfig, KuiCoreConfigToken, ListCacheService, ListNodeV2, ReadListValue } from '@knora/core';
 import { By } from '@angular/platform-browser';
 
-import { HttpClientModule } from '@angular/common/http';
-
 import { AppInitService } from '../../app-init.service';
+import { of } from 'rxjs';
+import { HttpClientModule } from '@angular/common/http';
 
 
 describe('ReadListValueComponent', () => {
     let testHostComponent: TestHostComponent;
     let testHostFixture: ComponentFixture<TestHostComponent>;
 
     let appInitService: AppInitService;
+    let listCacheService: ListCacheService;
 
     beforeEach(async(() => {
         const appInitServiceSpy = jasmine.createSpyObj('AppInitService', ['getSettings']);
 
+        const spyListCacheService = jasmine.createSpyObj('ListCacheService', ['getListNode']);
+
         TestBed.configureTestingModule({
-            imports: [
-                RouterTestingModule,
-                MatSnackBarModule,
-                HttpClientModule
-            ],
             declarations: [
                 ReadListValueComponent,
                 TestHostComponent,
                 TestHostComponent2,
                 MathJaxDirective // idea for mock: https://stackoverflow.com/questions/44495114/is-it-possible-to-mock-an-attribute-directive-in-angular
             ],
+            imports: [
+                RouterTestingModule,
+                MatSnackBarModule,
+                HttpClientModule
+            ],
             providers: [
-                { provide: KuiCoreConfigToken, useValue: KuiCoreConfig },
-                { provide: AppInitService, useValue: appInitServiceSpy }
+                {provide: ListCacheService, useValue: spyListCacheService},
+                {provide: KuiCoreConfigToken, useValue: KuiCoreConfig},
+                {provide: AppInitService, useValue: appInitServiceSpy}
             ]
         })
             .compileComponents();
 
         appInitServiceSpy.getSettings.and.returnValue({ontologyIRI: 'http://0.0.0.0:3333'});
 
         appInitService = TestBed.get(AppInitService);
+
+        spyListCacheService.getListNode.and.callFake((nodeIri) => {
+            return of(new ListNodeV2(nodeIri, 'test' + nodeIri, 1, ''));
+        });
+
+        listCacheService = TestBed.get(ListCacheService);
     }));
 
     beforeEach(() => {
@@ -62,7 +72,7 @@ describe('ReadListValueComponent', () => {
     });
 
     it('should be equal to the list node label value "ListNodeLabel1"', () => {
-        expect(testHostComponent.listValueComponent.valueObject.listNodeLabel).toEqual('ListNodeLabel1');
+        expect(testHostComponent.listValueComponent.valueObject.listNodeIri).toEqual('http://rdfh.ch/8be1b7cf7103');
 
         const hostCompDe = testHostFixture.debugElement;
 
@@ -72,7 +82,10 @@ describe('ReadListValueComponent', () => {
 
         const spanNativeElement: HTMLElement = spanDebugElement.nativeElement;
 
-        expect(spanNativeElement.innerText).toEqual('ListNodeLabel1');
+        expect(spanNativeElement.innerText).toEqual('testhttp://rdfh.ch/8be1b7cf7103');
+
+        expect(listCacheService.getListNode).toHaveBeenCalledTimes(1);
+        expect(listCacheService.getListNode).toHaveBeenCalledWith('http://rdfh.ch/8be1b7cf7103');
 
         const mathJaxDirDe: DebugElement = hostCompDe.query(By.directive(MathJaxDirective));
 
@@ -81,7 +94,7 @@ describe('ReadListValueComponent', () => {
     });
 
     it('should be equal to the list node label value "ListNodeLabel2"', () => {
-        testHostComponent.listValue = new ReadListValue('id', 'propIri', 'http://rdfh.ch/9sdf8sfd2jf9', 'ListNodeLabel2');
+        testHostComponent.listValue = new ReadListValue('id', 'propIri', 'http://rdfh.ch/9sdf8sfd2jf9');
 
         testHostFixture.detectChanges();
 
@@ -93,7 +106,11 @@ describe('ReadListValueComponent', () => {
 
         const spanNativeElement: HTMLElement = spanDebugElement.nativeElement;
 
-        expect(spanNativeElement.innerText).toEqual('ListNodeLabel2');
+        expect(spanNativeElement.innerText).toEqual('testhttp://rdfh.ch/9sdf8sfd2jf9');
+
+        expect(listCacheService.getListNode).toHaveBeenCalledTimes(2);
+        expect(listCacheService.getListNode).toHaveBeenCalledWith('http://rdfh.ch/8be1b7cf7103');
+        expect(listCacheService.getListNode).toHaveBeenCalledWith('http://rdfh.ch/9sdf8sfd2jf9');
 
         const mathJaxDirDe: DebugElement = hostCompDe.query(By.directive(MathJaxDirective));
 
@@ -133,7 +150,7 @@ class TestHostComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.listValue = new ReadListValue('id', 'propIri', 'http://rdfh.ch/8be1b7cf7103', 'ListNodeLabel1');
+        this.listValue = new ReadListValue('id', 'propIri', 'http://rdfh.ch/8be1b7cf7103');
     }
 }
 
@@ -156,6 +173,6 @@ class TestHostComponent2 implements OnInit {
     }
 
     ngOnInit() {
-        this.listValue = new ReadListValue('id', 'propIri', 'http://rdfh.ch/8be1b7cf7103', 'ListNodeLabel1');
+        this.listValue = new ReadListValue('id', 'propIri', 'http://rdfh.ch/8be1b7cf7103');
     }
 }
diff --git a/src/app/properties/read-list-value/read-list-value.component.ts b/src/app/properties/read-list-value/read-list-value.component.ts
@@ -1,12 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ReadListValue } from '@knora/core';
+import { Component, Input, OnChanges } from '@angular/core';
+import { ListCacheService, ListNodeV2, ReadListValue } from '@knora/core';
+import { Observable } from 'rxjs';
 
 @Component({
     selector: 'read-list-value',
     templateUrl: './read-list-value.component.html',
     styleUrls: ['./read-list-value.component.scss']
 })
-export class ReadListValueComponent implements OnInit {
+export class ReadListValueComponent implements OnChanges {
 
     @Input() valueObject: ReadListValue;
 
@@ -21,10 +22,15 @@ export class ReadListValueComponent implements OnInit {
         return this._renderMath;
     }
 
-    constructor() {
+    node: Observable<ListNodeV2>;
+
+    constructor(private _listCacheService: ListCacheService) {
     }
 
-    ngOnInit() {
+    ngOnChanges() {
+        // given the node's Iri, ask the list cache service
+        this.node = this._listCacheService.getListNode(this.valueObject.listNodeIri);
+
     }
 
 }
diff --git a/src/app/resource/letter/letter.component.ts b/src/app/resource/letter/letter.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 import {
     IncomingService,
-    KnoraConstants,
+    KnoraConstants, ListCacheService, ListNodeV2,
     OntologyCacheService,
     OntologyInformation,
     ReadDateValue,
@@ -92,6 +92,7 @@ export class LetterComponent extends BeolResource {
                 protected _incomingService: IncomingService,
                 public location: Location,
                 protected _beolService: BeolService,
+                private _listCacheService: ListCacheService,
                 private _appInitService: AppInitService
     ) {
 
@@ -101,11 +102,15 @@ export class LetterComponent extends BeolResource {
 
     initProps() {
 
-        const props = new LetterProps();
+        // request subject index so it is cached
+        this._listCacheService.getList('http://rdfh.ch/lists/0801/subject_index').subscribe((list: ListNodeV2) => {
 
-        this.mapper(props);
+            const props = new LetterProps();
 
-        this.props = props;
+            this.mapper(props);
+
+            this.props = props;
+        });
 
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<span [renderMath]="renderMath" [mathJax]="valueObject.listNodeLabel" [bindEvents]="false"></span>
		<span *ngIf="node \| async" [renderMath]="renderMath" [mathJax]="(node \| async )?.label" [bindEvents]="false"></span>