Migrate noosfero activities to ngforward

Victor Costa
1 parent dacb4561
Showing 15 changed files with 128 additions and 71 deletions Show diff stats
src/app/components/noosfero-activities/activities.component.js
src/app/components/noosfero-activities/activities.component.spec.ts
src/app/components/noosfero-activities/activities.component.ts
src/app/components/noosfero-activities/activities.html
src/app/components/noosfero-activities/activity/activity.component.js
src/app/components/noosfero-activities/activity/activity.component.spec.ts
src/app/components/noosfero-activities/activity/activity.component.ts
src/app/components/noosfero-activities/activity/activity.html
src/app/components/noosfero-activities/activity/add_member_in_community.html
src/app/components/noosfero-activities/activity/create_article.html
src/app/components/noosfero-activities/activity/new_friendship.html
src/app/index.ts
src/app/models/interfaces.ts
src/app/profile-info/profile-info.html
src/app/profile/profile.component.ts
@@ -1,14 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoActivities', {
-      restrict: 'E',
-      bindings: {
-          activities: '<'
-      },
-      templateUrl: 'app/components/noosfero-activities/activities.html'
-    });
-
-})();
@@ -0,0 +1,36 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../spec/helpers';
+
+import {NoosferoActivities} from './activities.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activities", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [NoosferoActivities],
+            providers: provideFilters("truncateFilter", "stripTagsFilter")
+        })
+        class BlockContainerComponent {
+            activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
+        }
+
+        it("render a noosfero activity tag for each activity", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
+                done();
+            });
+        });
+    });
+
+});
-(function() {
-  'use strict';
+import {Component, Input} from "ng-forward";
+import {NoosferoActivity} from "./activity/activity.component";
+import {Activity} from "../../models/interfaces";
-  angular
-    .module('noosferoApp')
-    .component('noosferoActivities', {
-      bindings: {
-          activities: '<'
-      },
-      templateUrl: 'app/components/noosfero-activities/activities.html'
-    });
+@Component({
+    selector: "noosfero-activities",
+    templateUrl: 'app/components/noosfero-activities/activities.html',
+    directives: [NoosferoActivity]
+})
+export class NoosferoActivities {
-})();
+    @Input() activities: Activity[];
+
+}
 <timeline>
-  <timeline-event ng-repeat="activity in $ctrl.activities | orderBy: 'created_at':true">
-    <noosfero-activity activity="activity"></noosfero-activity>
+  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
+    <noosfero-activity [activity]="activity"></noosfero-activity>
   </timeline-event>
 </timeline>
@@ -1,24 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoActivity', {
-      restrict: 'E',
-      bindings: {
-          activity: '<'
-      },
-      templateUrl: 'app/components/noosfero-activities/activity/activity.html',
-      replace: true,
-      controller: ActivityController
-    });
-
-  /** @ngInject */
-  function ActivityController() {
-    var vm = this;
-    vm.getActivityTemplate = function(activity) {
-      return 'app/components/noosfero-activities/activity/' + activity.verb + '.html';
-    }
-  }
-
-})();
@@ -0,0 +1,38 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {NoosferoActivity} from './activity.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activity", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [NoosferoActivity],
+            providers: provideFilters("truncateFilter", "stripTagsFilter")
+        })
+        class BlockContainerComponent {
+            activity = { name: "activity1", verb: "create_article" };
+        }
+
+        it("render the specific template for an activity verb", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: NoosferoActivity = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(component.getActivityTemplate()).toEqual('app/components/noosfero-activities/activity/create_article.html');
+                expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
+                done();
+            });
+        });
+    });
+
+});
@@ -0,0 +1,16 @@
+import {Component, Input} from "ng-forward";
+import {Activity} from "../../../models/interfaces";
+
+@Component({
+    selector: "noosfero-activity",
+    templateUrl: 'app/components/noosfero-activities/activity/activity.html'
+})
+export class NoosferoActivity {
+
+    @Input() activity: Activity;
+
+    getActivityTemplate() {
+        return 'app/components/noosfero-activities/activity/' + this.activity.verb + '.html';
+    }
+
+}
-<div class="activity">
-  <ng-include src="$ctrl.getActivityTemplate($ctrl.activity)"></ng-include>
+<div class="activity {{ctrl.activity.verb}}">
+  <ng-include src="ctrl.getActivityTemplate()"></ng-include>
 </div>
@@ -4,10 +4,10 @@
 <timeline-panel>
   <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
       <span> has joined the community</span>
     </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
   </timeline-heading>
   <div class="timeline-body"></div>
 </timeline-panel>
@@ -4,22 +4,22 @@
 <timeline-panel>
   <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
       <span> has published on </span>
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.target.article.profile.identifier})">
-        <strong ng-bind="$ctrl.activity.target.article.profile.name"></strong></span>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.target.article.profile.identifier})">
+        <strong ng-bind="ctrl.activity.target.article.profile.name"></strong></span>
       </a>
     </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
   </timeline-heading>
   <div class="timeline-body">
     <div class="article">
       <div class="title">
