diff --git a/.gitignore b/.gitignore index 0e713600f8..f691aae4b2 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ npm-debug.log /dist/ +/coverage/ .idea *.ngfactory.ts diff --git a/package.json b/package.json index 5e7e4d4c4a..e43a0f3df2 100644 --- a/package.json +++ b/package.json @@ -106,6 +106,7 @@ "@types/body-parser": "0.0.33", "@types/compression": "0.0.33", "@types/cookie-parser": "1.3.30", + "@types/deep-freeze": "0.0.29", "@types/express": "4.0.34", "@types/express-serve-static-core": "4.0.39", "@types/hammerjs": "2.0.33", @@ -126,6 +127,7 @@ "cookie-parser": "1.4.3", "copy-webpack-plugin": "4.0.1", "css-loader": "^0.26.0", + "deep-freeze": "0.0.1", "html-webpack-plugin": "^2.21.0", "imports-loader": "0.7.0", "istanbul-instrumenter-loader": "^0.2.0", diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index f457d141e5..2664b5f27b 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -10,36 +10,36 @@ import { DebugElement } from "@angular/core"; import { By } from '@angular/platform-browser'; -import { TranslateModule } from "ng2-translate"; -import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'; -import { Store } from "@ngrx/store"; +import { TranslateModule, TranslateLoader } from "ng2-translate"; +import { Store, StoreModule } from "@ngrx/store"; // Load the implementations that should be tested import { AppComponent } from './app.component'; -import { HeaderComponent } from './header/header.component'; import { CommonModule } from '@angular/common'; +import { HostWindowState } from "./shared/host-window.reducer"; +import { HostWindowResizeAction } from "./shared/host-window.actions"; +import { MockTranslateLoader } from "./shared/testing/mock-translate-loader"; -let comp: AppComponent; +let comp: AppComponent; let fixture: ComponentFixture; -let de: DebugElement; -let el: HTMLElement; +let de: DebugElement; +let el: HTMLElement; describe('App component', () => { // async beforeEach beforeEach(async(() => { return TestBed.configureTestingModule({ - imports: [ CommonModule, TranslateModule.forRoot(), NgbCollapseModule.forRoot()], - declarations: [ AppComponent, HeaderComponent ], // declare the test component + imports: [CommonModule, StoreModule.provideStore({}), TranslateModule.forRoot({ + provide: TranslateLoader, + useClass: MockTranslateLoader + })], + declarations: [AppComponent], // declare the test component providers: [ - AppComponent, - { - provide: Store, - useClass: class { dispatch = jasmine.createSpy('dispatch') } - } + AppComponent ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ] + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) })); @@ -47,7 +47,7 @@ describe('App component', () => { beforeEach(() => { fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; // BannerComponent test instance + comp = fixture.componentInstance; // component test instance // query for the title

