Send event when remove a comment to update comments list

Victor Costa
1 parent 88c2b583
Showing 5 changed files with 46 additions and 4 deletions Show diff stats
src/app/article/comment/comment.component.spec.ts
src/app/article/comment/comment.component.ts
src/app/article/comment/comments.component.spec.ts
src/app/article/comment/comments.component.ts
src/app/article/comment/comments.html
@@ -8,6 +8,8 @@ describe(&quot;Components&quot;, () =&gt; {
     describe("Comment Component", () => {
  
         let properties: any;
+        let notificationService = helpers.mocks.notificationService;
+        let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
  
         beforeEach(angular.mock.module("templates"));
         beforeEach(() => {
@@ -18,9 +20,8 @@ describe(&quot;Components&quot;, () =&gt; {
         });
  
         function createComponent() {
-            let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
             let providers = [
-                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                helpers.createProviderToValue('NotificationService', notificationService),
                 helpers.createProviderToValue("CommentService", commentService)
             ].concat(helpers.provideFilters("translateFilter"));
  
@@ -78,5 +79,16 @@ describe(&quot;Components&quot;, () =&gt; {
                 done();
             });
         });
+
+        it("call comment service to remove comment", done => {
+            notificationService.confirmation = (params: any, func: Function) => { func(); };
+            commentService.removeFromArticle = jasmine.createSpy("removeFromArticle").and.returnValue(Promise.resolve());
+            createComponent().then(fixture => {
+                let component = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.remove();
+                expect(commentService.removeFromArticle).toHaveBeenCalled();
+                done();
+            });
+        });
     });
 });
@@ -5,6 +5,7 @@ import { NotificationService } from &quot;../../shared/services/notification.service&quot;
  
 @Component({
     selector: 'noosfero-comment',
+    outputs: ['commentRemoved'],
     templateUrl: 'app/article/comment/comment.html'
 })
 @Inject(CommentService, NotificationService)
@@ -14,6 +15,7 @@ export class CommentComponent {
     @Input() article: noosfero.Article;
     @Input() displayActions = true;
     @Input() displayReplies = true;
+    @Output() commentRemoved: EventEmitter<Comment> = new EventEmitter<Comment>();
  
     showReply() {
         return this.comment && this.comment.__show_reply === true;
@@ -33,7 +35,7 @@ export class CommentComponent {
     remove() {
         this.notificationService.confirmation({ title: "comment.remove.confirmation.title", message: "comment.remove.confirmation.message" }, () => {
             this.commentService.removeFromArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
-                // FIXME send event
+                this.commentRemoved.next(this.comment);
                 this.notificationService.success({ title: "comment.remove.success.title", message: "comment.remove.success.message" });
             });
         });
@@ -83,5 +83,26 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
  
+        it("remove comment when calling commentRemoved", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let comment = { id: 1 };
+                component.comments = <any>[comment];
+                component.commentRemoved(<any>comment);
+                expect(component.comments).toEqual([]);
+                done();
+            });
+        });
+
+        it("do nothing when call commentRemoved with a comment that doesn't belongs to the comments list", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let comment = { id: 1 };
+                component.comments = <any>[comment];
+                component.commentRemoved(<any>{ id: 2 });
+                expect(component.comments).toEqual([comment]);
+                done();
+            });
+        });
     });
 });
@@ -37,6 +37,13 @@ export class CommentsComponent {
         this.resetShowReply();
     }
  
