44988: added tests

src/app/+search-page/layout-controls/layout-controls.component.html

@@ -1,4 +0,0 @@
-<div>
-    <button [disabled]="isList" (click)="setList(true)" class="btn"><i class="fa fa-list" aria-hidden="true"></i></button>
-    <button [disabled]="!isList" (click)="setList(false)" class="btn"><i class="fa fa-th-large" aria-hidden="true"></i></button>
-</div>

src/app/+search-page/layout-controls/layout-controls.component.scss

@@ -1,15 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
-
-:host {
-    display: inline-block;
-    button {
-        border: none;
-        background-color: white;
-        padding: 0;
-        color: map-get($theme-colors, primary);
-        i {
-            font-size: $button-height;
-        }
-    }
-}

src/app/+search-page/layout-controls/layout-controls.component.ts

@@ -1,23 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-/**
- * 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-layout-controls',
-  styleUrls: ['./layout-controls.component.scss'],
-  templateUrl: './layout-controls.component.html',
-})
-
-export class LayoutControlsComponent {
-  @Input() isList = true;
-  @Output() toggleList = new EventEmitter<boolean>();
-
-  setList(isList: boolean) {
-    this.isList = isList;
-    this.toggleList.emit(isList);
-  }
-}

src/app/+search-page/search-page.component.html

@@ -1,7 +1,6 @@
 <div class="search-page">
     <ds-search-sidebar dsStick *ngIf="!(isMobileView | async)" class="col-3 sidebar-md-fixed" id="search-sidebar"
-                       resultCount="{{(results.pageInfo | async)?.totalElements}}"
-                       (toggleSidebar)="toggle()"></ds-search-sidebar>
+                       resultCount="{{(results.pageInfo | async)?.totalElements}}"></ds-search-sidebar>
     <div id="search-header" class="row">
         <ds-search-form id="search-form" class="col-12 col-md-9 ml-md-auto"
                         [query]="query"
@@ -14,13 +13,13 @@
         <div id="search-body" class="row-offcanvas row-offcanvas-left"  [@slideInOut]="(isSidebarCollapsed | async) ? 'collapsed' : 'expanded'">
             <ds-search-sidebar *ngIf="(isMobileView | async)" class="col-12" id="search-sidebar-xs"
                                resultCount="{{(results.pageInfo | async)?.totalElements}}"
-                               (toggleSidebar)="toggle()"></ds-search-sidebar>
+                               (toggleSidebar)="closeSidebar()" [ngbCollapse]="(isSidebarCollapsed | async)"></ds-search-sidebar>
             <div id="search-content" class="col-12 col-md-9 ml-md-auto">
                 <div class="d-block d-md-none search-controls clearfix">
 
                     <ds-view-mode-switch></ds-view-mode-switch>
-                    <button (click)="toggle()" aria-controls="#search-body"
-                            class="btn btn-outline-primary float-right"><i
+                    <button (click)="openSidebar()" aria-controls="#search-body"
+                            class="btn btn-outline-primary float-right open-sidebar"><i
                             class="fa fa-sliders"></i> {{"search.sidebar.open"
                         | translate}}
                     </button>

src/app/+search-page/search-page.component.spec.ts

@@ -1,22 +1,36 @@
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Store } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs/Observable';
+import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
+import { Community } from '../core/shared/community.model';
+import { HostWindowService } from '../shared/host-window.service';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { SearchPageComponent } from './search-page.component';
 import { SearchService } from './search-service/search.service';
-import { Community } from '../core/shared/community.model';
-import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { SearchPageModule } from './search-page.module';
-import { Store } from '@ngrx/store';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import {
+  SearchSidebarCollapseAction,
+  SearchSidebarExpandAction
+} from './search-sidebar/search-sidebar.actions';
+import { By } from '@angular/platform-browser';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 
-fdescribe('SearchPageComponent', () => {
+describe('SearchPageComponent', () => {
   let comp: SearchPageComponent;
   let fixture: ComponentFixture<SearchPageComponent>;
   let searchServiceObject: SearchService;
+  const store: Store<SearchPageComponent> = jasmine.createSpyObj('store', {
+    /* tslint:disable:no-empty */
+    dispatch: {},
+    /* tslint:enable:no-empty */
+    select: Observable.of(true)
+  });
   const mockResults = ['test', 'data'];
   const searchServiceStub = {
     search: () => mockResults
@@ -43,15 +57,25 @@ fdescribe('SearchPageComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ SearchPageModule ],
-      // declarations: [SearchPageComponent],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NoopAnimationsModule, NgbCollapseModule.forRoot()],
+      declarations: [SearchPageComponent],
       providers: [
         { provide: SearchService, useValue: searchServiceStub },
+        {
+          provide: CommunityDataService,
+          useValue: jasmine.createSpyObj('communityService', ['findById', 'findAll'])
+        },
         { provide: ActivatedRoute, useValue: activatedRouteStub },
-        { provide: CommunityDataService, useValue: communityDataServiceStub },
-        { provide: Router, useClass: RouterStub },
-        { provide: Store, useClass: {} }
-  ],
+        {
+          provide: Store, useValue: store
+        },
+        {
+          provide: HostWindowService, useValue: jasmine.createSpyObj('hostWindowService', {
+          isXs: Observable.of(true),
+          isSm: Observable.of(false)
+        })
+        }
+      ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
@@ -112,4 +136,60 @@ fdescribe('SearchPageComponent', () => {
     });
 
   });
