Fix scope name not being displayed after a page refresh & code cleanup

Author: alexandrevryghem

src/app/shared/search-form/search-form.component.html

@@ -2,9 +2,14 @@
     <div>
         <div class="form-group input-group">
             <div *ngIf="showScopeSelector" class="input-group-prepend">
-                <button class="scope-button btn btn-outline-secondary text-truncate" [ngbTooltip]="dsoNameService.getName(selectedScope | async)" type="button" (click)="openScopeModal()">{{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}</button>
+                <button class="scope-button btn btn-outline-secondary text-truncate"
+                        [ngbTooltip]="dsoNameService.getName(selectedScope | async)" type="button"
+                        (click)="openScopeModal()">
+                  {{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}
+                </button>
             </div>
-            <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}" [attr.data-test]="'search-box' | dsBrowserOnly"
+            <input type="text" [(ngModel)]="query" name="query" class="form-control"
+                   attr.aria-label="{{ searchPlaceholder }}" [attr.data-test]="'search-box' | dsBrowserOnly"
                    [placeholder]="searchPlaceholder">
             <span class="input-group-append">
             <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>

src/app/shared/search-form/search-form.component.spec.ts

@@ -33,7 +33,7 @@ describe('SearchFormComponent', () => {
   };
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    return TestBed.configureTestingModule({
       imports: [FormsModule, RouterTestingModule, TranslateModule.forRoot()],
       providers: [
         { provide: Router, useValue: router },
@@ -96,7 +96,7 @@ describe('SearchFormComponent', () => {
     tick();
     const scopeSelect = de.query(By.css('.scope-button')).nativeElement;
 
-    expect(scopeSelect.textContent).toBe(testCommunity.name);
+    expect(scopeSelect.textContent).toContain('Sample Community');
   }));
 
   describe('updateSearch', () => {
@@ -172,32 +172,9 @@ describe('SearchFormComponent', () => {
       expect(comp.updateSearch).toHaveBeenCalledWith(searchQuery);
     });
   });
-
-  // it('should call updateSearch when clicking the submit button with correct parameters', fakeAsync(() => {
-  //   comp.query = 'Test String'
-  //   fixture.detectChanges();
-  //   spyOn(comp, 'updateSearch').and.callThrough();
-  //   fixture.detectChanges();
-  //
-  //   const submit = de.query(By.css('button.search-button')).nativeElement;
-  //   const scope = '123456';
-  //   const query = 'test';
-  //   const select = de.query(By.css('select')).nativeElement;
-  //   const input = de.query(By.css('input')).nativeElement;
-  //
-  //   tick();
-  //   select.value = scope;
-  //   input.value = query;
-  //
-  //   fixture.detectChanges();
-  //
-  //   submit.click();
-  //
-  //   expect(comp.updateSearch).toHaveBeenCalledWith({ scope: scope, query: query });
-  // }));
 });
 
-export const objects: DSpaceObject[] = [
+const objects: DSpaceObject[] = [
   Object.assign(new Community(), {
     logo: {
       self: {

src/app/shared/search-form/search-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnChanges } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { Router } from '@angular/router';
 import { isNotEmpty } from '../empty.util';
@@ -14,22 +14,15 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
-/**
- * This component renders a simple item page.
- * The route parameter 'id' is used to request the item it represents.
- * All fields of the item that should be displayed, are defined in its template.
- */
-
 @Component({
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
   templateUrl: './search-form.component.html'
 })
-
 /**
  * Component that represents the search form
  */
-export class SearchFormComponent implements OnInit {
+export class SearchFormComponent implements OnChanges {
   /**
    * The search query
    */
@@ -88,7 +81,7 @@ export class SearchFormComponent implements OnInit {
   /**
    * Retrieve the scope object from the URL so we can show its name
    */
-  ngOnInit(): void {
+  ngOnChanges(): void {
     if (isNotEmpty(this.scope)) {
       this.dsoService.findById(this.scope).pipe(getFirstSucceededRemoteDataPayload())
         .subscribe((scope: DSpaceObject) => this.selectedScope.next(scope));
@@ -122,19 +115,12 @@ export class SearchFormComponent implements OnInit {
   updateSearch(data: any) {
     const queryParams = Object.assign({}, data);
 
-    this.router.navigate(this.getSearchLinkParts(), {
+    void this.router.navigate(this.getSearchLinkParts(), {
       queryParams: queryParams,
       queryParamsHandling: 'merge'
     });
   }
 
-  /**
-   * For usage of the isNotEmpty function in the template
-   */
-  isNotEmpty(object: any) {
-    return isNotEmpty(object);
-  }
-
   /**
    * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true
    */