Add tests for block component

Victor Costa
1 parent bc8f0242
Showing 2 changed files with 91 additions and 1 deletions Show diff stats
src/app/components/noosfero-blocks/block.component.ts
src/app/components/noosfero-blocks/block.directive.spec.ts
@@ -11,7 +11,7 @@ export class Block {
     @Input() owner: any;
     ngOnInit() {
-        let blockName = this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        let blockName = this.block.type ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
         this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' block="ctrl.block" owner="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
     }
@@ -0,0 +1,90 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Input, provide, Component} from 'ng-forward';
+
+import {Block} from './block.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block>';
+
+
+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: [Block] })
+        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: Block = 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: "<h1>My Custom Block</h1>" })
+        class CustomBlock {
+            @Input() block: any;
+            @Input() owner: any;
+        }
+
+        @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block, 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: [Block] })
+        class CustomBlockType {
+            block = { type: null };
+            owner = { 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();
+            });
+    });
+
+});
	@@ -11,7 +11,7 @@ export class Block {		@@ -11,7 +11,7 @@ export class Block {
11	@Input() owner: any;	11	@Input() owner: any;
12		12
13	ngOnInit() {	13	ngOnInit() {
14	- let blockName = this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();	14	+ let blockName = this.block.type ? this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : "default-block";
15	this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' block="ctrl.block" owner="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));	15	this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' block="ctrl.block" owner="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
16	}	16	}
17		17
@@ -0,0 +1,90 @@		@@ -0,0 +1,90 @@
	1	+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
	2	+import {Input, provide, Component} from 'ng-forward';
	3	+
	4	+import {Block} from './block.component';
	5	+
	6	+const tcb = new TestComponentBuilder();
	7	+
	8	+const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-block>';
	9	+
	10	+
	11	+describe("Block Component", () => {
	12	+
	13	+ // the karma preprocessor html2js transform the templates html into js files which put
	14	+ // the templates to the templateCache into the module templates
	15	+ // we need to load the module templates here as the template for the
	16	+ // component Block will be load on our tests
	17	+ beforeEach(angular.mock.module("templates"));
	18	+
	19	+ it("receives the block and the owner as inputs", done => {
	20	+
	21	+ // Creating a container component (BlockContainerComponent) to include
	22	+ // the component under test (Block)
	23	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block] })
	24	+ class BlockContainerComponent {
	25	+ block = { type: 'Block' };
	26	+ owner = { name: 'profile-name' };
	27	+ constructor() {
	28	+ }
	29	+ }
	30	+
	31	+ // uses the TestComponentBuilder instance to initialize the component
	32	+ tcb
	33	+ .createAsync(BlockContainerComponent).then(fixture => {
	34	+ // and here we can inspect and run the test assertions
	35	+ let myComponent: Block = fixture.componentInstance;
	36	+
	37	+ // assure the block object inside the Block matches
	38	+ // the provided through the parent component
	39	+ expect(myComponent.block.type).toEqual("Block");
	40	+ expect(myComponent.owner.name).toEqual("profile-name");
	41	+ done();
	42	+ });
	43	+ });
	44	+
	45	+
	46	+ it("renders a component which matches to the block type", done => {
	47	+ // CustomBlock component created to check if it will be used
	48	+ // when a block with type 'CustomBlock' is provided to the noosfero-block (Block)
	49	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
	50	+ @Component({ selector: 'noosfero-custom-block', template: "<h1>My Custom Block</h1>" })
	51	+ class CustomBlock {
	52	+ @Input() block: any;
	53	+ @Input() owner: any;
	54	+ }
	55	+
	56	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block, CustomBlock] })
	57	+ class CustomBlockType {
	58	+ block = { type: 'CustomBlock' };
	59	+ owner = { name: 'profile-name' };
	60	+ constructor() {
	61	+ }
	62	+ }
	63	+ tcb
	64	+ .createAsync(CustomBlockType).then(fixture => {
	65	+ let myComponent: CustomBlockType = fixture.componentInstance;
	66	+ expect(myComponent.block.type).toEqual("CustomBlock");
	67	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("My Custom Block");
	68	+ done();
	69	+ });
	70	+ });
	71	+
	72	+
	73	+ it("renders the default block when hasn't defined a block type", done => {
	74	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [Block] })
	75	+ class CustomBlockType {
	76	+ block = { type: null };
	77	+ owner = { name: 'profile-name' };
	78	+ constructor() {
	79	+ }
	80	+ }
	81	+ tcb
	82	+ .createAsync(CustomBlockType).then(fixture => {
	83	+ let myComponent: CustomBlockType = fixture.componentInstance;
	84	+ expect(myComponent.block.type).toBeNull();
	85	+ expect(!!fixture.debugElement.nativeElement.querySelector("noosfero-default-block")).toBeTruthy();
	86	+ done();
	87	+ });
	88	+ });
	89	+
	90	+});