Added specs to boxes component and refactory your class

Michel Felipe
1 parent 7b837dbc
Showing 2 changed files with 74 additions and 4 deletions Show diff stats
src/app/components/noosfero-boxes/boxes.component.spec.ts
src/app/components/noosfero-boxes/boxes.component.ts
@@ -0,0 +1,69 @@
+import {providers} from 'ng-forward/cjs/testing/providers';
+
+import {Input, Component} from 'ng-forward';
+
+import {Box, Profile} from "../../models/interfaces";
+import {Boxes} from './boxes.component';
+
+import {
+    createComponentFromClass,
+    quickCreateComponent,
+    provideEmptyObjects,
+    createProviderToValue,
+    getAngularServiceFactory,
+    provideFilters
+} from "../../../spec/helpers";
+
+// this htmlTemplate will be re-used between the container components in this spec file
+const htmlTemplate: string = '<noosfero-boxes [boxes]="ctrl.boxes" [owner]="ctrl.profile"></noosfero-blog>';
+
+
+describe("Boxes Component", () => {
+
+    beforeEach(() => {
+        angular.mock.module("templates")
+    })
+
+    @Component({
+        selector: 'test-container-component',
+        template: htmlTemplate,
+        directives: [Boxes],
+        providers: []
+    })
+    class BoxesContainerComponent {
+        boxes: Box[] = [
+            { id: 1, position: 1 },
+            { id: 2, position: 2 }
+        ];
+
+        owner: Profile = {
+            id: 1,
+            identifier: 'profile-name',
+            type: 'Person'
+        };
+    }
+
+    it("renders boxes into a container", (done: Function) => {
+        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
+
+            var boxesHtml = fixture.debugElement;
+            expect(boxesHtml.query('div.col-md-7').length).toEqual(1);
+            expect(boxesHtml.query('div.col-md-2-5').length).toEqual(1);
+
+            done();
+        });
+    });
+
+    it("check the boxes order", (done: Function) => {
+        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
+
+            let boxesComponent: Boxes = fixture.debugElement.componentViewChildren[0].componentInstance;
+            let boxesContainer: BoxesContainerComponent = fixture.componentInstance;
+
+            expect(boxesComponent.boxesOrder(boxesContainer.boxes[0])).toEqual(1);
+            expect(boxesComponent.boxesOrder(boxesContainer.boxes[1])).toEqual(0);
+
+            done();
+        });
+    });
+});
-import { Input, Inject, Component } from 'ng-forward';
-import {Box} from "./../../models/interfaces";
+import {Input, Inject, Component} from 'ng-forward';
+import {Box, Profile} from "./../../models/interfaces";
+
 @Component({
     selector: "noosfero-boxes",
     templateUrl: "app/components/noosfero-boxes/boxes.html"
 })
 export class Boxes {
  
-    @Input() boxes: any;
-    @Input() owner: any;
+    @Input() boxes: Box[];
+    @Input() owner: Profile;
  
     boxesOrder(box: Box) {
         if (box.position === 2) return 0;
...	...	@@ -0,0 +1,69 @@
	1	+import {providers} from 'ng-forward/cjs/testing/providers';
	2	+
	3	+import {Input, Component} from 'ng-forward';
	4	+
	5	+import {Box, Profile} from "../../models/interfaces";
	6	+import {Boxes} from './boxes.component';
	7	+
	8	+import {
	9	+ createComponentFromClass,
	10	+ quickCreateComponent,
	11	+ provideEmptyObjects,
	12	+ createProviderToValue,
	13	+ getAngularServiceFactory,
	14	+ provideFilters
	15	+} from "../../../spec/helpers";
	16	+
	17	+// this htmlTemplate will be re-used between the container components in this spec file
	18	+const htmlTemplate: string = '<noosfero-boxes [boxes]="ctrl.boxes" [owner]="ctrl.profile"></noosfero-blog>';
	19	+
	20	+
	21	+describe("Boxes Component", () => {
	22	+
	23	+ beforeEach(() => {
	24	+ angular.mock.module("templates")
	25	+ })
	26	+
	27	+ @Component({
	28	+ selector: 'test-container-component',
	29	+ template: htmlTemplate,
	30	+ directives: [Boxes],
	31	+ providers: []
	32	+ })
	33	+ class BoxesContainerComponent {
	34	+ boxes: Box[] = [
	35	+ { id: 1, position: 1 },
	36	+ { id: 2, position: 2 }
	37	+ ];
	38	+
	39	+ owner: Profile = {
	40	+ id: 1,
	41	+ identifier: 'profile-name',
	42	+ type: 'Person'
	43	+ };
	44	+ }
	45	+
	46	+ it("renders boxes into a container", (done: Function) => {
	47	+ createComponentFromClass(BoxesContainerComponent).then((fixture) => {
	48	+
	49	+ var boxesHtml = fixture.debugElement;
	50	+ expect(boxesHtml.query('div.col-md-7').length).toEqual(1);
	51	+ expect(boxesHtml.query('div.col-md-2-5').length).toEqual(1);
	52	+
	53	+ done();
	54	+ });
	55	+ });
	56	+
	57	+ it("check the boxes order", (done: Function) => {
	58	+ createComponentFromClass(BoxesContainerComponent).then((fixture) => {
	59	+
	60	+ let boxesComponent: Boxes = fixture.debugElement.componentViewChildren[0].componentInstance;
	61	+ let boxesContainer: BoxesContainerComponent = fixture.componentInstance;
	62	+
	63	+ expect(boxesComponent.boxesOrder(boxesContainer.boxes[0])).toEqual(1);
	64	+ expect(boxesComponent.boxesOrder(boxesContainer.boxes[1])).toEqual(0);
	65	+
	66	+ done();
	67	+ });
	68	+ });
	69	+});
...	...
1		-import { Input, Inject, Component } from 'ng-forward';
2		-import {Box} from "./../../models/interfaces";
	1	+import {Input, Inject, Component} from 'ng-forward';
	2	+import {Box, Profile} from "./../../models/interfaces";
	3	+
3	4	@Component({
4	5	selector: "noosfero-boxes",
5	6	templateUrl: "app/components/noosfero-boxes/boxes.html"
6	7	})
7	8	export class Boxes {
8	9
9		- @Input() boxes: any;
10		- @Input() owner: any;
	10	+ @Input() boxes: Box[];
	11	+ @Input() owner: Profile;
11	12
12	13	boxesOrder(box: Box) {
13	14	if (box.position === 2) return 0;
...	...