Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 3eec158

Browse files
riavalonriavalon
committed
chore(tests): Add unit tests for each component.
1 parent 48d4ea8 commit 3eec158

File tree

16 files changed

+506
-12
lines changed

16 files changed

+506
-12
lines changed

‎karma.conf.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ const path = require('path');
66
module.exports = function (config) {
77
config.set({
88
basePath: '',
9-
frameworks: ['jasmine', 'angular-cli'],
9+
frameworks: ['jasmine', '@angular/cli'],
1010
plugins: [
1111
require('karma-jasmine'),
1212
require('karma-chrome-launcher'),
1313
require('karma-remap-istanbul'),
14-
require('angular-cli/plugins/karma'),
14+
require('@angular/cli/plugins/karma'),
1515
require('karma-browserstack-launcher'),
1616
require('karma-sauce-launcher'),
1717
],
1818
files: [
1919
{ pattern: './src/test.ts', watched: false }
2020
],
2121
preprocessors: {
22-
'./src/test.ts': ['angular-cli']
22+
'./src/test.ts': ['@angular/cli']
2323
},
2424
mime: {
2525
'text/x-typescript': ['ts','tsx']
@@ -66,7 +66,7 @@ module.exports = function (config) {
6666
pollingTimeout: 20000
6767
},
6868
});
69-
69+
7070
if (process.env['TRAVIS']) {
7171

7272
let buildId = `TRAVIS #${process.env.TRAVIS_BUILD_NUMBER} (${process.env.TRAVIS_BUILD_ID})`;
@@ -87,5 +87,5 @@ module.exports = function (config) {
8787
}
8888

8989
config.browsers = platformMap[platformType];
90-
}
90+
}
9191
};

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,6 @@
4747
"protractor": "^5.1.1",
4848
"ts-node": "^2.0.0",
4949
"tslint": "^4.4.2",
50-
"typescript": "~2.1.1"
50+
"typescript": "~2.2.0"
5151
}
5252
}

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
2+
import {MaterialModule} from '@angular/material';
3+
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
4+
5+
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
6+
import {ComponentPageTitle} from '../page-title/page-title';
7+
import {ComponentCategoryList} from './component-category-list';
8+
9+
10+
describe('ComponentCategoryList', () => {
11+
let fixture: ComponentFixture<ComponentCategoryList>;
12+
13+
beforeEach(async(() => {
14+
TestBed.configureTestingModule({
15+
imports: [MaterialModule],
16+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
17+
declarations: [ComponentCategoryList],
18+
providers: [
19+
DocumentationItems,
20+
ComponentPageTitle
21+
]
22+
});
23+
24+
fixture = TestBed.createComponent(ComponentCategoryList)
25+
}));
26+
27+
it('should set page title on init', () => {
28+
const component = fixture.componentInstance;
29+
spyOn(component, 'ngOnInit').and.callThrough();
30+
fixture.detectChanges();
31+
expect(component.ngOnInit).toHaveBeenCalled();
32+
expect(component._componentPageTitle.title).toEqual('Component Library');
33+
});
34+
35+
it('should render a card for every category', () => {
36+
const component = fixture.componentInstance;
37+
fixture.detectChanges();
38+
const categories = component.docItems.getItemsInCategories();
39+
const cards = fixture
40+
.nativeElement.querySelectorAll('.docs-component-category-list-card');
41+
expect(cards.length).toEqual(categories.length);
42+
});
43+
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
1010
})
1111
export class ComponentCategoryList {
1212
constructor(public docItems: DocumentationItems,
13-
private _componentPageTitle: ComponentPageTitle) {}
13+
public _componentPageTitle: ComponentPageTitle) {}
1414

