From 30c6672cf8d61646bcb801ac02d66ca3b24df6ec Mon Sep 17 00:00:00 2001 From: Michel Felipe de Oliveira Ferreira Date: Mon, 7 Mar 2016 17:53:40 -0300 Subject: [PATCH] blog component refactory and tests --- src/app/components/noosfero-articles/article/article_view.ts | 4 ++-- src/app/components/noosfero-articles/blog/blog.component.spec.ts | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/components/noosfero-articles/blog/blog.component.ts | 22 +++++++++++++--------- src/app/content-viewer/content-viewer.component.ts | 4 ++-- 4 files changed, 131 insertions(+), 13 deletions(-) create mode 100644 src/app/components/noosfero-articles/blog/blog.component.spec.ts 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 = ''; +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 = (response.headers("total")); - this.posts = response.data.articles; - }); + }; + + this.articleService + .getChildren(this.article.id, filters) + .then((response: restangular.IResponse) => { + this.totalPosts = (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