From 3963f52ff91ed1eb2b0f865ce05d2d23007b61b9 Mon Sep 17 00:00:00 2001 From: Victor Costa Date: Mon, 13 Jun 2016 10:43:11 -0300 Subject: [PATCH] Rename BlockComponent to BlockContentComponent --- src/app/layout/blocks/block-content.component.spec.ts | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/layout/blocks/block-content.component.ts | 20 ++++++++++++++++++++ src/app/layout/blocks/block.component.spec.ts | 91 ------------------------------------------------------------------------------------------- src/app/layout/blocks/block.component.ts | 20 -------------------- src/app/layout/blocks/index.ts | 2 +- src/app/layout/blocks/main/main-block.component.ts | 1 - src/app/layout/boxes/box.html | 2 +- src/app/main/main.component.ts | 4 ++-- 8 files changed, 115 insertions(+), 116 deletions(-) create mode 100644 src/app/layout/blocks/block-content.component.spec.ts create mode 100644 src/app/layout/blocks/block-content.component.ts delete mode 100644 src/app/layout/blocks/block.component.spec.ts delete mode 100644 src/app/layout/blocks/block.component.ts diff --git a/src/app/layout/blocks/block-content.component.spec.ts b/src/app/layout/blocks/block-content.component.spec.ts new file mode 100644 index 0000000..ab2491b --- /dev/null +++ b/src/app/layout/blocks/block-content.component.spec.ts @@ -0,0 +1,91 @@ +import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder'; +import {Input, provide, Component} from 'ng-forward'; + +import {BlockContentComponent} from './block-content.component'; + +const tcb = new TestComponentBuilder(); + +const htmlTemplate: string = ''; + +describe("Components", () => { + describe("Block Component", () => { + + // the karma preprocessor html2js transform the templates html into js files which put + // the templates to the templateCache into the module templates + // we need to load the module templates here as the template for the + // component Block will be load on our tests + beforeEach(angular.mock.module("templates")); + + it("receives the block and the owner as inputs", done => { + + // Creating a container component (BlockContainerComponent) to include + // the component under test (Block) + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] }) + class BlockContainerComponent { + block = { type: 'Block' }; + owner = { name: 'profile-name' }; + constructor() { + } + } + + // uses the TestComponentBuilder instance to initialize the component + tcb + .createAsync(BlockContainerComponent).then(fixture => { + // and here we can inspect and run the test assertions + let myComponent: BlockContentComponent = fixture.componentInstance; + + // assure the block object inside the Block matches + // the provided through the parent component + expect(myComponent.block.type).toEqual("Block"); + expect(myComponent.owner.name).toEqual("profile-name"); + done(); + }); + }); + + + it("renders a component which matches to the block type", done => { + // CustomBlock component created to check if it will be used + // when a block with type 'CustomBlock' is provided to the noosfero-block (Block) + // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider + @Component({ selector: 'noosfero-custom-block', template: "

My Custom Block

