Refactor post comment event to use EventEmitter

Victor Costa
1 parent 845f879b
Showing 8 changed files with 97 additions and 28 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/post-comment/post-comment-event.service.spec.ts
src/app/article/comment/post-comment/post-comment-event.service.ts
src/app/article/comment/post-comment/post-comment.component.spec.ts
src/app/article/comment/post-comment/post-comment.component.ts
@@ -11,8 +11,12 @@ describe(&quot;Components&quot;, () =&gt; {
         beforeEach(angular.mock.module("templates"));
+        let postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["subscribe"]);
+
         function createComponent() {
-            let providers = helpers.provideFilters("translateFilter");
+            let providers = [
+                new Provider('PostCommentEventService', { useValue: postCommentEventService })
+            ].concat(helpers.provideFilters("translateFilter"));
             @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
             class ContainerComponent {
@@ -46,10 +50,14 @@ describe(&quot;Components&quot;, () =&gt; {
         });
         it("close form when receive a reply", done => {
+            let func: Function;
+            postCommentEventService.subscribe = (fn: Function) => {
+                func = fn;
+            };
             createComponent().then(fixture => {
                 let component = fixture.debugElement.componentViewChildren[0];
                 component.componentInstance.showReply = true;
-                fixture.debugElement.getLocal("$rootScope").$broadcast(PostCommentComponent.EVENT_COMMENT_RECEIVED, {});
+                func(<noosfero.Comment>{});
                 expect(component.componentInstance.showReply).toEqual(false);
                 done();
             });
 import { Inject, Input, Component } from 'ng-forward';
 import { PostCommentComponent } from "./post-comment/post-comment.component";
+import { PostCommentEventService } from "./post-comment/post-comment-event.service";
 @Component({
     selector: 'noosfero-comment',
     templateUrl: 'app/article/comment/comment.html'
 })
-@Inject("$scope")
+@Inject(PostCommentEventService, "$scope")
 export class CommentComponent {
     @Input() comment: noosfero.Comment;
@@ -13,9 +14,10 @@ export class CommentComponent {
     showReply: boolean = false;
-    constructor(private $scope: ng.IScope) {
-        $scope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => {
+    constructor(postCommentEventService: PostCommentEventService, private $scope: ng.IScope) {
+        postCommentEventService.subscribe((comment: noosfero.Comment) => {
             this.showReply = false;
+            this.$scope.$apply();
         });
     }
@@ -17,14 +17,23 @@ describe(&quot;Components&quot;, () =&gt; {
         commentService.getByArticle = jasmine.createSpy("getByArticle")
             .and.returnValue(helpers.mocks.promiseResultTemplate({ data: comments }));
-        let providers = [
-            helpers.createProviderToValue('CommentService', commentService),
-            helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
-            helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
-        ].concat(helpers.provideFilters("translateFilter"));
+        let emitEvent: Function;
+        let postCommentEventService = {
+            subscribe: (fn: Function) => {
+                emitEvent = fn;
+            }
+        };
         let properties = { article: { id: 1 }, parent: <any>null };
         function createComponent() {
+            // postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["subscribe"]);
+            let providers = [
+                helpers.createProviderToValue('CommentService', commentService),
+                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                new Provider('PostCommentEventService', { useValue: postCommentEventService })
+            ].concat(helpers.provideFilters("translateFilter"));
+
             return helpers.quickCreateComponent({
                 providers: providers,
                 directives: [CommentsComponent],
@@ -49,10 +58,9 @@ describe(&quot;Components&quot;, () =&gt; {
         });
         it("update comments list when receive an reply", done => {
-            properties.parent = { id: 2 };
+            properties.parent = { id: 3 };
             createComponent().then(fixture => {
-                fixture.debugElement.getLocal("$rootScope").$emit(PostCommentComponent.EVENT_COMMENT_RECEIVED, { id: 1, reply_of: properties.parent });
-                fixture.debugElement.getLocal("$rootScope").$apply();
+                emitEvent(<noosfero.Comment>{ id: 1, reply_of: { id: 3 } });
                 expect(fixture.debugElement.queryAll("noosfero-comment").length).toEqual(3);
                 done();
             });
@@ -2,13 +2,14 @@ import { Inject, Input, Component, provide } from &#39;ng-forward&#39;;
 import { PostCommentComponent } from "./post-comment/post-comment.component";
 import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
 import { CommentComponent } from "./comment.component";
+import { PostCommentEventService } from "./post-comment/post-comment-event.service";
 @Component({
     selector: 'noosfero-comments',
     templateUrl: 'app/article/comment/comments.html',
     directives: [PostCommentComponent, CommentComponent]
 })
-@Inject(CommentService, "$rootScope")
+@Inject(CommentService, PostCommentEventService, "$scope")
 export class CommentsComponent {
     comments: noosfero.Comment[] = [];
@@ -19,14 +20,7 @@ export class CommentsComponent {
     protected perPage = 5;
     protected total = 0;
-    constructor(protected commentService: CommentService, protected $rootScope: ng.IScope) {
-        $rootScope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => {
-            if ((!this.parent && !comment.reply_of) || (comment.reply_of && this.parent && comment.reply_of.id === this.parent.id)) {
-                if (!this.comments) this.comments = [];
-                this.comments.push(comment);
-            }
-        });
-    }
+    constructor(protected commentService: CommentService, private postCommentEventService: PostCommentEventService, private $scope: ng.IScope) { }
     ngOnInit() {
         if (this.parent) {
@@ -34,6 +28,13 @@ export class CommentsComponent {
         } else {
             this.loadNextPage();
         }
+        this.postCommentEventService.subscribe((comment: noosfero.Comment) => {
+            if ((!this.parent && !comment.reply_of) || (comment.reply_of && this.parent && comment.reply_of.id === this.parent.id)) {
+                if (!this.comments) this.comments = [];
+                this.comments.push(comment);
+                this.$scope.$apply();
+            }
+        });
     }
     loadComments() {
@@ -0,0 +1,26 @@
+import {PostCommentEventService} from "./post-comment-event.service";
+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
+import * as helpers from "../../../../spec/helpers";
+import {Provider} from 'ng-forward';
+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
+
+describe("Services", () => {
+    describe("Comment Paragraph Event Service", () => {
+        let eventService: PostCommentEventService;
+
+        beforeEach(() => {
+            eventService = new PostCommentEventService();
+            eventService['eventEmitter'] = jasmine.createSpyObj("eventEmitter", ["next", "subscribe"]);
+        });
+
+        it('subscribe to post comment event', () => {
+            eventService.subscribe(() => { });
+            expect(eventService['eventEmitter'].subscribe).toHaveBeenCalled();
+        });
+
+        it('emit event when post comment', () => {
+            eventService.emit(<noosfero.Comment>{});
+            expect(eventService['eventEmitter'].next).toHaveBeenCalled();
+        });
+    });
+});
@@ -0,0 +1,19 @@
+import {Injectable, EventEmitter} from "ng-forward";
+
+@Injectable()
+export class PostCommentEventService {
+
+    private eventEmitter: EventEmitter<noosfero.Comment>;
+
+    constructor() {
+        this.eventEmitter = new EventEmitter();
+    }
+
+    emit(comment: noosfero.Comment) {
+        this.eventEmitter.next(comment);
+    }
+
+    subscribe(fn: (comment: noosfero.Comment) => void) {
+        this.eventEmitter.subscribe(fn);
+    }
+}
@@ -11,11 +11,13 @@ describe(&quot;Components&quot;, () =&gt; {
         beforeEach(angular.mock.module("templates"));
         let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]);
+        let postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["emit"]);
         let user = {};
         let providers = [
             new Provider('CommentService', { useValue: commentService }),
             new Provider('NotificationService', { useValue: helpers.mocks.notificationService }),
-            new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) })
+            new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) }),
+            new Provider('PostCommentEventService', { useValue: postCommentEventService })
         ].concat(helpers.provideFilters("translateFilter"));
         @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers })
@@ -35,9 +37,8 @@ describe(&quot;Components&quot;, () =&gt; {
             helpers.createComponentFromClass(ContainerComponent).then(fixture => {
                 let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 commentService.createInArticle = jasmine.createSpy("createInArticle").and.returnValue(helpers.mocks.promiseResultTemplate({ data: {} }));
-                component["$scope"].$emit = jasmine.createSpy("$emit");
                 component.save();
-                expect(component["$scope"].$emit).toHaveBeenCalledWith(PostCommentComponent.EVENT_COMMENT_RECEIVED, jasmine.any(Object));
+                expect(postCommentEventService.emit).toHaveBeenCalled();
                 done();
             });
         });
@@ -2,12 +2,13 @@ import { Inject, Input, Component } from &#39;ng-forward&#39;;
 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
 import { NotificationService } from "../../../shared/services/notification.service";
 import { SessionService } from "../../../login";
+import { PostCommentEventService } from "./post-comment-event.service";
 @Component({
     selector: 'noosfero-post-comment',
     templateUrl: 'app/article/comment/post-comment/post-comment.html'
 })
-@Inject(CommentService, NotificationService, "$scope", SessionService)
+@Inject(CommentService, NotificationService, SessionService, PostCommentEventService)
 export class PostCommentComponent {
     public static EVENT_COMMENT_RECEIVED = "comment.received";
@@ -18,7 +19,10 @@ export class PostCommentComponent {
     comment = <noosfero.Comment>{};
     private currentUser: noosfero.User;
-    constructor(private commentService: CommentService, private notificationService: NotificationService, private $scope: ng.IScope, private session: SessionService) {
+    constructor(private commentService: CommentService,
+        private notificationService: NotificationService,
+        private session: SessionService,
+        private postCommentEventService: PostCommentEventService) {
         this.currentUser = this.session.currentUser();
     }
@@ -27,7 +31,7 @@ export class PostCommentComponent {
             this.comment.reply_of_id = this.parent.id;
         }
         this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
-            this.$scope.$emit(PostCommentComponent.EVENT_COMMENT_RECEIVED, result.data);
+            this.postCommentEventService.emit(result.data);
             this.comment.body = "";
             this.notificationService.success({ title: "comment.post.success.title", message: "comment.post.success.message" });
         });
@@ -0,0 +1,26 @@		@@ -0,0 +1,26 @@
	1	+import {PostCommentEventService} from "./post-comment-event.service";
	2	+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
	3	+import * as helpers from "../../../../spec/helpers";
	4	+import {Provider} from 'ng-forward';
	5	+import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
	6	+
	7	+describe("Services", () => {
	8	+ describe("Comment Paragraph Event Service", () => {
	9	+ let eventService: PostCommentEventService;
	10	+
	11	+ beforeEach(() => {
	12	+ eventService = new PostCommentEventService();
	13	+ eventService['eventEmitter'] = jasmine.createSpyObj("eventEmitter", ["next", "subscribe"]);
	14	+ });
	15	+
	16	+ it('subscribe to post comment event', () => {
	17	+ eventService.subscribe(() => { });
	18	+ expect(eventService['eventEmitter'].subscribe).toHaveBeenCalled();
	19	+ });
	20	+
	21	+ it('emit event when post comment', () => {
	22	+ eventService.emit(<noosfero.Comment>{});
	23	+ expect(eventService['eventEmitter'].next).toHaveBeenCalled();
	24	+ });
	25	+ });
	26	+});
@@ -0,0 +1,19 @@		@@ -0,0 +1,19 @@
	1	+import {Injectable, EventEmitter} from "ng-forward";
	2	+
	3	+@Injectable()
	4	+export class PostCommentEventService {
	5	+
	6	+ private eventEmitter: EventEmitter<noosfero.Comment>;
	7	+
	8	+ constructor() {
	9	+ this.eventEmitter = new EventEmitter();
	10	+ }
	11	+
	12	+ emit(comment: noosfero.Comment) {
	13	+ this.eventEmitter.next(comment);
	14	+ }
	15	+
	16	+ subscribe(fn: (comment: noosfero.Comment) => void) {
	17	+ this.eventEmitter.subscribe(fn);
	18	+ }
	19	+}