Rename ArticleDirective to ArticleComponent

Victor Costa
1 parent ef326a93
Showing 6 changed files with 111 additions and 111 deletions Show diff stats
src/app/components/noosfero-articles/article/article.component.spec.ts
src/app/components/noosfero-articles/article/article.component.ts
src/app/components/noosfero-articles/article/article.directive.spec.ts
src/app/components/noosfero-articles/article/article.directive.ts
src/app/content-viewer/content-viewer.component.ts
src/app/main/main.component.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 = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
+
+
+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: "<h1>TinyMceArticle</h1>" })
+        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();
+            });
+    });
+
+});
@@ -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"></' + directiveName + '>')(this.$scope));
+        }
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+
+    }
+}
@@ -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 = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
-
-
-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: "<h1>TinyMceArticle</h1>" })
-        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
@@ -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"></' + directiveName + '>')(this.$scope));
-        }
-    }
-
-    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
-
-    }
-}
 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 &quot;./../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 {
 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: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]
+    directives: [NoosferoArticleBlog, ArticleComponent, Boxes, Block]
 })
 @StateConfig([
     {
...	...	@@ -0,0 +1,81 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Input, provide, Component} from 'ng-forward';
	3	+
	4	+import {ArticleComponent} from './article.component';
	5	+
	6	+// Instantiate the Builder, this part is different than ng2.
	7	+// In ng2 you inject tcb.
	8	+const tcb = new TestComponentBuilder();
	9	+
	10	+// this htmlTemplate will be re-used between the container components in this spec file
	11	+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
	12	+
	13	+
	14	+describe("Article Component", () => {
	15	+
	16	+ // the karma preprocessor html2js transform the templates html into js files which put
	17	+ // the templates to the templateCache into the module templates
	18	+ // we need to load the module templates here as the template for the
	19	+ // component NoosferoArtileComponent will be load on our tests
	20	+ beforeEach(angular.mock.module("templates"));
	21	+
	22	+ it("receives the article and profile as inputs", done => {
	23	+
	24	+ // Creating a container component (ArticleContainerComponent) to include
	25	+ // the component under test (ArticleComponent)
	26	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent] })
	27	+ class ArticleContainerComponent {
	28	+ article = { type: 'anyArticleType' };
	29	+ profile = { name: 'profile-name' };
	30	+ constructor() {
	31	+ }
	32	+ }
	33	+
	34	+ // uses the TestComponentBuilder instance to initialize the component
	35	+ tcb
	36	+ .createAsync(ArticleContainerComponent).then(fixture => {
	37	+ // and here we can inspect and run the test assertions
	38	+ let myComponent: ArticleComponent = fixture.componentInstance;
	39	+
	40	+ // assure the article object inside the ArticleComponent matches
	41	+ // the provided through the parent component
	42	+ expect(myComponent.article.type).toEqual("anyArticleType");
	43	+ expect(myComponent.profile.name).toEqual("profile-name");
	44	+
	45	+ // done needs to be called (it isn't really needed, as we can read in
	46	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	47	+ // because createAsync in ng-forward is not really async, but as the intention
	48	+ // here is write tests in angular 2 ways, this is recommended
	49	+ done();
	50	+ });
	51	+ });
	52	+
	53	+
	54	+ it("renders a component which matches to the article type", done => {
	55	+ // NoosferoTinyMceArticle component created to check if it will be used
	56	+ // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleComponent)
	57	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
	58	+ @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
	59	+ class NoosferoTinyMceArticle {
	60	+ @Input() article: any;
	61	+ @Input() profile: any;
	62	+ }
	63	+
	64	+ // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
	65	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleComponent, NoosferoTinyMceArticle] })
	66	+ class CustomArticleType {
	67	+ article = { type: 'TinyMceArticle' };
	68	+ profile = { name: 'profile-name' };
	69	+ constructor() {
	70	+ }
	71	+ }
	72	+ tcb
	73	+ .createAsync(CustomArticleType).then(fixture => {
	74	+ let myComponent: CustomArticleType = fixture.componentInstance;
	75	+ expect(myComponent.article.type).toEqual("TinyMceArticle");
	76	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
	77	+ done();
	78	+ });
	79	+ });
	80	+
	81	+});
...	...
...	...	@@ -0,0 +1,26 @@
	1	+import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
	2	+import {NoosferoArticleBlog} from "../blog/blog.component";
	3	+
	4	+@Component({
	5	+ selector: 'noosfero-article',
	6	+ templateUrl: 'app/components/noosfero-articles/article/article.html',
	7	+ directives: [NoosferoArticleBlog]
	8	+})
	9	+@Inject("$element", "$scope", "$injector", "$compile")
	10	+export class ArticleComponent {
	11	+
	12	+ @Input() article: any;
	13	+ @Input() profile: any;
	14	+
	15	+ ngOnInit() {
	16	+ let specificDirective = 'noosfero' + this.article.type;
	17	+ if (this.$injector.has(specificDirective + 'Directive')) {
	18	+ let directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	19	+ this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + directiveName + '>')(this.$scope));
	20	+ }
	21	+ }
	22	+
	23	+ constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
	24	+
	25	+ }
	26	+}
