diff --git a/src/app/components/noosfero-articles/article/article.component.spec.ts b/src/app/components/noosfero-articles/article/article.component.spec.ts new file mode 100644 index 0000000..d1da15d --- /dev/null +++ b/src/app/components/noosfero-articles/article/article.component.spec.ts @@ -0,0 +1,81 @@ +import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder'; +import {Input, provide, Component} from 'ng-forward'; + +import {ArticleComponent} from './article.component'; + +// Instantiate the Builder, this part is different than ng2. +// In ng2 you inject tcb. +const tcb = new TestComponentBuilder(); + +// this htmlTemplate will be re-used between the container components in this spec file +const htmlTemplate: string = ''; + + +describe("Article 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 NoosferoArtileComponent will be load on our tests + beforeEach(angular.mock.module("templates")); + + it("receives the article and profile as inputs", done => { + + // Creating a container component (ArticleContainerComponent) to include + // the component under test (ArticleComponent) + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent] }) + class ArticleContainerComponent { + article = { type: 'anyArticleType' }; + profile = { name: 'profile-name' }; + constructor() { + } + } + + // uses the TestComponentBuilder instance to initialize the component + tcb + .createAsync(ArticleContainerComponent).then(fixture => { + // and here we can inspect and run the test assertions + let myComponent: ArticleComponent = fixture.componentInstance; + + // assure the article object inside the ArticleComponent matches + // the provided through the parent component + expect(myComponent.article.type).toEqual("anyArticleType"); + expect(myComponent.profile.name).toEqual("profile-name"); + + // done needs to be called (it isn't really needed, as we can read in + // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync) + // because createAsync in ng-forward is not really async, but as the intention + // here is write tests in angular 2 ways, this is recommended + done(); + }); + }); + + + it("renders a component which matches to the article type", done => { + // NoosferoTinyMceArticle component created to check if it will be used + // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleComponent) + // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider + @Component({ selector: 'noosfero-tiny-mce-article', template: "

TinyMceArticle

