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 @@		@@ -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 @@		@@ -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,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	\ No newline at end of file	0	\ No newline at end of file
	@@ -1,26 +0,0 @@	@@ -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	import * as noosfero from "../models/interfaces";	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	import {Input, Component, StateConfig, Inject} from "ng-forward";	4	import {Input, Component, StateConfig, Inject} from "ng-forward";
5		5
6	import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";	6	import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component";
	@@ -8,7 +8,7 @@ import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.c		@@ -8,7 +8,7 @@ import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.c
8	@Component({	8	@Component({
9	selector: "content-viewer",	9	selector: "content-viewer",
10	templateUrl: "app/content-viewer/page.html",	10	templateUrl: "app/content-viewer/page.html",
11	- directives: [NoosferoArticleBlog, ArticleDirective]	11	+ directives: [NoosferoArticleBlog, ArticleComponent]
12	})	12	})
13	@Inject("noosfero", "$log", "$stateParams")	13	@Inject("noosfero", "$log", "$stateParams")
14	export class ContentViewer {	14	export class ContentViewer {
1	import {bundle, Component, StateConfig} from "ng-forward";	1	import {bundle, Component, StateConfig} from "ng-forward";
2	import {NoosferoArticleBlog} from "./../components/noosfero-articles/blog/blog.component.ts";	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	import {Profile} from "../profile/profile.component";	4	import {Profile} from "../profile/profile.component";
5	import {Boxes} from "../components/noosfero-boxes/boxes.component";	5	import {Boxes} from "../components/noosfero-boxes/boxes.component";
6	import {Block} from "../components/noosfero-blocks/block.component";	6	import {Block} from "../components/noosfero-blocks/block.component";
	@@ -16,7 +16,7 @@ export class MainContent {		@@ -16,7 +16,7 @@ export class MainContent {
16	@Component({	16	@Component({
17	selector: 'main',	17	selector: 'main',
18	template: '<div ng-view></div>',	18	template: '<div ng-view></div>',
19	- directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]	19	+ directives: [NoosferoArticleBlog, ArticleComponent, Boxes, Block]
20	})	20	})
21	@StateConfig([	21	@StateConfig([
22	{	22	{