Commit ea43a611efcba2f666404cc0a267fa1dc0fb8e7b

Authored by Leandro Santos
1 parent 2b6b1400

refactoring people block

src/app/layout/blocks/people-block/index.ts
... ... @@ -1,2 +0,0 @@
1   -/* Module Index Entry - generated using the script npm run generate-index */
2   -export * from "./people-block.component";
src/app/layout/blocks/people-block/people-block.component.spec.ts
... ... @@ -1,72 +0,0 @@
1   -import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2   -import {Provider} from 'ng-forward';
3   -import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
4   -import {providers} from 'ng-forward/cjs/testing/providers';
5   -import {PeopleBlockComponent} from './people-block.component';
6   -
7   -const htmlTemplate: string = '<noosfero-people-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-people-block>';
8   -
9   -describe("Components", () => {
10   -
11   - describe("People Block Component", () => {
12   - let serviceMock = {
13   - getEnvironmentPeople: (filters: any): any => {
14   - return Promise.resolve([{ identifier: "person1" }]);
15   - }
16   - };
17   - let providers = [new Provider('EnvironmentService', { useValue: serviceMock })];
18   -
19   - let helper: ComponentTestHelper<PeopleBlockComponent>;
20   -
21   - beforeEach(angular.mock.module("templates"));
22   -
23   - /**
24   - * The beforeEach procedure will initialize the helper and parse
25   - * the component according to the given providers. Unfortunetly, in
26   - * this mode, the providers and properties given to the construtor
27   - * can't be overriden.
28   - */
29   - beforeEach((done) => {
30   - // Create the component bed for the test. Optionally, this could be done
31   - // in each test if one needs customization of these parameters per test
32   - let cls = createClass({
33   - template: htmlTemplate,
34   - directives: [PeopleBlockComponent],
35   - providers: providers,
36   - properties: {}
37   - });
38   - helper = new ComponentTestHelper<PeopleBlockComponent>(cls, done);
39   - });
40   -
41   - /**
42   - * By default the helper will have the component, with all properties
43   - * ready to be used. Here the mock provider 'EnvironmentService' will
44   - * return the given array with one person.
45   - */
46   - it("get block with one people", () => {
47   - expect(helper.component.people[0].identifier).toEqual("person1");
48   - });
49   -
50   - /**
51   - * There are helper functions to access the JQuery DOM like this.
52   - */
53   - it("render the profile image for each person", () => {
54   - expect(helper.all("noosfero-profile-image").length).toEqual(1);
55   - });
56   -
57   - /**
58   - * The main debugElement element is also available
59   - */
60   - it("render the main noosfero people block", () => {
61   - expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
62   - });
63   -
64   - /**
65   - * Just another example of a JQuery DOM helper function
66   - */
67   - it("render the noosfero people block div", () => {
68   - let div = helper.findChildren("noosfero-people-block", "div");
69   - expect(div.className).toBe('people-block', "The class should be people-block");
70   - });
71   - });
72   -});
src/app/layout/blocks/people-block/people-block.component.ts
... ... @@ -1,26 +0,0 @@
1   -import {Input, Inject, Component} from "ng-forward";
2   -import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
3   -
4   -@Component({
5   - selector: "noosfero-people-block",
6   - templateUrl: 'app/layout/blocks/people-block/people-block.html',
7   -})
8   -@Inject(EnvironmentService)
9   -export class PeopleBlockComponent {
10   -
11   - @Input() block: noosfero.Block;
12   - @Input() owner: noosfero.Environment;
13   - private type: string = "people";
14   -
15   - people: noosfero.Person[] = [];
16   -
17   - constructor(private environmentService: EnvironmentService) {
18   - }
19   -
20   - ngOnInit() {
21   - this.environmentService.getEnvironmentPeople({ limit: '6' }).then((people: noosfero.Person[]) => {
22   - this.people = people;
23   - });
24   - }
25   -
26   -}
src/app/layout/blocks/people-block/people-block.html
... ... @@ -1,5 +0,0 @@
1   -<div class="{{ctrl.type}}-block">
2   - <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
3   - <noosfero-profile-image [profile]="person"></noosfero-profile-image>
4   - </a>
5   -</div>
src/app/layout/blocks/people-block/people-block.scss
... ... @@ -1,17 +0,0 @@
1   -.members-block {
2   - .member {
3   - img, i.profile-image {
4   - width: 60px;
5   - }
6   - img {
7   - display: inline-block;
8   - vertical-align: top;
9   - }
10   - i.profile-image {
11   - text-align: center;
12   - background-color: #889DB1;
13   - color: #F1F1F1;
14   - font-size: 4.5em;
15   - }
16   - }
17   -}
src/app/layout/blocks/people/index.ts 0 → 100644
... ... @@ -0,0 +1,2 @@
  1 +/* Module Index Entry - generated using the script npm run generate-index */
  2 +export * from "./people-block.component";