-        <a ui-sref="main.profile.page({profile: $ctrl.activity.target.article.profile.identifier, page: $ctrl.activity.target.article.path})"
-           ng-bind="$ctrl.activity.target.article.title"></a>
+        <a ui-sref="main.profile.page({profile: ctrl.activity.target.article.profile.identifier, page: ctrl.activity.target.article.path})"
+           ng-bind="ctrl.activity.target.article.title"></a>
       </div>
       <div class="lead small">
-        <div ng-bind-html="$ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
+        <div ng-bind-html="ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
       </div>
     </div>
   </div>
@@ -4,15 +4,15 @@
 <timeline-panel>
   <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>
-      <span> has made <span ng-bind="$ctrl.activity.params.friend_name.length"></span> new friend(s): </span>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> has made <span ng-bind="ctrl.activity.params.friend_name.length"></span> new friend(s): </span>
       <span class="comma-separated">
-        <a class="separated-item" ui-sref="main.profile.info({profile: $ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in $ctrl.activity.params.friend_name">
+        <a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
           <strong ng-bind="friend"></strong>
         </a>
       </span>
     </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
   </timeline-heading>
   <div class="timeline-body"></div>
 </timeline-panel>
@@ -42,8 +42,6 @@ NoosferoApp.run(noosferoAngularRunBlock);
 NoosferoApp.addController("AuthController", AuthController);
-require("./components/noosfero-activities/activities.component.js");
-require("./components/noosfero-activities/activity/activity.component.js");
 require("./components/noosfero/noosfero-template.filter.js");
 require("./components/noosfero/noosfero.service.js");
 require("./components/noosfero/profile-image/profile-image.component.js");
@@ -51,6 +51,10 @@ export interface Box {
     position: number;
 }
+export interface Activity {
+    verb: string;
+}
+
 export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
     currentUser: User;
-}
 \ No newline at end of file
+}
@@ -2,5 +2,5 @@
 <div class="profile-wall">
   <h4>Profile Wall</h4>
-  <noosfero-activities activities="vm.activities"></noosfero-activities>
+  <noosfero-activities [activities]="vm.activities"></noosfero-activities>
 </div>
@@ -3,12 +3,14 @@ import {ProfileInfo} from &#39;../profile-info/profile-info.component&#39;;
 import {ProfileHome} from '../profile/profile-home.component';
 import {Cms} from '../cms/cms.component';
 import {ContentViewer} from "../content-viewer/content-viewer.component";
+import {NoosferoActivities} from "../components/noosfero-activities/activities.component";
 import * as noosferoModels from "./../models/interfaces";
 @Component({
     selector: 'profile',
-    templateUrl: "app/profile/profile.html"
+    templateUrl: "app/profile/profile.html",
+    directives: [NoosferoActivities]
 })
 @StateConfig([
     {
	@@ -1,14 +0,0 @@	@@ -1,14 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .component('noosferoActivities', {
7	- restrict: 'E',
8	- bindings: {
9	- activities: '<'
10	- },
11	- templateUrl: 'app/components/noosfero-activities/activities.html'
12	- });
13	-
14	-})();
@@ -0,0 +1,36 @@		@@ -0,0 +1,36 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Pipe, Input, provide, Component} from 'ng-forward';
	3	+import {provideFilters} from '../../../spec/helpers';
	4	+
	5	+import {NoosferoActivities} from './activities.component';
	6	+
	7	+const tcb = new TestComponentBuilder();
	8	+
	9	+const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
	10	+
	11	+
	12	+describe("Components", () => {
	13	+
	14	+ describe("Noosfero Activities", () => {
	15	+
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ @Component({
	19	+ selector: 'test-container-component',
	20	+ template: htmlTemplate,
	21	+ directives: [NoosferoActivities],
	22	+ providers: provideFilters("truncateFilter", "stripTagsFilter")
	23	+ })
	24	+ class BlockContainerComponent {
	25	+ activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
	26	+ }
	27	+
	28	+ it("render a noosfero activity tag for each activity", done => {
	29	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	30	+ expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
	31	+ done();
	32	+ });
	33	+ });
	34	+ });
	35	+
	36	+});
1	-(function() {
2	- 'use strict';	1	+import {Component, Input} from "ng-forward";
		2	+import {NoosferoActivity} from "./activity/activity.component";
		3	+import {Activity} from "../../models/interfaces";
3		4
4	- angular
5	- .module('noosferoApp')
6	- .component('noosferoActivities', {
7	- bindings: {
8	- activities: '<'
9	- },
10	- templateUrl: 'app/components/noosfero-activities/activities.html'
11	- });	5	+@Component({
		6	+ selector: "noosfero-activities",
		7	+ templateUrl: 'app/components/noosfero-activities/activities.html',
		8	+ directives: [NoosferoActivity]
		9	+})
		10	+export class NoosferoActivities {
12		11
13	-})();	12	+ @Input() activities: Activity[];
		13	+
		14	+}
