Merge branch 'master' into staging

Victor Costa
2 parents 2d6e6299 628d8b3b
Showing 44 changed files with 831 additions and 93 deletions Show diff stats
bower.json
gulp/build.js
gulp/conf.js
karma.conf.js
src/app/article/cms/article-editor/article-editor.component.spec.ts
src/app/article/cms/article-editor/article-editor.component.ts
src/app/article/cms/cms.component.spec.ts
src/app/article/comment/comment.component.spec.ts
src/app/article/comment/comment.html
src/app/layout/blocks/display-content/display-content-block.component.spec.ts
src/app/layout/blocks/display-content/display-content-block.component.ts
src/app/layout/blocks/display-content/display-content-block.html
src/app/layout/blocks/display-content/display-content-block.scss
src/app/layout/blocks/display-content/index.ts
src/app/layout/blocks/login-block/index.ts
src/app/layout/blocks/login-block/login-block.component.spec.ts
src/app/layout/blocks/login-block/login-block.component.ts
src/app/layout/blocks/login-block/login-block.html
src/app/layout/blocks/recent-documents/recent-documents-block.component.spec.ts
src/app/layout/blocks/recent-documents/recent-documents-block.component.ts
@@ -36,14 +36,21 @@
     "angular-load": "^0.4.1",
     "angular-translate-interpolation-messageformat": "^2.10.0",
   	"angular-bind-html-compile": "^1.2.1",
-	  "angular-click-outside": "^2.7.1"
+	  "angular-click-outside": "^2.7.1",
+	  "ng-ckeditor": "^0.2.1"
   },
   "devDependencies": {
-    "angular-mocks": "~1.5.0",
-    "ng-ckeditor": "^0.2.1",
-    "ckeditor": "^4.5.8"
+    "angular-mocks": "~1.5.0"
   },
   "overrides": {
+    "ng-ckeditor": {
+      "main": [
+        "ng-ckeditor.js",
+        "libs/ckeditor/lang",
+        "libs/ckeditor/ckeditor.js",
+        "libs/ckeditor/config.js"
+      ]
+    },
     "bootstrap-sass": {
       "main": [
         "assets/stylesheets/_bootstrap.scss",
@@ -103,6 +103,7 @@ gulp.task(&#39;fonts&#39;, function () {
 });
 gulp.task('ckeditor', function () {
+  conf.wiredep.exclude.push(/ckeditor/); // exclude ckeditor from build to improve performance
   return gulp.src(['bower_components/ng-ckeditor/**/*']).pipe(gulp.dest(path.join(conf.paths.dist, '/ng-ckeditor')));
 });
@@ -153,4 +154,4 @@ gulp.task(&#39;noosfero&#39;, [&#39;html&#39;], function () {
     return merge(layouts, theme, index);
 });
-gulp.task('build', ['html', 'fonts', 'other', 'locale', 'ckeditor', 'plugin-languages', 'noosfero']);
+gulp.task('build', ['ckeditor', 'html', 'fonts', 'other', 'locale', 'plugin-languages', 'noosfero']);
@@ -36,7 +36,7 @@ exports.configTheme(argv.theme);
  *  to inject css preprocessor deps and js files in karma
  */
 exports.wiredep = {
-  exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/, /ckeditor/],
+  exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
   directory: 'bower_components'
 };
@@ -126,6 +126,10 @@ module.exports = function (config) {
     };
