From 7daf6a2923584d16a8cd3639d522f8777854b077 Mon Sep 17 00:00:00 2001 From: Lotte Hofstede Date: Tue, 31 Oct 2017 15:17:42 +0100 Subject: [PATCH] 44988: added tests --- .../layout-controls.component.html | 4 - .../layout-controls.component.scss | 15 --- .../layout-controls.component.ts | 23 ---- .../+search-page/search-page.component.html | 9 +- .../search-page.component.spec.ts | 110 +++++++++++++++--- src/app/+search-page/search-page.component.ts | 26 ++++- src/app/+search-page/search-page.module.ts | 8 +- .../search-sidebar.component.html | 4 +- .../search-sidebar.component.spec.ts | 51 ++++++++ .../search-sidebar.reducer.spec.ts | 2 - src/app/header/header.component.spec.ts | 1 - 11 files changed, 173 insertions(+), 80 deletions(-) delete mode 100644 src/app/+search-page/layout-controls/layout-controls.component.html delete mode 100644 src/app/+search-page/layout-controls/layout-controls.component.scss delete mode 100644 src/app/+search-page/layout-controls/layout-controls.component.ts create mode 100644 src/app/+search-page/search-sidebar/search-sidebar.component.spec.ts diff --git a/src/app/+search-page/layout-controls/layout-controls.component.html b/src/app/+search-page/layout-controls/layout-controls.component.html deleted file mode 100644 index 453ea69e87..0000000000 --- a/src/app/+search-page/layout-controls/layout-controls.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
\ No newline at end of file diff --git a/src/app/+search-page/layout-controls/layout-controls.component.scss b/src/app/+search-page/layout-controls/layout-controls.component.scss deleted file mode 100644 index 93a5bc6704..0000000000 --- a/src/app/+search-page/layout-controls/layout-controls.component.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/app/+search-page/layout-controls/layout-controls.component.ts b/src/app/+search-page/layout-controls/layout-controls.component.ts deleted file mode 100644 index 8d7b4b707f..0000000000 --- a/src/app/+search-page/layout-controls/layout-controls.component.ts +++ /dev/null @@ -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(); - - setList(isList: boolean) { - this.isList = isList; - this.toggleList.emit(isList); - } -} diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html index c8e33bf565..f918d87fa8 100644 --- a/src/app/+search-page/search-page.component.html +++ b/src/app/+search-page/search-page.component.html @@ -1,7 +1,6 @@
+ resultCount="{{(results.pageInfo | async)?.totalElements}}">
+ (toggleSidebar)="closeSidebar()" [ngbCollapse]="(isSidebarCollapsed | async)">
- diff --git a/src/app/+search-page/search-page.component.spec.ts b/src/app/+search-page/search-page.component.spec.ts index d1e326cfd7..f3d9a27b6e 100644 --- a/src/app/+search-page/search-page.component.spec.ts +++ b/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; let searchServiceObject: SearchService; + const store: Store = 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'); + }); + + }); }); diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts index a4a37162e2..9bdce068fe 100644 --- a/src/app/+search-page/search-page.component.ts +++ b/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()); } } diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts index 6345582de9..d500cc037b 100644 --- a/src/app/+search-page/search-page.module.ts +++ b/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 diff --git a/src/app/+search-page/search-sidebar/search-sidebar.component.html b/src/app/+search-page/search-sidebar/search-sidebar.component.html index 9c0b7b5f3d..4e448a910c 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.component.html +++ b/src/app/+search-page/search-sidebar/search-sidebar.component.html @@ -1,8 +1,8 @@
diff --git a/src/app/+search-page/search-sidebar/search-sidebar.component.spec.ts b/src/app/+search-page/search-sidebar/search-sidebar.component.spec.ts new file mode 100644 index 0000000000..a643f91f93 --- /dev/null +++ b/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; + // 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(); + }); + + }); +}); diff --git a/src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts b/src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts index 0976d2f3e8..dfdead4369 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts +++ b/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; diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts index 4a66e1d9f1..61ec8e2a0d 100644 --- a/src/app/header/header.component.spec.ts +++ b/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;