Add unit tests for each component. (#138)

Author: riavalon

karma.conf.js

@@ -6,20 +6,20 @@ const path = require('path');
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma'),
+      require('@angular/cli/plugins/karma'),
       require('karma-browserstack-launcher'),
       require('karma-sauce-launcher'),
     ],
     files: [
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './src/test.ts': ['@angular/cli']
     },
     mime: {
       'text/x-typescript': ['ts','tsx']
@@ -66,7 +66,7 @@ module.exports = function (config) {
       pollingTimeout: 20000
     },
   });
-  
+
   if (process.env['TRAVIS']) {
 
     let buildId = `TRAVIS #${process.env.TRAVIS_BUILD_NUMBER} (${process.env.TRAVIS_BUILD_ID})`;
@@ -87,5 +87,5 @@ module.exports = function (config) {
     }
 
     config.browsers = platformMap[platformType];
-  }  
+  }
 };

src/app/pages/component-category-list/component-category-list.spec.ts

@@ -0,0 +1,43 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {MaterialModule} from '@angular/material';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ComponentPageTitle} from '../page-title/page-title';
+import {ComponentCategoryList} from './component-category-list';
+
+
+describe('ComponentCategoryList', () => {
+  let fixture: ComponentFixture<ComponentCategoryList>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MaterialModule],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ComponentCategoryList],
+      providers: [
+        DocumentationItems,
+        ComponentPageTitle
+      ]
+    });
+
+    fixture = TestBed.createComponent(ComponentCategoryList)
+  }));
+
+  it('should set page title on init', () => {
+    const component = fixture.componentInstance;
+    spyOn(component, 'ngOnInit').and.callThrough();
+    fixture.detectChanges();
+    expect(component.ngOnInit).toHaveBeenCalled();
+    expect(component._componentPageTitle.title).toEqual('Component Library');
+  });
+
+  it('should render a card for every category', () => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+    const categories = component.docItems.getItemsInCategories();
+    const cards = fixture
+      .nativeElement.querySelectorAll('.docs-component-category-list-card');
+    expect(cards.length).toEqual(categories.length);
+  });
+});

src/app/pages/component-category-list/component-category-list.ts

@@ -10,7 +10,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
 })
 export class ComponentCategoryList {
   constructor(public docItems: DocumentationItems,
-              private _componentPageTitle: ComponentPageTitle) {}
+              public _componentPageTitle: ComponentPageTitle) {}
 
   ngOnInit() {
     this._componentPageTitle.title = 'Component Library';

src/app/pages/component-list/component-list.spec.ts

@@ -1,5 +1,49 @@
-describe('component list', () => {
-  it('should run', () => {
-    expect(1).toBe(1);
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MaterialModule} from '@angular/material';
+import {ActivatedRoute, Router} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
+import {Observable} from 'rxjs/Observable';
+
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ComponentPageTitle} from '../page-title/page-title';
+import {ComponentList} from './component-list';
+
+const CATEGORY_ID = 'forms';
+const mockActivatedRoute = {
+  params: Observable.create(observer => {
+    observer.next({id: CATEGORY_ID});
+    observer.complete();
+  })
+};
+
+describe('ComponentList', () => {
+  let fixture: ComponentFixture<ComponentList>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MaterialModule, RouterTestingModule],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ComponentList],
+      providers: [
+        {provide: ActivatedRoute, useValue: mockActivatedRoute},
+        ComponentPageTitle,
+        DocumentationItems,
+      ]
+    });
+
+    fixture = TestBed.createComponent(ComponentList);
+  }));
+
+  it('should set the category from router params', done => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    fixture.whenStable().then(() => {
+      const actual = component.category;
+      const expected = component.docItems.getCategoryById(CATEGORY_ID);
+      expect(actual).toEqual(expected);
+      done();
+    });
   });
 });

src/app/pages/component-page-header/component-page-header.spec.ts

@@ -0,0 +1,41 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {MaterialModule} from '@angular/material';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+
+import {ComponentPageTitle} from '../page-title/page-title';
+import {ComponentPageHeader} from './component-page-header';
+
+
+describe('ComponentPageHeader', () => {
+  let fixture: ComponentFixture<ComponentPageHeader>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MaterialModule],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ComponentPageHeader],
+      providers: [ComponentPageTitle],
+    });
+
+    fixture = TestBed.createComponent(ComponentPageHeader);
+  }));
+
+  it('should return the title', () => {
+    const component = fixture.componentInstance;
+    const title = 'foobar';
+    fixture.detectChanges();
+    component._componentPageTitle.title = title;
+    expect(component.getTitle()).toEqual(title);
+  });
+
+  it('should emit a toggleSideNav event', () => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+    spyOn(component.toggleSidenav, 'emit');
+    fixture
+      .nativeElement
+      .querySelector('.sidenav-toggle')
+      .click();
+    expect(component.toggleSidenav.emit).toHaveBeenCalled();
+  });
+});

