Commit ea43a611efcba2f666404cc0a267fa1dc0fb8e7b
1 parent
2b6b1400
Exists in
master
and in
26 other branches
refactoring people block
Showing
11 changed files
with
123 additions
and
123 deletions
Show diff stats
src/app/layout/blocks/people-block/index.ts
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
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/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 | +}); | ... | ... |
| ... | ... | @@ -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 | +} | ... | ... |
| ... | ... | @@ -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 "../layout/boxes/boxes.component"; |
| 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"; | ... | ... |