by CSS element selector de = fixture.debugElement.query(By.css('p')); @@ -58,4 +58,24 @@ describe('App component', () => { // Perform test using fixture and service expect(app).toBeTruthy(); })); + + describe("when the window is resized", () => { + let width: number; + let height: number; + let store: Store; + + beforeEach(() => { + store = fixture.debugElement.injector.get(Store); + spyOn(store, 'dispatch'); + + window.dispatchEvent(new Event('resize')); + width = window.innerWidth; + height = window.innerHeight; + }); + + it("should dispatch a HostWindowResizeAction with the width and height of the window as its payload", () => { + expect(store.dispatch).toHaveBeenCalledWith(new HostWindowResizeAction(width, height)); + }); + + }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 15485eb6a6..0b861bb75c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,7 +8,7 @@ import { import { TranslateService } from "ng2-translate"; import { HostWindowState } from "./shared/host-window.reducer"; import { Store } from "@ngrx/store"; -import { HostWindowActions } from "./shared/host-window.actions"; +import { HostWindowResizeAction } from "./shared/host-window.actions"; @Component({ changeDetection: ChangeDetectionStrategy.Default, @@ -52,7 +52,7 @@ export class AppComponent implements OnDestroy, OnInit { @HostListener('window:resize', ['$event']) private onResize(event): void { this.store.dispatch( - HostWindowActions.resize(event.target.innerWidth, event.target.innerHeight) + new HostWindowResizeAction(event.target.innerWidth, event.target.innerHeight) ); } diff --git a/src/app/header/header.actions.ts b/src/app/header/header.actions.ts index e3f64c1019..c333fc5df7 100644 --- a/src/app/header/header.actions.ts +++ b/src/app/header/header.actions.ts @@ -1,24 +1,43 @@ import { Action } from "@ngrx/store"; +import { type } from "../shared/ngrx/type"; -export class HeaderActions { - static COLLAPSE = 'dspace/header/COLLAPSE'; - static collapse(): Action { - return { - type: HeaderActions.COLLAPSE - } - } + /** + * For each action type in an action group, make a simple + * enum object for all of this group's action types. + * + * The 'type' utility function coerces strings into string + * literal types and runs a simple check to guarantee all + * action types in the application are unique. + */ +export const HeaderActionTypes = { + COLLAPSE: type('dspace/header/COLLAPSE'), + EXPAND: type('dspace/header/EXPAND'), + TOGGLE: type('dspace/header/TOGGLE') +}; - static EXPAND = 'dspace/header/EXPAND'; - static expand(): Action { - return { - type: HeaderActions.EXPAND - } - } +export class HeaderCollapseAction implements Action { + type = HeaderActionTypes.COLLAPSE; - static TOGGLE = 'dspace/header/TOGGLE'; - static toggle(): Action { - return { - type: HeaderActions.TOGGLE - } - } + constructor() {} } + +export class HeaderExpandAction implements Action { + type = HeaderActionTypes.EXPAND; + + constructor() {} +} + +export class HeaderToggleAction implements Action { + type = HeaderActionTypes.TOGGLE; + + constructor() {} +} + +/** + * Export a type alias of all actions in this action group + * so that reducers can easily compose action types + */ +export type HeaderAction + = HeaderCollapseAction + | HeaderExpandAction + | HeaderToggleAction diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts new file mode 100644 index 0000000000..ab0e591bc9 --- /dev/null +++ b/src/app/header/header.component.spec.ts @@ -0,0 +1,81 @@ +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { HeaderComponent } from "./header.component"; +import { Store, StoreModule } from "@ngrx/store"; +import { HeaderState } from "./header.reducer"; +import Spy = jasmine.Spy; +import { HeaderToggleAction } from "./header.actions"; +import { TranslateModule } from "ng2-translate"; +import { NgbCollapseModule } from "@ng-bootstrap/ng-bootstrap"; +import { Observable } from "rxjs"; + +let comp: HeaderComponent; +let fixture: ComponentFixture; +let store: Store; + +describe('HeaderComponent', () => { + + // async beforeEach + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ StoreModule.provideStore({}), TranslateModule.forRoot(), NgbCollapseModule.forRoot() ], + declarations: [ HeaderComponent ] + }) + .compileComponents(); // compile template and css + })); + + // synchronous beforeEach + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + + comp = fixture.componentInstance; + + + store = fixture.debugElement.injector.get(Store); + spyOn(store, 'dispatch'); + }); + + describe('when the toggle button is clicked', () => { + + beforeEach(() => { + let navbarToggler = fixture.debugElement.query(By.css('.navbar-toggler')); + navbarToggler.triggerEventHandler('click', null); + }); + + it("should dispatch a HeaderToggleAction", () => { + expect(store.dispatch).toHaveBeenCalledWith(new HeaderToggleAction()); + }); + + }); + + describe("when navCollapsed in the store is true", () => { + let menu: HTMLElement; + + beforeEach(() => { + menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement; + spyOn(store, 'select').and.returnValue(Observable.of({ navCollapsed: true })); + fixture.detectChanges(); + }); + + it("should close the menu", () => { + expect(menu.classList).not.toContain('in'); + }); + + }); + + describe("when navCollapsed in the store is false", () => { + let menu: HTMLElement; + + beforeEach(() => { + menu = fixture.debugElement.query(By.css('#collapsingNav')).nativeElement; + spyOn(store, 'select').and.returnValue(Observable.of({ navCollapsed: false })); + fixture.detectChanges(); + }); + + it("should open the menu", () => { + expect(menu.classList).toContain('in'); + }); + + }); + +}); diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 69da1aea68..76a9cbe05b 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,9 +1,8 @@ import { Component, OnInit } from "@angular/core"; import { Store } from "@ngrx/store"; import { HeaderState } from "./header.reducer"; -import { HeaderActions } from "./header.actions"; import { Observable } from "rxjs"; -import 'rxjs/add/operator/filter'; +import { HeaderToggleAction } from "./header.actions"; @Component({ selector: 'ds-header', @@ -24,16 +23,8 @@ export class HeaderComponent implements OnInit { .map(({ navCollapsed }: HeaderState) => navCollapsed); } - private collapse(): void { - this.store.dispatch(HeaderActions.collapse()); - } - - private expand(): void { - this.store.dispatch(HeaderActions.expand()); - } - public toggle(): void { - this.store.dispatch(HeaderActions.toggle()); + this.store.dispatch(new HeaderToggleAction()); } } diff --git a/src/app/header/header.effects.spec.ts b/src/app/header/header.effects.spec.ts new file mode 100644 index 0000000000..7c5f40228d --- /dev/null +++ b/src/app/header/header.effects.spec.ts @@ -0,0 +1,53 @@ +import { TestBed, inject } from "@angular/core/testing"; +import { EffectsTestingModule, EffectsRunner } from '@ngrx/effects/testing'; +import { HeaderEffects } from "./header.effects"; +import { HeaderCollapseAction } from "./header.actions"; +import { HostWindowResizeAction } from "../shared/host-window.actions"; +import { routerActions } from "@ngrx/router-store"; + +describe('HeaderEffects', () => { + beforeEach(() => TestBed.configureTestingModule({ + imports: [ + EffectsTestingModule + ], + providers: [ + HeaderEffects + ] + })); + + let runner: EffectsRunner; + let headerEffects: HeaderEffects; + + beforeEach(inject([ + EffectsRunner, HeaderEffects + ], + (_runner, _headerEffects) => { + runner = _runner; + headerEffects = _headerEffects; + } + )); + + describe('resize$', () => { + + it('should return a COLLAPSE action in response to a RESIZE action', () => { + runner.queue(new HostWindowResizeAction(800,600)); + + headerEffects.resize$.subscribe(result => { + expect(result).toEqual(new HeaderCollapseAction()); + }); + }); + + }); + + describe('routeChange$', () => { + + it('should return a COLLAPSE action in response to an UPDATE_LOCATION action', () => { + runner.queue({ type: routerActions.UPDATE_LOCATION }); + + headerEffects.resize$.subscribe(result => { + expect(result).toEqual(new HeaderCollapseAction()); + }); + }); + + }); +}); diff --git a/src/app/header/header.effects.ts b/src/app/header/header.effects.ts index d9ea53adda..33888e074d 100644 --- a/src/app/header/header.effects.ts +++ b/src/app/header/header.effects.ts @@ -1,8 +1,8 @@ import { Injectable } from "@angular/core"; import { Effect, Actions } from '@ngrx/effects' -import { HeaderActions } from "./header.actions"; -import { HostWindowActions } from "../shared/host-window.actions"; +import { HostWindowActionTypes } from "../shared/host-window.actions"; import { routerActions } from "@ngrx/router-store"; +import { HeaderCollapseAction } from "./header.actions"; @Injectable() export class HeaderEffects { @@ -12,10 +12,10 @@ export class HeaderEffects { ) { } @Effect() resize$ = this.actions$ - .ofType(HostWindowActions.RESIZE) - .map(() => HeaderActions.collapse()); + .ofType(HostWindowActionTypes.RESIZE) + .map(() => new HeaderCollapseAction()); @Effect() routeChange$ = this.actions$ .ofType(routerActions.UPDATE_LOCATION) - .map(() => HeaderActions.collapse()); + .map(() => new HeaderCollapseAction()); } diff --git a/src/app/header/header.reducer.spec.ts b/src/app/header/header.reducer.spec.ts new file mode 100644 index 0000000000..2b8c26f523 --- /dev/null +++ b/src/app/header/header.reducer.spec.ts @@ -0,0 +1,89 @@ +import * as deepFreeze from "deep-freeze"; + +import { headerReducer } from "./header.reducer"; +import { + HeaderCollapseAction, + HeaderExpandAction, + HeaderToggleAction +} from "./header.actions"; + +class NullAction extends HeaderCollapseAction { + type = null; + + constructor() { + super(); + } +} + +describe("headerReducer", () => { + it("should return the current state when no valid actions have been made", () => { + const state = { navCollapsed: false }; + const action = new NullAction(); + const newState = headerReducer(state, action); + + expect(newState).toEqual(state); + }); + + it("should start with navCollapsed = true", () => { + const action = new NullAction(); + const initialState = headerReducer(undefined, action); + + // The navigation starts collapsed + expect(initialState.navCollapsed).toEqual(true); + }); + + it("should set navCollapsed to true in response to the COLLAPSE action", () => { + const state = { navCollapsed: false }; + const action = new HeaderCollapseAction(); + const newState = headerReducer(state, action); + + expect(newState.navCollapsed).toEqual(true); + }); + + it("should perform the COLLAPSE action without affecting the previous state", () => { + const state = { navCollapsed: false }; + deepFreeze(state); + + const action = new HeaderCollapseAction(); + headerReducer(state, action); + + //no expect required, deepFreeze will ensure an exception is thrown if the state + //is mutated, and any uncaught exception will cause the test to fail + }); + + it("should set navCollapsed to false in response to the EXPAND action", () => { + const state = { navCollapsed: true }; + const action = new HeaderExpandAction(); + const newState = headerReducer(state, action); + + expect(newState.navCollapsed).toEqual(false); + }); + + it("should perform the EXPAND action without affecting the previous state", () => { + const state = { navCollapsed: true }; + deepFreeze(state); + + const action = new HeaderExpandAction(); + headerReducer(state, action); + }); + + it("should flip the value of navCollapsed in response to the TOGGLE action", () => { + const state1 = { navCollapsed: true }; + const action = new HeaderToggleAction(); + + const state2 = headerReducer(state1, action); + const state3 = headerReducer(state2, action); + + expect(state2.navCollapsed).toEqual(false); + expect(state3.navCollapsed).toEqual(true); + }); + + it("should perform the TOGGLE action without affecting the previous state", () => { + const state = { navCollapsed: true }; + deepFreeze(state); + + const action = new HeaderToggleAction(); + headerReducer(state, action); + }); + +}); diff --git a/src/app/header/header.reducer.ts b/src/app/header/header.reducer.ts index af153fba24..c1d0fef7ea 100644 --- a/src/app/header/header.reducer.ts +++ b/src/app/header/header.reducer.ts @@ -1,5 +1,4 @@ -import { Action } from "@ngrx/store"; -import { HeaderActions } from "./header.actions"; +import { HeaderAction, HeaderActionTypes } from "./header.actions"; export interface HeaderState { navCollapsed: boolean; @@ -9,23 +8,23 @@ const initialState: HeaderState = { navCollapsed: true }; -export const headerReducer = (state = initialState, action: Action): HeaderState => { +export const headerReducer = (state = initialState, action: HeaderAction): HeaderState => { switch (action.type) { - case HeaderActions.COLLAPSE: { + case HeaderActionTypes.COLLAPSE: { return Object.assign({}, state, { navCollapsed: true }); } - case HeaderActions.EXPAND: { + case HeaderActionTypes.EXPAND: { return Object.assign({}, state, { navCollapsed: false }); } - case HeaderActions.TOGGLE: { + case HeaderActionTypes.TOGGLE: { return Object.assign({}, state, { navCollapsed: !state.navCollapsed }); diff --git a/src/app/shared/host-window.actions.ts b/src/app/shared/host-window.actions.ts index de41c69564..99be01cdc2 100644 --- a/src/app/shared/host-window.actions.ts +++ b/src/app/shared/host-window.actions.ts @@ -1,14 +1,21 @@ import { Action } from "@ngrx/store"; +import { type } from "./ngrx/type"; -export class HostWindowActions { - static RESIZE = 'dspace/host-window/RESIZE'; - static resize(newWidth: number, newHeight: number): Action { - return { - type: HostWindowActions.RESIZE, - payload: { - width: newWidth, - height: newHeight - } - } +export const HostWindowActionTypes = { + RESIZE: type('dspace/host-window/RESIZE') +}; + +export class HostWindowResizeAction implements Action { + type = HostWindowActionTypes.RESIZE; + payload: { + width: number; + height: number; + }; + + constructor(width: number, height: number) { + this.payload = { width, height } } } + +export type HostWindowAction + = HostWindowResizeAction; diff --git a/src/app/shared/host-window.reducer.spec.ts b/src/app/shared/host-window.reducer.spec.ts new file mode 100644 index 0000000000..19d4f67697 --- /dev/null +++ b/src/app/shared/host-window.reducer.spec.ts @@ -0,0 +1,48 @@ +import * as deepFreeze from "deep-freeze"; +import { hostWindowReducer } from "./host-window.reducer"; +import { HostWindowResizeAction } from "./host-window.actions"; + +class NullAction extends HostWindowResizeAction { + type = null; + + constructor() { + super(0,0); + } +} + +describe('hostWindowReducer', () => { + + it("should return the current state when no valid actions have been made", () => { + const state = { width: 800, height: 600 }; + const action = new NullAction(); + const newState = hostWindowReducer(state, action); + + expect(newState).toEqual(state); + }); + + it("should start with width = null and height = null", () => { + const action = new NullAction(); + const initialState = hostWindowReducer(undefined, action); + + expect(initialState.width).toEqual(null); + expect(initialState.height).toEqual(null); + }); + + it("should update the width and height in the state in response to a RESIZE action", () => { + const state = { width: 800, height: 600 }; + const action = new HostWindowResizeAction(1024, 768); + const newState = hostWindowReducer(state, action); + + expect(newState.width).toEqual(1024); + expect(newState.height).toEqual(768); + }); + + it("should perform the RESIZE action without affecting the previous state", () => { + const state = { width: 800, height: 600 }; + deepFreeze(state); + + const action = new HostWindowResizeAction(1024, 768); + hostWindowReducer(state, action); + }); + +}); diff --git a/src/app/shared/host-window.reducer.ts b/src/app/shared/host-window.reducer.ts index 4b8e1d3cb9..03349b3a91 100644 --- a/src/app/shared/host-window.reducer.ts +++ b/src/app/shared/host-window.reducer.ts @@ -1,5 +1,4 @@ -import { Action } from "@ngrx/store"; -import { HostWindowActions } from "./host-window.actions"; +import { HostWindowAction, HostWindowActionTypes } from "./host-window.actions"; export interface HostWindowState { width: number; @@ -11,10 +10,10 @@ const initialState: HostWindowState = { height: null }; -export const hostWindowReducer = (state = initialState, action: Action): HostWindowState => { +export const hostWindowReducer = (state = initialState, action: HostWindowAction): HostWindowState => { switch (action.type) { - case HostWindowActions.RESIZE: { + case HostWindowActionTypes.RESIZE: { return Object.assign({}, state, action.payload); } diff --git a/src/app/shared/ngrx/type.ts b/src/app/shared/ngrx/type.ts new file mode 100644 index 0000000000..9b50c1d6d0 --- /dev/null +++ b/src/app/shared/ngrx/type.ts @@ -0,0 +1,24 @@ + +/** + * Based on + * https://github.com/ngrx/example-app/blob/master/src/app/util.ts + * + * This function coerces a string into a string literal type. + * Using tagged union types in TypeScript 2.0, this enables + * powerful typechecking of our reducers. + * + * Since every action label passes through this function it + * is a good place to ensure all of our action labels + * are unique. + */ + +let typeCache: { [label: string]: boolean } = {}; +export function type(label: T | ''): T { + if (typeCache[label]) { + throw new Error(`Action type "${label}" is not unique"`); + } + + typeCache[label] = true; + + return label; +} diff --git a/src/app/shared/testing/mock-translate-loader.ts b/src/app/shared/testing/mock-translate-loader.ts new file mode 100644 index 0000000000..a780766b25 --- /dev/null +++ b/src/app/shared/testing/mock-translate-loader.ts @@ -0,0 +1,8 @@ +import { TranslateLoader } from "ng2-translate"; +import { Observable } from "rxjs"; + +export class MockTranslateLoader implements TranslateLoader { + getTranslation(lang: string): Observable { + return Observable.of({}); + } +}