src/app/pages/component-page-header/component-page-header.ts

@@ -8,7 +8,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
   styleUrls: ['./component-page-header.scss']
 })
 export class ComponentPageHeader {
-  constructor(private _componentPageTitle: ComponentPageTitle) { }
+  constructor(public _componentPageTitle: ComponentPageTitle) { }
 
   @Output() toggleSidenav = new EventEmitter<void>();
 

src/app/pages/component-sidenav/component-sidenav.spec.ts

@@ -0,0 +1,66 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {MaterialModule, MdSidenav} from '@angular/material';
+import {RouterTestingModule} from '@angular/router/testing';
+import {Observable} from 'rxjs/Observable';
+import {Router} from '@angular/router';
+import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
+
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ComponentSidenav} from './component-sidenav';
+
+const mockRouter = {
+  events: Observable.create(observer => {
+    observer.next(null);
+    observer.complete();
+  })
+};
+
+
+describe('ComponentSidenav', () => {
+  let fixture: ComponentFixture<ComponentSidenav>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MaterialModule],
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [ComponentSidenav],
+      providers: [
+        {provide: Router, useValue: mockRouter},
+        DocumentationItems
+      ],
+    });
+
+    fixture = TestBed.createComponent(ComponentSidenav);
+  }));
+
+  it('should close the sidenav on init', () => {
+    const component = fixture.componentInstance;
+
+    // Spy on window.mediaMatch and return stub
+    spyOn(window, 'matchMedia').and.returnValue({
+      matches: true
+    });
+
+    // Spy on viewChild component's `close` method
+    spyOn(component.sidenav, 'close');
+
+    fixture.detectChanges();
+
+    expect(component.sidenav instanceof MdSidenav).toBeTruthy();
+    expect(component.isScreenSmall()).toBeTruthy();
+    expect(component.sidenav.close).toHaveBeenCalled();
+  });
+
+  it('should show a link for each item in doc items categories', () => {
+    const component = fixture.componentInstance;
+
+    fixture.detectChanges();
+
+    const totalItems = component.docItems.getAllItems().length;
+    const totalLinks = fixture
+      .nativeElement
+      .querySelectorAll('.docs-component-viewer-sidenav li a')
+      .length;
+    expect(totalLinks).toEqual(totalItems);
+  });
+});

src/app/pages/component-viewer/component-viewer.spec.ts

@@ -0,0 +1,50 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {RouterTestingModule} from '@angular/router/testing';
+import {ActivatedRoute} from '@angular/router';
+import {MaterialModule} from '@angular/material';
+import {Observable} from 'rxjs/Observable';
+
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
+import {ComponentPageTitle} from '../page-title/page-title';
+import {ComponentViewer} from './component-viewer';
+
+const docItemsID = 'button';
+
+const mockActivatedRoute = {
+  params: Observable.create(observer => {
+    observer.next({id: docItemsID});
+    observer.complete();
+  })
+};
+
+
+describe('ComponentViewer', () => {
+  let fixture: ComponentFixture<ComponentViewer>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        MaterialModule,
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ComponentViewer],
+      providers: [
+        {provide: ActivatedRoute, useValue: mockActivatedRoute},
+        ComponentPageTitle,
+        DocumentationItems
+      ]
+    });
+
+    fixture = TestBed.createComponent(ComponentViewer);
+  }));
+
+  it('should set page title correctly', () => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+    const expected = `Component - ${component.docItems.getItemById(docItemsID).name}`;
+    expect(component._componentPageTitle.title).toEqual(expected);
+  });
+});

src/app/pages/component-viewer/component-viewer.ts

@@ -14,7 +14,7 @@ export class ComponentViewer {
   componentDocItem: DocItem;
 
   constructor(private _route: ActivatedRoute,
-              private _componentPageTitle: ComponentPageTitle,
+              public _componentPageTitle: ComponentPageTitle,
               public docItems: DocumentationItems) {
     _route.params.subscribe(p => {
       this.componentDocItem = docItems.getItemById(p['id']);

src/app/pages/guide-list/guide-list.spec.ts

@@ -0,0 +1,41 @@
+import {async, TestBed, ComponentFixture} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterTestingModule} from '@angular/router/testing';
+import {MaterialModule} from '@angular/material';
+
+import {GuideItems} from '../../shared/guide-items/guide-items';
+import {GuideList} from './guide-list';
+
+
+describe('GuideList', () => {
+  let fixture: ComponentFixture<GuideList>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        MaterialModule,
+        RouterTestingModule
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [GuideList],
+      providers: [GuideItems],
+    });
+
+    fixture = TestBed.createComponent(GuideList);
+  }));
+
+  it('should display a link for each item in guide items', () => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    const totalItems = component.guideItems.getAllItems().length;
+    const totalLinks = fixture
+      .nativeElement
+      .querySelectorAll('.docs-guide-item')
+      .length;
+    expect(totalLinks).toEqual(totalItems);
+  });
+});