1515
ngOnInit() {
1616
this._componentPageTitle.title = 'Component Library';

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

+47-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,49 @@
1-
describe('component list', () => {
2-
it('should run', () => {
3-
expect(1).toBe(1);
1+
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
2+
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
3+
import {MaterialModule} from '@angular/material';
4+
import {ActivatedRoute, Router} from '@angular/router';
5+
import {RouterTestingModule} from '@angular/router/testing';
6+
import {Observable} from 'rxjs/Observable';
7+
8+
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
9+
import {ComponentPageTitle} from '../page-title/page-title';
10+
import {ComponentList} from './component-list';
11+
12+
const CATEGORY_ID = 'forms';
13+
const mockActivatedRoute = {
14+
params: Observable.create(observer => {
15+
observer.next({id: CATEGORY_ID});
16+
observer.complete();
17+
})
18+
};
19+
20+
describe('ComponentList', () => {
21+
let fixture: ComponentFixture<ComponentList>;
22+
23+
beforeEach(async(() => {
24+
TestBed.configureTestingModule({
25+
imports: [MaterialModule, RouterTestingModule],
26+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
27+
declarations: [ComponentList],
28+
providers: [
29+
{provide: ActivatedRoute, useValue: mockActivatedRoute},
30+
ComponentPageTitle,
31+
DocumentationItems,
32+
]
33+
});
34+
35+
fixture = TestBed.createComponent(ComponentList);
36+
}));
37+
38+
it('should set the category from router params', done => {
39+
const component = fixture.componentInstance;
40+
fixture.detectChanges();
41+
42+
fixture.whenStable().then(() => {
43+
const actual = component.category;
44+
const expected = component.docItems.getCategoryById(CATEGORY_ID);
45+
expect(actual).toEqual(expected);
46+
done();
47+
});
448
});
549
});

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
2+
import {MaterialModule} from '@angular/material';
3+
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
4+
5+
import {ComponentPageTitle} from '../page-title/page-title';
6+
import {ComponentPageHeader} from './component-page-header';
7+
8+
9+
describe('ComponentPageHeader', () => {
10+
let fixture: ComponentFixture<ComponentPageHeader>;
11+
12+
beforeEach(async(() => {
13+
TestBed.configureTestingModule({
14+
imports: [MaterialModule],
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
16+
declarations: [ComponentPageHeader],
17+
providers: [ComponentPageTitle],
18+
});
19+
20+
fixture = TestBed.createComponent(ComponentPageHeader);
21+
}));
22+
23+
it('should return the title', () => {
24+
const component = fixture.componentInstance;
25+
const title = 'foobar';
26+
fixture.detectChanges();
27+
component._componentPageTitle.title = title;
28+
expect(component.getTitle()).toEqual(title);
29+
});
30+
31+
it('should emit a toggleSideNav event', () => {
32+
const component = fixture.componentInstance;
33+
fixture.detectChanges();
34+
spyOn(component.toggleSidenav, 'emit');
35+
fixture
36+
.nativeElement
37+
.querySelector('.sidenav-toggle')
38+
.click();
39+
expect(component.toggleSidenav.emit).toHaveBeenCalled();
40+
});
41+
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
88
styleUrls: ['./component-page-header.scss']
99
})
1010
export class ComponentPageHeader {
11-
constructor(private _componentPageTitle: ComponentPageTitle) { }
11+
constructor(public _componentPageTitle: ComponentPageTitle) { }
1212

1313
@Output() toggleSidenav = new EventEmitter<void>();
1414

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

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
2+
import {MaterialModule, MdSidenav} from '@angular/material';
3+
import {RouterTestingModule} from '@angular/router/testing';
4+
import {Observable} from 'rxjs/Observable';
5+
import {Router} from '@angular/router';
6+
import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
7+
8+
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
9+
import {ComponentSidenav} from './component-sidenav';
10+
11+
const mockRouter = {
12+
events: Observable.create(observer => {
13+
observer.next(null);
14+
observer.complete();
15+
})
16+
};
17+
18+
19+
describe('ComponentSidenav', () => {
20+
let fixture: ComponentFixture<ComponentSidenav>;
21+
22+
beforeEach(async(() => {
23+
TestBed.configureTestingModule({
24+
imports: [MaterialModule],
25+
schemas: [NO_ERRORS_SCHEMA],
26+
declarations: [ComponentSidenav],
27+
providers: [
28+
{provide: Router, useValue: mockRouter},
29+
DocumentationItems
30+
],
31+
});
32+
33+
fixture = TestBed.createComponent(ComponentSidenav);
34+
}));
35+
36+
it('should close the sidenav on init', () => {
37+
const component = fixture.componentInstance;
38+
39+
// Spy on window.mediaMatch and return stub
40+
spyOn(window, 'matchMedia').and.returnValue({
41+
matches: true
42+
});
43+
44+
// Spy on viewChild component's `close` method
45+
spyOn(component.sidenav, 'close');
46+
47+
fixture.detectChanges();
48+
49+
expect(component.sidenav instanceof MdSidenav).toBeTruthy();
50+
expect(component.isScreenSmall()).toBeTruthy();
51+
expect(component.sidenav.close).toHaveBeenCalled();
52+
});
53+
54+
it('should show a link for each item in doc items categories', () => {
55+
const component = fixture.componentInstance;
56+
57+
fixture.detectChanges();
58+
59+
const totalItems = component.docItems.getAllItems().length;
60+
const totalLinks = fixture
61+
.nativeElement
62+
.querySelectorAll('.docs-component-viewer-sidenav li a')
63+
.length;
64+
expect(totalLinks).toEqual(totalItems);
65+
});
66+
});

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

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
2+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
3+
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
4+
import {RouterTestingModule} from '@angular/router/testing';
5+
import {ActivatedRoute} from '@angular/router';
6+
import {MaterialModule} from '@angular/material';
7+
import {Observable} from 'rxjs/Observable';
8+
9+
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
10+
import {ComponentPageTitle} from '../page-title/page-title';
11+
import {ComponentViewer} from './component-viewer';
12+
13+
const docItemsID = 'button';
14+
15+
const mockActivatedRoute = {
16+
params: Observable.create(observer => {
17+
observer.next({id: docItemsID});
18+
observer.complete();
19+
})
20+
};
21+
22+
23+
describe('ComponentViewer', () => {
24+
let fixture: ComponentFixture<ComponentViewer>;
25+
26+
beforeEach(async(() => {
27+
TestBed.configureTestingModule({
28+
imports: [
29+
BrowserAnimationsModule,
30+
MaterialModule,
31+
],
32+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
33+
declarations: [ComponentViewer],
34+
providers: [
35+
{provide: ActivatedRoute, useValue: mockActivatedRoute},
36+
ComponentPageTitle,
37+
DocumentationItems
38+
]
39+
});
40+
41+
fixture = TestBed.createComponent(ComponentViewer);
42+
}));
43+
44+
it('should set page title correctly', () => {
45+
const component = fixture.componentInstance;
46+
fixture.detectChanges();
47+
const expected = `Component - ${component.docItems.getItemById(docItemsID).name}`;
48+
expect(component._componentPageTitle.title).toEqual(expected);
49+
});
50+
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class ComponentViewer {
1414
componentDocItem: DocItem;
1515

1616
constructor(private _route: ActivatedRoute,
17-
private _componentPageTitle: ComponentPageTitle,
17+
public _componentPageTitle: ComponentPageTitle,
1818
public docItems: DocumentationItems) {
1919
_route.params.subscribe(p => {
2020
this.componentDocItem = docItems.getItemById(p['id']);

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {async, TestBed, ComponentFixture} from '@angular/core/testing';
2+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
3+
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
4+
import {CommonModule} from '@angular/common';
5+
import {RouterTestingModule} from '@angular/router/testing';
6+
import {MaterialModule} from '@angular/material';
7+
8+
import {GuideItems} from '../../shared/guide-items/guide-items';
9+
import {GuideList} from './guide-list';
10+
11+
12+
describe('GuideList', () => {
13+
let fixture: ComponentFixture<GuideList>;
14+
15+
beforeEach(async(() => {
16+
TestBed.configureTestingModule({
17+
imports: [
18+
BrowserAnimationsModule,
19+
MaterialModule,
20+
RouterTestingModule
21+
],
22+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
23+
declarations: [GuideList],
24+
providers: [GuideItems],
25+
});
26+
27+
fixture = TestBed.createComponent(GuideList);
28+
}));
29+
30+
it('should display a link for each item in guide items', () => {
31+
const component = fixture.componentInstance;
32+
fixture.detectChanges();
33+
34+
const totalItems = component.guideItems.getAllItems().length;
35+
const totalLinks = fixture
36+
.nativeElement
37+
.querySelectorAll('.docs-guide-item')
38+
.length;
39+
expect(totalLinks).toEqual(totalItems);
40+
});
41+
});

0 commit comments

Comments
 (0)