merge with branch refactory-auth-service

ABNER SILVA DE OLIVEIRA
2 parents f2b55101 6738dc36
Showing 33 changed files with 476 additions and 275 deletions Show diff stats
.vscode/settings.json
src/app/cms/cms.component.ts
src/app/components/auth/auth.controller.js
src/app/components/auth/auth.service.js
src/app/components/auth/auth_controller.ts
src/app/components/auth/auth_events.ts
src/app/components/auth/auth_service.ts
src/app/components/auth/session.ts
src/app/components/noosfero-articles/article/article.component.spec.ts
src/app/components/noosfero-articles/article/article.component.ts
src/app/components/noosfero-articles/article/article_view.spec.ts
src/app/components/noosfero-articles/article/article_view.ts
src/app/components/noosfero-articles/blog/blog.component.ts
src/app/components/noosfero-blocks/block.component.spec.ts
src/app/components/noosfero-boxes/boxes.component.ts
src/app/content-viewer/content-viewer-actions.component.ts
src/app/content-viewer/content-viewer.component.ts
src/app/index.config.ts
src/app/index.module.ts
src/app/index.route.ts
@@ -4,5 +4,7 @@
         "**/.git": true,
         "**/.DS_Store": true,
         "src/app/*.js": false
-    }
+    },
+    "editor.fontSize": 14,
+    "typescript.useCodeSnippetsOnMethodSuggest": true
 }
 \ No newline at end of file
 import {StateConfig, Component, Inject} from 'ng-forward';
