blog component refactory and tests

Michel Felipe
1 parent 86d3873a
Showing 4 changed files with 131 additions and 13 deletions Show diff stats
src/app/components/noosfero-articles/article/article_view.ts
src/app/components/noosfero-articles/blog/blog.component.spec.ts
src/app/components/noosfero-articles/blog/blog.component.ts
src/app/content-viewer/content-viewer.component.ts
 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 {
@@ -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();
+            });
+
+        });
+
+    });
 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;
+            });
     }
 }
@@ -4,12 +4,12 @@ import * as noosfero from &quot;../models/interfaces&quot;;
 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 {
1	import { bundle, Input, Inject, Component, Directive } from 'ng-forward';	1	import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2	-import {NoosferoArticleBlog} from "../blog/blog.component";	2	+import {ArticleBlog} from "../blog/blog.component";
3		3
4	@Component({	4	@Component({
5	selector: 'noosfero-default-article',	5	selector: 'noosfero-default-article',
	@@ -15,7 +15,7 @@ export class ArticleDefaultView {		@@ -15,7 +15,7 @@ export class ArticleDefaultView {
15	@Component({	15	@Component({
16	selector: 'noosfero-article',	16	selector: 'noosfero-article',
17	template: 'not-used',	17	template: 'not-used',
18	- directives: [ArticleDefaultView, NoosferoArticleBlog]	18	+ directives: [ArticleDefaultView, ArticleBlog]
19	})	19	})
20	@Inject("$element", "$scope", "$injector", "$compile")	20	@Inject("$element", "$scope", "$injector", "$compile")
21	export class ArticleView {	21	export class ArticleView {
@@ -0,0 +1,114 @@		@@ -0,0 +1,114 @@
	1	+
	2	+import {Input, provide, Component} from 'ng-forward';
	3	+import {ArticleBlog} from './blog.component';
	4	+
	5	+import {createComponentFromClass, quickCreateComponent, provideEmptyObjects, createProviderToValue} from "../../../../spec/helpers.ts";
	6	+
	7	+
	8	+// this htmlTemplate will be re-used between the container components in this spec file
	9	+const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';
	10	+let articleService = {};
	11	+
	12	+describe("Blog Component", () => {
	13	+
	14	+ // the karma preprocessor html2js transform the templates html into js files which put
	15	+ // the templates to the templateCache into the module templates
	16	+ // we need to load the module templates here as the template for the
	17	+ // component Noosfero ArtileView will be load on our tests
	18	+ beforeEach(angular.mock.module("templates"));
	19	+
	20	+ function promiseResultTemplate(thenFunc: Function) {
	21	+ let thenFuncEmpty = (func: Function) => {
	22	+ // does nothing
	23	+ //func()
	24	+ };
	25	+ if (thenFunc) {
	26	+ return {
	27	+ then: thenFunc
	28	+ }
	29	+ } else {
	30	+ return {
	31	+ then: thenFuncEmpty
	32	+ }
	33	+ }
	34	+ }
	35	+
	36	+ beforeAll(() => {
	37	+ // creating mock for articleService
	38	+ articleService = {
	39	+ getChildren: (article_id: number, filters: {}) => {
	40	+ return promiseResultTemplate();
	41	+ }
	42	+ };
	43	+ });
	44	+
	45	+ it("renders the blog content", (done: Function) => {
	46	+
	47	+ // Creating a container component (ArticleContainerComponent) to include
	48	+ // the component under test (ArticleView)
	49	+ @Component({
	50	+ selector: 'test-container-component',
	51	+ template: htmlTemplate,
	52	+ directives: [ArticleBlog],
	53	+ providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)]
	54	+ })
	55	+ class BlogContainerComponent {
	56	+ article = { type: 'anyArticleType' };
	57	+ profile = { name: 'profile-name' };
	58	+ }
	59	+
	60	+ createComponentFromClass(BlogContainerComponent).then((fixture) => {
	61	+
	62	+ expect(fixture.debugElement.query('div.blog').length).toEqual(1);
	63	+
	64	+ done();
	65	+ });
	66	+
	67	+ it("verify the blog data", (done: Function) => {
	68	+
	69	+ articleService.getChildren = (article_id: number, filters: {}) => {
	70	+ return promiseResultTemplate(() => {
	71	+ return {
	72	+ headers: {
	73	+ total: 1
	74	+ },
	75	+ data: {
	76	+ articles: [
	77	+ ]
	78	+ }
	79	+ }
	80	+ });
	81	+ }
	82	+ @Component({
	83	+ selector: 'test-container-component',
	84	+ template: htmlTemplate,
	85	+ directives: [ArticleBlog],
	86	+ providers: [provideEmptyObjects('Restangular'), createProviderToValue('ArticleService', articleService)]
	87	+ })
	88	+ class BlogContainerComponent {
	89	+ article = { type: 'anyArticleType' };
	90	+ profile = { name: 'profile-name' };
	91	+ }
	92	+
	93	+ createComponentFromClass(BlogContainerComponent).then((fixture) => {
	94	+ // and here we can inspect and run the test assertions
	95	+
	96	+ // gets the children component of ArticleContainerComponent
	97	+ let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	98	+
	99	+ // and checks if the article View rendered was the Default Article View
	100	+ //expect(articleView.constructor.prototype).toEqual(ArticleDefaultView.prototype);
	101	+ expect(articleBlog["posts"]).toEqual([]);
	102	+ expect(articleBlog["totalPosts"]).toEqual(1);
	103	+
	104	+
	105	+ // done needs to be called (it isn't really needed, as we can read in
	106	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	107	+ // because createAsync in ng-forward is not really async, but as the intention
	108	+ // here is write tests in angular 2 ways, this is recommended
	109	+ done();
	110	+ });
	111	+
	112	+ });
	113	+
	114	+ });
	@@ -4,12 +4,12 @@ import * as noosfero from "../models/interfaces";		@@ -4,12 +4,12 @@ import * as noosfero from "../models/interfaces";
4	import {ArticleView} from "../components/noosfero-articles/article/article_view";	4	import {ArticleView} from "../components/noosfero-articles/article/article_view";
5	import {Input, Component, StateConfig, Inject} from "ng-forward";	5	import {Input, Component, StateConfig, Inject} from "ng-forward";
6		6
7	-import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";	7	+import {ArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
8		8
9	@Component({	9	@Component({
10	selector: "content-viewer",	10	selector: "content-viewer",
11	templateUrl: "app/content-viewer/page.html",	11	templateUrl: "app/content-viewer/page.html",
12	- directives: [NoosferoArticleBlog, ArticleView]	12	+ directives: [ArticleBlog, ArticleView]
13	})	13	})
14	@Inject("noosfero", "$log", "$stateParams")	14	@Inject("noosfero", "$log", "$stateParams")
15	export class ContentViewer {	15	export class ContentViewer {