+
+  describe('when the closeSidebar event is emitted clicked in mobile view', () => {
+
+    beforeEach(() => {
+      const closeSidebarButton = fixture.debugElement.query(By.css('#search-sidebar-xs'));
+      closeSidebarButton.triggerEventHandler('toggleSidebar', null);
+    });
+
+    it('should dispatch a SearchSidebarCollapseAction', () => {
+      expect(store.dispatch).toHaveBeenCalledWith(new SearchSidebarCollapseAction());
+    });
+
+  });
+
+  describe('when the open sidebar button is clicked in mobile view', () => {
+
+    beforeEach(() => {
+      const openSidebarButton = fixture.debugElement.query(By.css('.open-sidebar'));
+      openSidebarButton.triggerEventHandler('click', null);
+    });
+
+    it('should dispatch a SearchSidebarExpandAction', () => {
+      expect(store.dispatch).toHaveBeenCalledWith(new SearchSidebarExpandAction());
+    });
+
+  });
+
+  describe('when sidebarCollapsed in the store is true in mobile view', () => {
+    let menu: HTMLElement;
+
+    beforeEach(() => {
+      menu = fixture.debugElement.query(By.css('#search-sidebar-xs')).nativeElement;
+      comp.isSidebarCollapsed = Observable.of(true);
+      fixture.detectChanges();
+    });
+
+    it('should close the sidebar', () => {
+      expect(menu.classList).not.toContain('show');
+    });
+
+  });
+
+  describe('when sidebarCollapsed in the store is false in mobile view', () => {
+    let menu: HTMLElement;
+
+    beforeEach(() => {
+      menu = fixture.debugElement.query(By.css('#search-sidebar-xs')).nativeElement;
+      comp.isSidebarCollapsed = Observable.of(false);
+      fixture.detectChanges();
+    });
+
+    it('should open the menu', () => {
+      expect(menu.classList).toContain('show');
+    });
+
+  });
 });

src/app/+search-page/search-page.component.ts

@@ -14,7 +14,9 @@ import { createSelector, Store } from '@ngrx/store';
 import { AppState } from '../app.reducer';
 import { Observable } from 'rxjs/Observable';
 import { SearchSidebarState } from './search-sidebar/search-sidebar.reducer';
-import { SearchSidebarToggleAction } from './search-sidebar/search-sidebar.actions';
+import {
+  SearchSidebarCollapseAction, SearchSidebarExpandAction,
+} from './search-sidebar/search-sidebar.actions';
 import { slideInOut } from '../shared/animations/slide';
 import { HostWindowService } from '../shared/host-window.service';
 
@@ -60,14 +62,22 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     pagination.pageSize = 10;
     const sort: SortOptions = new SortOptions();
     this.searchOptions = { pagination: pagination, sort: sort };
+  }
+
+  ngOnInit(): void {
     this.isMobileView = Observable.combineLatest(
       this.hostWindowService.isXs(),
       this.hostWindowService.isSm(),
       (isXs, isSm) => isXs || isSm);
-  }
 