+    if(config.grep) {
+      configuration.client = { args: ['--grep', config.grep] };
+    }
+
     if (coverage) {
         /*configuration.webpack = {
@@ -0,0 +1,28 @@
+import {ArticleEditorComponent} from './article-editor.component';
+import {BasicEditorComponent} from "../basic-editor/basic-editor.component";
+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
+import * as helpers from "../../../../spec/helpers";
+
+const htmlTemplate: string = '<article-editor [article]="ctrl.article"></article-editor>';
+
+describe("Components", () => {
+    describe("Article Editor Component", () => {
+
+        let helper: ComponentTestHelper<ArticleEditorComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: { type: "TextArticle" } };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ArticleEditorComponent, BasicEditorComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<ArticleEditorComponent>(cls, done);
+        });
+
+        it("replace element with article basic editor when type is TextArticle", () => {
+            expect(helper.find("article-basic-editor").length).toEqual(1);
+        });
+    });
+});
@@ -16,10 +16,10 @@ export class ArticleEditorComponent {
         private $compile: ng.ICompileService) { }
     ngOnInit() {
-        let articleType = this.article.type.replace(/::/, '');
+        let articleType = this.article && this.article.type ? this.article.type.replace(/::/, '') : "TextArticle";
         let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
         let directiveName = "article-basic-editor";
-        if (this.$injector.has(specificDirective + 'Directive')) {
+        if (specificDirective !== "articleEditor" && this.$injector.has(specificDirective + 'Directive')) {
             directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
         }
         this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
@@ -55,6 +55,7 @@ describe(&quot;Article Cms&quot;, () =&gt; {
     });
     it("got to the new article page and display an alert when saving sucessfully", done => {
+        $stateParams['parent_id'] = 1;
         let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
         component.save();
         $rootScope.$apply();
@@ -7,16 +7,23 @@ const htmlTemplate: string = &#39;&lt;noosfero-comment [article]=&quot;ctrl.article&quot; [commen
 describe("Components", () => {
     describe("Comment Component", () => {
-        beforeEach(angular.mock.module("templates"));
+        let properties: any;
+        beforeEach(angular.mock.module("templates"));
+        beforeEach(() => {
+            properties = {
+                article: { id: 1, accept_comments: true },
+                comment: { title: "title", body: "body" }
+            };
+        });
         function createComponent() {
             let providers = helpers.provideFilters("translateFilter");
             @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
             class ContainerComponent {
-                article = { id: 1 };
-                comment = { title: "title", body: "body" };
+                article = properties['article'];
+                comment = properties['comment'];
             }
             return helpers.createComponentFromClass(ContainerComponent);
         }
@@ -52,5 +59,20 @@ describe(&quot;Components&quot;, () =&gt; {
                 done();
             });
         });
+
+        it("display reply button", done => {
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("not display reply button when accept_comments is false", done => {
+            properties['article']['accept_comments'] = false;
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(0);
+                done();
+            });
+        });
     });
 });
@@ -18,7 +18,7 @@
     <div class="title">{{ctrl.comment.title}}</div>
     <div class="body">{{ctrl.comment.body}}</div>
     <div class="actions" ng-if="ctrl.displayActions">
-      <a href="#" (click)="ctrl.reply()" class="small text-muted" ng-if="ctrl.article.accept_comments">
+      <a href="#" (click)="ctrl.reply()" class="small text-muted reply" ng-if="ctrl.article.accept_comments">
         {{"comment.reply" | translate}}
       </a>
     </div>
@@ -0,0 +1,75 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, provide} from 'ng-forward';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {DisplayContentBlockComponent} from './display-content-block.component';
+import * as helpers from './../../../../spec/helpers';
+
+const htmlTemplate: string = '<noosfero-display-content-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-display-content-block>';
+
+describe("Components", () => {
+
+    describe("Display Content Block Component", () => {
+        let state = jasmine.createSpyObj("state", ["go"]);
+        let providers = [
+            provide('ArticleService', {
+                useValue: helpers.mocks.articleService
+            }),
+            provide('$state', { useValue: state })
+        ].concat(helpers.provideFilters("translateFilter"));
+
+        let sections: noosfero.Section[] = [
+            { value: 'abstract', checked: 'abstract'},
+            { value: 'title', checked: 'title' }
+        ];
+        let settings: noosfero.Settings = {
+            limit: 6,
+            sections: sections
+        };
+
+        let helper: ComponentTestHelper<DisplayContentBlockComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DisplayContentBlockComponent],
+                providers: providers,
+                properties: {
+                    block: {
+                        settings: settings
+                     }
+                }
+            });
+            helper = new ComponentTestHelper<DisplayContentBlockComponent>(cls, done);
+        });
+
+        it("verify settings is injected", () => {
+           expect(helper.component.block).not.toBeNull;
+           expect(helper.component.block.settings).not.toBeNull;
+           expect(helper.component.block.settings.limit).toEqual(6);
+           expect(helper.component.block.settings.sections.length).toEqual(3);
+        });
+
+        it("verify abstract is displayed", () => {
+            expect(helper.all("div[ng-bind-html|='article.abstract']")[0]).not.toBeNull;
+        });
+
+        it("verify title is displayed", () => {
+            expect(helper.all("div > h5")[0]).not.toBeNull;
+        });
+
+        it("verify body is not displayed", () => {
+            expect(helper.all("div[ng-bind-html|='article.body']")[0]).toBeNull;
+        });
+    });
+});
@@ -0,0 +1,54 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-display-content-block",
+    templateUrl: 'app/layout/blocks/display-content/display-content-block.html',
+})
+@Inject(ArticleService, "$state")
+export class DisplayContentBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    profile: noosfero.Profile;
+    articles: noosfero.Article[];
+    sections: noosfero.Section[];
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, private $state: ng.ui.IStateService) {}
+
+    ngOnInit() {
+        this.profile = this.owner;
+        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
+        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+            this.articles = <noosfero.Article[]>result.data;
+            this.sections = this.block.settings.sections;
+            // Add sections not defined by Noosfero API
+            this.addDefaultSections();
+            this.documentsLoaded = true;
+        });
+    }
+
+    /**
+     * This configuration doesn't exists on Noosfero. Statically typing here.
+     */
+    private addDefaultSections() {
+        let author: noosfero.Section = <noosfero.Section>{ value: 'author', checked: 'author' };
+        this.sections.push(author);
+    }
+
+    /**
+     * Returns whether a settings section should be displayed.
+     *
+     */
+    private display(section_name: string): boolean {
+        let section: noosfero.Section = this.sections.find( function(section: noosfero.Section) {
+            return section.value === section_name;
+        });
+        return section !== undefined && section.checked !== undefined;
+    }
+
+}
@@ -0,0 +1,46 @@
+<div class="{{ctrl.type}}-block">
+  <div ng-repeat="article in ctrl.articles" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})"" class="article">
+    <!-- Article Title -->
+    <div class="page-header" ng-if="ctrl.display('title')">
+        <h5 class="title media-heading" ng-bind="article.title"></h3>
+    </div>
+
+    <div class="sub-header clearfix">
+        <!-- Article Abstract and Read More Link -->
+        <div class="post-lead" ng-if="ctrl.display('abstract')">
+            <div ng-bind-html="article.abstract"></div>
+            <a href="#" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})">
+                <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.read_more" | translate}}
+            </a>
+        </div>
+        <div class="page-info pull-right small text-muted" ng-if="ctrl.display('publish_date')">
+            <!-- Article Published Date -->
+            <span class="time">
+                <i class="fa fa-clock-o"></i> <span am-time-ago="article.created_at | dateFormat"></span>
+            </span>
+            <!-- Article Author -->
+            <span class="author" ng-if="ctrl.display('author')">
+                <i class="fa fa-user"></i>
+                <a ui-sref="main.profile.home({profile: article.author.identifier})" ng-if="article.author">
+                    <span class="author-name" ng-bind="article.author.name"></span>
+                </a>
+            </span>
+        </div>
+    </div>
+
+    <div class="post-lead">
+        <!-- Article Image -->
+        <img ng-show="ctrl.display('image')" ng-src="{{article.image.url}}" class="img-responsive article-image">
+        <!-- Article Body -->
+        <div ng-bind-html="article.body" ng-show="ctrl.display('body')"></div>
+    </div>
+
+    <!-- Article Tags -->
+    <div ng-if="ctrl.display('tags')" class="post-lead">
+        <div class="label" ng-repeat="tag in article.tag_list">
+            <span class="badge" ng-bind="tag"></span>
+        </div>
+    </div>
+
+  </div>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./display-content-block.component";
@@ -0,0 +1,110 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Injectable, Provider, provide} from "ng-forward";
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {LoginBlockComponent} from './login-block.component';
+import * as helpers from "./../../../../spec/helpers";
+import {SessionService, AuthService, AuthController, AuthEvents} from "./../../../login";
+
+const htmlTemplate: string = '<noosfero-login-block></noosfero-login-block>';
+
+describe("Components", () => {
+
+    describe("Login Block Component", () => {
+        let helper: ComponentTestHelper<LoginBlockComponent>;
+        let person: any = null;
+
+        /**
+         * Mock objects
+         */
+        let authService: any = helpers.mocks.authService;
+        let user = <noosfero.User>{ person: person };
+        let sessionService: any = <any>helpers.mocks.sessionWithCurrentUser(user);
+        let state = jasmine.createSpyObj("$state", ["go"]);
+        let scope = helpers.mocks.scopeWithEvents;
+
+        let providers = [
+            new Provider('SessionService', { useValue: sessionService }),
+            new Provider('$state', { useValue: state }),
+            new Provider('AuthService', { useValue: authService }),
+            new Provider('$scope', { useValue: scope })
+        ];
+
+        beforeEach( angular.mock.module("templates") );
+
+        beforeEach( (done: Function) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [LoginBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<LoginBlockComponent>(cls, done);
+        });
+
+        it("expect person to be null with no logged in user", () => {
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        it("expect person to be defined when user login", () => {
+            // Executes the login method on the component
+            doComponentLogin();
+            expect(helper.component.currentUser.person).toBe(person);
+        });
+
+        it("expect person to be null when user logout", () => {
+            // First do a login
+            doComponentLogin();
+            // The logout the user
+            doComponentLogout();
+            // Check if the current user was cleared
+            expect(helper.component.currentUser).toBeNull;
+        });
+
+        /**
+         * Execute the logout method on the target component
+         */
+        function doComponentLogout() {
+            // Create a mock for the AuthService logout method
+            spyOn(authService, "logout");
+            helper.component.logout();
+            expect(authService.logout).toHaveBeenCalled();
+            // After the component logout method execution, fire the
+            // AuthService event
+            simulateLogoutEvent();
+        }
+
+        /**
+         * Execute the login method on the target component
+         */
+        function doComponentLogin() {
+            // Create a mock for the AuthService login method
+            spyOn(authService, "login");
+            helper.component.login();
+            expect(authService.login).toHaveBeenCalled();
+            // After the component login method execution, fire the
+            // AuthService event
+            simulateLoginEvent();
+        }
+
+        /**
+         * Simulate the AuthService loginSuccess event
+         */
+        function simulateLoginEvent() {
+            let successEvent: string = AuthEvents[AuthEvents.loginSuccess];
+
+            (<any>helper.component.authService)[successEvent].next(user);
+        }
+
+        /**
+         * Simulate the AuthService logoutSuccess event
+         */
+        function simulateLogoutEvent() {
+            let successEvent: string = AuthEvents[AuthEvents.logoutSuccess];
+
+            (<any>helper.component.authService)[successEvent].next(user);
+        }
+    });
+
+});
 \ No newline at end of file
@@ -0,0 +1,73 @@
+import {Input, Inject, Component} from "ng-forward";
+import {SessionService, AuthService, AuthEvents} from "./../../../login";
+
+/**
+ * @ngdoc controller
+ * @name layout.blocks.LoginBlockComponent
+ * @description
+ *  The Noosfero block responible for presenting a login form and user status 
+ */
+@Component({
+    selector: "noosfero-login-block",
+    templateUrl: 'app/layout/blocks/login-block/login-block.html',
+})
+@Inject("SessionService", "$state", 'AuthService', "$scope")
+export class LoginBlockComponent {
+
+    /**
+     * @ngdoc property
+     * @name currentUser
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The current loged in user
+     */
+    currentUser: noosfero.User;
+
+    /**
+     * @ngdoc property
+     * @name credentials
+     * @propertyOf layout.blocks.LoginBlockComponent
+     * @description
+     *  The credentials of the currentUser
+     */
+    credentials: noosfero.Credentials;
+
+    constructor(
+        private session: SessionService,
+        private $state: ng.ui.IStateService,
+        public authService: AuthService,
+        private $scope: ng.IScope) {
+        this.currentUser = this.session.currentUser();
+
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
+            this.currentUser = this.session.currentUser();
+        });
+
+    }
+
+    /**
+     * @ngdoc method
+     * @name login
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logs in the user using its credentials
+     */
+    login() {
+        this.authService.login(this.credentials);
+    }
+
+    /**
+     * @ngdoc method
+     * @name logout
+     * @methodOf layout.blocks.LoginBlockComponent
+     * @description
+     *  Logout the user
+     */
+    logout() {
+        this.authService.logout();
+    };
+}
@@ -0,0 +1,27 @@
+<div class="logged-user-info" ng-show="ctrl.currentUser">
+    <h4>Logged in as {{ctrl.currentUser.person.identifier}}</h4>
+    <ul>
+        <li>User since 
+            <span class="time">
+                <span am-time-ago="ctrl.currentUser.person.created_at | dateFormat"></span>
+            </span>        
+        </li>
+      <li><a ui-sref="main.profile.info({profile: ctrl.currentUser.person.identifier})">Profile Homepage</a></li>
+    </ul>
+    <div class="user-actions">
+      <a href="#" ng-click="ctrl.logout()"><i class="fa fa-fw fa-power-off"></i> {{"navbar.logout" | translate}}</a>
+    </div>    
+</div>
+<div class="logged-user-info" ng-show="!ctrl.currentUser">
+  <form>
+    <div class="form-group">
+      <label for="exampleInputEmail1">{{"auth.form.login" | translate}}</label>
+      <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Login / Email" ng-model="ctrl.credentials.username">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">{{"auth.form.password" | translate}}</label>
+      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="ctrl.credentials.password">
+    </div>
+    <button type="submit" class="btn btn-default" ng-click="ctrl.login()">{{"auth.form.login_button" | translate}}</button>
+  </form>
+</div>
 \ No newline at end of file
