#17 Login component unit tests

ng2-components/ng2-alfresco-login/src/login.component.js

@@ -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;
                     }

ng2-components/ng2-alfresco-login/src/login.component.js.map

@@ -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"}

ng2-components/ng2-alfresco-login/src/login.component.spec.js

@@ -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

ng2-components/ng2-alfresco-login/src/login.component.spec.ts

@@ -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);
+            });
+    }));
+
+});
+

ng2-components/ng2-alfresco-login/src/login.component.ts

@@ -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 {

ng2-components/ng2-alfresco-login/tests-runner.html

@@ -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