diff --git a/src/app/components/noosfero-articles/article/article_view.ts b/src/app/components/noosfero-articles/article/article_view.ts
index 78982a6..b19c863 100644
--- a/src/app/components/noosfero-articles/article/article_view.ts
+++ b/src/app/components/noosfero-articles/article/article_view.ts
@@ -1,5 +1,5 @@
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
-import {NoosferoArticleBlog} from "../blog/blog.component";
+import {ArticleBlog} from "../blog/blog.component";
 
 @Component({
     selector: 'noosfero-default-article',
@@ -15,7 +15,7 @@ export class ArticleDefaultView {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultView, NoosferoArticleBlog]
+    directives: [ArticleDefaultView, ArticleBlog]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleView {
diff --git a/src/app/components/noosfero-articles/blog/blog.component.spec.ts b/src/app/components/noosfero-articles/blog/blog.component.spec.ts
new file mode 100644
index 0000000..19e2979
--- /dev/null
+++ b/src/app/components/noosfero-articles/blog/blog.component.spec.ts
@@ -0,0 +1,114 @@
+
+import {Input, provide, Component} from 'ng-forward';
+import {ArticleBlog} from './blog.component';
+
+import {createComponentFromClass, quickCreateComponent, provideEmptyObjects, createProviderToValue} from "../../../../spec/helpers.ts";
+
+
+// this htmlTemplate will be re-used between the container components in this spec file
+const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';
+let articleService = {};
+
+describe("Blog 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"));
+
+    function promiseResultTemplate(thenFunc: Function) {
+        let thenFuncEmpty = (func: Function) => {
+            // does nothing
+            //func()
+        };
+        if (thenFunc) {
+            return {
+                then: thenFunc
+            }
+        } else {
+            return {
+                then: thenFuncEmpty
+            }
+        }
+    }
+
+    beforeAll(() => {
+        // creating mock for articleService
+        articleService = {
+            getChildren: (article_id: number, filters: {}) => {
+                return promiseResultTemplate();
+            }
+        };
+    });
+
+    it("renders the blog content", (done: Function) => {
+
+        // Creating a container component (ArticleContainerComponent) to include
+        // the component under test (ArticleView)
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [ArticleBlog],
+            providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)]
+        })
+        class BlogContainerComponent {
+            article = { type: 'anyArticleType' };
+            profile = { name: 'profile-name' };
+        }
+
+        createComponentFromClass(BlogContainerComponent).then((fixture) => {
+
+            expect(fixture.debugElement.query('div.blog').length).toEqual(1);
+
+            done();
+        });
+
+        it("verify the blog data", (done: Function) => {
+
+            articleService.getChildren = (article_id: number, filters: {}) => {
+                return promiseResultTemplate(() => {
+                  return {
+                    headers: {
+                      total: 1
+                    },
+                    data: {
+                      articles: [
+                      ]
+                    }
+                  }
+                });
+            }
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [ArticleBlog],
+                providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)]
+            })
+            class BlogContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+            }
+
+            createComponentFromClass(BlogContainerComponent).then((fixture) => {
+                // and here we can inspect and run the test assertions
+
+                // gets the children component of ArticleContainerComponent
+                let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+                // and checks if the article View rendered was the Default Article View
+                //expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
+                expect(articleBlog["posts"]).toEqual([]);
+                expect(articleBlog["totalPosts"]).toEqual(1);
+
+
+                // 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();
+            });
+
+        });
+
+    });
diff --git a/src/app/components/noosfero-articles/blog/blog.component.ts b/src/app/components/noosfero-articles/blog/blog.component.ts
index 0383661..bba66ba 100644
--- a/src/app/components/noosfero-articles/blog/blog.component.ts
+++ b/src/app/components/noosfero-articles/blog/blog.component.ts
@@ -1,13 +1,14 @@
 import {Component, Input, Inject} from "ng-forward";
 
 import {Article, Profile} from "./../../../models/interfaces";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
 
 @Component({
     selector: "noosfero-blog",
     templateUrl: "app/components/noosfero-articles/blog/blog.html"
 })
-@Inject("noosfero", "$scope")
-export class NoosferoArticleBlog {
+@Inject(ArticleService)
+export class ArticleBlog {
 
     @Input() article: Article;
     @Input() profile: Profile;
@@ -17,22 +18,25 @@ export class NoosferoArticleBlog {
     private currentPage: number;
     private totalPosts: number = 0;
 
-    constructor(private noosfero: any, private $scope: ng.IScope) {
-    }
+    constructor(private articleService: ArticleService) { }
 
     ngOnInit() {
         this.loadPage();
     }
 
     loadPage() {
-        this.noosfero.articles.one(this.article.id).customGET("children", {
+        let filters = {
             content_type: "TinyMceArticle",
             per_page: this.perPage,
             page: this.currentPage
-        }).then((response: restangular.IResponse) => {
-            this.totalPosts = <number>(<any>response.headers("total"));
-            this.posts = response.data.articles;
-        });
+        };
+
+        this.articleService
+            .getChildren(this.article.id, filters)
+            .then((response: restangular.IResponse) => {
+                this.totalPosts = <number>(<any>response.headers("total"));
+                this.posts = response.data.articles;
+            });
     }
 
 }
diff --git a/src/app/content-viewer/content-viewer.component.ts b/src/app/content-viewer/content-viewer.component.ts
index c324f75..2aee7b2 100644
--- a/src/app/content-viewer/content-viewer.component.ts
+++ b/src/app/content-viewer/content-viewer.component.ts
@@ -4,12 +4,12 @@ import * as noosfero from "../models/interfaces";
 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";
+import {ArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
 
 @Component({
     selector: "content-viewer",
     templateUrl: "app/content-viewer/page.html",
-    directives: [NoosferoArticleBlog, ArticleView]
+    directives: [ArticleBlog, ArticleView]
 })
 @Inject("noosfero", "$log", "$stateParams")
 export class ContentViewer {
--
libgit2 0.21.2