" }) + class CustomBlock { + @Input() block: any; + @Input() owner: any; + } + + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent, CustomBlock] }) + class CustomBlockType { + block = { type: 'CustomBlock' }; + owner = { name: 'profile-name' }; + constructor() { + } + } + tcb + .createAsync(CustomBlockType).then(fixture => { + let myComponent: CustomBlockType = fixture.componentInstance; + expect(myComponent.block.type).toEqual("CustomBlock"); + expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block"); + done(); + }); + }); + + + it("renders the default block when hasn't defined a block type", done => { + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockContentComponent] }) + class CustomBlockType { + block: any = { type: null }; + owner: any = { name: 'profile-name' }; + constructor() { + } + } + tcb + .createAsync(CustomBlockType).then(fixture => { + let myComponent: CustomBlockType = fixture.componentInstance; + expect(myComponent.block.type).toBeNull(); + expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy(); + done(); + }); + }); + + }); +}); diff --git a/src/app/layout/blocks/block-content.component.ts b/src/app/layout/blocks/block-content.component.ts new file mode 100644 index 0000000..6ff53cc --- /dev/null +++ b/src/app/layout/blocks/block-content.component.ts @@ -0,0 +1,20 @@ +import { Input, Inject, Component } from 'ng-forward'; + +@Component({ + selector: 'noosfero-block-content', + template: '
' +}) +@Inject("$element", "$scope", "$injector", "$compile") +export class BlockContentComponent { + + @Input() block: any; + @Input() owner: any; + + ngOnInit() { + let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block"; + this.$element.replaceWith(this.$compile('')(this.$scope)); + } + + constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { + } +} diff --git a/src/app/layout/blocks/block.component.spec.ts b/src/app/layout/blocks/block.component.spec.ts deleted file mode 100644 index 0406fe5..0000000 --- a/src/app/layout/blocks/block.component.spec.ts +++ /dev/null @@ -1,91 +0,0 @@ -import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder'; -import {Input, provide, Component} from 'ng-forward'; - -import {BlockComponent} from './block.component'; - -const tcb = new TestComponentBuilder(); - -const htmlTemplate: string = ''; - -describe("Components", () => { - describe("Block Component", () => { - - // the karma preprocessor html2js transform the templates html into js files which put - // the templates to the templateCache into the module templates - // we need to load the module templates here as the template for the - // component Block will be load on our tests - beforeEach(angular.mock.module("templates")); - - it("receives the block and the owner as inputs", done => { - - // Creating a container component (BlockContainerComponent) to include - // the component under test (Block) - @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] }) - class BlockContainerComponent { - block = { type: 'Block' }; - owner = { name: 'profile-name' }; - constructor() { - } - } - - // uses the TestComponentBuilder instance to initialize the component - tcb - .createAsync(BlockContainerComponent).then(fixture => { - // and here we can inspect and run the test assertions - let myComponent: BlockComponent = fixture.componentInstance; - - // assure the block object inside the Block matches - // the provided through the parent component - expect(myComponent.block.type).toEqual("Block"); - expect(myComponent.owner.name).toEqual("profile-name"); - done(); - }); - }); - - - it("renders a component which matches to the block type", done => { - // CustomBlock component created to check if it will be used - // when a block with type 'CustomBlock' is provided to the noosfero-block (Block) - // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider - @Component({ selector: 'noosfero-custom-block', template: "

My Custom Block

" }) - class CustomBlock { - @Input() block: any; - @Input() owner: any; - } - - @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent, CustomBlock] }) - class CustomBlockType { - block = { type: 'CustomBlock' }; - owner = { name: 'profile-name' }; - constructor() { - } - } - tcb - .createAsync(CustomBlockType).then(fixture => { - let myComponent: CustomBlockType = fixture.componentInstance; - expect(myComponent.block.type).toEqual("CustomBlock"); - expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block"); - done(); - }); - }); - - - it("renders the default block when hasn't defined a block type", done => { - @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [BlockComponent] }) - class CustomBlockType { - block: any = { type: null }; - owner: any = { name: 'profile-name' }; - constructor() { - } - } - tcb - .createAsync(CustomBlockType).then(fixture => { - let myComponent: CustomBlockType = fixture.componentInstance; - expect(myComponent.block.type).toBeNull(); - expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy(); - done(); - }); - }); - - }); -}); \ No newline at end of file diff --git a/src/app/layout/blocks/block.component.ts b/src/app/layout/blocks/block.component.ts deleted file mode 100644 index 13b1543..0000000 --- a/src/app/layout/blocks/block.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Input, Inject, Component } from 'ng-forward'; - -@Component({ - selector: 'noosfero-block', - template: '
' -}) -@Inject("$element", "$scope", "$injector", "$compile") -export class BlockComponent { - - @Input() block: any; - @Input() owner: any; - - ngOnInit() { - let blockName = (this.block && this.block.type) ? this.block.type.replace(/::/, '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block"; - this.$element.replaceWith(this.$compile('')(this.$scope)); - } - - constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { - } -} diff --git a/src/app/layout/blocks/index.ts b/src/app/layout/blocks/index.ts index 3f70547..ab6b477 100644 --- a/src/app/layout/blocks/index.ts +++ b/src/app/layout/blocks/index.ts @@ -1,2 +1,2 @@ /* Module Index Entry - generated using the script npm run generate-index */ -export * from "./block.component"; +export * from "./block-content.component"; diff --git a/src/app/layout/blocks/main/main-block.component.ts b/src/app/layout/blocks/main/main-block.component.ts index fa97a25..f9d64ea 100644 --- a/src/app/layout/blocks/main/main-block.component.ts +++ b/src/app/layout/blocks/main/main-block.component.ts @@ -1,5 +1,4 @@ import {Component, Input} from 'ng-forward'; -import {BlockComponent} from '../block.component'; @Component({ selector: 'noosfero-main-block', diff --git a/src/app/layout/boxes/box.html b/src/app/layout/boxes/box.html index 435b3bc..0d5da91 100644 --- a/src/app/layout/boxes/box.html +++ b/src/app/layout/boxes/box.html @@ -4,7 +4,7 @@

{{block.title}}

- +
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index 16b5a19..0830f3c 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -6,7 +6,7 @@ import {ArticleViewComponent} from "./../article/article-default-view.component" import {ProfileComponent} from "../profile/profile.component"; import {BoxesComponent} from "../layout/boxes/boxes.component"; -import {BlockComponent} from "../layout/blocks/block.component"; +import {BlockContentComponent} from "../layout/blocks/block-content.component"; import {EnvironmentComponent} from "../environment/environment.component"; import {EnvironmentHomeComponent} from "../environment/environment-home.component"; import {PeopleBlockComponent} from "../layout/blocks/people/people-block.component"; @@ -95,7 +95,7 @@ export class EnvironmentContent { selector: 'main', template: '', directives: [ - ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent, + ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockContentComponent, EnvironmentComponent, PeopleBlockComponent, DisplayContentBlockComponent, LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent, ProfileComponent, MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent, -- libgit2 0.21.2