Download as
Browse Code »

Commit f711ee9ce0e341dcf29ec2d72371ab5b042d25f3

Authored by Michel Felipe
1 parent 41cad538
Exists in master and in 26 other branches activities_block, btn-new-post, cosmetic_changes_people_and_communities_block, edit-blocks, edit-header-footer, env-tags-block, forgot_password, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, profile-article-resolvers, profile-blocks-sass, profile_description_block_component, profile_page_improvements, recent-activities, remove-article-confirmation, skin-small-change, staging, tags-block, theme-skin-yellow, translations, updated_signup_page, users_profile_page

Refactory into ComponentTestHelper and sidebar unit tests enhancements

Showing 4 changed files with 108 additions and 16 deletions   Show diff stats
src/app/layout/blocks/people-block/people-block.component.spec.ts
  Diff comments   View file @f711ee9
... ... @@ -39,8 +39,8 @@ describe("Components", () => {
39 39 });
40 40  
41 41 /**
42   - * By default the helper will have the component, with all properties
43   - * ready to be used. Here the mock provider 'EnvironmentService' will
  42 + * By default the helper will have the component, with all properties
  43 + * ready to be used. Here the mock provider 'EnvironmentService' will
44 44 * return the given array with one person.
45 45 */
46 46 it("get block with one people", () => {
... ...
src/app/layout/sidebar/sidebar.component.spec.ts 0 → 100644
  Diff comments   View file @f711ee9
... ... @@ -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 +});
... ...
src/app/layout/sidebar/sidebar.component.ts
  Diff comments   View file @f711ee9
1 1 import {Component, Inject, Input} from "ng-forward";
2 2 import {SidebarNotificationService} from "./sidebar.notification.service";
  3 +import {SessionService} from '../../login/session.service';
3 4  
4 5 @Component({
5 6 selector: 'sidebar',
6 7 templateUrl: 'app/layout/sidebar/sidebar.html'
7 8 })
8   -@Inject(SidebarNotificationService)
  9 +@Inject(SidebarNotificationService, SessionService)
9 10 export class SidebarComponent {
10 11  
11   - @Input('visible')
12   - private isVisible: boolean = false;
  12 + @Input()
  13 + private visible: boolean = false;
13 14  
14   - constructor(private notificationService: SidebarNotificationService) { }
  15 + @Input()
  16 + public user: { name: string } = {
  17 + name: ''
  18 + };
  19 +
  20 + constructor(private notificationService: SidebarNotificationService, private session: SessionService) { }
15 21  
16 22 ngOnInit() {
17 23  
18   - this.notificationService.setVisibility(this.isVisible);
19   - this.notificationService.subscribe((visible) => {
20   - this.isVisible = visible;
  24 + let userData: any = this.session.currentUser();
  25 + if (userData) {
  26 + this.user = userData.person;
  27 + }
  28 +
  29 + this.notificationService.setVisibility(this.visible);
  30 + this.notificationService.subscribe((visible: boolean) => {
  31 + this.visible = visible;
21 32 });
22 33 }
  34 +
  35 + isVisible(): boolean {
  36 + return <boolean>this.visible;
  37 + }
23 38 }
... ...
src/spec/helpers.ts
  Diff comments   View file @f711ee9
1 1  
2 2 import {ngClass, TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
3 3 import {providers} from 'ng-forward/cjs/testing/providers';
4   -import {Injectable, Inject, Provider, Input, provide, Component} from 'ng-forward';
  4 +import {Injectable, Inject, Provider, Input, Output, EventEmitter, provide, Component} from 'ng-forward';
5 5  
6 6  
7 7 export var ngforward = {
... ... @@ -62,7 +62,6 @@ export function provideFilters(...filters: string[]) {
62 62 return providers;
63 63 }
64 64  
65   -
66 65 @Component({
67 66 selector: 'helper_get_angular_service',
68 67 template: 'not-used',
... ... @@ -78,12 +77,15 @@ class AngularServiceHookComponent {
78 77 * This helper class allows get angular services to be used in integration tests
79 78 * i.e: '$http', '$q', '$location', etc...
80 79 */
81   -class AngularServiceFactory {
  80 +export class AngularServiceFactory {
  81 +
  82 + private fixtureComponentHookPoint: ComponentFixture;
82 83  
83   - constructor(private fixtureComponentHookPoint: ComponentFixture) {
84   - this.fixtureComponentHookPoint = (<any>tcb)["create"](AngularServiceHookComponent);
  84 + constructor() {
  85 + this.fixtureComponentHookPoint = (<any>tcb)["create"](ComponentWithOutputCall);
85 86 }
86 87  
  88 +
87 89 getAngularService<T>(angularService: string) {
88 90 return this.fixtureComponentHookPoint.debugElement.getLocal(angularService);
89 91 }
... ... @@ -97,8 +99,8 @@ class AngularServiceFactory {
97 99 }
98 100 }
99 101  
100   -export function getAngularServiceFactory(fixture: ComponentFixture) {
101   - return new AngularServiceFactory(fixture);
  102 +export function getAngularServiceFactory() {
  103 + return new AngularServiceFactory();
102 104 }
103 105  
104 106 export {mocks} from "./mocks";
... ...