Refactory into ComponentTestHelper and sidebar unit tests enhancements

Michel Felipe
1 parent 41cad538
Showing 4 changed files with 108 additions and 16 deletions Show diff stats
src/app/layout/blocks/people-block/people-block.component.spec.ts
src/app/layout/sidebar/sidebar.component.spec.ts
src/app/layout/sidebar/sidebar.component.ts
src/spec/helpers.ts
@@ -39,8 +39,8 @@ describe(&quot;Components&quot;, () =&gt; {
         });
         /**
-         * By default the helper will have the component, with all properties 
-         * ready to be used. Here the mock provider 'EnvironmentService' will 
+         * By default the helper will have the component, with all properties
+         * ready to be used. Here the mock provider 'EnvironmentService' will
          * return the given array with one person.
          */
         it("get block with one people", () => {
@@ -0,0 +1,75 @@
+import {provide} from 'ng-forward';
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {SidebarComponent} from './sidebar.component';
+
+const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
+
+describe('Sidebar Component', () => {
+
+    let helper: ComponentTestHelper<SidebarComponent>;
+    let notifyService: any = {
+        event: Function,
+        subscribe: (fn: (visible: boolean) => void) => {
+            notifyService.event = fn;
+        },
+        next: (value: any) => {
+            notifyService.event(value);
+        },
+        setVisibility: (visible: boolean) => {
+            notifyService.event(visible);
+        }
+    };
+
+    let sessionService: any = {
+        currentUser: (): any => {
+            return {
+                person: { name: 'test' }
+            };
+        }
+    };
+
+
+    beforeEach(angular.mock.module("templates"));
+
+    beforeEach((done: Function) => {
+        providers((provide: any) => {
+            return <any>[
+                provide('SidebarNotificationService', {
+                    useValue: notifyService
+                }),
+                provide('SessionService', {
+                    useValue: sessionService
+                })
+            ];
+        });
+
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [SidebarComponent],
+            properties: {
+                visible: false
+            }
+        });
+
+        helper = new ComponentTestHelper<SidebarComponent>(cls, done);
+    });
+
+    it('render the sidebar html content', () => {
+        expect(helper.all('div#nav-col').length).toEqual(1);
+    });
+
+    it('show sidebar only if a service emit a visibility event', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.component.isVisible()).toBeTruthy();
+    });
+
+    it('show user name into sidebar', () => {
+
+        notifyService.setVisibility(true);
+        expect(helper.component.user.name).toEqual(sessionService.currentUser().person.name);
+        expect(helper.debugElement.query('div.user-box .name a').text()).toMatch(sessionService.currentUser().person.name);
+    });
+
+});
 import {Component, Inject, Input} from "ng-forward";
 import {SidebarNotificationService} from "./sidebar.notification.service";
+import {SessionService} from '../../login/session.service';
 @Component({
     selector: 'sidebar',
     templateUrl: 'app/layout/sidebar/sidebar.html'
 })
