refactor(header): clean up code and use notification service after lo…

…gin (#498) * refactor(header): clean up code and use notification service after login * test(header): try to fix test, but I have no idea how to test the service * refactor(header): clean up imports, fix tests
dasch-swiss · Aug 11, 2021 · fb6c368 · fb6c368
1 parent 946d00f
commit fb6c368
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 46 deletions.
diff --git a/src/app/main/header/header.component.html b/src/app/main/header/header.component.html
@@ -19,24 +19,11 @@ <h1 class="mat-headline phone-tablet-only">DSP</h1>
             [expert]="true"
             (search)="doSearch($event)">
         </dsp-search-panel>
-         <!-- to keep? > advanced and expert search (in desktop and tablet version) > already implemented in dsp-search-panel > we can delete the following commented code -->
-         <!-- <span class="other-search-link">
-            <button mat-button color="primary" class="advanced-search-link" routerLink="/search/advanced">
-                <span>Advanced search</span>
-            </button>
-            <button mat-button color="primary" class="expert-search-link" routerLink="/search/expert">
-                <span>Expert search</span>
-            </button>
-        </span> -->
+
     </span>
 
     <span class="fill-remaining-space desktop-only"></span>
 
-    <!-- button to display search bar (in phone version) -->
-    <!-- <button mat-icon-button class="search-link searchbar-phone-screen" (click)="showSearchBar()">
-        <mat-icon>search</mat-icon>
-    </button> -->
-
     <!-- action tools: info menu, select language, login button, user menu -->
     <span class="action">
 
@@ -54,14 +41,3 @@ <h1 class="mat-headline phone-tablet-only">DSP</h1>
     </span>
 
 </mat-toolbar>
-
-<div *ngIf="showMessage">
-    <dsp-message [message]="successMessage" [short]="true" [duration]="2500"></dsp-message>
-</div>
-
-<!-- search-panel (in phone version) -->
-<!-- div to reactivate when dsp-app will be used as a research platform again: -->
-<!-- <div class="search-panel-phone" *ngIf="show">
-    <dsp-fulltext-search class="dsp-fulltext-search" (search)="doSearch($event)" [projectfilter]="true">
-    </dsp-fulltext-search>
-</div> -->
diff --git a/src/app/main/header/header.component.spec.ts b/src/app/main/header/header.component.spec.ts
@@ -1,10 +1,11 @@
 import { HttpClientModule } from '@angular/common/http';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 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 {
@@ -13,16 +14,14 @@ import {
     DspApiConfigToken,
     DspApiConnectionToken,
     DspCoreModule,
-    DspSearchModule,
-    MessageComponent
+    DspSearchModule
 } from '@dasch-swiss/dsp-ui';
 import { TranslateModule } from '@ngx-translate/core';
+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 { SelectLanguageComponent } from '../select-language/select-language.component';
 import { HeaderComponent } from './header.component';
-import { ComponentCommunicationEventService, EmitEvent, Events } from 'src/app/main/services/component-communication-event.service';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('HeaderComponent', () => {
     let component: HeaderComponent;
@@ -102,14 +101,13 @@ describe('HeaderComponent', () => {
         expect(searchPanel).toBeDefined();
     });
 
-    it('should display the login success message when the loginSuccess event is emitted', () => {
+    it('should subscribe to component communication when the loginSuccess event is emitted', () => {
         componentCommsService.emit(new EmitEvent(Events.loginSuccess));
         fixture.detectChanges();
-        const message = fixture.debugElement.query(By.directive(MessageComponent));
-        expect(message).toBeTruthy();
+        expect(component.componentCommsSubscription.closed).toBe(false);
     });
 
-    it('should unsubscribe from from changes on destruction', () => {
+    it('should unsubscribe from changes on destruction', () => {
 
         expect(component.componentCommsSubscription.closed).toBe(false);
 

diff --git a/src/app/main/header/header.component.ts b/src/app/main/header/header.component.ts
@@ -3,7 +3,7 @@ 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 { DspMessageData, SearchParams, SessionService } from '@dasch-swiss/dsp-ui';
+import { NotificationService, SearchParams, SessionService } 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';
@@ -23,22 +23,17 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
     appVersion: string = 'v' + appVersion;
 
-    successMessage: DspMessageData = {
-        status: 200,
-        statusText: 'Login successful'
-    };
-
-    showMessage = false;
-
     componentCommsSubscription: Subscription;
 
     constructor(
-        private _session: SessionService,
+        private _componentCommsService: ComponentCommunicationEventService,
+        private _dialog: MatDialog,
         private _domSanitizer: DomSanitizer,
         private _matIconRegistry: MatIconRegistry,
-        private _dialog: MatDialog,
+        private _notification: NotificationService,
         private _router: Router,
-        private _componentCommsService: ComponentCommunicationEventService) {
+        private _session: SessionService
+    ) {
 
         // create tool icons to use them in mat-icons
         this._matIconRegistry.addSvgIcon(
@@ -60,7 +55,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.componentCommsSubscription = this._componentCommsService.on(
-            Events.loginSuccess, () => this.showMessage = true);
+            Events.loginSuccess, () => {
+                this._notification.openSnackBar('Login successful');
+            });
     }
 
     ngOnDestroy() {