added initial tests for operators component

Author: btroncone

src/app/operators/components/operator-header/operator-header.component.scss

@@ -1,9 +1,5 @@
 @import '../../operator-theme';
 
-:host {
-  position: sticky;
-  top: 0px;
-}
 .operator-name {
   font-size:30px;
 }
@@ -17,8 +13,3 @@ mat-toolbar {
   color: rgba(255, 255, 255, 0.87);
   font-weight: normal;
 }
-
-.operator-header {
-  position: sticky;
-  top: 0px;
-}

src/app/operators/directives/operator-scroll.directive.ts

@@ -1,15 +1,20 @@
-import { Component, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Inject, InjectionToken, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
-import { ALL_OPERATORS } from '../../operator-docs';
 import { OperatorDoc } from '../../operator-docs/operator.model';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
 
+export const OPERATORS_TOKEN = new InjectionToken<string>('operators');
+
+interface OperatorDocMap {
+  [key: string]: OperatorDoc[];
+}
+
 @Component({
   selector: 'app-operators',
   templateUrl: './operators.component.html',
@@ -34,19 +39,21 @@ const OPERATOR_MENU_GAP_SMALL = 54;
   ]
 })
 export class OperatorsComponent implements OnInit, AfterViewInit {
-  public operators = ALL_OPERATORS;
-  public groupedOperators = groupOperatorsByType(ALL_OPERATORS);
-  public categories = Object.keys(this.groupedOperators);
+  public groupedOperators: OperatorDocMap;
+  public categories: string[];
 
   private _subscription: Subscription;
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
     private _router: Router,
-    private _activatedRoute: ActivatedRoute
+    private _activatedRoute: ActivatedRoute,
+    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) { }
 
   ngOnInit() {
+    this.groupedOperators = groupOperatorsByType(this.operators);
+    this.categories = Object.keys(this.groupedOperators);
     this._subscription = this._activatedRoute
       .fragment
       .subscribe(name => this.scrollToOperator(name));
@@ -92,8 +99,8 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
 
 }
 
-export function groupOperatorsByType(operators: OperatorDoc[]) {
-  return operators.reduce((acc, curr) => {
+export function groupOperatorsByType(operators: OperatorDoc[]): OperatorDocMap {
+  return operators.reduce((acc: OperatorDocMap, curr: OperatorDoc) => {
     if (acc[curr.operatorType]) {
       return { ...acc, [ curr.operatorType ] : [ ...acc[ curr.operatorType ], curr ] };
     }

src/app/operators/operators.component.ts

@@ -1,4 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule, InjectionToken, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LayoutModule } from '@angular/cdk/layout';
 import {
@@ -14,10 +14,10 @@ import {
   MatTooltipModule
 } from '@angular/material';
 import { ClipboardModule } from 'ngx-clipboard';
+import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
 
 import { OperatorsRoutingModule } from './operators.routing';
-
-import { OperatorsComponent } from './operators.component';
+import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component';
 import { OperatorComponent } from './components/operator/operator.component';
 import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
 import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component';
@@ -27,10 +27,7 @@ import { OperatorExtrasComponent } from './components/operator-extras/operator-e
 import { AdditionalResourcesComponent } from './components/additional-resources/additional-resources.component';
 import { MarbleDiagramComponent } from './components/marble-diagram/marble-diagram.component';
 import { WalkthroughComponent } from './components/walkthrough/walkthrough.component';
-
-import { OperatorScrollDirective } from './directives/operator-scroll.directive';
 import { HighlightJsDirective } from './directives/highlight-js.directive';
-
 import { SafeUrlPipe } from './pipes/safe-url.pipe';
 
 @NgModule({
@@ -45,7 +42,6 @@ import { SafeUrlPipe } from './pipes/safe-url.pipe';
     AdditionalResourcesComponent,
     WalkthroughComponent,
     MarbleDiagramComponent,
-    OperatorScrollDirective,
     HighlightJsDirective,
     SafeUrlPipe
   ],
@@ -64,6 +60,9 @@ import { SafeUrlPipe } from './pipes/safe-url.pipe';
     MatButtonModule,
     MatTooltipModule
   ],
+  providers: [
+    { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }
+  ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
 })
 export class OperatorsModule { }

src/app/operators/operators.module.ts

@@ -1,9 +1,93 @@
-import { ALL_OPERATORS } from '../../../operator-docs';
-import { groupOperatorsByType } from '../operators.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { LayoutModule, BreakpointObserver } from '@angular/cdk/layout';
+import { Observable } from 'rxjs/Observable';
+import { OperatorsComponent, OPERATORS_TOKEN, groupOperatorsByType } from '../operators.component';
+import { OperatorDoc } from '../../../operator-docs';
+
+const mockActivatedRoute = {
+  snapshot: {},
+  fragment: Observable.create(observer => {
+    observer.next('merge');
+    observer.complete();
+  })
+};
+
+const mockOperators: OperatorDoc[] = [
+  { operatorType: 'transformation' },
+  { operatorType: 'utility' },
+  { operatorType: 'utility' }
+];
+
+const mockBreakPointObserver = {
+  isMatched: () => {}
+};
 
 describe('Operators', () => {
-  it('should group operators by operator type', () => {
-    const result = groupOperatorsByType(ALL_OPERATORS);
-    expect(Object.keys(result).length).toBe(8);
+  describe('OperatorsComponent', () => {
+    let fixture: ComponentFixture<OperatorsComponent>;
+    let component: OperatorsComponent;
+    let el;
+    let breakpointService: BreakpointObserver;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [ RouterTestingModule, LayoutModule ],
+        declarations: [ OperatorsComponent ],
+        providers: [
+          { provide: OPERATORS_TOKEN, useValue: mockOperators },
+          { provide: ActivatedRoute, useValue: mockActivatedRoute }
+        ],
+        schemas: [ NO_ERRORS_SCHEMA ]
+      });
+    });
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(OperatorsComponent);
+      component = fixture.componentInstance;
+      el = fixture.debugElement;
+      breakpointService = el.injector.get(BreakpointObserver);
+    });
+
+    it('should group operators by operator type', () => {
+      component.ngOnInit();
+
+      expect(component.groupedOperators['transformation'].length).toBe(1);
+      expect(component.groupedOperators['utility'].length).toBe(2);
+    });
+
+    it('should scroll to initial operator when fragment exists', () => {
+      spyOn(component, 'scrollToOperator').and.stub();
+      component.ngOnInit();
+
+      expect(component.scrollToOperator).toHaveBeenCalledWith('merge');
+    });
+
+    it('should have a sidenav mode of over when on a small screen', () => {
+      spyOn(breakpointService, 'isMatched').and.returnValue(true);
+
+      expect(component.sidenavMode).toBe('over');
+    });
+
+    it('should have a sidenav mode of side when on a large screen', () => {
+      spyOn(breakpointService, 'isMatched').and.returnValue(false);
+
+      expect(component.sidenavMode).toBe('side');
+    });
+
+    it('should have a top menu gap of 54px when on a small screen', () => {
+      // small screen
+      spyOn(breakpointService, 'isMatched').and.returnValue(true);
+
+      expect(component.operatorMenuGap).toBe(54);
+    });
+
+    it('should have a top menu gap of 64px when on a large screen', () => {
+      spyOn(breakpointService, 'isMatched').and.returnValue(false);
+
+      expect(component.operatorMenuGap).toBe(64);
+    });
   });
 });