+    commentRemoved(comment: noosfero.Comment): void {
+        let index = this.comments.indexOf(comment, 0);
+        if (index >= 0) {
+            this.comments.splice(index, 1);
+        }
+    }
+
     private resetShowReply() {
         this.comments.forEach((comment: noosfero.CommentViewModel) => {
             comment.__show_reply = false;
@@ -2,7 +2,7 @@
   <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
  
   <div class="comments-list">
-    <noosfero-comment ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
+    <noosfero-comment (comment-removed)="ctrl.commentRemoved($event.detail)" ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
   </div>
   <button type="button" ng-if="ctrl.displayMore()" class="more-comments btn btn-default btn-block" ng-click="ctrl.loadNextPage()">{{"comment.pagination.more" | translate}}</button>
 </div>
...	...	@@ -8,6 +8,8 @@ describe("Components", () => {
8	8	describe("Comment Component", () => {
9	9
10	10	let properties: any;
	11	+ let notificationService = helpers.mocks.notificationService;
	12	+ let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
11	13
12	14	beforeEach(angular.mock.module("templates"));
13	15	beforeEach(() => {
...	...	@@ -18,9 +20,8 @@ describe("Components", () => {
18	20	});
19	21
20	22	function createComponent() {
21		- let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
22	23	let providers = [
23		- helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
	24	+ helpers.createProviderToValue('NotificationService', notificationService),
24	25	helpers.createProviderToValue("CommentService", commentService)
25	26	].concat(helpers.provideFilters("translateFilter"));
26	27
...	...	@@ -78,5 +79,16 @@ describe("Components", () => {
78	79	done();
79	80	});
80	81	});
	82	+
	83	+ it("call comment service to remove comment", done => {
	84	+ notificationService.confirmation = (params: any, func: Function) => { func(); };
	85	+ commentService.removeFromArticle = jasmine.createSpy("removeFromArticle").and.returnValue(Promise.resolve());
	86	+ createComponent().then(fixture => {
	87	+ let component = fixture.debugElement.componentViewChildren[0].componentInstance;
	88	+ component.remove();
	89	+ expect(commentService.removeFromArticle).toHaveBeenCalled();
	90	+ done();
	91	+ });
	92	+ });
81	93	});
82	94	});
...	...
...	...	@@ -5,6 +5,7 @@ import { NotificationService } from "../../shared/services/notification.service"
5	5
6	6	@Component({
7	7	selector: 'noosfero-comment',
	8	+ outputs: ['commentRemoved'],
8	9	templateUrl: 'app/article/comment/comment.html'
9	10	})
10	11	@Inject(CommentService, NotificationService)
...	...	@@ -14,6 +15,7 @@ export class CommentComponent {
14	15	@Input() article: noosfero.Article;
15	16	@Input() displayActions = true;
16	17	@Input() displayReplies = true;
	18	+ @Output() commentRemoved: EventEmitter<Comment> = new EventEmitter<Comment>();
17	19
18	20	showReply() {
19	21	return this.comment && this.comment.__show_reply === true;
...	...	@@ -33,7 +35,7 @@ export class CommentComponent {
33	35	remove() {
34	36	this.notificationService.confirmation({ title: "comment.remove.confirmation.title", message: "comment.remove.confirmation.message" }, () => {
35	37	this.commentService.removeFromArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
36		- // FIXME send event
	38	+ this.commentRemoved.next(this.comment);
37	39	this.notificationService.success({ title: "comment.remove.success.title", message: "comment.remove.success.message" });
38	40	});
39	41	});
...	...
...	...	@@ -83,5 +83,26 @@ describe("Components", () => {
83	83	});
84	84	});
85	85
	86	+ it("remove comment when calling commentRemoved", done => {
	87	+ createComponent().then(fixture => {
	88	+ let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	89	+ let comment = { id: 1 };
	90	+ component.comments = <any>[comment];
	91	+ component.commentRemoved(<any>comment);
	92	+ expect(component.comments).toEqual([]);
	93	+ done();
	94	+ });
	95	+ });
	96	+
	97	+ it("do nothing when call commentRemoved with a comment that doesn't belongs to the comments list", done => {
	98	+ createComponent().then(fixture => {
	99	+ let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	100	+ let comment = { id: 1 };
	101	+ component.comments = <any>[comment];
	102	+ component.commentRemoved(<any>{ id: 2 });
	103	+ expect(component.comments).toEqual([comment]);
	104	+ done();
	105	+ });
	106	+ });
86	107	});
87	108	});
...	...
...	...	@@ -37,6 +37,13 @@ export class CommentsComponent {
37	37	this.resetShowReply();
38	38	}
39	39
	40	+ commentRemoved(comment: noosfero.Comment): void {
	41	+ let index = this.comments.indexOf(comment, 0);
	42	+ if (index >= 0) {
	43	+ this.comments.splice(index, 1);
	44	+ }
	45	+ }
	46	+
40	47	private resetShowReply() {
41	48	this.comments.forEach((comment: noosfero.CommentViewModel) => {
42	49	comment.__show_reply = false;
...	...
...	...	@@ -2,7 +2,7 @@
2	2	<noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
3	3
4	4	<div class="comments-list">
5		- <noosfero-comment ng-repeat="comment in ctrl.comments \| orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
	5	+ <noosfero-comment (comment-removed)="ctrl.commentRemoved($event.detail)" ng-repeat="comment in ctrl.comments \| orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
6	6	</div>
7	7	<button type="button" ng-if="ctrl.displayMore()" class="more-comments btn btn-default btn-block" ng-click="ctrl.loadNextPage()">{{"comment.pagination.more" \| translate}}</button>
8	8	</div>
...	...