Migrate members block to ngforward

Victor Costa
1 parent 5cead4fc
Showing 7 changed files with 98 additions and 29 deletions Show diff stats
src/app/components/noosfero-blocks/members-block/members-block.component.js
src/app/components/noosfero-blocks/members-block/members-block.component.spec.ts
src/app/components/noosfero-blocks/members-block/members-block.component.ts
src/app/components/noosfero-blocks/members-block/members-block.html
src/app/index.ts
src/app/main/main.component.ts
src/lib/ng-noosfero-api/http/profile.service.ts
@@ -1,26 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoMembersBlock', {
-      restrict: 'E',
-      templateUrl: 'app/components/noosfero-blocks/members-block/members-block.html',
-      bindings: {
-          block: '<',
-          owner: '<'
-      },
-      controller: MembersBlockController
-    });
-
-  /** @ngInject */
-  function MembersBlockController(noosfero) {
-    var vm = this;
-    vm.members = [];
-
-    noosfero.members(noosfero.profiles.one(vm.owner.id)).one().get({per_page: 6}).then(function(response) {
-      vm.members = response.data.people;
-    });
-  }
-
-})();
@@ -0,0 +1,52 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+
+import {MembersBlock} from './members-block.component';
+
+const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Members Block Component", () => {
+
+    beforeEach(angular.mock.module("templates"));
+
+    let state = jasmine.createSpyObj("state", ["go"]);
+    let providers = [
+        new Provider('truncateFilter', { useValue: () => { } }),
+        new Provider('stripTagsFilter', { useValue: () => { } }),
+        new Provider('$state', { useValue: state }),
+        new Provider('ProfileService', {
+            useValue: {
+                getProfileMembers: (profileId: number, filters: any): any => {
+                    return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
+                }
+            }
+        }),
+    ];
+    @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MembersBlock], providers: providers })
+    class BlockContainerComponent {
+        block = { type: 'Block', settings: {} };
+        owner = { name: 'profile-name' };
+        constructor() {
+        }
+    }
+
+    it("get members of the block owner", done => {
+        tcb.createAsync(BlockContainerComponent).then(fixture => {
+            let recentDocumentsBlock: MembersBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
+            expect(recentDocumentsBlock.members).toEqual([{ identifier: "person1" }]);
+            done();
+        });
+    });
+
+    it("render the profile image for each member", done => {
+        tcb.createAsync(BlockContainerComponent).then(fixture => {
+            let recentDocumentsBlock: MembersBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
+            fixture.debugElement.getLocal("$rootScope").$apply();
+            expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
+            done();
+        });
+    });
+
+});
@@ -0,0 +1,25 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "noosfero-members-block",
+    templateUrl: 'app/components/noosfero-blocks/members-block/members-block.html',
+})
+@Inject(ProfileService)
+export class MembersBlock {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    members: any = [];
+
+    constructor(private ProfileService: ProfileService) {
+
+    }
+
+    ngOnInit() {
+        this.ProfileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
+            this.members = response.data.people;
+        });
+    }
+}
 <div class="members-block">
-  <a ng-repeat="member in $ctrl.members" ui-sref="main.profile({profile: member.identifier})" class="member">
+  <a ng-repeat="member in ctrl.members" ui-sref="main.profile({profile: member.identifier})" class="member">
     <noosfero-profile-image profile="member"></noosfero-profile-image>
   </a>
 </div>
@@ -45,7 +45,6 @@ NoosferoApp.addController(&quot;AuthController&quot;, AuthController);
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
-require("./components/noosfero-blocks/members-block/members-block.component.js");
 require("./components/noosfero/noosfero-template.filter.js");
 require("./components/noosfero/noosfero.service.js");
 require("./components/noosfero/profile-image/profile-image.component.js");
@@ -9,6 +9,7 @@ import {Block} from &quot;../components/noosfero-blocks/block.component&quot;;
 import {LinkListBlock} from "../components/noosfero-blocks/link-list/link-list.component";
 import {RecentDocumentsBlock} from "../components/noosfero-blocks/recent-documents/recent-documents.component";
 import {ProfileImageBlock} from "../components/noosfero-blocks/profile-image/profile-image.component";
+import {MembersBlock} from "../components/noosfero-blocks/members-block/members-block.component";
 import {AuthService} from "./../components/auth/auth_service";
