Migrate MainBlock Component to ngForward

Michel Felipe
1 parent 0da8c631
Showing 5 changed files with 53 additions and 22 deletions Show diff stats
src/app/components/noosfero-blocks/main-block/main-block.component.js
src/app/components/noosfero-blocks/main-block/main-block.component.spec.ts
src/app/components/noosfero-blocks/main-block/main-block.component.ts
src/app/index.ts
src/app/main/main.component.ts
@@ -1,20 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoMainBlock', {
-      restrict: 'E',
-      templateUrl: 'app/components/noosfero-blocks/main-block/main-block.html',
-      bindings: {
-          block: '<',
-          owner: '<'
-      },
-      controller: MainBlockController
-    });
-
-  /** @ngInject */
-  function MainBlockController() {
-  }
-
-})();
@@ -0,0 +1,40 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component, StateConfig} from 'ng-forward';
+
+import {MainBlock} from './main-block.component';
+import {NoosferoApp} from '../../../index.module';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
+
+
+describe("Main 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("check if the main block has a tag with ui-view attribute", done => {
+
+        // Creating a container component (BlockContainerComponent) to include
+        // the component under test (Block)
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlock] })
+        class BlockContainerComponent {
+        }
+
+        // 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: MainBlock = fixture.componentInstance;
+
+            // assure the block object inside the Block matches
+            // the provided through the parent component
+            expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1)
+            done();
+        });
+    });
+
+});
@@ -0,0 +1,10 @@
+import {Component, Input} from 'ng-forward'
+import {Block} from '../block.component';
+
+@Component({
+    selector: 'noosfero-main-block',
+    templateUrl: 'app/components/noosfero-blocks/main-block/main-block.html'
+})
+export class MainBlock {
+
+}
@@ -44,7 +44,6 @@ NoosferoApp.addController(&quot;AuthController&quot;, AuthController);
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
-require("./components/noosfero-blocks/main-block/main-block.component.js");
 require("./components/noosfero-blocks/members-block/members-block.component.js");
 require("./components/noosfero-blocks/profile-image/profile-image.component.js");
 require("./components/noosfero-blocks/recent-documents/recent-documents.component.js");
@@ -12,6 +12,8 @@ import {LinkListBlock} from &quot;../components/noosfero-blocks/link-list/link-list.c
 import {AuthService} from "./../components/auth/auth_service";
 import {Session} from "./../components/auth/session";
+import {MainBlock} from "../components/noosfero-blocks/main-block/main-block.component";
+
 @Component({
     selector: 'main-content',
     templateUrl: "app/main/main.html",
@@ -24,7 +26,7 @@ export class MainContent {
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block, LinkListBlock],
+    directives: [NoosferoArticleBlog, ArticleView, Boxes, Block, LinkListBlock, MainBlock],
     providers: [AuthService, Session]
 })
 @StateConfig([
	@@ -1,20 +0,0 @@	@@ -1,20 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .component('noosferoMainBlock', {
7	- restrict: 'E',
8	- templateUrl: 'app/components/noosfero-blocks/main-block/main-block.html',
9	- bindings: {
10	- block: '<',
11	- owner: '<'
12	- },
13	- controller: MainBlockController
14	- });
15	-
16	- /** @ngInject */
17	- function MainBlockController() {
18	- }
19	-
20	-})();
@@ -0,0 +1,40 @@		@@ -0,0 +1,40 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Input, provide, Component, StateConfig} from 'ng-forward';
	3	+
	4	+import {MainBlock} from './main-block.component';
	5	+import {NoosferoApp} from '../../../index.module';
	6	+
	7	+const tcb = new TestComponentBuilder();
	8	+
	9	+const htmlTemplate: string = '<noosfero-main-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-main-block>';
	10	+
	11	+
	12	+describe("Main Block Component", () => {
	13	+
	14	+ // the karma preprocessor html2js transform the templates html into js files which put
	15	+ // the templates to the templateCache into the module templates
	16	+ // we need to load the module templates here as the template for the
	17	+ // component Block will be load on our tests
	18	+ beforeEach(angular.mock.module("templates"));
	19	+
	20	+ it("check if the main block has a tag with ui-view attribute", done => {
	21	+
	22	+ // Creating a container component (BlockContainerComponent) to include
	23	+ // the component under test (Block)
	24	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [MainBlock] })
	25	+ class BlockContainerComponent {
	26	+ }
	27	+
	28	+ // uses the TestComponentBuilder instance to initialize the component
	29	+ tcb.createAsync(BlockContainerComponent).then(fixture => {
	30	+ // and here we can inspect and run the test assertions
	31	+ //let myComponent: MainBlock = fixture.componentInstance;
	32	+
	33	+ // assure the block object inside the Block matches
	34	+ // the provided through the parent component
	35	+ expect(fixture.debugElement.queryAll('[ui-view="mainBlockContent"]').length).toEqual(1)
	36	+ done();
	37	+ });
	38	+ });
	39	+
	40	+});
@@ -0,0 +1,10 @@		@@ -0,0 +1,10 @@
	1	+import {Component, Input} from 'ng-forward'
	2	+import {Block} from '../block.component';
	3	+
	4	+@Component({
	5	+ selector: 'noosfero-main-block',
	6	+ templateUrl: 'app/components/noosfero-blocks/main-block/main-block.html'
	7	+})
	8	+export class MainBlock {
	9	+
	10	+}