" }) + class NoosferoTinyMceArticle { + @Input() article: any; + @Input() profile: any; + } + + // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle + @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent, NoosferoTinyMceArticle] }) + class CustomArticleType { + article = { type: 'TinyMceArticle' }; + profile = { name: 'profile-name' }; + constructor() { + } + } + tcb + .createAsync(CustomArticleType).then(fixture => { + let myComponent: CustomArticleType = fixture.componentInstance; + expect(myComponent.article.type).toEqual("TinyMceArticle"); + expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle"); + done(); + }); + }); + +}); diff --git a/src/app/components/noosfero-articles/article/article.component.ts b/src/app/components/noosfero-articles/article/article.component.ts new file mode 100644 index 0000000..07d834c --- /dev/null +++ b/src/app/components/noosfero-articles/article/article.component.ts @@ -0,0 +1,26 @@ +import { bundle, Input, Inject, Component, Directive } from 'ng-forward'; +import {NoosferoArticleBlog} from "../blog/blog.component"; + +@Component({ + selector: 'noosfero-article', + templateUrl: 'app/components/noosfero-articles/article/article.html', + directives: [NoosferoArticleBlog] +}) +@Inject("$element", "$scope", "$injector", "$compile") +export class ArticleComponent { + + @Input() article: any; + @Input() profile: any; + + ngOnInit() { + let specificDirective = 'noosfero' + this.article.type; + if (this.$injector.has(specificDirective + 'Directive')) { + let directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); + this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile">')(this.$scope)); + } + } + + constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { + + } +} diff --git a/src/app/components/noosfero-articles/article/article.directive.spec.ts b/src/app/components/noosfero-articles/article/article.directive.spec.ts deleted file mode 100644 index f45d554..0000000 --- a/src/app/components/noosfero-articles/article/article.directive.spec.ts +++ /dev/null @@ -1,81 +0,0 @@ -import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder'; -import {Input, provide, Component} from 'ng-forward'; - -import {ArticleDirective} from './article.directive'; - -// Instantiate the Builder, this part is different than ng2. -// In ng2 you inject tcb. -const tcb = new TestComponentBuilder(); - -// this htmlTemplate will be re-used between the container components in this spec file -const htmlTemplate: string = ''; - - -describe("Article Directive", () => { - - // 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 NoosferoArtileDirective will be load on our tests - beforeEach(angular.mock.module("templates")); - - it("receives the article and profile as inputs", done => { - - // Creating a container component (ArticleContainerComponent) to include - // the component under test (ArticleDirective) - @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] }) - class ArticleContainerComponent { - article = { type: 'anyArticleType' }; - profile = { name: 'profile-name' }; - constructor() { - } - } - - // uses the TestComponentBuilder instance to initialize the component - tcb - .createAsync(ArticleContainerComponent).then(fixture => { - // and here we can inspect and run the test assertions - let myComponent: ArticleDirective = fixture.componentInstance; - - // assure the article object inside the ArticleDirective matches - // the provided through the parent component - expect(myComponent.article.type).toEqual("anyArticleType"); - expect(myComponent.profile.name).toEqual("profile-name"); - - // done needs to be called (it isn't really needed, as we can read in - // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync) - // because createAsync in ng-forward is not really async, but as the intention - // here is write tests in angular 2 ways, this is recommended - done(); - }); - }); - - - it("renders a directive which matches to the article type", done => { - // NoosferoTinyMceArticle component created to check if it will be used - // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective) - // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider - @Component({ selector: 'noosfero-tiny-mce-article', template: "

TinyMceArticle

" }) - class NoosferoTinyMceArticle { - @Input() article: any; - @Input() profile: any; - } - - // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle - @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] }) - class CustomArticleType { - article = { type: 'TinyMceArticle' }; - profile = { name: 'profile-name' }; - constructor() { - } - } - tcb - .createAsync(CustomArticleType).then(fixture => { - let myComponent: CustomArticleType = fixture.componentInstance; - expect(myComponent.article.type).toEqual("TinyMceArticle"); - expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle"); - done(); - }); - }); - -}); \ No newline at end of file diff --git a/src/app/components/noosfero-articles/article/article.directive.ts b/src/app/components/noosfero-articles/article/article.directive.ts deleted file mode 100644 index 3530a97..0000000 --- a/src/app/components/noosfero-articles/article/article.directive.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { bundle, Input, Inject, Component, Directive } from 'ng-forward'; -import {NoosferoArticleBlog} from "../blog/blog.component"; - -@Component({ - selector: 'noosfero-article', - templateUrl: 'app/components/noosfero-articles/article/article.html', - directives: [NoosferoArticleBlog] -}) -@Inject("$element", "$scope", "$injector", "$compile") -export class ArticleDirective { - - @Input() article: any; - @Input() profile: any; - - ngOnInit() { - let specificDirective = 'noosfero' + this.article.type; - if (this.$injector.has(specificDirective + 'Directive')) { - let directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); - this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile">')(this.$scope)); - } - } - - constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) { - - } -} diff --git a/src/app/content-viewer/content-viewer.component.ts b/src/app/content-viewer/content-viewer.component.ts index 1739ead..536d648 100644 --- a/src/app/content-viewer/content-viewer.component.ts +++ b/src/app/content-viewer/content-viewer.component.ts @@ -1,6 +1,6 @@ import * as noosfero from "../models/interfaces"; -import {ArticleDirective} from "../components/noosfero-articles/article/article.directive"; +import {ArticleComponent} from "../components/noosfero-articles/article/article.component"; import {Input, Component, StateConfig, Inject} from "ng-forward"; import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component"; @@ -8,7 +8,7 @@ import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.c @Component({ selector: "content-viewer", templateUrl: "app/content-viewer/page.html", - directives: [NoosferoArticleBlog, ArticleDirective] + directives: [NoosferoArticleBlog, ArticleComponent] }) @Inject("noosfero", "$log", "$stateParams") export class ContentViewer { diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index 04203e2..c18f535 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -1,6 +1,6 @@ import {bundle, Component, StateConfig} from "ng-forward"; import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component.ts"; -import {ArticleDirective} from "../components/noosfero-articles/article/article.directive.ts"; +import {ArticleComponent} from "../components/noosfero-articles/article/article.component"; import {Profile} from "../profile/profile.component"; import {Boxes} from "../components/noosfero-boxes/boxes.component"; import {Block} from "../components/noosfero-blocks/block.component"; @@ -16,7 +16,7 @@ export class MainContent { @Component({ selector: 'main', template: '
', - directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block] + directives: [NoosferoArticleBlog, ArticleComponent, Boxes, Block] }) @StateConfig([ { -- libgit2 0.21.2