Added removed listener to DiscussionBlockComponent

Carlos Purificação
1 parent 2417cffc
Showing 5 changed files with 79 additions and 87 deletions Show diff stats
src/app/article/types/blog/blog.component.spec.ts
src/lib/ng-noosfero-api/http/article.service.ts
src/lib/util/arrays.ts
src/plugins/comment_paragraph/block/discussion/discussion-block.component.spec.ts
src/plugins/comment_paragraph/block/discussion/discussion-block.component.ts
-import {
-providers
-} from 'ng-forward/cjs/testing/providers';
-
-import {
-Input,
-Component
-} from 'ng-forward';
-import {
-ArticleBlogComponent
-} from './blog.component';
-
-import {
-createComponentFromClass,
-quickCreateComponent,
-provideEmptyObjects,
-createProviderToValue,
-provideFilters
-} from "../../../../spec/helpers.ts";
+import {providers} from 'ng-forward/cjs/testing/providers';
+
+import {Input, provide, Component} from 'ng-forward';
+import {ArticleBlogComponent} from './blog.component';
+
+import {createComponentFromClass, quickCreateComponent, provideEmptyObjects, createProviderToValue, provideFilters} from "../../../../spec/helpers.ts";
+
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
 // 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>';
@@ -42,38 +31,30 @@ describe(&quot;Blog Component&quot;, () =&gt; {
         }
     }
+    let article1 = <noosfero.Article>{
+        id: 1,
+        title: 'The article test'
+    };
+
+    let article2 = <noosfero.Article>{
+        id: 1,
+        title: 'The article test'
+    };
+
+    let articles = [ article1, article2 ];
+
     let articleService = {
         getChildren: (article_id: number, filters: {}) => {
             return promiseResultTemplate(null);
-        }
+        },
+        subscribeToArticleRemoved: (fn: Function) => {}
     };