... ...
src/app/layout/blocks/people/people-block.component.spec.ts 0 → 100644
... ... @@ -0,0 +1,72 @@
  1 +import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
  2 +import {Provider} from 'ng-forward';
  3 +import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
  4 +import {providers} from 'ng-forward/cjs/testing/providers';
  5 +import {PeopleBlockComponent} from './people-block.component';
  6 +
  7 +const htmlTemplate: string = '<noosfero-people-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-people-block>';
  8 +
  9 +describe("Components", () => {
  10 +
  11 + describe("People Block Component", () => {
  12 + let serviceMock = {
  13 + getEnvironmentPeople: (filters: any): any => {
  14 + return Promise.resolve([{ identifier: "person1" }]);
  15 + }
  16 + };
  17 + let providers = [new Provider('EnvironmentService', { useValue: serviceMock })];
  18 +
  19 + let helper: ComponentTestHelper<PeopleBlockComponent>;
  20 +
  21 + beforeEach(angular.mock.module("templates"));
  22 +
  23 + /**
  24 + * The beforeEach procedure will initialize the helper and parse
  25 + * the component according to the given providers. Unfortunetly, in
  26 + * this mode, the providers and properties given to the construtor
  27 + * can't be overriden.
  28 + */
  29 + beforeEach((done) => {
  30 + // Create the component bed for the test. Optionally, this could be done
  31 + // in each test if one needs customization of these parameters per test
  32 + let cls = createClass({
  33 + template: htmlTemplate,
  34 + directives: [PeopleBlockComponent],
  35 + providers: providers,
  36 + properties: {}
  37 + });
  38 + helper = new ComponentTestHelper<PeopleBlockComponent>(cls, done);
  39 + });
  40 +
  41 + /**
  42 + * By default the helper will have the component, with all properties
  43 + * ready to be used. Here the mock provider 'EnvironmentService' will
  44 + * return the given array with one person.
  45 + */
  46 + it("get block with one people", () => {
  47 + expect(helper.component.people[0].identifier).toEqual("person1");
  48 + });
  49 +
  50 + /**
  51 + * There are helper functions to access the JQuery DOM like this.
  52 + */
  53 + it("render the profile image for each person", () => {
  54 + expect(helper.all("noosfero-profile-image").length).toEqual(1);
  55 + });
  56 +
  57 + /**
  58 + * The main debugElement element is also available
  59 + */
  60 + it("render the main noosfero people block", () => {
  61 + expect(helper.debugElement.children().length).toEqual(1, "The people-block should have a div children");
  62 + });
  63 +
  64 + /**
  65 + * Just another example of a JQuery DOM helper function
  66 + */
  67 + it("render the noosfero people block div", () => {
  68 + let div = helper.findChildren("noosfero-people-block", "div");
  69 + expect(div.className).toBe('people-block', "The class should be people-block");
  70 + });
  71 + });
  72 +});
... ...
src/app/layout/blocks/people/people-block.component.ts 0 → 100644
... ... @@ -0,0 +1,26 @@
  1 +import {Input, Inject, Component} from "ng-forward";
  2 +import {EnvironmentService} from "../../../../lib/ng-noosfero-api/http/environment.service";
  3 +
  4 +@Component({
  5 + selector: "noosfero-people-block",
  6 + templateUrl: 'app/layout/blocks/people/people-block.html',
  7 +})
  8 +@Inject(EnvironmentService)
  9 +export class PeopleBlockComponent {
  10 +
  11 + @Input() block: noosfero.Block;
  12 + @Input() owner: noosfero.Environment;
  13 + private type: string = "people";
  14 +
  15 + people: noosfero.Person[] = [];
  16 +
  17 + constructor(private environmentService: EnvironmentService) {
  18 + }
  19 +
  20 + ngOnInit() {
  21 + this.environmentService.getEnvironmentPeople({ limit: '6' }).then((people: noosfero.Person[]) => {
  22 + this.people = people;
  23 + });
  24 + }
  25 +
  26 +}
... ...
src/app/layout/blocks/people/people-block.html 0 → 100644
... ... @@ -0,0 +1,5 @@
  1 +<div class="{{ctrl.type}}-block">
  2 + <a ng-repeat="person in ctrl.people" ui-sref="main.profile.home({profile: person.identifier})" class="person">
  3 + <noosfero-profile-image [profile]="person"></noosfero-profile-image>
  4 + </a>
  5 +</div>
... ...
src/app/layout/blocks/people/people-block.scss 0 → 100644
... ... @@ -0,0 +1,17 @@
  1 +.members-block {
  2 + .member {
  3 + img, i.profile-image {
  4 + width: 60px;
  5 + }
  6 + img {
  7 + display: inline-block;
  8 + vertical-align: top;
  9 + }
  10 + i.profile-image {
  11 + text-align: center;
  12 + background-color: #889DB1;
  13 + color: #F1F1F1;
  14 + font-size: 4.5em;
  15 + }
  16 + }
  17 +}
... ...
src/app/main/main.component.ts
... ... @@ -9,7 +9,7 @@ import {BoxesComponent} from &quot;../layout/boxes/boxes.component&quot;;
9 9 import {BlockComponent} from "../layout/blocks/block.component";
10 10 import {EnvironmentComponent} from "../environment/environment.component";
11 11 import {EnvironmentHomeComponent} from "../environment/environment-home.component";
12   -import {PeopleBlockComponent} from "../layout/blocks/people-block/people-block.component";
  12 +import {PeopleBlockComponent} from "../layout/blocks/people/people-block.component";
13 13 import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list-block.component";
14 14 import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents.component";
15 15 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image-block/profile-image-block.component";
... ...