...	...
...	...	@@ -1,81 +0,0 @@
1		-import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
2		-import {Input, provide, Component} from 'ng-forward';
3		-
4		-import {ArticleDirective} from './article.directive';
5		-
6		-// Instantiate the Builder, this part is different than ng2.
7		-// In ng2 you inject tcb.
8		-const tcb = new TestComponentBuilder();
9		-
10		-// this htmlTemplate will be re-used between the container components in this spec file
11		-const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
12		-
13		-
14		-describe("Article Directive", () => {
15		-
16		- // the karma preprocessor html2js transform the templates html into js files which put
17		- // the templates to the templateCache into the module templates
18		- // we need to load the module templates here as the template for the
19		- // component NoosferoArtileDirective will be load on our tests
20		- beforeEach(angular.mock.module("templates"));
21		-
22		- it("receives the article and profile as inputs", done => {
23		-
24		- // Creating a container component (ArticleContainerComponent) to include
25		- // the component under test (ArticleDirective)
26		- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective] })
27		- class ArticleContainerComponent {
28		- article = { type: 'anyArticleType' };
29		- profile = { name: 'profile-name' };
30		- constructor() {
31		- }
32		- }
33		-
34		- // uses the TestComponentBuilder instance to initialize the component
35		- tcb
36		- .createAsync(ArticleContainerComponent).then(fixture => {
37		- // and here we can inspect and run the test assertions
38		- let myComponent: ArticleDirective = fixture.componentInstance;
39		-
40		- // assure the article object inside the ArticleDirective matches
41		- // the provided through the parent component
42		- expect(myComponent.article.type).toEqual("anyArticleType");
43		- expect(myComponent.profile.name).toEqual("profile-name");
44		-
45		- // done needs to be called (it isn't really needed, as we can read in
46		- // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
47		- // because createAsync in ng-forward is not really async, but as the intention
48		- // here is write tests in angular 2 ways, this is recommended
49		- done();
50		- });
51		- });
52		-
53		-
54		- it("renders a directive which matches to the article type", done => {
55		- // NoosferoTinyMceArticle component created to check if it will be used
56		- // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleDirective)
57		- // * Important * - the selector is what ng-forward uses to define the name of the directive provider
58		- @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
59		- class NoosferoTinyMceArticle {
60		- @Input() article: any;
61		- @Input() profile: any;
62		- }
63		-
64		- // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
65		- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleDirective, NoosferoTinyMceArticle] })
66		- class CustomArticleType {
67		- article = { type: 'TinyMceArticle' };
68		- profile = { name: 'profile-name' };
69		- constructor() {
70		- }
71		- }
72		- tcb
73		- .createAsync(CustomArticleType).then(fixture => {
74		- let myComponent: CustomArticleType = fixture.componentInstance;
75		- expect(myComponent.article.type).toEqual("TinyMceArticle");
76		- expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
77		- done();
78		- });
79		- });
80		-
81		-});
82	0	\ No newline at end of file
...	...	@@ -1,26 +0,0 @@
1		-import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2		-import {NoosferoArticleBlog} from "../blog/blog.component";
3		-
4		-@Component({
5		- selector: 'noosfero-article',
6		- templateUrl: 'app/components/noosfero-articles/article/article.html',
7		- directives: [NoosferoArticleBlog]
8		-})
9		-@Inject("$element", "$scope", "$injector", "$compile")
10		-export class ArticleDirective {
11		-
12		- @Input() article: any;
13		- @Input() profile: any;
14		-
15		- ngOnInit() {
16		- let specificDirective = 'noosfero' + this.article.type;
17		- if (this.$injector.has(specificDirective + 'Directive')) {
18		- let directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
19		- this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article" [profile]="ctrl.profile"></' + directiveName + '>')(this.$scope));
20		- }
21		- }
22		-
23		- constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
24		-
25		- }
26		-}
1	1	import * as noosfero from "../models/interfaces";
2	2
3		-import {ArticleDirective} from "../components/noosfero-articles/article/article.directive";
	3	+import {ArticleComponent} from "../components/noosfero-articles/article/article.component";
4	4	import {Input, Component, StateConfig, Inject} from "ng-forward";
5	5
6	6	import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
...	...	@@ -8,7 +8,7 @@ import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.c
8	8	@Component({
9	9	selector: "content-viewer",
10	10	templateUrl: "app/content-viewer/page.html",
11		- directives: [NoosferoArticleBlog, ArticleDirective]
	11	+ directives: [NoosferoArticleBlog, ArticleComponent]
12	12	})
13	13	@Inject("noosfero", "$log", "$stateParams")
14	14	export class ContentViewer {
...	...
1	1	import {bundle, Component, StateConfig} from "ng-forward";
2	2	import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component.ts";
3		-import {ArticleDirective} from "../components/noosfero-articles/article/article.directive.ts";
	3	+import {ArticleComponent} from "../components/noosfero-articles/article/article.component";
4	4	import {Profile} from "../profile/profile.component";
5	5	import {Boxes} from "../components/noosfero-boxes/boxes.component";
6	6	import {Block} from "../components/noosfero-blocks/block.component";
...	...	@@ -16,7 +16,7 @@ export class MainContent {
16	16	@Component({
17	17	selector: 'main',
18	18	template: '<div ng-view></div>',
19		- directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]
	19	+ directives: [NoosferoArticleBlog, ArticleComponent, Boxes, Block]
20	20	})
21	21	@StateConfig([
22	22	{
...	...