Commit 34d5ef654b304c628b527ad5eab0aa598768f08a

Authored by Leandro Santos
1 parent 8c7b12aa

refactoring link list block

src/app/layout/blocks/link-list/index.ts
1 1 /* Module Index Entry - generated using the script npm run generate-index */
2   -export * from "./link-list.component";
  2 +export * from "./link-list-block.component";
... ...
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 +}
... ...
src/app/layout/blocks/link-list/link-list-block.html 0 → 100644
... ... @@ -0,0 +1,7 @@
  1 +<div class="link-list-block">
  2 + <div ng-repeat="link in ctrl.links">
  3 + <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
  4 + <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
  5 + </a>
  6 + </div>
  7 +</div>
... ...
src/app/layout/blocks/link-list/link-list-block.scss 0 → 100644
... ... @@ -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
... ... @@ -1,7 +0,0 @@
1   -<div class="link-list-block">
2   - <div ng-repeat="link in ctrl.links">
3   - <a ng-href="{{link.address | noosferoTemplate:{profile: ctrl.owner.identifier} }}">
4   - <i class="fa fa-fw icon-{{link.icon}}"></i> <span>{{link.name}}</span>
5   - </a>
6   - </div>
7   -</div>
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 &quot;../layout/blocks/block.component&quot;;
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";
... ...