-@Inject(SidebarNotificationService)
+@Inject(SidebarNotificationService, SessionService)
 export class SidebarComponent {
-    @Input('visible')
-    private isVisible: boolean = false;
+    @Input()
+    private visible: boolean = false;
-    constructor(private notificationService: SidebarNotificationService) { }
+    @Input()
+    public user: { name: string } = {
+        name: ''
+    };
+
+    constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
     ngOnInit() {
-        this.notificationService.setVisibility(this.isVisible);
-        this.notificationService.subscribe((visible) => {
-            this.isVisible = visible;
+        let userData: any = this.session.currentUser();
+        if (userData) {
+            this.user = userData.person;
+        }
+
+        this.notificationService.setVisibility(this.visible);
+        this.notificationService.subscribe((visible: boolean) => {
+            this.visible = visible;
         });
     }
+
+    isVisible(): boolean {
+        return <boolean>this.visible;
+    }
 }
 import {ngClass, TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
 import {providers} from  'ng-forward/cjs/testing/providers';
-import {Injectable, Inject, Provider, Input, provide, Component} from 'ng-forward';
+import {Injectable, Inject, Provider, Input, Output, EventEmitter, provide, Component} from 'ng-forward';
 export var ngforward = {
@@ -62,7 +62,6 @@ export function provideFilters(...filters: string[]) {
     return providers;
 }
-
 @Component({
     selector: 'helper_get_angular_service',
     template: 'not-used',
@@ -78,12 +77,15 @@ class AngularServiceHookComponent {
  * This helper class allows get angular services to be used in integration tests
  * i.e: '$http', '$q', '$location', etc...
  */
-class AngularServiceFactory {
+export class AngularServiceFactory {
+
+    private fixtureComponentHookPoint: ComponentFixture;
-    constructor(private fixtureComponentHookPoint: ComponentFixture) {
-        this.fixtureComponentHookPoint = (<any>tcb)["create"](AngularServiceHookComponent);
+    constructor() {
+        this.fixtureComponentHookPoint = (<any>tcb)["create"](ComponentWithOutputCall);
     }
+
     getAngularService<T>(angularService: string) {
         return this.fixtureComponentHookPoint.debugElement.getLocal(angularService);
     }
@@ -97,8 +99,8 @@ class AngularServiceFactory {
     }
 }
-export function getAngularServiceFactory(fixture: ComponentFixture) {
-    return new AngularServiceFactory(fixture);
+export function getAngularServiceFactory() {
+    return new AngularServiceFactory();
 }
 export {mocks} from "./mocks";
@@ -0,0 +1,75 @@		@@ -0,0 +1,75 @@
	1	+import {provide} from 'ng-forward';
	2	+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
	3	+import {providers} from 'ng-forward/cjs/testing/providers';
	4	+import {SidebarComponent} from './sidebar.component';
	5	+
	6	+const htmlTemplate: string = '<sidebar [visible]="false"></sidebar>';
	7	+
	8	+describe('Sidebar Component', () => {
	9	+
	10	+ let helper: ComponentTestHelper<SidebarComponent>;
	11	+ let notifyService: any = {
	12	+ event: Function,
	13	+ subscribe: (fn: (visible: boolean) => void) => {
	14	+ notifyService.event = fn;
	15	+ },
	16	+ next: (value: any) => {
	17	+ notifyService.event(value);
	18	+ },
	19	+ setVisibility: (visible: boolean) => {
	20	+ notifyService.event(visible);
	21	+ }
	22	+ };
	23	+
	24	+ let sessionService: any = {
	25	+ currentUser: (): any => {
	26	+ return {
	27	+ person: { name: 'test' }
	28	+ };
	29	+ }
	30	+ };
	31	+
	32	+
	33	+ beforeEach(angular.mock.module("templates"));
	34	+
	35	+ beforeEach((done: Function) => {
	36	+ providers((provide: any) => {
	37	+ return <any>[
	38	+ provide('SidebarNotificationService', {
	39	+ useValue: notifyService
	40	+ }),
	41	+ provide('SessionService', {
	42	+ useValue: sessionService
	43	+ })
	44	+ ];
	45	+ });
	46	+
	47	+ let cls = createClass({
	48	+ template: htmlTemplate,
	49	+ directives: [SidebarComponent],
	50	+ properties: {
	51	+ visible: false
	52	+ }
	53	+ });
	54	+
	55	+ helper = new ComponentTestHelper<SidebarComponent>(cls, done);
	56	+ });
	57	+
	58	+ it('render the sidebar html content', () => {
	59	+ expect(helper.all('div#nav-col').length).toEqual(1);
	60	+ });
	61	+
	62	+ it('show sidebar only if a service emit a visibility event', () => {
	63	+
	64	+ notifyService.setVisibility(true);
	65	+ expect(helper.component.isVisible()).toBeTruthy();
	66	+ });
	67	+
	68	+ it('show user name into sidebar', () => {
	69	+
	70	+ notifyService.setVisibility(true);
	71	+ expect(helper.component.user.name).toEqual(sessionService.currentUser().person.name);
	72	+ expect(helper.debugElement.query('div.user-box .name a').text()).toMatch(sessionService.currentUser().person.name);
	73	+ });
	74	+
	75	+});