Skip to content
Permalink
Browse files
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
  • Loading branch information
kilchenmann committed Aug 11, 2021
1 parent 946d00f commit fb6c36890f78ea7612f86c2a2978d9c6908b890d
Showing with 17 additions and 46 deletions.
  1. +1 −25 src/app/main/header/header.component.html
  2. +7 −9 src/app/main/header/header.component.spec.ts
  3. +9 −12 src/app/main/header/header.component.ts
@@ -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> -->
@@ -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);

@@ -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() {

0 comments on commit fb6c368

Please sign in to comment.