refactor: update imports step 1 (DSP-1882) (#516)

* refactor: update imports

* fix(test): fix login comp tests

* fix(test): fix resource-class-form comp test

* fix(test): fixes header comp tests

* fix(test): fixes remaining failing unit tests

* refactor(resource-class-form): updates the components used from the one found in the dsp-ui to the ones migrated to dsp-app

Author: mdelez

src/app/app.component.spec.ts

@@ -6,16 +6,11 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterTestingModule } from '@angular/router/testing';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
-import {
-    AppInitService,
-    DspActionModule,
-    DspApiConfigToken,
-    DspApiConnectionToken,
-    DspSearchModule
-} from '@dasch-swiss/dsp-ui';
+import { AppInitService, DspActionModule, DspSearchModule } from '@dasch-swiss/dsp-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { TestConfig } from 'test.config';
 import { AppComponent } from './app.component';
+import { DspApiConfigToken, DspApiConnectionToken } from './main/declarations/dsp-api-tokens';
 import { HeaderComponent } from './main/header/header.component';
 import { SelectLanguageComponent } from './main/select-language/select-language.component';
 import { UserMenuComponent } from './user/user-menu/user-menu.component';

src/app/app.module.ts

@@ -7,14 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
-import {
-    DspActionModule,
-    DspApiConfigToken,
-    DspApiConnectionToken,
-    DspCoreModule,
-    DspSearchModule,
-    DspViewerModule
-} from '@dasch-swiss/dsp-ui';
+import { DspActionModule, DspCoreModule, DspSearchModule, DspViewerModule } from '@dasch-swiss/dsp-ui';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AngularSplitModule } from 'angular-split';
@@ -166,6 +159,7 @@ import { ResourceAndPropertySelectionComponent } from './workspace/search/advanc
 import { SearchSelectPropertyComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-property/search-select-property.component';
 import { SearchSelectResourceClassComponent } from './workspace/search/advanced-search/resource-and-property-selection/search-select-resource-class/search-select-resource-class.component';
 import { SearchSelectOntologyComponent } from './workspace/search/advanced-search/search-select-ontology/search-select-ontology.component';
+import { DspApiConfigToken, DspApiConnectionToken } from './main/declarations/dsp-api-tokens';
 
 // translate: AoT requires an exported function for factories
 export function httpLoaderFactory(httpClient: HttpClient) {

src/app/main/cache/cache.service.spec.ts

@@ -2,7 +2,8 @@ import { TestBed } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DspActionModule, DspApiConnectionToken, DspCoreModule } from '@dasch-swiss/dsp-ui';
+import { DspActionModule, DspCoreModule } from '@dasch-swiss/dsp-ui';
+import { DspApiConnectionToken } from '../declarations/dsp-api-tokens';
 import { CacheService } from './cache.service';
 
 describe('CacheService', () => {

src/app/main/error/error-handler.service.spec.ts

@@ -2,7 +2,8 @@ import { TestBed } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DspActionModule, DspApiConnectionToken, DspCoreModule } from '@dasch-swiss/dsp-ui';
+import { DspActionModule, DspCoreModule } from '@dasch-swiss/dsp-ui';
+import { DspApiConnectionToken } from '../declarations/dsp-api-tokens';
 import { ErrorHandlerService } from './error-handler.service';
 
 describe('ErrorHandlerService', () => {

src/app/main/error/error-handler.service.ts

@@ -1,8 +1,10 @@
 import { Inject, Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { ApiResponseData, ApiResponseError, KnoraApiConnection, LogoutResponse } from '@dasch-swiss/dsp-js';
-import { DspApiConnectionToken, NotificationService, SessionService } from '@dasch-swiss/dsp-ui';
+import { DspApiConnectionToken } from '../declarations/dsp-api-tokens';
 import { DialogComponent } from '../dialog/dialog.component';
+import { NotificationService } from '../services/notification.service';
+import { SessionService } from '../services/session.service';
 
 @Injectable({
     providedIn: 'root'

src/app/main/guard/auth.guard.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { SessionService } from '@dasch-swiss/dsp-ui';
+import { SessionService } from '../services/session.service';
 
 @Injectable({
     providedIn: 'root'

src/app/main/header/header.component.html

@@ -13,12 +13,12 @@ <h1 class="mat-headline phone-tablet-only">DSP</h1>
     <!-- search-panel (in desktop and tablet version) -->
     <span class="action">
         <!-- button to reactivate when dsp-app will be used as a research platform again: -->
-        <dsp-search-panel
+        <app-search-panel
             [projectfilter]="true"
             [advanced]="true"
             [expert]="true"
             (search)="doSearch($event)">
-        </dsp-search-panel>
+        </app-search-panel>
 
     </span>
 

src/app/main/header/header.component.spec.ts

@@ -1,4 +1,5 @@
 import { HttpClientModule } from '@angular/common/http';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
@@ -8,38 +9,62 @@ import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
-import {
-    AppInitService,
-    DspActionModule,
-    DspApiConfigToken,
-    DspApiConnectionToken,
-    DspCoreModule,
-    DspSearchModule
-} from '@dasch-swiss/dsp-ui';
+import { DspActionModule, DspSearchModule } from '@dasch-swiss/dsp-ui';
 import { TranslateModule } from '@ngx-translate/core';
+import { AppInitService } from 'src/app/app-init.service';
 import { ComponentCommunicationEventService, EmitEvent, Events } from 'src/app/main/services/component-communication-event.service';
 import { UserMenuComponent } from 'src/app/user/user-menu/user-menu.component';
 import { TestConfig } from 'test.config';
+import { DspApiConfigToken, DspApiConnectionToken } from '../declarations/dsp-api-tokens';
 import { SelectLanguageComponent } from '../select-language/select-language.component';
 import { HeaderComponent } from './header.component';
 
+/**
+ * test host component to simulate parent component.
+ */
+@Component({
+    template: '<app-header #header></app-header>'
+})
+class TestHostHeaderComponent {
+    @ViewChild('header') headerComp: HeaderComponent;
+}
+
+/**
+ * test component to simulate search panel component.
+ */
+@Component({
+    selector: 'app-search-panel',
+    template: ''
+})
+class TestSearchPanelComponent {
+    @Input() projectfilter?: boolean = false;
+    @Input() filterbyproject?: string;
+    @Input() limitToProject?: string;
+    @Input() advanced?: boolean = false;
+    @Input() expert?: boolean = false;
+}
+
 describe('HeaderComponent', () => {
-    let component: HeaderComponent;
-    let fixture: ComponentFixture<HeaderComponent>;
+    let testHostComponent: TestHostHeaderComponent;
+    let testHostFixture: ComponentFixture<TestHostHeaderComponent>;
+    let hostCompDe;
+    let headerCompDe;
+
     let componentCommsService: ComponentCommunicationEventService;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 HeaderComponent,
+                TestHostHeaderComponent,
+                TestSearchPanelComponent,
                 SelectLanguageComponent,
                 UserMenuComponent
             ],
             imports: [
                 BrowserAnimationsModule,
                 HttpClientModule,
                 DspActionModule,
-                DspCoreModule,
                 DspSearchModule,
                 MatIconModule,
                 MatListModule,
@@ -66,55 +91,59 @@ describe('HeaderComponent', () => {
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(HeaderComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+        testHostFixture = TestBed.createComponent(TestHostHeaderComponent);
+        testHostComponent = testHostFixture.componentInstance;
+        testHostFixture.detectChanges();
+
+        hostCompDe = testHostFixture.debugElement;
+        headerCompDe = hostCompDe.query(By.directive(HeaderComponent));
     });
 
     it('should create', () => {
-        expect(component).toBeTruthy();
+        expect(testHostComponent).toBeTruthy();
     });
 
     it('should display the lamp icon button', () => {
-        const lampIconBtn = fixture.debugElement.query(By.css('button.home-button'));
-        expect(lampIconBtn).toBeDefined();
+        const lampIconBtn = testHostFixture.debugElement.query(By.css('button.home-button'));
+        expect(lampIconBtn).toBeTruthy();
     });
 
     it('should display the link to the help page', () => {
-        const helpBtn = fixture.debugElement.query(By.css('button.help'));
-        expect(helpBtn).toBeDefined();
+        const helpBtn = testHostFixture.debugElement.query(By.css('button.help'));
+        expect(helpBtn).toBeTruthy();
 
         const helpBtnLabel = helpBtn.nativeElement.innerHTML;
         expect(helpBtnLabel).toEqual('Help');
     });
 
     it('should display the login button', () => {
-        const loginBtn = fixture.debugElement.query(By.css('button.login-button'));
-        expect(loginBtn).toBeDefined();
+        const loginBtn = testHostFixture.debugElement.query(By.css('button.login-button'));
+        expect(loginBtn).toBeTruthy();
 
         const loginBtnLabel = loginBtn.nativeElement.innerHTML;
         expect(loginBtnLabel).toEqual('LOGIN');
     });
 
-    it('should display fulltext-search', () => {
-        const searchPanel = fixture.debugElement.query(By.css('dsp-fulltext-search-panel'));
-        expect(searchPanel).toBeDefined();
+    it('should display search panel', () => {
+        const searchPanel = testHostFixture.debugElement.query(By.css('app-search-panel'));
+        expect(searchPanel).toBeTruthy();
     });
 
     it('should subscribe to component communication when the loginSuccess event is emitted', () => {
         componentCommsService.emit(new EmitEvent(Events.loginSuccess));
-        fixture.detectChanges();
-        expect(component.componentCommsSubscription.closed).toBe(false);
+        testHostFixture.detectChanges();
+        expect(testHostComponent.headerComp.componentCommsSubscription.closed).toBe(false);
     });
 
     it('should unsubscribe from changes on destruction', () => {
 
-        expect(component.componentCommsSubscription.closed).toBe(false);
+        expect(testHostComponent.headerComp.componentCommsSubscription.closed).toBe(false);
 
-        fixture.destroy();
+        testHostFixture.destroy();
 
-        expect(component.componentCommsSubscription.closed).toBe(true);
+        expect(testHostComponent.headerComp.componentCommsSubscription.closed).toBe(true);
 
     });
 
 });
+

src/app/main/header/header.component.ts

@@ -3,10 +3,12 @@ import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NavigationStart, Router } from '@angular/router';
-import { NotificationService, SearchParams, SessionService } from '@dasch-swiss/dsp-ui';
+import { SearchParams } from '@dasch-swiss/dsp-ui';
 import { Subscription } from 'rxjs';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ComponentCommunicationEventService, Events } from 'src/app/main/services/component-communication-event.service';
+import { NotificationService } from '../services/notification.service';
+import { SessionService } from '../services/session.service';
 
 const { version: appVersion } = require('../../../../package.json');
 

src/app/main/help/help.component.spec.ts

@@ -6,8 +6,9 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
-import { AppInitService, DspApiConfigToken, DspApiConnectionToken } from '@dasch-swiss/dsp-ui';
+import { AppInitService } from '@dasch-swiss/dsp-ui';
 import { TestConfig } from 'test.config';
+import { DspApiConfigToken, DspApiConnectionToken } from '../declarations/dsp-api-tokens';
 import { DialogComponent } from '../dialog/dialog.component';
 import { ErrorComponent } from '../error/error.component';
 import { FooterComponent } from '../footer/footer.component';