1	<timeline>	1	<timeline>
2	- <timeline-event ng-repeat="activity in $ctrl.activities \| orderBy: 'created_at':true">
3	- <noosfero-activity activity="activity"></noosfero-activity>	2	+ <timeline-event ng-repeat="activity in ctrl.activities \| orderBy: 'created_at':true">
		3	+ <noosfero-activity [activity]="activity"></noosfero-activity>
4	</timeline-event>	4	</timeline-event>
5	</timeline>	5	</timeline>
	@@ -1,24 +0,0 @@	@@ -1,24 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .component('noosferoActivity', {
7	- restrict: 'E',
8	- bindings: {
9	- activity: '<'
10	- },
11	- templateUrl: 'app/components/noosfero-activities/activity/activity.html',
12	- replace: true,
13	- controller: ActivityController
14	- });
15	-
16	- /** @ngInject */
17	- function ActivityController() {
18	- var vm = this;
19	- vm.getActivityTemplate = function(activity) {
20	- return 'app/components/noosfero-activities/activity/' + activity.verb + '.html';
21	- }
22	- }
23	-
24	-})();
@@ -0,0 +1,38 @@		@@ -0,0 +1,38 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Pipe, Input, provide, Component} from 'ng-forward';
	3	+import {provideFilters} from '../../../../spec/helpers';
	4	+
	5	+import {NoosferoActivity} from './activity.component';
	6	+
	7	+const tcb = new TestComponentBuilder();
	8	+
	9	+const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
	10	+
	11	+
	12	+describe("Components", () => {
	13	+
	14	+ describe("Noosfero Activity", () => {
	15	+
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ @Component({
	19	+ selector: 'test-container-component',
	20	+ template: htmlTemplate,
	21	+ directives: [NoosferoActivity],
	22	+ providers: provideFilters("truncateFilter", "stripTagsFilter")
	23	+ })
	24	+ class BlockContainerComponent {
	25	+ activity = { name: "activity1", verb: "create_article" };
	26	+ }
	27	+
	28	+ it("render the specific template for an activity verb", done => {
	29	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	30	+ let component: NoosferoActivity = fixture.debugElement.componentViewChildren[0].componentInstance;
	31	+ expect(component.getActivityTemplate()).toEqual('app/components/noosfero-activities/activity/create_article.html');
	32	+ expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
	33	+ done();
	34	+ });
	35	+ });
	36	+ });
	37	+
	38	+});
@@ -0,0 +1,16 @@		@@ -0,0 +1,16 @@
	1	+import {Component, Input} from "ng-forward";
	2	+import {Activity} from "../../../models/interfaces";
	3	+
	4	+@Component({
	5	+ selector: "noosfero-activity",
	6	+ templateUrl: 'app/components/noosfero-activities/activity/activity.html'
	7	+})
	8	+export class NoosferoActivity {
	9	+
	10	+ @Input() activity: Activity;
	11	+
	12	+ getActivityTemplate() {
	13	+ return 'app/components/noosfero-activities/activity/' + this.activity.verb + '.html';
	14	+ }
	15	+
	16	+}
1	-<div class="activity">
2	- <ng-include src="$ctrl.getActivityTemplate($ctrl.activity)"></ng-include>	1	+<div class="activity {{ctrl.activity.verb}}">
		2	+ <ng-include src="ctrl.getActivityTemplate()"></ng-include>
3	</div>	3	</div>
	@@ -4,10 +4,10 @@		@@ -4,10 +4,10 @@
4	<timeline-panel>	4	<timeline-panel>
5	<timeline-heading>	5	<timeline-heading>
6	<h4 class="timeline-title">	6	<h4 class="timeline-title">
7	- <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>	7	+ <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
8	<span> has joined the community</span>	8	<span> has joined the community</span>
9	</h4>	9	</h4>
10	- <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>	10	+ <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
11	</timeline-heading>	11	</timeline-heading>
12	<div class="timeline-body"></div>	12	<div class="timeline-body"></div>
13	</timeline-panel>	13	</timeline-panel>
	@@ -42,8 +42,6 @@ NoosferoApp.run(noosferoAngularRunBlock);		@@ -42,8 +42,6 @@ NoosferoApp.run(noosferoAngularRunBlock);
42	NoosferoApp.addController("AuthController", AuthController);	42	NoosferoApp.addController("AuthController", AuthController);
43		43
44		44
45	-require("./components/noosfero-activities/activities.component.js");
46	-require("./components/noosfero-activities/activity/activity.component.js");
47	require("./components/noosfero/noosfero-template.filter.js");	45	require("./components/noosfero/noosfero-template.filter.js");
48	require("./components/noosfero/noosfero.service.js");	46	require("./components/noosfero/noosfero.service.js");
49	require("./components/noosfero/profile-image/profile-image.component.js");	47	require("./components/noosfero/profile-image/profile-image.component.js");