-  ngOnInit(): void {
-    this.isSidebarCollapsed = this.store.select(sidebarCollapsedSelector);
+    /*
+      Sidebar should always be 'collapsed' when not in mobile view
+     */
+    this.isSidebarCollapsed = Observable.combineLatest(
+      this.isMobileView,
+      this.store.select(sidebarCollapsedSelector),
+      (mobile, store) => mobile ? store : true);
+
     this.sub = this.route
       .queryParams
       .subscribe((params) => {
@@ -108,7 +118,11 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     this.sub.unsubscribe();
   }
 
-  public toggle(): void {
-    this.store.dispatch(new SearchSidebarToggleAction());
+  public closeSidebar(): void {
+    this.store.dispatch(new SearchSidebarCollapseAction());
+  }
+
+  public openSidebar(): void {
+    this.store.dispatch(new SearchSidebarExpandAction());
   }
 }

src/app/+search-page/search-page.module.ts

@@ -1,9 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-
-import { TranslateModule } from '@ngx-translate/core';
-
 import { SharedModule } from '../shared/shared.module';
 import { SearchPageRoutingModule } from './search-page-routing.module';
 import { SearchPageComponent } from './search-page.component';
@@ -13,7 +9,6 @@ import { CollectionSearchResultListElementComponent } from '../object-list/searc
 import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
-import { LayoutControlsComponent } from './layout-controls/layout-controls.component';
 
 @NgModule({
   imports: [
@@ -27,8 +22,7 @@ import { LayoutControlsComponent } from './layout-controls/layout-controls.compo
     SearchSidebarComponent,
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
-    CommunitySearchResultListElementComponent,
-    LayoutControlsComponent
+    CommunitySearchResultListElementComponent
   ],
   providers: [
     SearchService

src/app/+search-page/search-sidebar/search-sidebar.component.html

@@ -1,8 +1,8 @@
 <div>
     <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
         <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
-        <button (click)="toggleSidebar.emit(false)"
-                aria-controls="#search-body" class="btn btn-outline-primary float-right"><i
+        <button (click)="toggleSidebar.emit()"
+                aria-controls="#search-body" class="btn btn-outline-primary float-right close-sidebar"><i
                 class="fa fa-arrow-right"></i> {{"search.sidebar.close" | translate}}
         </button>
     </div>

src/app/+search-page/search-sidebar/search-sidebar.component.spec.ts

@@ -0,0 +1,51 @@
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Store, StoreModule } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { SearchSidebarComponent } from './search-sidebar.component';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+import { SearchSidebarState } from './search-sidebar.reducer';
+import { By } from '@angular/platform-browser';
+import {
+  SearchSidebarCollapseAction, SearchSidebarExpandAction,
+} from './search-sidebar.actions';
+import { Observable } from 'rxjs/Observable';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { HostWindowService } from '../../shared/host-window.service';
+
+describe('SearchSidebarComponent', () => {
+  let comp: SearchSidebarComponent;
+  let fixture: ComponentFixture<SearchSidebarComponent>;
+  // async beforeEach
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), NgbCollapseModule.forRoot()],
+      declarations: [SearchSidebarComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .compileComponents();  // compile template and css
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchSidebarComponent);
+
+    comp = fixture.componentInstance;
+
+  });
+
+  describe('when the close sidebar button is clicked in mobile view', () => {
+
+    beforeEach(() => {
+      spyOn(comp.toggleSidebar, 'emit');
+      const closeSidebarButton = fixture.debugElement.query(By.css('button.close-sidebar'));
+
+      closeSidebarButton.triggerEventHandler('click', null);
+    });
+
+    it('should emit a toggleSidebar event', () => {
+      expect(comp.toggleSidebar.emit).toHaveBeenCalled();
+    });
+
+  });
+});

src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts

@@ -5,8 +5,6 @@ import {
   SearchSidebarCollapseAction, SearchSidebarExpandAction,
   SearchSidebarToggleAction
 } from './search-sidebar.actions';
-import { async, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
 
 class NullAction extends SearchSidebarCollapseAction {
   type = null;

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

@@ -10,7 +10,6 @@ import { HeaderComponent } from './header.component';
 import { HeaderState } from './header.reducer';
 import { HeaderToggleAction } from './header.actions';
 
-import Spy = jasmine.Spy;
 
 let comp: HeaderComponent;
 let fixture: ComponentFixture<HeaderComponent>;