#17 Login component unit tests

This commit is contained in:
mauriziovitale84 2016-04-26 11:33:15 +01:00
parent eabd9df238
commit 8f67a9c948
8 changed files with 346 additions and 4 deletions

View File

@ -65,7 +65,9 @@ System.register(['angular2/core', 'angular2/router', 'angular2/common', './authe
* @returns {boolean}
*/
Login.prototype.isErrorStyle = function (field) {
componentHandler.upgradeAllRegistered();
if (this.componentHandler) {
componentHandler.upgradeAllRegistered();
}
if (field.valid) {
return false;
}

View File

@ -1 +1 @@
{"version":3,"file":"login.component.js","sourceRoot":"","sources":["login.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeA;gBAMI;;;;;mBAKG;gBACH,eAAY,EAAc,EAAS,IAAmB,EAAS,MAAa;oBAAzC,SAAI,GAAJ,IAAI,CAAe;oBAAS,WAAM,GAAN,MAAM,CAAO;oBAXnE,WAAM,GAAW,KAAK,CAAC;oBAGhC,UAAK,GAAW,KAAK,CAAC;oBASlB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC;wBACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,OAAO,CAAC,CAAC,mBAAU,CAAC,QAAQ,EAAE,mBAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAClF,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,QAAQ,CAAC;qBACtC,CAAC,CAAC;gBACP,CAAC;gBAED;;;;mBAIG;gBACH,wBAAQ,GAAR,UAAS,KAAS,EAAE,KAAK;oBAAzB,iBAWC;oBAVG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;wBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC3B,CAAC;oBACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC;yBACvD,SAAS,CACN,UAAC,KAAS,IAAK,OAAA,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAA9B,CAA8B,EAC7C;wBACI,KAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBACtB,CAAC,CACJ,CAAC;gBACV,CAAC;gBAED;;;;mBAIG;gBACH,4BAAY,GAAZ,UAAa,KAAkB;oBAC3B,gBAAgB,CAAC,oBAAoB,EAAE,CAAC;oBACxC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;wBACd,MAAM,CAAC,KAAK,CAAC;oBACjB,CAAC;oBAAC,IAAI,CAAC,CAAC;wBACJ,MAAM,CAAC,IAAI,CAAC;oBAChB,CAAC;gBACL,CAAC;gBAhDD;oBAAC,YAAK,EAAE;;qDAAA;gBATZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,CAAC,0BAAiB,EAAE,wBAAe,CAAC;wBAChD,WAAW,EAAE,wBAAwB;wBACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;qBAEvC,CAAC;;yBAAA;gBAmDF,YAAC;YAAD,CAAC,AAlDD,IAkDC;YAlDD,yBAkDC,CAAA"}
{"version":3,"file":"login.component.js","sourceRoot":"","sources":["login.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeA;gBAMI;;;;;mBAKG;gBACH,eAAY,EAAc,EAAS,IAAmB,EAAS,MAAa;oBAAzC,SAAI,GAAJ,IAAI,CAAe;oBAAS,WAAM,GAAN,MAAM,CAAO;oBAXnE,WAAM,GAAW,KAAK,CAAC;oBAGhC,UAAK,GAAW,KAAK,CAAC;oBASlB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC;wBACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,OAAO,CAAC,CAAC,mBAAU,CAAC,QAAQ,EAAE,mBAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAClF,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,QAAQ,CAAC;qBACtC,CAAC,CAAC;gBACP,CAAC;gBAED;;;;mBAIG;gBACH,wBAAQ,GAAR,UAAS,KAAS,EAAE,KAAK;oBAAzB,iBAWC;oBAVG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;wBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC3B,CAAC;oBACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC;yBACvD,SAAS,CACN,UAAC,KAAS,IAAK,OAAA,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAA9B,CAA8B,EAC7C;wBACI,KAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBACtB,CAAC,CACJ,CAAC;gBACV,CAAC;gBAED;;;;mBAIG;gBACH,4BAAY,GAAZ,UAAa,KAAkB;oBAC3B,EAAE,CAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA,CAAC;wBACtB,gBAAgB,CAAC,oBAAoB,EAAE,CAAC;oBAC5C,CAAC;oBACD,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;wBACd,MAAM,CAAC,KAAK,CAAC;oBACjB,CAAC;oBAAC,IAAI,CAAC,CAAC;wBACJ,MAAM,CAAC,IAAI,CAAC;oBAChB,CAAC;gBACL,CAAC;gBAlDD;oBAAC,YAAK,EAAE;;qDAAA;gBATZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,CAAC,0BAAiB,EAAE,wBAAe,CAAC;wBAChD,WAAW,EAAE,wBAAwB;wBACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;qBAEvC,CAAC;;yBAAA;gBAqDF,YAAC;YAAD,CAAC,AApDD,IAoDC;YApDD,yBAoDC,CAAA"}

View File

@ -0,0 +1,166 @@
System.register(['angular2/platform/testing/browser', 'angular2/testing', 'angular2/core', './login.component', 'rxjs/Rx', './authentication.service', 'angular2/src/router/router', 'angular2/router', 'angular2/src/mock/location_mock'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var browser_1, testing_1, core_1, login_component_1, Rx_1, authentication_service_1, router_1, router_2, location_mock_1;
var AuthenticationMock;
return {
setters:[
function (browser_1_1) {
browser_1 = browser_1_1;
},
function (testing_1_1) {
testing_1 = testing_1_1;
},
function (core_1_1) {
core_1 = core_1_1;
},
function (login_component_1_1) {
login_component_1 = login_component_1_1;
},
function (Rx_1_1) {
Rx_1 = Rx_1_1;
},
function (authentication_service_1_1) {
authentication_service_1 = authentication_service_1_1;
},
function (router_1_1) {
router_1 = router_1_1;
},
function (router_2_1) {
router_2 = router_2_1;
},
function (location_mock_1_1) {
location_mock_1 = location_mock_1_1;
}],
execute: function() {
AuthenticationMock = (function () {
function AuthenticationMock() {
this.mockName = 'Mocked Service';
}
AuthenticationMock.prototype.login = function (method, username, password) {
if (username === 'fake-username' && password === 'fake-password') {
return Rx_1.Observable.of(true);
}
else {
return Rx_1.Observable.throw('Fake server error');
}
};
AuthenticationMock.prototype.getProviders = function () {
return [core_1.provide(authentication_service_1.Authentication, { useValue: this })];
};
return AuthenticationMock;
}());
testing_1.describe('Login', function () {
var authService, location, router;
testing_1.setBaseTestProviders(browser_1.TEST_BROWSER_PLATFORM_PROVIDERS, browser_1.TEST_BROWSER_APPLICATION_PROVIDERS);
testing_1.beforeEachProviders(function () {
authService = new AuthenticationMock();
return [
authService.getProviders(),
router_2.RouteRegistry,
core_1.provide(router_2.Location, { useClass: location_mock_1.SpyLocation }),
core_1.provide(router_2.ROUTER_PRIMARY_COMPONENT, { useValue: login_component_1.Login }),
core_1.provide(router_2.Router, { useClass: router_1.RootRouter })
];
});
testing_1.beforeEach(testing_1.inject([router_2.Router, router_2.Location], function (r, l) {
router = r;
location = l;
}));
testing_1.it('should render `Login` header', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
var element = fixture.nativeElement;
testing_1.expect(element.querySelector('h2').innerText).toBe('Login');
testing_1.expect(element.querySelector('form')).toBeDefined();
});
}));
testing_1.it('should render `Login` form with input fields user and password with default value', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
var element = fixture.nativeElement;
testing_1.expect(element.querySelector('form')).toBeDefined();
testing_1.expect(element.querySelector('input[type="password"]')).toBeDefined();
testing_1.expect(element.querySelector('input[type="text"]')).toBeDefined();
testing_1.expect(element.querySelector('input[type="password"]').value).toEqual('');
testing_1.expect(element.querySelector('input[type="text"]').value).toEqual('');
});
}));
testing_1.it('should render the new values after change the user and password values', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
var compiled = fixture.debugElement.nativeElement;
var password = compiled.querySelector('input[type="password"]');
var username = compiled.querySelector('input[type="text"]');
password.value = 'my password';
username.value = 'my username';
testing_1.expect(compiled.querySelector('input[type="password"]').value).toEqual('my password');
testing_1.expect(compiled.querySelector('input[type="text"]').value).toEqual('my username');
});
}));
testing_1.it('should navigate to Home route after the login OK ', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
router.config([new router_2.Route({ path: '/home', name: 'Home', component: login_component_1.Login })]);
spyOn(router, 'navigate').and.callThrough();
var compiled = fixture.debugElement.nativeElement;
var password = compiled.querySelector('input[type="password"]');
var username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-password';
compiled.querySelector('button').click();
testing_1.expect(fixture.componentInstance.error).toBe(false);
testing_1.expect(router.navigate).toHaveBeenCalledWith(['Home']);
});
}));
testing_1.it('should return error with a wrong username ', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
spyOn(router, 'navigate').and.callThrough();
var compiled = fixture.debugElement.nativeElement;
var password = compiled.querySelector('input[type="password"]');
var username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-wrong-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-password';
compiled.querySelector('button').click();
testing_1.expect(fixture.componentInstance.error).toBe(true);
});
}));
testing_1.it('should return error with a wrong password ', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
spyOn(router, 'navigate').and.callThrough();
var compiled = fixture.debugElement.nativeElement;
var password = compiled.querySelector('input[type="password"]');
var username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-wrong-password';
compiled.querySelector('button').click();
testing_1.expect(fixture.componentInstance.error).toBe(true);
});
}));
testing_1.it('should return error with a wrong username and password ', testing_1.injectAsync([testing_1.TestComponentBuilder, authentication_service_1.Authentication, router_2.Router], function (tcb, authService, router) {
return tcb
.createAsync(login_component_1.Login)
.then(function (fixture) {
spyOn(router, 'navigate').and.callThrough();
var compiled = fixture.debugElement.nativeElement;
var password = compiled.querySelector('input[type="password"]');
var username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-wrong-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-wrong-password';
compiled.querySelector('button').click();
testing_1.expect(fixture.componentInstance.error).toBe(true);
});
}));
});
}
}
});
//# sourceMappingURL=login.component.spec.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,170 @@
import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser';
import {it, describe, expect, inject, injectAsync, beforeEach, beforeEachProviders, TestComponentBuilder, setBaseTestProviders} from 'angular2/testing';
import {Component, provide, Injector} from 'angular2/core';
import {Login} from './login.component';
import {Observable} from 'rxjs/Rx';
import {Authentication} from './authentication.service';
import { RootRouter } from 'angular2/src/router/router';
import { Location, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT, Route } from 'angular2/router';
import { SpyLocation } from 'angular2/src/mock/location_mock';
import {dispatchEvent} from 'angular2/src/testing/utils';
class AuthenticationMock {
public mockName: string = 'Mocked Service';
login(method:string, username:string, password:string) {
if (username === 'fake-username' && password === 'fake-password'){
return Observable.of(true);
} else {
return Observable.throw('Fake server error');
}
}
getProviders(): Array<any> {
return [provide(Authentication, {useValue: this})];
}
}
describe('Login', () => {
let authService, location, router;
setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
beforeEachProviders(() => {
authService = new AuthenticationMock();
return [
authService.getProviders(),
RouteRegistry,
provide(Location, {useClass: SpyLocation}),
provide(ROUTER_PRIMARY_COMPONENT, {useValue: Login}),
provide(Router, {useClass: RootRouter})
];
});
beforeEach(inject([Router, Location], (r, l) => {
router = r;
location = l;
}));
it('should render `Login` header', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
let element = fixture.nativeElement;
expect(element.querySelector('h2').innerText).toBe('Login');
expect(element.querySelector('form')).toBeDefined();
});
}));
it('should render `Login` form with input fields user and password with default value', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
let element = fixture.nativeElement;
expect(element.querySelector('form')).toBeDefined();
expect(element.querySelector('input[type="password"]')).toBeDefined();
expect(element.querySelector('input[type="text"]')).toBeDefined();
expect(element.querySelector('input[type="password"]').value).toEqual('');
expect(element.querySelector('input[type="text"]').value).toEqual('');
});
}));
it('should render the new values after change the user and password values', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
let compiled = fixture.debugElement.nativeElement;
let password = compiled.querySelector('input[type="password"]');
let username = compiled.querySelector('input[type="text"]');
password.value = 'my password';
username.value = 'my username';
expect(compiled.querySelector('input[type="password"]').value).toEqual('my password');
expect(compiled.querySelector('input[type="text"]').value).toEqual('my username');
});
}));
it('should navigate to Home route after the login OK ', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
router.config([new Route({path: '/home', name: 'Home', component: Login})]);
spyOn(router, 'navigate').and.callThrough();
let compiled = fixture.debugElement.nativeElement;
let password = compiled.querySelector('input[type="password"]');
let username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-password';
compiled.querySelector('button').click();
expect(fixture.componentInstance.error).toBe(false);
expect(router.navigate).toHaveBeenCalledWith(['Home']);
});
}));
it('should return error with a wrong username ', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
spyOn(router, 'navigate').and.callThrough();
let compiled = fixture.debugElement.nativeElement;
let password = compiled.querySelector('input[type="password"]');
let username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-wrong-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-password';
compiled.querySelector('button').click();
expect(fixture.componentInstance.error).toBe(true);
});
}));
it('should return error with a wrong password ', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
spyOn(router, 'navigate').and.callThrough();
let compiled = fixture.debugElement.nativeElement;
let password = compiled.querySelector('input[type="password"]');
let username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-wrong-password';
compiled.querySelector('button').click();
expect(fixture.componentInstance.error).toBe(true);
});
}));
it('should return error with a wrong username and password ', injectAsync([TestComponentBuilder, Authentication, Router], (tcb: TestComponentBuilder, authService: Authentication, router: Router) => {
return tcb
.createAsync(Login)
.then((fixture) => {
spyOn(router, 'navigate').and.callThrough();
let compiled = fixture.debugElement.nativeElement;
let password = compiled.querySelector('input[type="password"]');
let username = compiled.querySelector('input[type="text"]');
fixture.debugElement.componentInstance.form._value.username = 'fake-wrong-username';
fixture.debugElement.componentInstance.form._value.password = 'fake-wrong-password';
compiled.querySelector('button').click();
expect(fixture.componentInstance.error).toBe(true);
});
}));
});

View File

@ -56,7 +56,9 @@ export class Login {
* @returns {boolean}
*/
isErrorStyle(field:ControlGroup) {
componentHandler.upgradeAllRegistered();
if(this.componentHandler){
componentHandler.upgradeAllRegistered();
}
if (field.valid) {
return false;
} else {

View File

@ -32,7 +32,8 @@
// #3. Import the spec file explicitly
Promise.all([
System.import('src/authentication.service.spec')
System.import('src/authentication.service.spec'),
System.import('src/login.component.spec')
])
// #4. wait for all imports to load ...
// then re-execute `window.onload` which