-    @Component({
-        selector: 'test-container-component',
-        template: htmlTemplate,
-        directives: [ArticleBlogComponent],
-        providers: [
-            provideEmptyObjects('Restangular'),
-            createProviderToValue('ArticleService', articleService),
-            provideFilters('truncateFilter')
-        ]
-    })
-    class BlogContainerComponent {
-        article = {
-            type: 'anyArticleType'
-        };
-        profile = {
-            name: 'profile-name'
-        };
-    }
+    let helper: ComponentTestHelper<ArticleBlogComponent>;
-    beforeEach(() => {
+    beforeEach(angular.mock.module("templates"));
-        // 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
-        angular.mock.module("templates");
+    beforeEach((done) => {
         providers((provide: any) => {
             return <any>[
@@ -82,48 +63,26 @@ describe(&quot;Blog Component&quot;, () =&gt; {
                 })
             ];
         });
-    });
-
-    it("renders the blog content", (done: Function) => {
-
-        createComponentFromClass(BlogContainerComponent).then((fixture) => {
-
-            expect(fixture.debugElement.query('div.blog').length).toEqual(1);
-
-            done();
+        let providersHelper = [
+            provide('ArticleService', { useValue: articleService })
+        ];
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [ArticleBlogComponent],
+            providers: providersHelper,
+            properties: {
+                posts: articles
+            }
         });
+        helper = new ComponentTestHelper<ArticleBlogComponent>(cls, done);
     });
-    it("verify the blog data", (done: Function) => {
-
-        let articles = [{
-            id: 1,
-            title: 'The article test'
-        }];
-
-        let result = { data: articles, headers: (name: string) => { return 1; } };
-
-        // defining a mock result to articleService.getChildren method
-        articleService.getChildren = (article_id: number, filters: {}) => {
-            return promiseResultTemplate(result);
-        };
-
-        createComponentFromClass(BlogContainerComponent).then((fixture) => {
-
-            // gets the children component of BlogContainerComponent
-            let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-            // check if the component property are the provided by the mocked articleService
-            let post = {
-                id: 1,
-                title: 'The article test'
-            };
-            expect((<any>articleBlog)["posts"][0]).toEqual(jasmine.objectContaining(post));
-            expect((<any>articleBlog)["totalPosts"]).toEqual(1);
-
-            done();
-        });
+    it("renders the blog content", () => {
+        expect(helper.debugElement.query('div.blog').length).toEqual(1);
+    });
+    it("verify the blog data", () => {
+        expect(helper.component["posts"][0]).toEqual(jasmine.objectContaining(article1));
     });
 });
 \ No newline at end of file
@@ -37,8 +37,6 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
      * Notify listeners that this article has been removed
      */
     private notifyArticleRemovedListeners(article: noosfero.Article) {
-        // let listener = this.events.get(this.removed);
-        // listener.next(article);
         this.articleRemoved.next(article);
     }
@@ -0,0 +1,10 @@
+export class Arrays {
+    
+    static remove<T extends noosfero.RestModel>(elements: T[], element: T) {
+        elements.forEach((value: T, index: number, array: T[]) => {
+            if (value.id == element.id) {
+                array.splice(index, 1);
+            }
+        });
+    }
+}
 \ No newline at end of file
@@ -3,6 +3,7 @@ import {Provider, Input, provide, Component} from &#39;ng-forward&#39;;
 import {provideFilters} from '../../../../spec/helpers';
 import {DiscussionBlockComponent} from './discussion-block.component';
 import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import * as helpers from "./../../../../spec/helpers";
 const htmlTemplate: string = '<noosfero-comment-paragraph-plugin-discussion-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-comment-paragraph-plugin-discussion-block>';
@@ -13,11 +14,13 @@ describe(&quot;Components&quot;, () =&gt; {
         let helper: ComponentTestHelper<DiscussionBlockComponent>;
         let settingsObj = {};
+        let article = <noosfero.Article>{ name: "article1" };
         let mockedBlockService = {
             getApiContent: (content: any): any => {
-                return Promise.resolve({ articles: [{ name: "article1" }], headers: (name: string) => { return name; } });
+                return Promise.resolve({ articles: [ article ], headers: (name: string) => { return name; } });
             }
         };
+        let articleService: any = helpers.mocks.articleService;
         let profile = { name: 'profile-name' };
         let state = jasmine.createSpyObj("state", ["go"]);
@@ -27,6 +30,7 @@ describe(&quot;Components&quot;, () =&gt; {
             new Provider('BlockService', {
                 useValue: mockedBlockService
             }),
+            new Provider('ArticleService', { useValue: articleService })
         ].concat(provideFilters("truncateFilter", "stripTagsFilter", "translateFilter", "amDateFormatFilter"));
         beforeEach(angular.mock.module("templates"));
@@ -51,5 +55,17 @@ describe(&quot;Components&quot;, () =&gt; {
             block.openDocument({ path: "path", profile: { identifier: "identifier" } });
             expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
         });
+        
+        it("verify removed article has been removed from list", () => {
+            expect(helper.component.documents.length).toEqual(1);
+            simulateRemovedEvent();
+            expect(helper.component.documents.length).toEqual(0);
+        });
+        /**
+         * Simulate the ArticleService ArticleEvent.removed event
+         */
+        function simulateRemovedEvent() {
+            helper.component.articleService["notifyArticleRemovedListeners"](article);
+        }        
     });
 });
 import {Component, Inject, Input} from "ng-forward";
 import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
+import {ArticleService} from "./../../../../lib/ng-noosfero-api/http/article.service"
+import {Arrays} from "./../../../../lib/util/arrays"
 @Component({
     selector: "noosfero-comment-paragraph-plugin-discussion-block",
     templateUrl: 'plugins/comment_paragraph/block/discussion/discussion-block.html'
 })
-@Inject(BlockService, "$state")
+@Inject(BlockService, "$state", ArticleService)
 export class DiscussionBlockComponent {
     @Input() block: any;
@@ -14,7 +16,7 @@ export class DiscussionBlockComponent {
     profile: noosfero.Profile;
     documents: Array<noosfero.Article>;
-    constructor(private blockService: BlockService, private $state: any) { }
+    constructor(private blockService: BlockService, private $state: any, public articleService: ArticleService) { }
     ngOnInit() {
         this.profile = this.owner;
@@ -22,6 +24,13 @@ export class DiscussionBlockComponent {
             this.documents = content.articles;
             this.block.hide = !this.documents || this.documents.length === 0;
         });
+        this.watchArticles();
+    }
+    
+    watchArticles() {
+        this.articleService.subscribeToArticleRemoved((article: noosfero.Article) => {
+            Arrays.remove(this.documents, article);
+        });
     }
     openDocument(article: any) {
1	-import {
2	-providers
3	-} from 'ng-forward/cjs/testing/providers';
4	-
5	-import {
6	-Input,
7	-Component
8	-} from 'ng-forward';
9	-import {
10	-ArticleBlogComponent
11	-} from './blog.component';
12	-
13	-import {
14	-createComponentFromClass,
15	-quickCreateComponent,
16	-provideEmptyObjects,
17	-createProviderToValue,
18	-provideFilters
19	-} from "../../../../spec/helpers.ts";	1	+import {providers} from 'ng-forward/cjs/testing/providers';
		2	+
		3	+import {Input, provide, Component} from 'ng-forward';
		4	+import {ArticleBlogComponent} from './blog.component';
		5	+
		6	+import {createComponentFromClass, quickCreateComponent, provideEmptyObjects, createProviderToValue, provideFilters} from "../../../../spec/helpers.ts";
		7	+
		8	+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
20		9
21	// this htmlTemplate will be re-used between the container components in this spec file	10	// this htmlTemplate will be re-used between the container components in this spec file
22	const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';	11	const htmlTemplate: string = '<noosfero-blog [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-blog>';
	@@ -42,38 +31,30 @@ describe("Blog Component", () => {		@@ -42,38 +31,30 @@ describe("Blog Component", () => {
42	}	31	}
43	}	32	}
44		33
		34	+ let article1 = <noosfero.Article>{
		35	+ id: 1,
		36	+ title: 'The article test'
		37	+ };
		38	+
		39	+ let article2 = <noosfero.Article>{
		40	+ id: 1,
		41	+ title: 'The article test'
		42	+ };
		43	+
		44	+ let articles = [ article1, article2 ];
		45	+
45	let articleService = {	46	let articleService = {
46	getChildren: (article_id: number, filters: {}) => {	47	getChildren: (article_id: number, filters: {}) => {
47	return promiseResultTemplate(null);	48	return promiseResultTemplate(null);
48	- }	49	+ },
		50	+ subscribeToArticleRemoved: (fn: Function) => {}
49	};	51	};
50		52
51	- @Component({
52	- selector: 'test-container-component',
53	- template: htmlTemplate,
54	- directives: [ArticleBlogComponent],
55	- providers: [
56	- provideEmptyObjects('Restangular'),
57	- createProviderToValue('ArticleService', articleService),
58	- provideFilters('truncateFilter')
59	- ]
60	- })
61	- class BlogContainerComponent {
62	- article = {
63	- type: 'anyArticleType'
64	- };
65	- profile = {
66	- name: 'profile-name'
67	- };
68	- }	53	+ let helper: ComponentTestHelper<ArticleBlogComponent>;
69		54
70	- beforeEach(() => {	55	+ beforeEach(angular.mock.module("templates"));
71		56
72	- // the karma preprocessor html2js transform the templates html into js files which put
73	- // the templates to the templateCache into the module templates
74	- // we need to load the module templates here as the template for the
75	- // component Noosfero ArtileView will be load on our tests
76	- angular.mock.module("templates");	57	+ beforeEach((done) => {
77		58
78	providers((provide: any) => {	59	providers((provide: any) => {
79	return <any>[	60	return <any>[
	@@ -82,48 +63,26 @@ describe("Blog Component", () => {		@@ -82,48 +63,26 @@ describe("Blog Component", () => {
82	})	63	})
83	];	64	];
84	});	65	});
85	- });
86	-
87	- it("renders the blog content", (done: Function) => {
88	-
89	- createComponentFromClass(BlogContainerComponent).then((fixture) => {
90	-
91	- expect(fixture.debugElement.query('div.blog').length).toEqual(1);
92	-
93	- done();	66	+ let providersHelper = [
		67	+ provide('ArticleService', { useValue: articleService })
		68	+ ];
		69	+ let cls = createClass({
		70	+ template: htmlTemplate,
		71	+ directives: [ArticleBlogComponent],
		72	+ providers: providersHelper,
		73	+ properties: {
		74	+ posts: articles
		75	+ }
94	});	76	});
		77	+ helper = new ComponentTestHelper<ArticleBlogComponent>(cls, done);
95	});	78	});
96		79
97	- it("verify the blog data", (done: Function) => {
98	-
99	- let articles = [{
100	- id: 1,
101	- title: 'The article test'
102	- }];
103	-
104	- let result = { data: articles, headers: (name: string) => { return 1; } };
105	-
106	- // defining a mock result to articleService.getChildren method
107	- articleService.getChildren = (article_id: number, filters: {}) => {
108	- return promiseResultTemplate(result);
109	- };
110	-
111	- createComponentFromClass(BlogContainerComponent).then((fixture) => {
112	-
113	- // gets the children component of BlogContainerComponent
114	- let articleBlog: BlogContainerComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
115	-
116	- // check if the component property are the provided by the mocked articleService
117	- let post = {
118	- id: 1,
119	- title: 'The article test'
120	- };
121	- expect((<any>articleBlog)["posts"][0]).toEqual(jasmine.objectContaining(post));
122	- expect((<any>articleBlog)["totalPosts"]).toEqual(1);
123	-
124	- done();
125	- });	80	+ it("renders the blog content", () => {
		81	+ expect(helper.debugElement.query('div.blog').length).toEqual(1);
		82	+ });
126		83
		84	+ it("verify the blog data", () => {
		85	+ expect(helper.component["posts"][0]).toEqual(jasmine.objectContaining(article1));
127	});	86	});
128		87
129	});	88	});
130	\ No newline at end of file	89	\ No newline at end of file
	@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
		1	+export class Arrays {
		2	+
		3	+ static remove<T extends noosfero.RestModel>(elements: T[], element: T) {
		4	+ elements.forEach((value: T, index: number, array: T[]) => {
		5	+ if (value.id == element.id) {
		6	+ array.splice(index, 1);
		7	+ }
		8	+ });
		9	+ }
		10	+}
0	\ No newline at end of file	11	\ No newline at end of file