@@ -32,7 +33,10 @@ export class MainContent {
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block, LinkListBlock, MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock],
+    directives: [
+        NoosferoArticleBlog, ArticleView, Boxes, Block, LinkListBlock,
+        MainBlock, RecentDocumentsBlock, Navbar, ProfileImageBlock, MembersBlock
+    ],
     providers: [AuthService, Session]
 })
 @StateConfig([
@@ -0,0 +1,15 @@
+import { Injectable, Inject } from "ng-forward";
+
+@Injectable()
+@Inject("Restangular")
+export class ProfileService {
+
+    constructor(private Restangular: any) {
+
+    }
+
+    getProfileMembers(profileId: number, filters: any) {
+        return this.Restangular.service('profiles').one(profileId).customGET("members", filters);
+    }
+
+}
	@@ -1,26 +0,0 @@	@@ -1,26 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .component('noosferoMembersBlock', {
7	- restrict: 'E',
8	- templateUrl: 'app/components/noosfero-blocks/members-block/members-block.html',
9	- bindings: {
10	- block: '<',
11	- owner: '<'
12	- },
13	- controller: MembersBlockController
14	- });
15	-
16	- /** @ngInject */
17	- function MembersBlockController(noosfero) {
18	- var vm = this;
19	- vm.members = [];
20	-
21	- noosfero.members(noosfero.profiles.one(vm.owner.id)).one().get({per_page: 6}).then(function(response) {
22	- vm.members = response.data.people;
23	- });
24	- }
25	-
26	-})();
@@ -0,0 +1,52 @@		@@ -0,0 +1,52 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Provider, Input, provide, Component} from 'ng-forward';
	3	+
	4	+import {MembersBlock} from './members-block.component';
	5	+
	6	+const htmlTemplate: string = '<noosfero-members-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-members-block>';
	7	+
	8	+const tcb = new TestComponentBuilder();
	9	+
	10	+describe("Members Block Component", () => {
	11	+
	12	+ beforeEach(angular.mock.module("templates"));
	13	+
	14	+ let state = jasmine.createSpyObj("state", ["go"]);
	15	+ let providers = [
	16	+ new Provider('truncateFilter', { useValue: () => { } }),
	17	+ new Provider('stripTagsFilter', { useValue: () => { } }),
	18	+ new Provider('$state', { useValue: state }),
	19	+ new Provider('ProfileService', {
	20	+ useValue: {
	21	+ getProfileMembers: (profileId: number, filters: any): any => {
	22	+ return Promise.resolve({ data: { people: [{ identifier: "person1" }] } });
	23	+ }
	24	+ }
	25	+ }),
	26	+ ];
	27	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MembersBlock], providers: providers })
	28	+ class BlockContainerComponent {
	29	+ block = { type: 'Block', settings: {} };
	30	+ owner = { name: 'profile-name' };
	31	+ constructor() {
	32	+ }
	33	+ }
	34	+
	35	+ it("get members of the block owner", done => {
	36	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	37	+ let recentDocumentsBlock: MembersBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
	38	+ expect(recentDocumentsBlock.members).toEqual([{ identifier: "person1" }]);
	39	+ done();
	40	+ });
	41	+ });
	42	+
	43	+ it("render the profile image for each member", done => {
	44	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	45	+ let recentDocumentsBlock: MembersBlock = fixture.debugElement.componentViewChildren[0].componentInstance;
	46	+ fixture.debugElement.getLocal("$rootScope").$apply();
	47	+ expect(fixture.debugElement.queryAll("noosfero-profile-image").length).toEqual(1);
	48	+ done();
	49	+ });
	50	+ });
	51	+
	52	+});
@@ -0,0 +1,25 @@		@@ -0,0 +1,25 @@
	1	+import {Input, Inject, Component} from "ng-forward";
	2	+import {ProfileService} from "../../../../lib/ng-noosfero-api/http/profile.service";
	3	+
	4	+@Component({
	5	+ selector: "noosfero-members-block",
	6	+ templateUrl: 'app/components/noosfero-blocks/members-block/members-block.html',
	7	+})
	8	+@Inject(ProfileService)
	9	+export class MembersBlock {
	10	+
	11	+ @Input() block: any;
	12	+ @Input() owner: any;
	13	+
	14	+ members: any = [];
	15	+
	16	+ constructor(private ProfileService: ProfileService) {
	17	+
	18	+ }
	19	+
	20	+ ngOnInit() {
	21	+ this.ProfileService.getProfileMembers(this.owner.id, { per_page: 6 }).then((response: any) => {
	22	+ this.members = response.data.people;
	23	+ });
	24	+ }
	25	+}
1	<div class="members-block">	1	<div class="members-block">
2	- <a ng-repeat="member in $ctrl.members" ui-sref="main.profile({profile: member.identifier})" class="member">	2	+ <a ng-repeat="member in ctrl.members" ui-sref="main.profile({profile: member.identifier})" class="member">
3	<noosfero-profile-image profile="member"></noosfero-profile-image>	3	<noosfero-profile-image profile="member"></noosfero-profile-image>
4	</a>	4	</a>
5	</div>	5	</div>
	@@ -45,7 +45,6 @@ NoosferoApp.addController("AuthController", AuthController);		@@ -45,7 +45,6 @@ NoosferoApp.addController("AuthController", AuthController);
45		45
46	require("./components/noosfero-activities/activities.component.js");	46	require("./components/noosfero-activities/activities.component.js");
47	require("./components/noosfero-activities/activity/activity.component.js");	47	require("./components/noosfero-activities/activity/activity.component.js");
48	-require("./components/noosfero-blocks/members-block/members-block.component.js");
49	require("./components/noosfero/noosfero-template.filter.js");	48	require("./components/noosfero/noosfero-template.filter.js");
50	require("./components/noosfero/noosfero.service.js");	49	require("./components/noosfero/noosfero.service.js");
51	require("./components/noosfero/profile-image/profile-image.component.js");	50	require("./components/noosfero/profile-image/profile-image.component.js");
@@ -0,0 +1,15 @@		@@ -0,0 +1,15 @@
	1	+import { Injectable, Inject } from "ng-forward";
	2	+
	3	+@Injectable()
	4	+@Inject("Restangular")
	5	+export class ProfileService {
	6	+
	7	+ constructor(private Restangular: any) {
	8	+
	9	+ }
	10	+
	11	+ getProfileMembers(profileId: number, filters: any) {
	12	+ return this.Restangular.service('profiles').one(profileId).customGET("members", filters);
	13	+ }
	14	+
	15	+}