Commit 34d5ef654b304c628b527ad5eab0aa598768f08a
1 parent
8c7b12aa
Exists in
master
and in
26 other branches
refactoring link list block
Showing
10 changed files
with
128 additions
and
128 deletions
Show diff stats
src/app/layout/blocks/link-list/index.ts
src/app/layout/blocks/link-list/link-list-block.component.spec.ts
0 → 100644
| ... | ... | @@ -0,0 +1,65 @@ |
| 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 {LinkListBlockComponent} from './link-list-block.component'; | |
| 6 | + | |
| 7 | +const tcb = new TestComponentBuilder(); | |
| 8 | + | |
| 9 | +const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>'; | |
| 10 | + | |
| 11 | + | |
| 12 | +describe("Components", () => { | |
| 13 | + | |
| 14 | + describe("Link List Block Component", () => { | |
| 15 | + | |
| 16 | + beforeEach(angular.mock.module("templates")); | |
| 17 | + | |
| 18 | + it("receives the block and the owner as inputs", done => { | |
| 19 | + | |
| 20 | + // Creating a container component (BlockContainerComponent) to include | |
| 21 | + // the component under test (Block) | |
| 22 | + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] }) | |
| 23 | + class BlockContainerComponent { | |
| 24 | + block = { type: 'Block' }; | |
| 25 | + owner = { name: 'profile-name' }; | |
| 26 | + constructor() { | |
| 27 | + } | |
| 28 | + } | |
| 29 | + | |
| 30 | + // uses the TestComponentBuilder instance to initialize the component | |
| 31 | + // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] }) | |
| 32 | + tcb.createAsync(BlockContainerComponent).then(fixture => { | |
| 33 | + // and here we can inspect and run the test assertions | |
| 34 | + let myComponent: LinkListBlockComponent = fixture.componentInstance; | |
| 35 | + | |
| 36 | + // assure the block object inside the Block matches | |
| 37 | + // the provided through the parent component | |
| 38 | + expect(myComponent.block.type).toEqual("Block"); | |
| 39 | + expect(myComponent.owner.name).toEqual("profile-name"); | |
| 40 | + done(); | |
| 41 | + }); | |
| 42 | + }); | |
| 43 | + | |
| 44 | + | |
| 45 | + it("display links stored in block settings", done => { | |
| 46 | + | |
| 47 | + @Component({ | |
| 48 | + selector: 'test-container-component', | |
| 49 | + template: htmlTemplate, | |
| 50 | + directives: [LinkListBlockComponent], | |
| 51 | + providers: provideFilters("noosferoTemplateFilter") | |
| 52 | + }) | |
| 53 | + class CustomBlockType { | |
| 54 | + block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } }; | |
| 55 | + owner: any = { name: 'profile-name' }; | |
| 56 | + } | |
| 57 | + tcb.createAsync(CustomBlockType).then(fixture => { | |
| 58 | + expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2); | |
| 59 | + done(); | |
| 60 | + }); | |
| 61 | + }); | |
| 62 | + | |
| 63 | + }); | |
| 64 | + | |
| 65 | +}); | ... | ... |
src/app/layout/blocks/link-list/link-list-block.component.ts
0 → 100644
| ... | ... | @@ -0,0 +1,20 @@ |
| 1 | +import {Component, Input} from "ng-forward"; | |
| 2 | + | |
| 3 | +@Component({ | |
| 4 | + selector: "noosfero-link-list-block", | |
| 5 | + templateUrl: "app/layout/blocks/link-list/link-list-block.html" | |
| 6 | +}) | |
| 7 | +export class LinkListBlockComponent { | |
| 8 | + | |
| 9 | + @Input() block: any; | |
| 10 | + @Input() owner: any; | |
| 11 | + | |
| 12 | + links: any; | |
| 13 | + | |
| 14 | + ngOnInit() { | |
| 15 | + if (this.block && this.block.settings) { | |
| 16 | + this.links = this.block.settings.links; | |
| 17 | + } | |
| 18 | + } | |
| 19 | + | |
| 20 | +} | ... | ... |
| ... | ... | @@ -0,0 +1,34 @@ |
| 1 | +.icon-event { | |
| 2 | + @extend .fa-calendar; | |
| 3 | +} | |
| 4 | +.icon-photos { | |
| 5 | + @extend .fa-photo; | |
| 6 | +} | |
| 7 | +.icon-edit { | |
| 8 | + @extend .fa-edit; | |
| 9 | +} | |
| 10 | +.icon-ok { | |
| 11 | + @extend .fa-check; | |
| 12 | +} | |
| 13 | +.icon-send { | |
| 14 | + @extend .fa-send-o; | |
| 15 | +} | |
| 16 | +.icon-menu-people { | |
| 17 | + @extend .fa-user; | |
| 18 | +} | |
| 19 | +.icon-forum { | |
| 20 | + @extend .fa-users; | |
| 21 | +} | |
| 22 | +.icon-new { | |
| 23 | + @extend .fa-file-o; | |
| 24 | +} | |
| 25 | +.icon-save { | |
| 26 | + @extend .fa-save; | |
| 27 | +} | |
| 28 | + | |
| 29 | +.link-list-block { | |
| 30 | + a i { | |
| 31 | + line-height: 25px; | |
| 32 | + color: #949494; | |
| 33 | + } | |
| 34 | +} | ... | ... |
src/app/layout/blocks/link-list/link-list.component.spec.ts
| ... | ... | @@ -1,65 +0,0 @@ |
| 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 {LinkListBlockComponent} from './link-list.component'; | |
| 6 | - | |
| 7 | -const tcb = new TestComponentBuilder(); | |
| 8 | - | |
| 9 | -const htmlTemplate: string = '<noosfero-link-list-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-link-list-block>'; | |
| 10 | - | |
| 11 | - | |
| 12 | -describe("Components", () => { | |
| 13 | - | |
| 14 | - describe("Link List Block Component", () => { | |
| 15 | - | |
| 16 | - beforeEach(angular.mock.module("templates")); | |
| 17 | - | |
| 18 | - it("receives the block and the owner as inputs", done => { | |
| 19 | - | |
| 20 | - // Creating a container component (BlockContainerComponent) to include | |
| 21 | - // the component under test (Block) | |
| 22 | - @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [LinkListBlockComponent] }) | |
| 23 | - class BlockContainerComponent { | |
| 24 | - block = { type: 'Block' }; | |
| 25 | - owner = { name: 'profile-name' }; | |
| 26 | - constructor() { | |
| 27 | - } | |
| 28 | - } | |
| 29 | - | |
| 30 | - // uses the TestComponentBuilder instance to initialize the component | |
| 31 | - // .overrideView(LinkListBlock, { template: 'asdasdasd', pipes: [NoosferoTemplate] }) | |
| 32 | - tcb.createAsync(BlockContainerComponent).then(fixture => { | |
| 33 | - // and here we can inspect and run the test assertions | |
| 34 | - let myComponent: LinkListBlockComponent = fixture.componentInstance; | |
| 35 | - | |
| 36 | - // assure the block object inside the Block matches | |
| 37 | - // the provided through the parent component | |
| 38 | - expect(myComponent.block.type).toEqual("Block"); | |
| 39 | - expect(myComponent.owner.name).toEqual("profile-name"); | |
| 40 | - done(); | |
| 41 | - }); | |
| 42 | - }); | |
| 43 | - | |
| 44 | - | |
| 45 | - it("display links stored in block settings", done => { | |
| 46 | - | |
| 47 | - @Component({ | |
| 48 | - selector: 'test-container-component', | |
| 49 | - template: htmlTemplate, | |
| 50 | - directives: [LinkListBlockComponent], | |
| 51 | - providers: provideFilters("noosferoTemplateFilter") | |
| 52 | - }) | |
| 53 | - class CustomBlockType { | |
| 54 | - block: any = { settings: { links: [{ name: 'link1', address: 'address1' }, { name: 'link2', address: 'address2' }] } }; | |
| 55 | - owner: any = { name: 'profile-name' }; | |
| 56 | - } | |
| 57 | - tcb.createAsync(CustomBlockType).then(fixture => { | |
| 58 | - expect(fixture.debugElement.queryAll(".link-list-block a").length).toEqual(2); | |
| 59 | - done(); | |
| 60 | - }); | |
| 61 | - }); | |
| 62 | - | |
| 63 | - }); | |
| 64 | - | |
| 65 | -}); | |
| 66 | 0 | \ No newline at end of file |
src/app/layout/blocks/link-list/link-list.component.ts
| ... | ... | @@ -1,20 +0,0 @@ |
| 1 | -import {Component, Input} from "ng-forward"; | |
| 2 | - | |
| 3 | -@Component({ | |
| 4 | - selector: "noosfero-link-list-block", | |
| 5 | - templateUrl: "app/layout/blocks/link-list/link-list.html" | |
| 6 | -}) | |
| 7 | -export class LinkListBlockComponent { | |
| 8 | - | |
| 9 | - @Input() block: any; | |
| 10 | - @Input() owner: any; | |
| 11 | - | |
| 12 | - links: any; | |
| 13 | - | |
| 14 | - ngOnInit() { | |
| 15 | - if (this.block && this.block.settings) { | |
| 16 | - this.links = this.block.settings.links; | |
| 17 | - } | |
| 18 | - } | |
| 19 | - | |
| 20 | -} |
src/app/layout/blocks/link-list/link-list.html
src/app/layout/blocks/link-list/link-list.scss
| ... | ... | @@ -1,34 +0,0 @@ |
| 1 | -.icon-event { | |
| 2 | - @extend .fa-calendar; | |
| 3 | -} | |
| 4 | -.icon-photos { | |
| 5 | - @extend .fa-photo; | |
| 6 | -} | |
| 7 | -.icon-edit { | |
| 8 | - @extend .fa-edit; | |
| 9 | -} | |
| 10 | -.icon-ok { | |
| 11 | - @extend .fa-check; | |
| 12 | -} | |
| 13 | -.icon-send { | |
| 14 | - @extend .fa-send-o; | |
| 15 | -} | |
| 16 | -.icon-menu-people { | |
| 17 | - @extend .fa-user; | |
| 18 | -} | |
| 19 | -.icon-forum { | |
| 20 | - @extend .fa-users; | |
| 21 | -} | |
| 22 | -.icon-new { | |
| 23 | - @extend .fa-file-o; | |
| 24 | -} | |
| 25 | -.icon-save { | |
| 26 | - @extend .fa-save; | |
| 27 | -} | |
| 28 | - | |
| 29 | -.link-list-block { | |
| 30 | - a i { | |
| 31 | - line-height: 25px; | |
| 32 | - color: #949494; | |
| 33 | - } | |
| 34 | -} |
src/app/main/main.component.ts
| ... | ... | @@ -10,7 +10,7 @@ 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 | 12 | import {PeopleBlockComponent} from "../layout/blocks/people-block/people-block.component"; |
| 13 | -import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list.component"; | |
| 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"; |
| 16 | 16 | import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html.component"; | ... | ... |