-
+import {Profile} from "./../models/interfaces";
 @Component({
     selector: 'cms',
     templateUrl: "app/cms/cms.html"
@@ -10,19 +10,19 @@ export class Cms {
     article: any = {};
     profile: any;
-    constructor(private noosfero, private $stateParams, private $httpParamSerializer, private $state, private SweetAlert) {
+    constructor(private noosfero: any/* TODO convert noosferoService */, private $stateParams: ng.ui.IStateParamsService, private $httpParamSerializer: any, private $state: ng.ui.IStateService, private SweetAlert: any) {
     }
     save() {
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: Profile) => {
             return this.noosfero.profiles.one(profile.id).customPOST(
                 { article: this.article },
                 'articles',
                 {},
                 { 'Content-Type': 'application/json' }
             )
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
             this.SweetAlert.swal({
                 title: "Good job!",
@@ -1,17 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .controller('AuthController', AuthController);
-
-
-  /** @ngInject */
-  function AuthController(noosfero, $log, $stateParams, AuthService) {
-    var vm = this;
-    vm.credentials = {};
-    vm.login = function() {
-      AuthService.login(vm.credentials);
-    }
-  }
-})();
@@ -1,88 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .factory('Session', Session)
-    .factory('AuthService', AuthService);
-
-  /** @ngInject */
-  function AuthService($q, $http, $rootScope, Session, $log, AUTH_EVENTS) {
-
-    function login (credentials) {
-      var url = '/api/v1/login';
-      var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
-      return $http.post(url, encodedData).then(loginSuccessCallback, loginFailedCallback);
-    }
-
-    function loginFromCookie() {
-      var url = '/api/v1/login_from_cookie';
-      return $http.post(url).then(loginSuccessCallback, loginFailedCallback);
-    }
-    
-    function loginSuccessCallback(response) {
-      $log.debug('AuthService.login [SUCCESS] response', response);
-      var currentUser = Session.create(response.data);
-      $rootScope.currentUser = currentUser;
-      $rootScope.$broadcast(AUTH_EVENTS.loginSuccess, currentUser);
-      return currentUser;
-    }
-    
-    function loginFailedCallback(response) {
-      $log.debug('AuthService.login [FAIL] response', response);
-      $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
-      // return $q.reject(response);
-      return null;
-    }
-
-    function logout () {
-      Session.destroy();
-      $rootScope.currentUser = undefined;
-      $rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
-      $http.jsonp('/account/logout'); //FIXME logout from noosfero to sync login state
-    }
-
-    function isAuthenticated () {
-      return !!Session.userId;
-    }
-
-    function isAuthorized (authorizedRoles) {
-      if (!angular.isArray(authorizedRoles)) {
-        authorizedRoles = [authorizedRoles];
-      }
-      return (service.isAuthenticated() && authorizedRoles.indexOf(Session.userRole) !== -1);
-    }
-
-    var service = {
-      login: login,
-      loginFromCookie: loginFromCookie,
-      logout: logout,
-      isAuthenticated: isAuthenticated,
-      isAuthorized: isAuthorized
-    };
-    return service;
-  }
-
-  /** @ngInject */
-  function Session($localStorage, $log) {
-    var service = {};
-
-    service.create = function(data) {
-      $localStorage.currentUser = data.user;
-      $log.debug('User session created.', $localStorage.currentUser);
-      return $localStorage.currentUser;
-    };
-
-    service.destroy = function() {
-      delete $localStorage.currentUser;
-      $log.debug('User session destroyed.');
-    };
-
-    service.getCurrentUser = function () {
-      return $localStorage.currentUser;
-    };
-
-    return service;
-  }
-
-})();
@@ -0,0 +1,22 @@
+import {Credentials} from "./../../models/interfaces";
+import {AuthService} from "./auth_service";
+
+export class AuthController {
+
+    static $inject = ["noosfero", "$log", "$stateParams", "AuthService"];
+
+    constructor(
+        private noosfero: any,
+        private $log: ng.ILogService,
+        private $stateParams: any,
+        private AuthService: AuthService
+    ) {
+
+    }
+
+    credentials: Credentials;
+
+    login() {
+        this.AuthService.login(this.credentials);
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,11 @@
+export interface IAuthEvents {
+    loginSuccess: string;
+    loginFailed: string;
+    logoutSuccess: string;
+}
+
+export const AUTH_EVENTS: IAuthEvents = {
+    loginSuccess: "auth-login-success",
+    loginFailed: "auth-login-failed",
+    logoutSuccess: "auth-logout-success"
+};
 \ No newline at end of file
@@ -0,0 +1,65 @@
+import {Injectable, Inject} from "ng-forward";
+
+import {Credentials, NoosferoRootScope, User, UserResponse} from "./../../models/interfaces";
+import {Session} from "./session";
+
+import {AUTH_EVENTS, IAuthEvents} from "./auth_events";
+
+@Injectable()
+@Inject("$q", "$http", "$rootScope", "Session", "$log", "AUTH_EVENTS")
+export class AuthService {
+
+    constructor(private $q: ng.IQService,
+        private $http: ng.IHttpService,
+        private $rootScope: NoosferoRootScope,
+        private session: Session,
+        private $log: ng.ILogService,
+        private auth_events: IAuthEvents) {
+
+    }
+
+    loginFromCookie() {
+        let url: string = '/api/v1/login_from_cookie';
+        return this.$http.post(url, null).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
+    }
+
+
+    private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
+        this.$log.debug('AuthService.login [SUCCESS] response', response);
+        let currentUser: User = this.session.create(response.data);
+        this.$rootScope.currentUser = currentUser;
+        this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
+        return currentUser;
+    }
+
+    login(credentials: Credentials) {
+        let url = '/api/v1/login';
+        let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
+        return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
+    }
+
+    private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
+        this.$log.debug('AuthService.login [FAIL] response', response);
+        this.$rootScope.$broadcast(this.auth_events.loginFailed);
+        // return $q.reject(response);
+        return null;
+    }
+
+    public logout() {
+        this.session.destroy();
+        this.$rootScope.currentUser = undefined;
+        this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
+        this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
+    }
+
+    public isAuthenticated() {
+        return !!this.session.getCurrentUser();
+    }
+
+    public isAuthorized(authorizedRoles: string | string[]) {
+        if (!angular.isArray(authorizedRoles)) {
+            authorizedRoles = [<string>authorizedRoles];
+        }
+        return (this.isAuthenticated() && authorizedRoles.indexOf(this.session.getCurrentUser().userRole) !== -1);
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,27 @@
+import {Injectable, Inject} from "ng-forward";
+import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
+
+@Injectable()
+@Inject("$localStorage", "$log")
+export class Session {
+
+    constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
+
+    }
+
+    create(data: UserResponse): User {
+        this.$localStorage.currentUser = data.user;
+        this.$log.debug('User session created.', this.$localStorage.currentUser);
+        return this.$localStorage.currentUser;
+    };
+
+    destroy() {
+        delete this.$localStorage.currentUser;
+        this.$log.debug('User session destroyed.');
+    };
+
+    getCurrentUser(): User {
+        return this.$localStorage.currentUser;
+    };
+
+}
 \ No newline at end of file
@@ -1,81 +0,0 @@
-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
-import {Input, provide, Component} from 'ng-forward';
-
-import {ArticleComponent} from './article.component';
-
-// Instantiate the Builder, this part is different than ng2.
-// In ng2 you inject tcb.
-const tcb = new TestComponentBuilder();
-
-// this htmlTemplate will be re-used between the container components in this spec file 
-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
-
-
-describe("Article Component", () => {
-
-    // the karma preprocessor html2js transform the templates html into js files which put
-    // the templates to the templateCache into the module templates
-    // we need to load the module templates here as the template for the 
-    // component NoosferoArtileComponent will be load on our tests
-    beforeEach(angular.mock.module("templates"));
-
-    it("receives the article and profile as inputs", done => {
-
-        // Creating a container component (ArticleContainerComponent) to include 
-        // the component under test (ArticleComponent)  
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent] })
-        class ArticleContainerComponent {
-            article = { type: 'anyArticleType' };
-            profile = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-
-        // uses the TestComponentBuilder instance to initialize the component
-        tcb
-            .createAsync(ArticleContainerComponent).then(fixture => {
-                // and here we can inspect and run the test assertions 
-                let myComponent: ArticleComponent = fixture.componentInstance;
-
-                // assure the article object inside the ArticleComponent matches
-                // the provided through the parent component
-                expect(myComponent.article.type).toEqual("anyArticleType");
-                expect(myComponent.profile.name).toEqual("profile-name");
-
-                // done needs to be called (it isn't really needed, as we can read in
-                // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
-                // because createAsync in ng-forward is not really async, but as the intention 
-                // here is write tests in angular 2 ways, this is recommended
-                done();
-            });
-    });
-
-
-    it("renders a component which matches to the article type", done => {
-        // NoosferoTinyMceArticle component created to check if it will be used
-        // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleComponent)
-        // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
-        @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
-        class NoosferoTinyMceArticle {
-            @Input() article: any;
-            @Input() profile: any;
-        }
-
-        // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
-        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent, NoosferoTinyMceArticle] })
-        class CustomArticleType {
-            article = { type: 'TinyMceArticle' };
-            profile = { name: 'profile-name' };
-            constructor() {
-            }
-        }
-        tcb
-            .createAsync(CustomArticleType).then(fixture => {
-                let myComponent: CustomArticleType = fixture.componentInstance;
-                expect(myComponent.article.type).toEqual("TinyMceArticle");
-                expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
-                done();
-            });
-    });
-
-});
@@ -1,26 +0,0 @@
-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
-import {NoosferoArticleBlog} from "../blog/blog.component";
-
-@Component({
-    selector: 'noosfero-article',
-    templateUrl: 'app/components/noosfero-articles/article/article.html',
-    directives: [NoosferoArticleBlog]
-})
-@Inject("$element", "$scope", "$injector", "$compile")
-export class ArticleComponent {
-
-    @Input() article: any;
-    @Input() profile: any;
-
-    ngOnInit() {
-        let specificDirective = 'noosfero' + this.article.type;
-        if (this.$injector.has(specificDirective + 'Directive')) {
-            let directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + directiveName + '>')(this.$scope));
-        }
-    }
-
-    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
-
-    }
-}
@@ -0,0 +1,108 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component} from 'ng-forward';
+
+import {ArticleView, ArticleDefaultView} from './article_view';
+
+// Instantiate the Builder, this part is different than ng2.
+// In ng2 you inject tcb.
+const tcb = new TestComponentBuilder();
+
+// this htmlTemplate will be re-used between the container components in this spec file 
+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
+
+
+describe("ArticleView Component", () => {
+
+    // the karma preprocessor html2js transform the templates html into js files which put
+    // the templates to the templateCache into the module templates
+    // we need to load the module templates here as the template for the 
+    // component Noosfero ArtileView will be load on our tests
+    beforeEach(angular.mock.module("templates"));
+
+    it("renders the default component when no specific component is found", (done: Function) => {
+        // Creating a container component (ArticleContainerComponent) to include 
+        // the component under test (ArticleView)  
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
+        class ArticleContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        // uses the TestComponentBuilder instance to initialize the component
+        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
+            // and here we can inspect and run the test assertions
+
+            // gets the children component of ArticleContainerComponent 
+            let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // and checks if the article View rendered was the Default Article View
+            expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
+
+            // done needs to be called (it isn't really needed, as we can read in
+            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+            // because createAsync in ng-forward is not really async, but as the intention 
+            // here is write tests in angular 2 ways, this is recommended
+            done();
+        });
+    });
+
+    it("receives the article and profile as inputs", (done: Function) => {
+
+        // Creating a container component (ArticleContainerComponent) to include 
+        // the component under test (ArticleView)  
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
+        class ArticleContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+
+        // uses the TestComponentBuilder instance to initialize the component
+        tcb.createAsync(ArticleContainerComponent).then((fixture) => {
+            // and here we can inspect and run the test assertions 
+            let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+            // assure the article object inside the ArticleView matches
+            // the provided through the parent component
+            expect(articleView.article.type).toEqual("anyArticleType");
+            expect(articleView.profile.name).toEqual("profile-name");
+
+            // done needs to be called (it isn't really needed, as we can read in
+            // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+            // because createAsync in ng-forward is not really async, but as the intention 
+            // here is write tests in angular 2 ways, this is recommended
+            done();
+        });
+    });
+
+
+    it("renders a article view which matches to the article type", done => {
+        // NoosferoTinyMceArticle component created to check if it will be used
+        // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
+        // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
+        @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
+        class TinyMceArticleView {
+            @Input() article: any;
+            @Input() profile: any;
+        }
+
+        // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView, TinyMceArticleView] })
+        class CustomArticleType {
+            article = { type: 'TinyMceArticle' };
+            profile = { name: 'profile-name' };
+            constructor() {
+            }
+        }
+        tcb.createAsync(CustomArticleType).then(fixture => {
+            let myComponent: CustomArticleType = fixture.componentInstance;
+            expect(myComponent.article.type).toEqual("TinyMceArticle");
+            expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
+            done();
+        });
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,43 @@
+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
+import {NoosferoArticleBlog} from "../blog/blog.component";
+
+@Component({
+    selector: 'noosfero-default-article',
+    templateUrl: 'app/components/noosfero-articles/article/article.html'
+})
+export class ArticleDefaultView {
+
+    @Input() article: any;
+    @Input() profile: any;
+
+}
+
+@Component({
+    selector: 'noosfero-article',
+    template: 'not-used',
+    directives: [ArticleDefaultView, NoosferoArticleBlog]
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class ArticleView {
+
+    @Input() article: any;
+    @Input() profile: any;
+    directiveName: string;
+
+    ngOnInit() {
+        let specificDirective = 'noosfero' + this.article.type;
+        this.directiveName = "noosfero-default-article";
+        if (this.$injector.has(specificDirective + 'Directive')) {
+            this.directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        }
+        this.$element.replaceWith(this.$compile('<' + this.directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + this.directiveName + '>')(this.$scope));
+    }
+
+    constructor(
+        private $element: any,
+        private $scope: ng.IScope,
+        private $injector: ng.auto.IInjectorService,
+        private $compile: ng.ICompileService) {
+
+    }
+}
 import {Component, Input, Inject} from "ng-forward";
+import {Article, Profile} from "./../../../models/interfaces";
 @Component({
     selector: "noosfero-blog",
@@ -8,15 +9,15 @@ import {Component, Input, Inject} from &quot;ng-forward&quot;;
 @Inject("noosfero", "$scope")
 export class NoosferoArticleBlog {
-    @Input() article;
-    @Input() profile;
+    @Input() article: Article;
+    @Input() profile: Profile;
     private posts: any[];
     private perPage: number = 3;
     private currentPage: number;
     private totalPosts: number = 0;
-    constructor(private noosfero: any, private $scope) {
+    constructor(private noosfero: any, private $scope: ng.IScope) {
     }
     ngOnInit() {
@@ -28,8 +29,8 @@ export class NoosferoArticleBlog {
             content_type: "TinyMceArticle",
             per_page: this.perPage,
             page: this.currentPage
-        }).then((response) => {
-            this.totalPosts = response.headers("total");
+        }).then((response: restangular.IResponse) => {
+            this.totalPosts = <number>(<any>response.headers("total"));
             this.posts = response.data.articles;
         });
     }
@@ -73,8 +73,8 @@ describe(&quot;Block Component&quot;, () =&gt; {
     it("renders the default block when hasn't defined a block type", done => {
         @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block] })
         class CustomBlockType {
-            block = { type: null };
-            owner = { name: 'profile-name' };
+            block: any = { type: null };
+            owner: any = { name: 'profile-name' };
             constructor() {
             }
         }
 import { Input, Inject, Component } from 'ng-forward';
-
+import {Box} from "./../../models/interfaces";
 @Component({
     selector: "noosfero-boxes",
     templateUrl: "app/components/noosfero-boxes/boxes.html"
 })
 export class Boxes {
-    @Input() boxes: any
-    @Input() owner: any
+    @Input() boxes: any;
+    @Input() owner: any;
-    boxesOrder(box) {
-        if (box.position == 2) return 0;
+    boxesOrder(box: Box) {
+        if (box.position === 2) return 0;
         return box.position;
     }
 }
 import {Component, Inject} from "ng-forward";
+import {Profile} from "./../models/interfaces";
 @Component({
     selector: "content-viewer-actions",
     templateUrl: "app/content-viewer/navbar-actions.html",
@@ -10,8 +11,8 @@ export class ContentViewerActions {
     article: any;
     profile: any;
-    constructor(noosfero) {
-        noosfero.currentProfile.then((profile) => {
+    constructor(noosfero: any) {
+        noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
         });
     }
 import * as noosfero from "../models/interfaces";
-import {ArticleComponent} from "../components/noosfero-articles/article/article.component";
+
+import {ArticleView} from "../components/noosfero-articles/article/article_view";
 import {Input, Component, StateConfig, Inject} from "ng-forward";
 import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
@@ -8,7 +9,7 @@ import {NoosferoArticleBlog} from &quot;./../components/noosfero-articles/blog/blog.c
 @Component({
     selector: "content-viewer",
     templateUrl: "app/content-viewer/page.html",
-    directives: [NoosferoArticleBlog, ArticleComponent]
+    directives: [NoosferoArticleBlog, ArticleView]
 })
 @Inject("noosfero", "$log", "$stateParams")
 export class ContentViewer {
@@ -24,11 +25,10 @@ export class ContentViewer {
     }
     activate() {
-        console.log("HERE CONTENT VIEWER");
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: noosfero.Profile) => {
             this.profile = profile;
             return this.noosfero.profiles.one(this.profile.id).one("articles").get({ path: this.$stateParams["page"] });
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.article = response.data.article;
         });
     }
 /** @ngInject */
-export function noosferoModuleConfig($logProvider, $locationProvider, RestangularProvider, $httpProvider, $provide) {
+export function noosferoModuleConfig($logProvider: ng.ILogProvider, $locationProvider: ng.ILocationProvider, RestangularProvider: restangular.IProvider, $httpProvider: ng.IHttpProvider, $provide: ng.auto.IProvideService) {
     $logProvider.debugEnabled(true);
     $locationProvider.html5Mode({ enabled: true });
     RestangularProvider.setBaseUrl("/api/v1");
     RestangularProvider.setFullResponse(true);
-    $httpProvider.defaults.headers.post = { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" };
-    $provide.decorator("$uiViewScroll", function($delegate, $document) {
-        return function(uiViewElement) {
+    (<any>$httpProvider.defaults.headers.post)["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
+
+
+    $provide.decorator("$uiViewScroll", function($delegate: any, $document: any) {
+        return function(uiViewElement: any) {
             $document.scrollToElementAnimated(uiViewElement);
         };
     });
@@ -2,14 +2,14 @@ export class NoosferoApp {
     static appName: string = "noosferoApp";
     static angularModule: any;
-    //static init(angularModule: any) {
-    //NoosferoApp.angularModule
+    // static init(angularModule: any) {
+    // NoosferoApp.angularModule
     // angular.module(NoosferoApp.appName, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
     //     "ngSanitize", "ngMessages", "ngAria", "restangular",
     //     "ui.router", "ui.bootstrap", "toastr",
     //     "angularMoment", "angular.filter", "akoenig.deckgrid",
     //     "angular-timeline", "duScroll", "oitozero.ngSweetAlert"]);
-    //}
+    // }
     static addConfig(configFunc: Function) {
         NoosferoApp.angularModule.config(configFunc);
@@ -23,6 +23,10 @@ export class NoosferoApp {
         NoosferoApp.angularModule.service(serviceName, value);
     }
+    static addFactory(factoryName: string, value: any) {
+        NoosferoApp.angularModule.factory(factoryName, value);
+    }
+
     static addController(controllerName: string, value: any) {
         NoosferoApp.angularModule.controller(controllerName, value);
     }
 /** @ngInject */
-export function routeConfig($stateProvider, $urlRouterProvider) {
+export function routeConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
     $stateProvider
         .state("main.profile.settings", {
             url: "^/myprofile/:profile"
+import {Session} from "./components/auth/session";
 /** @ngInject */
-export function noosferoAngularRunBlock($log, Restangular, Session) {
-    Restangular.addFullRequestInterceptor(function(element, operation, route, url, headers) {
+export function noosferoAngularRunBlock($log: ng.ILogService, Restangular: restangular.IService, Session: Session) {
+    Restangular.addFullRequestInterceptor((element: any, operation: string, route: string, url: string, headers: string)  => {
         if (Session.getCurrentUser()) {
-            headers["Private-Token"] = Session.getCurrentUser().private_token;
+            (<any>headers)["Private-Token"] = Session.getCurrentUser().private_token;
         }
-        return { headers: headers };
+        return <any>{ headers: <any>headers };
     });
 }
@@ -16,7 +16,8 @@ import {Cms as noosferoCms} from &quot;./cms/cms.component&quot;;
 import {Main} from "./main/main.component";
 import {bootstrap, bundle} from "ng-forward";
-
+import {AUTH_EVENTS} from "./components/auth/auth_events";
+import {AuthController} from "./components/auth/auth_controller";
 declare var moment: any;
@@ -28,18 +29,18 @@ let noosferoApp: any = bundle(&quot;noosferoApp&quot;, Main, [&quot;ngAnimate&quot;, &quot;ngCookies&quot;, &quot;n
 NoosferoApp.angularModule = noosferoApp;
+
 NoosferoApp.addConstants("moment", moment);
-NoosferoApp.addConstants("AUTH_EVENTS", {
-    loginSuccess: "auth-login-success",
-    loginFailed: "auth-login-failed",
-    logoutSuccess: "auth-logout-success"
-});
+NoosferoApp.addConstants("AUTH_EVENTS", AUTH_EVENTS);
 NoosferoApp.addConfig(noosferoModuleConfig);
 NoosferoApp.run(noosferoAngularRunBlock);
-require("./components/auth/auth.controller.js");
-require("./components/auth/auth.service.js");
+// NoosferoApp.addService("Session", Session);
+// NoosferoApp.addService("AuthService", AuthService);
+NoosferoApp.addController("AuthController", AuthController);
+
+
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
 import {bundle, Component, StateConfig} from "ng-forward";
 import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component.ts";
-import {ArticleComponent} from "../components/noosfero-articles/article/article.component";
+
+import {ArticleView} from "../components/noosfero-articles/article/article_view";
+
 import {Profile} from "../profile/profile.component";
 import {Boxes} from "../components/noosfero-boxes/boxes.component";
 import {Block} from "../components/noosfero-blocks/block.component";
+
+import {AuthService} from "./../components/auth/auth_service";
+import {Session} from "./../components/auth/session";
+
 @Component({
     selector: 'main-content',
     templateUrl: "app/main/main.html",
+    providers: [AuthService, Session]
 })
 export class MainContent {
@@ -16,7 +23,8 @@ export class MainContent {
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleComponent, Boxes, Block]
+    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block],
+    providers: [AuthService, Session]
 })
 @StateConfig([
     {
@@ -24,7 +32,7 @@ export class MainContent {
         component: MainContent,
         name: 'main',
         resolve: {
-            currentUser: function(AuthService) {
+            currentUser: function(AuthService: AuthService) {
                 return AuthService.loginFromCookie();
             }
         }
+export interface NoosferoRootScope extends ng.IScope {
+    currentUser: User;
+}
+
 export interface Event extends Article {
     id: number;
 }
@@ -8,6 +12,7 @@ export interface Article {
 export interface Profile {
     id: number;
+    identifier: string;
 }
 export interface Person extends Profile {
@@ -21,3 +26,31 @@ export interface TynyMceArticle extends Article {
 export interface Blog extends Article {
     id: number;
 }
+
+export interface Credentials {
+    username: string;
+    password: string;
+}
+
+export interface User {
+    id: number;
+    login: string;
+    email: string;
+    person: Person;
+    private_token: string;
+    userRole: string;
+}
+
+export interface UserResponse {
+    user: User;
+}
+
+
+export interface Box {
+    id: number;
+    position: number;
+}
+
+export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
+    currentUser: User;
+}
 \ No newline at end of file
 import {StateConfig, Component, Inject} from 'ng-forward';
+import {Profile} from "./../models/interfaces";
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile-info/profile-info.html"
@@ -10,15 +12,15 @@ export class ProfileInfo {
     activities: any
     profile: any
-    constructor(private noosfero) {
+    constructor(private noosfero: any) {
         this.activate();
     }
     activate() {
-        this.noosfero.currentProfile.then((profile) => {
+        this.noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
             return this.noosfero.profiles.one(this.profile.id).one('activities').get();
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.activities = response.data.activities;
         });
     }
 import {StateConfig, Component, Inject} from 'ng-forward';
+import {Profile} from "./../models/interfaces";
+
 @Component({
     selector: 'profile-home',
     template: "<div></div>"
@@ -7,13 +9,13 @@ import {StateConfig, Component, Inject} from &#39;ng-forward&#39;;
 @Inject("noosfero", "$log", "$stateParams", "$scope", "$state")
 export class ProfileHome {
-    profile: any;
+    profile: Profile;
-    constructor(noosfero, $log, $stateParams, $scope, $state) {
-        noosfero.currentProfile.then((profile) => {
+    constructor(noosfero: any, $log: ng.ILogService, $stateParams: ng.ui.IStateParamsService, $scope: ng.IScope, $state: ng.ui.IStateService) {
+        noosfero.currentProfile.then((profile: Profile) => {
             this.profile = profile;
             return noosfero.profile(this.profile.id).customGET('home_page', { fields: 'path' });
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             if (response.data.article) {
                 $state.transitionTo('main.profile.page', { page: response.data.article.path, profile: this.profile.identifier }, { location: false });
             } else {
 import {StateConfig, Component, Inject} from 'ng-forward';
-import {ProfileInfo} from '../profile-info/profile-info.component'
-import {ProfileHome} from '../profile/profile-home.component'
-import {Cms} from '../cms/cms.component'
+import {ProfileInfo} from '../profile-info/profile-info.component';
+import {ProfileHome} from '../profile/profile-home.component';
+import {Cms} from '../cms/cms.component';
 import {ContentViewer} from "../content-viewer/content-viewer.component";
+import * as noosferoModels from "./../models/interfaces";
+
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/profile.html"
@@ -65,15 +67,15 @@ import {ContentViewer} from &quot;../content-viewer/content-viewer.component&quot;;
 @Inject("noosfero", "$log", "$stateParams")
 export class Profile {
-    boxes: any
-    profile: any
+    boxes: noosferoModels.Box[];
+    profile: noosferoModels.Profile;
-    constructor(noosfero, $log, $stateParams) {
-        noosfero.profiles.one().get({ identifier: $stateParams.profile }).then((response) => {
+    constructor(noosfero: any, $log: ng.ILogService, $stateParams: ng.ui.IStateParamsService) {
+        noosfero.profiles.one().get({ identifier: $stateParams["profile"] }).then((response: restangular.IResponse) => {
             this.profile = response.data[0];
             noosfero.setCurrentProfile(this.profile);
             return noosfero.boxes(this.profile.id).one().get();
-        }).then((response) => {
+        }).then((response: restangular.IResponse) => {
             this.boxes = response.data.boxes;
         });
     }
@@ -0,0 +1,4 @@
+
+
+// TODO - see code generation using swagger resource declaration
+//        -> https://github.com/swagger-api/swagger-codegen
@@ -0,0 +1,11 @@
+namespace NgNoosferoAPI {
+    export class NoosferoHttpClient {
+        static $inject = ['$http', '$q'];
+
+        constructor(private $http: ng.IHttpService, private $q: ng.IQService) {
+
+        }
+    }
+
+    NgNoosferoAPI.ngModule.service(NoosferoHttpClient);
+}
 \ No newline at end of file
@@ -0,0 +1,26 @@
+
+module NgNoosferoAPI {
+    export interface NoosferoHttpServiceConfig {
+        protocol: string;
+        hostname: string;
+        port: number;
+        apiPath: string;
+        acceptHeader: string;
+        contentTypeHeader: string;
+        textEncoding: string;
+
+    }
+
+    export function configNoosferoHttpService(hostname: string, port?: number, protocol?: string) {
+        return <NoosferoHttpServiceConfig>{
+            hostname: hostname,
+            port: port || 80,
+            apiPath: "/api/v1",
+            protocol: protocol || "http",
+            acceptHeader: "application/json",
+            contentTypeHeader: "application/json",
+            textEncoding: "UTF-8"
+        };
+    }
+
+}
 \ No newline at end of file
@@ -0,0 +1,29 @@
+namespace NgNoosferoAPI {
+
+    // The following class represents the provider
+    export class NoosferoHttpServiceConfigProvider implements ng.IServiceProvider {
+        private config = <NoosferoHttpServiceConfig>{
+            hostname: "localhost",
+            protocol: "http",
+            port: 3000,
+            apiPath: "/api/v1",
+            acceptHeader: "application/json",
+            contentTypeHeader: "application/json",
+            textEncoding: "UTF-8"
+        };
+
+
+        // Configuration function
+        public setConfig(config: NoosferoHttpServiceConfig) {
+            this.config = config;
+        }
+
+        // Provider's factory function
+        public $get(): NoosferoHttpServiceConfig {
+            return this.config;
+        }
+    }
+
+    ngModule.provider("NoosferoHttpServiceConfig", NoosferoHttpServiceConfigProvider);
+
+}
 \ No newline at end of file
@@ -0,0 +1,8 @@
+
+
+module NgNoosferoAPI {
+    "use strict";
+    export var ngModule: ng.IModule = angular.module("ngNoosferoAPI", []);
+    
+}
+
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "target": "es5",
-        "noImplicitAny": false,
+        "noImplicitAny": true,
         "sourceMap": true,
         "experimentalDecorators": true
     },
1	import {StateConfig, Component, Inject} from 'ng-forward';	1	import {StateConfig, Component, Inject} from 'ng-forward';
2	-	2	+import {Profile} from "./../models/interfaces";
3	@Component({	3	@Component({
4	selector: 'cms',	4	selector: 'cms',
5	templateUrl: "app/cms/cms.html"	5	templateUrl: "app/cms/cms.html"
	@@ -10,19 +10,19 @@ export class Cms {		@@ -10,19 +10,19 @@ export class Cms {
10	article: any = {};	10	article: any = {};
11	profile: any;	11	profile: any;
12		12
13	- constructor(private noosfero, private $stateParams, private $httpParamSerializer, private $state, private SweetAlert) {	13	+ constructor(private noosfero: any/* TODO convert noosferoService */, private $stateParams: ng.ui.IStateParamsService, private $httpParamSerializer: any, private $state: ng.ui.IStateService, private SweetAlert: any) {
14		14
15	}	15	}
16		16
17	save() {	17	save() {
18	- this.noosfero.currentProfile.then((profile) => {	18	+ this.noosfero.currentProfile.then((profile: Profile) => {
19	return this.noosfero.profiles.one(profile.id).customPOST(	19	return this.noosfero.profiles.one(profile.id).customPOST(
20	{ article: this.article },	20	{ article: this.article },
21	'articles',	21	'articles',
22	{},	22	{},
23	{ 'Content-Type': 'application/json' }	23	{ 'Content-Type': 'application/json' }
24	)	24	)
25	- }).then((response) => {	25	+ }).then((response: restangular.IResponse) => {
26	this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });	26	this.$state.transitionTo('main.profile.page', { page: response.data.article.path, profile: response.data.article.profile.identifier });
27	this.SweetAlert.swal({	27	this.SweetAlert.swal({
28	title: "Good job!",	28	title: "Good job!",
	@@ -1,17 +0,0 @@	@@ -1,17 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .controller('AuthController', AuthController);
7	-
8	-
9	- /** @ngInject */
10	- function AuthController(noosfero, $log, $stateParams, AuthService) {
11	- var vm = this;
12	- vm.credentials = {};
13	- vm.login = function() {
14	- AuthService.login(vm.credentials);
15	- }
16	- }
17	-})();
	@@ -1,88 +0,0 @@	@@ -1,88 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .factory('Session', Session)
7	- .factory('AuthService', AuthService);
8	-
9	- /** @ngInject */
10	- function AuthService($q, $http, $rootScope, Session, $log, AUTH_EVENTS) {
11	-
12	- function login (credentials) {
13	- var url = '/api/v1/login';
14	- var encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
15	- return $http.post(url, encodedData).then(loginSuccessCallback, loginFailedCallback);
16	- }
17	-
18	- function loginFromCookie() {
19	- var url = '/api/v1/login_from_cookie';
20	- return $http.post(url).then(loginSuccessCallback, loginFailedCallback);
21	- }
22	-
23	- function loginSuccessCallback(response) {
24	- $log.debug('AuthService.login [SUCCESS] response', response);
25	- var currentUser = Session.create(response.data);
26	- $rootScope.currentUser = currentUser;
27	- $rootScope.$broadcast(AUTH_EVENTS.loginSuccess, currentUser);
28	- return currentUser;
29	- }
30	-
31	- function loginFailedCallback(response) {
32	- $log.debug('AuthService.login [FAIL] response', response);
33	- $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
34	- // return $q.reject(response);
35	- return null;
36	- }
37	-
38	- function logout () {
39	- Session.destroy();
40	- $rootScope.currentUser = undefined;
41	- $rootScope.$broadcast(AUTH_EVENTS.logoutSuccess);
42	- $http.jsonp('/account/logout'); //FIXME logout from noosfero to sync login state
43	- }
44	-
45	- function isAuthenticated () {
46	- return !!Session.userId;
47	- }
48	-
49	- function isAuthorized (authorizedRoles) {
50	- if (!angular.isArray(authorizedRoles)) {
51	- authorizedRoles = [authorizedRoles];
52	- }
53	- return (service.isAuthenticated() && authorizedRoles.indexOf(Session.userRole) !== -1);
54	- }
55	-
56	- var service = {
57	- login: login,
58	- loginFromCookie: loginFromCookie,
59	- logout: logout,
60	- isAuthenticated: isAuthenticated,
61	- isAuthorized: isAuthorized
62	- };
63	- return service;
64	- }
65	-
66	- /** @ngInject */
67	- function Session($localStorage, $log) {
68	- var service = {};
69	-
70	- service.create = function(data) {
71	- $localStorage.currentUser = data.user;
72	- $log.debug('User session created.', $localStorage.currentUser);
73	- return $localStorage.currentUser;
74	- };
75	-
76	- service.destroy = function() {
77	- delete $localStorage.currentUser;
78	- $log.debug('User session destroyed.');
79	- };
80	-
81	- service.getCurrentUser = function () {
82	- return $localStorage.currentUser;
83	- };
84	-
85	- return service;
86	- }
87	-
88	-})();
	@@ -0,0 +1,22 @@		@@ -0,0 +1,22 @@
		1	+import {Credentials} from "./../../models/interfaces";
		2	+import {AuthService} from "./auth_service";
		3	+
		4	+export class AuthController {
		5	+
		6	+ static $inject = ["noosfero", "$log", "$stateParams", "AuthService"];
		7	+
		8	+ constructor(
		9	+ private noosfero: any,
		10	+ private $log: ng.ILogService,
		11	+ private $stateParams: any,
		12	+ private AuthService: AuthService
		13	+ ) {
		14	+
		15	+ }
		16	+
		17	+ credentials: Credentials;
		18	+
		19	+ login() {
		20	+ this.AuthService.login(this.credentials);
		21	+ }
		22	+}
0	\ No newline at end of file	23	\ No newline at end of file
	@@ -0,0 +1,11 @@		@@ -0,0 +1,11 @@
		1	+export interface IAuthEvents {
		2	+ loginSuccess: string;
		3	+ loginFailed: string;
		4	+ logoutSuccess: string;
		5	+}
		6	+
		7	+export const AUTH_EVENTS: IAuthEvents = {
		8	+ loginSuccess: "auth-login-success",
		9	+ loginFailed: "auth-login-failed",
		10	+ logoutSuccess: "auth-logout-success"
		11	+};
0	\ No newline at end of file	12	\ No newline at end of file
	@@ -0,0 +1,65 @@		@@ -0,0 +1,65 @@
		1	+import {Injectable, Inject} from "ng-forward";
		2	+
		3	+import {Credentials, NoosferoRootScope, User, UserResponse} from "./../../models/interfaces";
		4	+import {Session} from "./session";
		5	+
		6	+import {AUTH_EVENTS, IAuthEvents} from "./auth_events";
		7	+
		8	+@Injectable()
		9	+@Inject("$q", "$http", "$rootScope", "Session", "$log", "AUTH_EVENTS")
		10	+export class AuthService {
		11	+
		12	+ constructor(private $q: ng.IQService,
		13	+ private $http: ng.IHttpService,
		14	+ private $rootScope: NoosferoRootScope,
		15	+ private session: Session,
		16	+ private $log: ng.ILogService,
		17	+ private auth_events: IAuthEvents) {
		18	+
		19	+ }
		20	+
		21	+ loginFromCookie() {
		22	+ let url: string = '/api/v1/login_from_cookie';
		23	+ return this.$http.post(url, null).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
		24	+ }
		25	+
		26	+
		27	+ private loginSuccessCallback(response: ng.IHttpPromiseCallbackArg<UserResponse>) {
		28	+ this.$log.debug('AuthService.login [SUCCESS] response', response);
		29	+ let currentUser: User = this.session.create(response.data);
		30	+ this.$rootScope.currentUser = currentUser;
		31	+ this.$rootScope.$broadcast(this.auth_events.loginSuccess, currentUser);
		32	+ return currentUser;
		33	+ }
		34	+
		35	+ login(credentials: Credentials) {
		36	+ let url = '/api/v1/login';
		37	+ let encodedData = 'login=' + credentials.username + '&password=' + credentials.password;
		38	+ return this.$http.post(url, encodedData).then(this.loginSuccessCallback.bind(this), this.loginFailedCallback.bind(this));
		39	+ }
		40	+
		41	+ private loginFailedCallback(response: ng.IHttpPromiseCallbackArg<any>): any {
		42	+ this.$log.debug('AuthService.login [FAIL] response', response);
		43	+ this.$rootScope.$broadcast(this.auth_events.loginFailed);
		44	+ // return $q.reject(response);
		45	+ return null;
		46	+ }
		47	+
		48	+ public logout() {
		49	+ this.session.destroy();
		50	+ this.$rootScope.currentUser = undefined;
		51	+ this.$rootScope.$broadcast(this.auth_events.logoutSuccess);
		52	+ this.$http.jsonp('/account/logout'); // FIXME logout from noosfero to sync login state
		53	+ }
		54	+
		55	+ public isAuthenticated() {
		56	+ return !!this.session.getCurrentUser();
		57	+ }
		58	+
		59	+ public isAuthorized(authorizedRoles: string \| string[]) {
		60	+ if (!angular.isArray(authorizedRoles)) {
		61	+ authorizedRoles = [<string>authorizedRoles];
		62	+ }
		63	+ return (this.isAuthenticated() && authorizedRoles.indexOf(this.session.getCurrentUser().userRole) !== -1);
		64	+ }
		65	+}
0	\ No newline at end of file	66	\ No newline at end of file
	@@ -0,0 +1,27 @@		@@ -0,0 +1,27 @@
		1	+import {Injectable, Inject} from "ng-forward";
		2	+import {UserResponse, User, INoosferoLocalStorage} from "./../../models/interfaces";
		3	+
		4	+@Injectable()
		5	+@Inject("$localStorage", "$log")
		6	+export class Session {
		7	+
		8	+ constructor(private $localStorage: INoosferoLocalStorage, private $log: ng.ILogService) {
		9	+
		10	+ }
		11	+
		12	+ create(data: UserResponse): User {
		13	+ this.$localStorage.currentUser = data.user;
		14	+ this.$log.debug('User session created.', this.$localStorage.currentUser);
		15	+ return this.$localStorage.currentUser;
		16	+ };
		17	+
		18	+ destroy() {
		19	+ delete this.$localStorage.currentUser;
		20	+ this.$log.debug('User session destroyed.');
		21	+ };
		22	+
		23	+ getCurrentUser(): User {
		24	+ return this.$localStorage.currentUser;
		25	+ };
		26	+
		27	+}
0	\ No newline at end of file	28	\ No newline at end of file
	@@ -1,81 +0,0 @@	@@ -1,81 +0,0 @@
1	-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2	-import {Input, provide, Component} from 'ng-forward';
3	-
4	-import {ArticleComponent} from './article.component';
5	-
6	-// Instantiate the Builder, this part is different than ng2.
7	-// In ng2 you inject tcb.
8	-const tcb = new TestComponentBuilder();
9	-
10	-// this htmlTemplate will be re-used between the container components in this spec file
11	-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
12	-
13	-
14	-describe("Article Component", () => {
15	-
16	- // the karma preprocessor html2js transform the templates html into js files which put
17	- // the templates to the templateCache into the module templates
18	- // we need to load the module templates here as the template for the
19	- // component NoosferoArtileComponent will be load on our tests
20	- beforeEach(angular.mock.module("templates"));
21	-
22	- it("receives the article and profile as inputs", done => {
23	-
24	- // Creating a container component (ArticleContainerComponent) to include
25	- // the component under test (ArticleComponent)
26	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent] })
27	- class ArticleContainerComponent {
28	- article = { type: 'anyArticleType' };
29	- profile = { name: 'profile-name' };
30	- constructor() {
31	- }
32	- }
33	-
34	- // uses the TestComponentBuilder instance to initialize the component
35	- tcb
36	- .createAsync(ArticleContainerComponent).then(fixture => {
37	- // and here we can inspect and run the test assertions
38	- let myComponent: ArticleComponent = fixture.componentInstance;
39	-
40	- // assure the article object inside the ArticleComponent matches
41	- // the provided through the parent component
42	- expect(myComponent.article.type).toEqual("anyArticleType");
43	- expect(myComponent.profile.name).toEqual("profile-name");
44	-
45	- // done needs to be called (it isn't really needed, as we can read in
46	- // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
47	- // because createAsync in ng-forward is not really async, but as the intention
48	- // here is write tests in angular 2 ways, this is recommended
49	- done();
50	- });
51	- });
52	-
53	-
54	- it("renders a component which matches to the article type", done => {
55	- // NoosferoTinyMceArticle component created to check if it will be used
56	- // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleComponent)
57	- // * Important * - the selector is what ng-forward uses to define the name of the directive provider
58	- @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
59	- class NoosferoTinyMceArticle {
60	- @Input() article: any;
61	- @Input() profile: any;
62	- }
63	-
64	- // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
65	- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent, NoosferoTinyMceArticle] })
66	- class CustomArticleType {
67	- article = { type: 'TinyMceArticle' };
68	- profile = { name: 'profile-name' };
69	- constructor() {
70	- }
71	- }
72	- tcb
73	- .createAsync(CustomArticleType).then(fixture => {
74	- let myComponent: CustomArticleType = fixture.componentInstance;
75	- expect(myComponent.article.type).toEqual("TinyMceArticle");
76	- expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
77	- done();
78	- });
79	- });
80	-
81	-});
	@@ -1,26 +0,0 @@	@@ -1,26 +0,0 @@
1	-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2	-import {NoosferoArticleBlog} from "../blog/blog.component";
3	-
4	-@Component({
5	- selector: 'noosfero-article',
6	- templateUrl: 'app/components/noosfero-articles/article/article.html',
7	- directives: [NoosferoArticleBlog]
8	-})
9	-@Inject("$element", "$scope", "$injector", "$compile")
10	-export class ArticleComponent {
11	-
12	- @Input() article: any;
13	- @Input() profile: any;
14	-
15	- ngOnInit() {
16	- let specificDirective = 'noosfero' + this.article.type;
17	- if (this.$injector.has(specificDirective + 'Directive')) {
18	- let directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
19	- this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + directiveName + '>')(this.$scope));
20	- }
21	- }
22	-
23	- constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
24	-
25	- }
26	-}
	@@ -0,0 +1,108 @@		@@ -0,0 +1,108 @@
		1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
		2	+import {Input, provide, Component} from 'ng-forward';
		3	+
		4	+import {ArticleView, ArticleDefaultView} from './article_view';
		5	+
		6	+// Instantiate the Builder, this part is different than ng2.
		7	+// In ng2 you inject tcb.
		8	+const tcb = new TestComponentBuilder();
		9	+
		10	+// this htmlTemplate will be re-used between the container components in this spec file
		11	+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
		12	+
		13	+
		14	+describe("ArticleView Component", () => {
		15	+
		16	+ // the karma preprocessor html2js transform the templates html into js files which put
		17	+ // the templates to the templateCache into the module templates
		18	+ // we need to load the module templates here as the template for the
		19	+ // component Noosfero ArtileView will be load on our tests
		20	+ beforeEach(angular.mock.module("templates"));
		21	+
		22	+ it("renders the default component when no specific component is found", (done: Function) => {
		23	+ // Creating a container component (ArticleContainerComponent) to include
		24	+ // the component under test (ArticleView)
		25	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
		26	+ class ArticleContainerComponent {
		27	+ article = { type: 'anyArticleType' };
		28	+ profile = { name: 'profile-name' };
		29	+ constructor() {
		30	+ }
		31	+ }
		32	+
		33	+ // uses the TestComponentBuilder instance to initialize the component
		34	+ tcb.createAsync(ArticleContainerComponent).then((fixture) => {
		35	+ // and here we can inspect and run the test assertions
		36	+
		37	+ // gets the children component of ArticleContainerComponent
		38	+ let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
		39	+
		40	+ // and checks if the article View rendered was the Default Article View
		41	+ expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
		42	+
		43	+ // done needs to be called (it isn't really needed, as we can read in
		44	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
		45	+ // because createAsync in ng-forward is not really async, but as the intention
		46	+ // here is write tests in angular 2 ways, this is recommended
		47	+ done();
		48	+ });
		49	+ });
		50	+
		51	+ it("receives the article and profile as inputs", (done: Function) => {
		52	+
		53	+ // Creating a container component (ArticleContainerComponent) to include
		54	+ // the component under test (ArticleView)
		55	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView] })
		56	+ class ArticleContainerComponent {
		57	+ article = { type: 'anyArticleType' };
		58	+ profile = { name: 'profile-name' };
		59	+ constructor() {
		60	+ }
		61	+ }
		62	+
		63	+ // uses the TestComponentBuilder instance to initialize the component
		64	+ tcb.createAsync(ArticleContainerComponent).then((fixture) => {
		65	+ // and here we can inspect and run the test assertions
		66	+ let articleView: ArticleView = fixture.debugElement.componentViewChildren[0].componentInstance;
		67	+
		68	+ // assure the article object inside the ArticleView matches
		69	+ // the provided through the parent component
		70	+ expect(articleView.article.type).toEqual("anyArticleType");
		71	+ expect(articleView.profile.name).toEqual("profile-name");
		72	+
		73	+ // done needs to be called (it isn't really needed, as we can read in
		74	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
		75	+ // because createAsync in ng-forward is not really async, but as the intention
		76	+ // here is write tests in angular 2 ways, this is recommended
		77	+ done();
		78	+ });
		79	+ });
		80	+
		81	+
		82	+ it("renders a article view which matches to the article type", done => {
		83	+ // NoosferoTinyMceArticle component created to check if it will be used
		84	+ // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
		85	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
		86	+ @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
		87	+ class TinyMceArticleView {
		88	+ @Input() article: any;
		89	+ @Input() profile: any;
		90	+ }
		91	+
		92	+ // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
		93	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleView, TinyMceArticleView] })
		94	+ class CustomArticleType {
		95	+ article = { type: 'TinyMceArticle' };
		96	+ profile = { name: 'profile-name' };
		97	+ constructor() {
		98	+ }
		99	+ }
		100	+ tcb.createAsync(CustomArticleType).then(fixture => {
		101	+ let myComponent: CustomArticleType = fixture.componentInstance;
		102	+ expect(myComponent.article.type).toEqual("TinyMceArticle");
		103	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
		104	+ done();
		105	+ });
		106	+ });
		107	+
		108	+});
0	\ No newline at end of file	109	\ No newline at end of file