Download as
Browse Code »

Commit 30c6672cf8d61646bcb801ac02d66ca3b24df6ec

Authored by Michel Felipe
1 parent 86d3873a
Exists in master and in 1 other branch dev-fixes

blog component refactory and tests

Showing 4 changed files with 131 additions and 13 deletions   Show diff stats
src/app/components/noosfero-articles/article/article_view.ts
  Diff comments   View file @30c6672
1 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 4 @Component({
5 5 selector: 'noosfero-default-article',
... ... @@ -15,7 +15,7 @@ export class ArticleDefaultView {
15 15 @Component({
16 16 selector: 'noosfero-article',
17 17 template: 'not-used',
18   - directives: [ArticleDefaultView, NoosferoArticleBlog]
  18 + directives: [ArticleDefaultView, ArticleBlog]
19 19 })
20 20 @Inject("$element", "$scope", "$injector", "$compile")
21 21 export class ArticleView {
... ...
src/app/components/noosfero-articles/blog/blog.component.spec.ts 0 → 100644
  Diff comments   View file @30c6672
... ... @@ -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 + });
... ...
src/app/components/noosfero-articles/blog/blog.component.ts
  Diff comments   View file @30c6672
1 1 import {Component, Input, Inject} from "ng-forward";
2 2  
3 3 import {Article, Profile} from "./../../../models/interfaces";
  4 +import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
4 5  
5 6 @Component({
6 7 selector: "noosfero-blog",
7 8 templateUrl: "app/components/noosfero-articles/blog/blog.html"
8 9 })
9   -@Inject("noosfero", "$scope")
10   -export class NoosferoArticleBlog {
  10 +@Inject(ArticleService)
  11 +export class ArticleBlog {
11 12  
12 13 @Input() article: Article;
13 14 @Input() profile: Profile;
... ... @@ -17,22 +18,25 @@ export class NoosferoArticleBlog {
17 18 private currentPage: number;
18 19 private totalPosts: number = 0;
19 20  
20   - constructor(private noosfero: any, private $scope: ng.IScope) {
21   - }
  21 + constructor(private articleService: ArticleService) { }
22 22  
23 23 ngOnInit() {
24 24 this.loadPage();
25 25 }
26 26  
27 27 loadPage() {
28   - this.noosfero.articles.one(this.article.id).customGET("children", {
  28 + let filters = {
29 29 content_type: "TinyMceArticle",
30 30 per_page: this.perPage,
31 31 page: this.currentPage
32   - }).then((response: restangular.IResponse) => {
33   - this.totalPosts = <number>(<any>response.headers("total"));
34   - this.posts = response.data.articles;
35   - });
  32 + };
  33 +
  34 + this.articleService
  35 + .getChildren(this.article.id, filters)
  36 + .then((response: restangular.IResponse) => {
  37 + this.totalPosts = <number>(<any>response.headers("total"));
  38 + this.posts = response.data.articles;
  39 + });
36 40 }
37 41  
38 42 }
... ...
src/app/content-viewer/content-viewer.component.ts
  Diff comments   View file @30c6672
... ... @@ -4,12 +4,12 @@ import * as noosfero from &quot;../models/interfaces&quot;;
4 4 import {ArticleView} from "../components/noosfero-articles/article/article_view";
5 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 9 @Component({
10 10 selector: "content-viewer",
11 11 templateUrl: "app/content-viewer/page.html",
12   - directives: [NoosferoArticleBlog, ArticleView]
  12 + directives: [ArticleBlog, ArticleView]
13 13 })
14 14 @Inject("noosfero", "$log", "$stateParams")
15 15 export class ContentViewer {
... ...