@@ -11,9 +11,9 @@ describe(&quot;Components&quot;, () =&gt; {
     describe("Recent Documents Block Component", () => {
         let settingsObj = {};
-        let mockedArticleService = {
-            getByProfile: (profile: noosfero.Profile, filters: any): any => {
-                return Promise.resolve({ data: [{ name: "article1" }], headers: (name: string) => { return name; } });
+        let mockedBlockService = {
+            getApiContent: (block: noosfero.Block): any => {
+                return Promise.resolve({ articles: [{ name: "article1" }], headers: (name: string) => { return name; } });
             }
         };
         let profile = { name: 'profile-name' };
@@ -25,8 +25,8 @@ describe(&quot;Components&quot;, () =&gt; {
         function getProviders() {
             return [
                 new Provider('$state', { useValue: state }),
-                new Provider('ArticleService', {
-                    useValue: mockedArticleService
+                new Provider('BlockService', {
+                    useValue: mockedBlockService
                 }),
             ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
         }
@@ -44,7 +44,7 @@ describe(&quot;Components&quot;, () =&gt; {
         }
-        it("get recent documents from the article service", done => {
+        it("get recent documents from the block service", done => {
             tcb.createAsync(getComponent()).then(fixture => {
                 let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
@@ -61,20 +61,5 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
-        it("it uses default limit 5 if not defined on block", done => {
-            settingsObj = null;
-            mockedArticleService = jasmine.createSpyObj("mockedArticleService", ["getByProfile"]);
-            (<any>mockedArticleService).mocked = true;
-            let thenMocked = jasmine.createSpy("then");
-            mockedArticleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue({then: thenMocked});
-            let getByProfileFunct = mockedArticleService.getByProfile;
-            tcb.createAsync(getComponent()).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
-                expect(getByProfileFunct).toHaveBeenCalledWith(profile, { content_type: 'TinyMceArticle', per_page: 5 });
-                done();
-            });
-        });
-
     });
 });
 import {Component, Inject, Input} from "ng-forward";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
 @Component({
     selector: "noosfero-recent-documents-block",
     templateUrl: 'app/layout/blocks/recent-documents/recent-documents-block.html'
 })
-@Inject(ArticleService, "$state")
+@Inject(BlockService, "$state")
 export class RecentDocumentsBlockComponent {
     @Input() block: any;
@@ -13,23 +13,15 @@ export class RecentDocumentsBlockComponent {
     profile: any;
     documents: any;
-
     documentsLoaded: boolean = false;
-    constructor(private articleService: ArticleService, private $state: any) {
-    }
+    constructor(private blockService: BlockService, private $state: any) { }
     ngOnInit() {
         this.profile = this.owner;
         this.documents = [];
-
-        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
-        // FIXME get all text articles
-        // FIXME make the getByProfile a generic method where we tell the type passing a class TinyMceArticle
-        //       and the promise should be of type TinyMceArticle[], per example
-        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
-        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
-            this.documents = <noosfero.Article[]>result.data;
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.documents = content.articles;
             this.documentsLoaded = true;
         });
     }
@@ -152,7 +152,7 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
     it("add a css class to content wrapper element", () => {
         let service = getService();
-        let contentWrapperMock = jasmine.createSpyObj("contentWrapperMock", ["addClass", "removeClass"])
+        let contentWrapperMock = jasmine.createSpyObj("contentWrapperMock", ["addClass", "removeClass"]);
         service["getContentWrapper"] = jasmine.createSpy("getContentWrapper").and.returnValue(contentWrapperMock);
         service.addContentClass(true);
@@ -162,7 +162,7 @@ describe(&quot;BodyStateClasses Service&quot;, () =&gt; {
     it("remove a css class from content wrapper element", () => {
         let service = getService();
-        let contentWrapperMock = jasmine.createSpyObj("contentWrapperMock", ["addClass", "removeClass"])
+        let contentWrapperMock = jasmine.createSpyObj("contentWrapperMock", ["addClass", "removeClass"]);
         service["getContentWrapper"] = jasmine.createSpy("getContentWrapper").and.returnValue(contentWrapperMock);
         service.addContentClass(false);
 import {Directive, Inject, Injectable} from "ng-forward";
-import {AuthEvents} from "./../../login/auth-events";
+import {AuthEvents} from "../../login/auth-events";
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
 import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
@@ -11,13 +11,11 @@ export class SessionService {
     create(data: UserResponse): noosfero.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.');
     };
     currentUser(): noosfero.User {
@@ -10,15 +10,17 @@ import {BlockComponent} from &quot;../layout/blocks/block.component&quot;;
 import {EnvironmentComponent} from "../environment/environment.component";
 import {EnvironmentHomeComponent} from "../environment/environment-home.component";
 import {PeopleBlockComponent} from "../layout/blocks/people/people-block.component";
-import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list-block.component";
+import {DisplayContentBlockComponent} from "../layout/blocks/display-content/display-content-block.component";
+import {LinkListBlockComponent} from "../layout/blocks/link-list/link-list-block.component";
 import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents-block.component";
 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
-import {MembersBlockComponent} from "./../layout/blocks/members/members-block.component";
-import {CommunitiesBlockComponent} from "./../layout/blocks/communities/communities-block.component";
+import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
+import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
+import {LoginBlockComponent} from "../layout/blocks/login-block/login-block.component";
 import {NoosferoTemplate} from "../shared/pipes/noosfero-template.filter";
 import {DateFormat} from "../shared/pipes/date-format.filter";
@@ -93,10 +95,11 @@ export class EnvironmentContent {
     template: '<div ng-view></div>',
     directives: [
         ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
-        EnvironmentComponent, PeopleBlockComponent,
+        EnvironmentComponent, PeopleBlockComponent, DisplayContentBlockComponent,
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
-        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent
+        MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
+        LoginBlockComponent
     ].concat(plugins.mainComponents).concat(plugins.hotspots),
     providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
@@ -37,6 +37,7 @@
   "comment.post.success.message": "Comment saved!",
   "comment.reply": "reply",
   "article.actions.edit": "Edit",
+  "article.actions.read_more": "Read More",
   "article.basic_editor.title": "Title",
   "article.basic_editor.body": "Body",
   "article.basic_editor.save": "Save",
@@ -37,6 +37,7 @@
   "comment.post.success.message": "Comentário salvo com sucesso!",
   "comment.reply": "responder",
   "article.actions.edit": "Editar",
+  "article.actions.read_more": "Ler mais",
   "article.basic_editor.title": "Título",
   "article.basic_editor.body": "Corpo",
   "article.basic_editor.save": "Salvar",
@@ -0,0 +1,36 @@
+import {BlockService} from "./block.service";
+
+
+describe("Services", () => {
+
+    describe("Block Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let blockService: BlockService;
+
+        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _BlockService_: BlockService) => {
+            $httpBackend = _$httpBackend_;
+            blockService = _BlockService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("should return api content of a block", (done) => {
+                let blockId = 1;
+                $httpBackend.expectGET(`/api/v1/blocks/${blockId}`).respond(200, { block: { api_content: [{ name: "article1" }] } });
+                blockService.getApiContent(<noosfero.Block>{ id: blockId }).then((content: any) => {
+                    expect(content).toEqual([{ name: "article1" }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+
+
+    });
+});
@@ -0,0 +1,40 @@
+import { Injectable, Inject } from "ng-forward";
+import {RestangularService} from "./restangular_service";
+import {ProfileService} from "./profile.service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log")
+export class BlockService extends RestangularService<noosfero.Block> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "blocks";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'block',
+            plural: 'blocks'
+        };
+    }
+
+    getApiContent(block: noosfero.Block) {
+        let apiContentPromise = this.$q.defer();
+        if (block) {
+            if (block.api_content) {
+                apiContentPromise.resolve(block.api_content);
+            } else {
+                this.get(block.id)
+                    .then((result: noosfero.RestResult<noosfero.Block>) => {
+                        block = result.data;
+                        apiContentPromise.resolve(block.api_content);
+                    });
+            }
+        }
+        return apiContentPromise.promise;
+    }
+
+}
 namespace noosfero {
     export interface Article extends RestModel {
+        abstract: string;
         path: string;
         profile: Profile;
         type: string;
 namespace noosfero {
-    export interface Block {
+    export interface Block extends RestModel {
         id: number;
-        settings: any;
+        settings: Settings;
+        limit: number;
+        api_content: any;
     }
 }
@@ -6,6 +6,5 @@ namespace noosfero {
      *  A representation of a Person in Noosfero.
      */
     export interface Person extends Profile {
-
     }
 }
 \ No newline at end of file
@@ -22,6 +22,14 @@ namespace noosfero {
          * @returns {string} The unque identifier for the Profile
          */
         identifier: string;
+        
+        /**
+         * @ngdoc property
+         * @name created_at
+         * @propertyOf noofero.Profile
+         * @returns {string} The timestamp this object was created
+         */        
+        created_at: string;
         /**
          * @ngdoc property
@@ -0,0 +1,16 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Section
+     * @description
+     *  Represents a block settings section. A Section has a value property, 
+     * which represents the Section name, and an optinally checked property which
+     * has the same value as the value property indicating that this property is
+     * selected in the block configuration.
+     */
+    export interface Section {
+
+        value: string;
+        checked: string;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,9 @@
+namespace noosfero {
+    /**
+     * Represents a noosfero block settings.
+     */
+    export interface Settings {
+        sections: noosfero.Section[];
+        limit: number;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,42 @@
+import {DiscussionEditorComponent} from './discussion-editor.component';
+import {ComponentTestHelper, createClass} from './../../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<comment-paragraph-plugin-discussion-editor [article]="ctrl.article"></comment-paragraph-plugin-discussion-editor>';
+
+describe("Components", () => {
+    describe("Discussion Editor Component", () => {
+
+        let helper: ComponentTestHelper<DiscussionEditorComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: {} };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DiscussionEditorComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<DiscussionEditorComponent>(cls, done);
+        });
+
+        it("set start_date as article start_date when it was defined", () => {
+            let article = {start_date: new Date()};
+            helper.changeProperties({article: article});
+            helper.component.ngOnInit();
+            expect(helper.component.start_date.getTime()).toEqual(article.start_date.getTime());
+        });
+
+        it("set start_date as current date when it was not defined", () => {
+            helper.changeProperties({article: {}});
+            helper.component.ngOnInit();
+            expect(helper.component.start_date.getTime()).toBeDefined();
+        });
+
+        it("set end_date as article end_date when it was defined", () => {
+            let article = {end_date: new Date()};
+            helper.changeProperties({article: article});
+            helper.component.ngOnInit();
+            expect(helper.component.end_date.getTime()).toEqual(article.end_date.getTime());
+        });
+    });
+});
@@ -0,0 +1,54 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {DiscussionBlockComponent} from './discussion-block.component';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<noosfero-comment-paragraph-plugin-discussion-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-comment-paragraph-plugin-discussion-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Discussion Block Component", () => {
+
+        let helper: ComponentTestHelper<DiscussionBlockComponent>;
+        let settingsObj = {};
+        let mockedBlockService = {
+            getApiContent: (block: noosfero.Block): any => {
+                return Promise.resolve({ articles: [{ name: "article1" }], headers: (name: string) => { return name; } });
+            }
+        };
+        let profile = { name: 'profile-name' };
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+        let providers = [
+            new Provider('$state', { useValue: state }),
+            new Provider('BlockService', {
+                useValue: mockedBlockService
+            }),
+        ].concat(provideFilters("truncateFilter", "stripTagsFilter", "translateFilter", "amDateFormatFilter"));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DiscussionBlockComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<DiscussionBlockComponent>(cls, done);
+        });
+
+        it("get discussions from the block service", () => {
+            expect(helper.component.documents).toEqual([{ name: "article1" }]);
+        });
+
+        it("go to article page when open a document", () => {
+            let block = helper.component;
+            block.openDocument({ path: "path", profile: { identifier: "identifier" } });
+            expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
+        });
+    });
+});
 import {Component, Inject, Input} from "ng-forward";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
 @Component({
     selector: "noosfero-comment-paragraph-plugin-discussion-block",
     templateUrl: 'plugins/comment_paragraph/block/discussion/discussion-block.html'
 })
-@Inject(ArticleService, "$state")
+@Inject(BlockService, "$state")
 export class DiscussionBlockComponent {
     @Input() block: any;
     @Input() owner: any;
-    profile: any;
-    documents: any;
+    profile: noosfero.Profile;
+    documents: Array<noosfero.Article>;
-    documentsLoaded: boolean = false;
-
-    constructor(private articleService: ArticleService, private $state: any) { }
+    constructor(private blockService: BlockService, private $state: any) { }
     ngOnInit() {
         this.profile = this.owner;
-        this.documents = [];
-
-        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 50;
-        let params: any = { content_type: 'CommentParagraphPlugin::Discussion', per_page: limit, order: 'start_date DESC' };
-        let now = new Date().toISOString();
-        switch (this.block.settings['discussion_status']) {
-            case 0:
-                params['from_start_date'] = now;
-                break;
-            case 1:
-                params['until_start_date'] = now;
-                params['from_end_date'] = now;
-                break;
-            case 2:
-                params['until_end_date'] = now;
-                break;
-        }
-        console.log(this.block.settings['discussion_status']);
-        this.articleService.getByProfile(this.profile, params)
-            .then((result: noosfero.RestResult<noosfero.Article[]>) => {
-                this.documents = <noosfero.Article[]>result.data;
-                this.documentsLoaded = true;
-            });
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.documents = content.articles;
+        });
     }
     openDocument(article: any) {
@@ -0,0 +1,36 @@
+import {CommentParagraphArticleContentHotspotComponent} from './article-content.component';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<comment-paragraph-article-content-hotspot [article]="ctrl.article"></comment-paragraph-article-content-hotspot>';
+
+describe("Components", () => {
+    describe("Article Content Hotspot Component", () => {
+
+        let helper: ComponentTestHelper<CommentParagraphArticleContentHotspotComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: {} };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommentParagraphArticleContentHotspotComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<CommentParagraphArticleContentHotspotComponent>(cls, done);
+        });
+
+        it("return false in isDiscussion when no type was specified", () => {
+            expect(helper.component.isDiscussion()).toBeFalsy();
+        });
+
+        it("return false in isDiscussion when other type was specified", () => {
+          helper.changeProperties({article: {type: "TextArticle"}});
+            expect(helper.component.isDiscussion()).toBeFalsy();
+        });
+
+        it("return true in isDiscussion when discussion type was specified", () => {
+            helper.changeProperties({article: {type: "CommentParagraphPlugin::Discussion"}});
+            expect(helper.component.isDiscussion()).toBeTruthy();
+        });
+    });
+});
@@ -2,6 +2,7 @@ import { Component } from &quot;ng-forward&quot;;
 import { TestComponentBuilder, ngClass } from 'ng-forward/cjs/testing/test-component-builder';
 import { INgForwardJQuery } from "ng-forward/cjs/util/jqlite-extensions";
 import { ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder';
+import * as helpers from './helpers';
 /**
  * @ngdoc object
@@ -87,16 +88,23 @@ export class ComponentTestHelper&lt;T extends any&gt; {
             this.debugElement = fixture.debugElement;
             this.component = <T>this.debugElement.componentViewChildren[0].componentInstance;
             let mockObj = new this.mockComponent();
-            Object.keys(mockObj).forEach((key: any) => {
-                (<any>this.component)[key] = <any>mockObj[key];
-            });
-
+            if (this.component) {
+                Object.keys(mockObj).forEach((key: any) => {
+                    (<any>this.component)[key] = <any>mockObj[key];
+                });
+            }
         }).then(() => {
             // Force the resolution of components and sync
             done();
         });
     }
+    changeProperties(properties: any) {
+        Object.keys(properties).forEach((key: any) => {
+            this.component[key] = properties[key];
+        });
+    }
+
     /**
      * @ngdoc method
      * @name detectChanges
@@ -149,6 +157,7 @@ export function createClass({
     providers = <any[]>[],
     properties = <any>{}
 }): any {
+    providers = providers.concat(helpers.provideFilters("translateFilter"));
     @Component({ selector: 'component-test-helper-container', template, directives, providers })
     class Test {
         constructor() {
@@ -68,6 +68,7 @@ export var mocks: any = {
                 mocks.authService['logoutSuccess'].event(param);
             }
         },
+        login: () => { },
         logout: () => { },
         subscribe: (eventName: string, fn: Function) => {
             mocks.authService[eventName].subscribe(fn);
@@ -5,3 +5,63 @@ body &gt; .ng-scope {
 html, body {
   height:100%;
 }
+
+.box-default{
+  border: none;
+  border-radius: 3px 3px 0 0;
+  font-family: "Ubuntu Mediun";
+  font-size: 15px;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 30px;
+  padding: 15px 15px 15px 55px;
+  text-transform: capitalize;
+  background-size: 30px 30px;
+}
+
+.skin-whbl .membersblock > .panel-heading{
+  @extend .box-default;
+  background: #DAE1C4 url("../assets/images/participa-consulta/pessoas.png") no-repeat 15px center;
+  color: #4F9CAC;
+}
+
+.skin-whbl .statisticsblock > .panel-heading{
+  @extend .box-default;
+  background: #69677C url("../assets/images/participa-consulta/indicadores.png") no-repeat 15px center;
+  color: #DAE1C4;
+}
+
+.link-list-block{
+  width: 900px; //Apagar depois!!!!
+  font-family: "Ubuntu";
+  font-size: 12px;
+  background: #69677C;
+  border-radius: 0 0 3px 3px;
+  margin-bottom: 30px;
+  padding: 20px;
+  margin: 0 0 30px 0;
+  position: relative;
+}
+
+.link-list-block div, .link-list-block  a{
+  display: inline-block;
+  background: #69677C;
+  border-radius: 0;
+  color: #FFF;
+  font-family: "Ubuntu Mediun";
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+.link-list-block div:first-child{
+  padding: 15px 15px 15px 55px;
+  background: #69677C url("../assets/images/participa-consulta/home.png") no-repeat 15px center;
+  color: #FFF;
+  background-size: 30px 30px;
+}
+
+.profile-header{
+  text-align: center;
+}
	@@ -36,7 +36,7 @@ exports.configTheme(argv.theme);		@@ -36,7 +36,7 @@ exports.configTheme(argv.theme);
36	* to inject css preprocessor deps and js files in karma	36	* to inject css preprocessor deps and js files in karma
37	*/	37	*/
38	exports.wiredep = {	38	exports.wiredep = {
39	- exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/, /ckeditor/],	39	+ exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/],
40	directory: 'bower_components'	40	directory: 'bower_components'
41	};	41	};
42		42
@@ -0,0 +1,28 @@		@@ -0,0 +1,28 @@
	1	+import {ArticleEditorComponent} from './article-editor.component';
	2	+import {BasicEditorComponent} from "../basic-editor/basic-editor.component";
	3	+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
	4	+import * as helpers from "../../../../spec/helpers";
	5	+
	6	+const htmlTemplate: string = '<article-editor [article]="ctrl.article"></article-editor>';
	7	+
	8	+describe("Components", () => {
	9	+ describe("Article Editor Component", () => {
	10	+
	11	+ let helper: ComponentTestHelper<ArticleEditorComponent>;
	12	+ beforeEach(angular.mock.module("templates"));
	13	+
	14	+ beforeEach((done) => {
	15	+ let properties = { article: { type: "TextArticle" } };
	16	+ let cls = createClass({
	17	+ template: htmlTemplate,
	18	+ directives: [ArticleEditorComponent, BasicEditorComponent],
	19	+ properties: properties
	20	+ });
	21	+ helper = new ComponentTestHelper<ArticleEditorComponent>(cls, done);
	22	+ });
	23	+
	24	+ it("replace element with article basic editor when type is TextArticle", () => {
	25	+ expect(helper.find("article-basic-editor").length).toEqual(1);
	26	+ });
	27	+ });
	28	+});
	@@ -16,10 +16,10 @@ export class ArticleEditorComponent {		@@ -16,10 +16,10 @@ export class ArticleEditorComponent {
16	private $compile: ng.ICompileService) { }	16	private $compile: ng.ICompileService) { }
17		17
18	ngOnInit() {	18	ngOnInit() {
19	- let articleType = this.article.type.replace(/::/, '');	19	+ let articleType = this.article && this.article.type ? this.article.type.replace(/::/, '') : "TextArticle";
20	let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;	20	let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
21	let directiveName = "article-basic-editor";	21	let directiveName = "article-basic-editor";
22	- if (this.$injector.has(specificDirective + 'Directive')) {	22	+ if (specificDirective !== "articleEditor" && this.$injector.has(specificDirective + 'Directive')) {
23	directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();	23	directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
24	}	24	}
25	this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));	25	this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
	@@ -55,6 +55,7 @@ describe("Article Cms", () => {		@@ -55,6 +55,7 @@ describe("Article Cms", () => {
55	});	55	});
56		56
57	it("got to the new article page and display an alert when saving sucessfully", done => {	57	it("got to the new article page and display an alert when saving sucessfully", done => {
		58	+ $stateParams['parent_id'] = 1;
58	let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);	59	let component: CmsComponent = new CmsComponent(articleServiceMock, profileServiceMock, $state, notification, $stateParams, $window);
59	component.save();	60	component.save();
60	$rootScope.$apply();	61	$rootScope.$apply();
	@@ -7,16 +7,23 @@ const htmlTemplate: string = '<noosfero-comment [article]="ctrl.article" [commen		@@ -7,16 +7,23 @@ const htmlTemplate: string = '<noosfero-comment [article]="ctrl.article" [commen
7	describe("Components", () => {	7	describe("Components", () => {
8	describe("Comment Component", () => {	8	describe("Comment Component", () => {
9		9
10	- beforeEach(angular.mock.module("templates"));	10	+ let properties: any;
11		11
		12	+ beforeEach(angular.mock.module("templates"));
		13	+ beforeEach(() => {
		14	+ properties = {
		15	+ article: { id: 1, accept_comments: true },
		16	+ comment: { title: "title", body: "body" }
		17	+ };
		18	+ });
12		19
13	function createComponent() {	20	function createComponent() {
14	let providers = helpers.provideFilters("translateFilter");	21	let providers = helpers.provideFilters("translateFilter");
15		22
16	@Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })	23	@Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
17	class ContainerComponent {	24	class ContainerComponent {
18	- article = { id: 1 };
19	- comment = { title: "title", body: "body" };	25	+ article = properties['article'];
		26	+ comment = properties['comment'];
20	}	27	}
21	return helpers.createComponentFromClass(ContainerComponent);	28	return helpers.createComponentFromClass(ContainerComponent);
22	}	29	}
	@@ -52,5 +59,20 @@ describe("Components", () => {		@@ -52,5 +59,20 @@ describe("Components", () => {
52	done();	59	done();
53	});	60	});
54	});	61	});
		62	+
		63	+ it("display reply button", done => {
		64	+ createComponent().then(fixture => {
		65	+ expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(1);
		66	+ done();
		67	+ });
		68	+ });
		69	+
		70	+ it("not display reply button when accept_comments is false", done => {
		71	+ properties['article']['accept_comments'] = false;
		72	+ createComponent().then(fixture => {
		73	+ expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(0);
		74	+ done();
		75	+ });
		76	+ });
55	});	77	});
56	});	78	});
	@@ -18,7 +18,7 @@		@@ -18,7 +18,7 @@
18	<div class="title">{{ctrl.comment.title}}</div>	18	<div class="title">{{ctrl.comment.title}}</div>
19	<div class="body">{{ctrl.comment.body}}</div>	19	<div class="body">{{ctrl.comment.body}}</div>
20	<div class="actions" ng-if="ctrl.displayActions">	20	<div class="actions" ng-if="ctrl.displayActions">
21	- <a href="#" (click)="ctrl.reply()" class="small text-muted" ng-if="ctrl.article.accept_comments">	21	+ <a href="#" (click)="ctrl.reply()" class="small text-muted reply" ng-if="ctrl.article.accept_comments">
22	{{"comment.reply" \| translate}}	22	{{"comment.reply" \| translate}}
23	</a>	23	</a>
24	</div>	24	</div>
@@ -0,0 +1,75 @@		@@ -0,0 +1,75 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Provider, provide} from 'ng-forward';
	3	+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
	4	+import {providers} from 'ng-forward/cjs/testing/providers';
	5	+import {DisplayContentBlockComponent} from './display-content-block.component';
	6	+import * as helpers from './../../../../spec/helpers';
	7	+
	8	+const htmlTemplate: string = '<noosfero-display-content-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-display-content-block>';
	9	+
	10	+describe("Components", () => {
	11	+
	12	+ describe("Display Content Block Component", () => {
	13	+ let state = jasmine.createSpyObj("state", ["go"]);
	14	+ let providers = [
	15	+ provide('ArticleService', {
	16	+ useValue: helpers.mocks.articleService
	17	+ }),
	18	+ provide('$state', { useValue: state })
	19	+ ].concat(helpers.provideFilters("translateFilter"));
	20	+
	21	+ let sections: noosfero.Section[] = [
	22	+ { value: 'abstract', checked: 'abstract'},
	23	+ { value: 'title', checked: 'title' }
	24	+ ];
	25	+ let settings: noosfero.Settings = {
	26	+ limit: 6,
	27	+ sections: sections
	28	+ };
	29	+
	30	+ let helper: ComponentTestHelper<DisplayContentBlockComponent>;
	31	+
	32	+ beforeEach(angular.mock.module("templates"));
	33	+
	34	+ /**
	35	+ * The beforeEach procedure will initialize the helper and parse
	36	+ * the component according to the given providers. Unfortunetly, in
	37	+ * this mode, the providers and properties given to the construtor
	38	+ * can't be overriden.
	39	+ */
	40	+ beforeEach((done) => {
	41	+ // Create the component bed for the test. Optionally, this could be done
	42	+ // in each test if one needs customization of these parameters per test
	43	+ let cls = createClass({
	44	+ template: htmlTemplate,
	45	+ directives: [DisplayContentBlockComponent],
	46	+ providers: providers,
	47	+ properties: {
	48	+ block: {
	49	+ settings: settings
	50	+ }
	51	+ }
	52	+ });
	53	+ helper = new ComponentTestHelper<DisplayContentBlockComponent>(cls, done);
	54	+ });
	55	+
	56	+ it("verify settings is injected", () => {
	57	+ expect(helper.component.block).not.toBeNull;
	58	+ expect(helper.component.block.settings).not.toBeNull;
	59	+ expect(helper.component.block.settings.limit).toEqual(6);
	60	+ expect(helper.component.block.settings.sections.length).toEqual(3);
	61	+ });
	62	+
	63	+ it("verify abstract is displayed", () => {
	64	+ expect(helper.all("div[ng-bind-html\|='article.abstract']")[0]).not.toBeNull;
	65	+ });
	66	+
	67	+ it("verify title is displayed", () => {
	68	+ expect(helper.all("div > h5")[0]).not.toBeNull;
	69	+ });
	70	+
	71	+ it("verify body is not displayed", () => {
	72	+ expect(helper.all("div[ng-bind-html\|='article.body']")[0]).toBeNull;
	73	+ });
	74	+ });
	75	+});
@@ -0,0 +1,54 @@		@@ -0,0 +1,54 @@
	1	+import {Input, Inject, Component} from "ng-forward";
	2	+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
	3	+
	4	+@Component({
	5	+ selector: "noosfero-display-content-block",
	6	+ templateUrl: 'app/layout/blocks/display-content/display-content-block.html',
	7	+})
	8	+@Inject(ArticleService, "$state")
	9	+export class DisplayContentBlockComponent {
	10	+
	11	+ @Input() block: noosfero.Block;
	12	+ @Input() owner: noosfero.Profile;
	13	+
	14	+ profile: noosfero.Profile;
	15	+ articles: noosfero.Article[];
	16	+ sections: noosfero.Section[];
	17	+
	18	+ documentsLoaded: boolean = false;
	19	+
	20	+ constructor(private articleService: ArticleService, private $state: ng.ui.IStateService) {}
	21	+
	22	+ ngOnInit() {
	23	+ this.profile = this.owner;
	24	+ let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) \|\| 5;
	25	+ this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
	26	+ .then((result: noosfero.RestResult<noosfero.Article[]>) => {
	27	+ this.articles = <noosfero.Article[]>result.data;
	28	+ this.sections = this.block.settings.sections;
	29	+ // Add sections not defined by Noosfero API
	30	+ this.addDefaultSections();
	31	+ this.documentsLoaded = true;
	32	+ });
	33	+ }
	34	+
	35	+ /**
	36	+ * This configuration doesn't exists on Noosfero. Statically typing here.
	37	+ */
	38	+ private addDefaultSections() {
	39	+ let author: noosfero.Section = <noosfero.Section>{ value: 'author', checked: 'author' };
	40	+ this.sections.push(author);
	41	+ }
	42	+
	43	+ /**
	44	+ * Returns whether a settings section should be displayed.
	45	+ *
	46	+ */
	47	+ private display(section_name: string): boolean {
	48	+ let section: noosfero.Section = this.sections.find( function(section: noosfero.Section) {
	49	+ return section.value === section_name;
	50	+ });
	51	+ return section !== undefined && section.checked !== undefined;
	52	+ }
	53	+
	54	+}
@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
	1	+<div class="{{ctrl.type}}-block">
	2	+ <div ng-repeat="article in ctrl.articles" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})"" class="article">
	3	+ <!-- Article Title -->
	4	+ <div class="page-header" ng-if="ctrl.display('title')">
	5	+ <h5 class="title media-heading" ng-bind="article.title"></h3>
	6	+ </div>
	7	+
	8	+ <div class="sub-header clearfix">
	9	+ <!-- Article Abstract and Read More Link -->
	10	+ <div class="post-lead" ng-if="ctrl.display('abstract')">
	11	+ <div ng-bind-html="article.abstract"></div>
	12	+ <a href="#" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})">
	13	+ <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.read_more" \| translate}}
	14	+ </a>
	15	+ </div>
	16	+ <div class="page-info pull-right small text-muted" ng-if="ctrl.display('publish_date')">
	17	+ <!-- Article Published Date -->
	18	+ <span class="time">
	19	+ <i class="fa fa-clock-o"></i> <span am-time-ago="article.created_at \| dateFormat"></span>
	20	+ </span>
	21	+ <!-- Article Author -->
	22	+ <span class="author" ng-if="ctrl.display('author')">
	23	+ <i class="fa fa-user"></i>
	24	+ <a ui-sref="main.profile.home({profile: article.author.identifier})" ng-if="article.author">
	25	+ <span class="author-name" ng-bind="article.author.name"></span>
	26	+ </a>
	27	+ </span>
	28	+ </div>
	29	+ </div>
	30	+
	31	+ <div class="post-lead">
	32	+ <!-- Article Image -->
	33	+ <img ng-show="ctrl.display('image')" ng-src="{{article.image.url}}" class="img-responsive article-image">
	34	+ <!-- Article Body -->
	35	+ <div ng-bind-html="article.body" ng-show="ctrl.display('body')"></div>
	36	+ </div>
	37	+
	38	+ <!-- Article Tags -->
	39	+ <div ng-if="ctrl.display('tags')" class="post-lead">
	40	+ <div class="label" ng-repeat="tag in article.tag_list">
	41	+ <span class="badge" ng-bind="tag"></span>
	42	+ </div>
	43	+ </div>
	44	+
	45	+ </div>
	46	+</div>
@@ -0,0 +1,17 @@		@@ -0,0 +1,17 @@
	1	+.members-block {
	2	+ .member {
	3	+ img, i.profile-image {
	4	+ width: 60px;
	5	+ }
	6	+ img {
	7	+ display: inline-block;
	8	+ vertical-align: top;
	9	+ }
	10	+ i.profile-image {
	11	+ text-align: center;
	12	+ background-color: #889DB1;
	13	+ color: #F1F1F1;
	14	+ font-size: 4.5em;
	15	+ }
	16	+ }
	17	+}