Merge branch 'component-test-improvements' into 'master'

Refactory - Component test improvements Some improvements were made into `ComponentTestHelper` class and `helpers.ts` file. See the list below: **ComponentTestHelper** * Added the **generics** type into this class and pass it to `this.component` attribute. * Remove the unused temp class to `AngularServiceFactory` and unused `getEvents()` method * Added some type casts See merge request !9

Merge branch 'component-test-improvements' into 'master'
Refactory - Component test improvements Some improvements were made into `ComponentTestHelper` class and `helpers.ts` file. See the list below: **ComponentTestHelper** * Added the **generics** type into this class and pass it to `this.component` attribute. * Remove the unused temp class to `AngularServiceFactory` and unused `getEvents()` method * Added some type casts See merge request !9
Carlos Purificação
2 parents 45e13641 fc86b9f5
Showing 2 changed files with 26 additions and 21 deletions Show diff stats
src/spec/component-test-helper.ts
src/spec/helpers.ts
@@ -6,12 +6,12 @@ import { ComponentFixture } from &#39;ng-forward/cjs/testing/test-component-builder&#39;
 /**
  * @ngdoc object
  * @name spec.ComponentTestHelper
- * @description 
- * 
+ * @description
+ *
  * Helper class for creating tests. It encapsulates the TestComponentBuilder initialization,
  * allowing the test to be DRY. To use, one must declare a beforeEach function in the
  * test, and inside construct this object like:
- * 
+ *
  * <pre>
  * let helper = let helper : ComponentTestHelper;
  * beforeEach( (done) => {
@@ -19,7 +19,7 @@ import { ComponentFixture } from &#39;ng-forward/cjs/testing/test-component-builder&#39;
  * }
  * </pre>
  */
-export class ComponentTestHelper {
+export class ComponentTestHelper<T extends any> {
  
     /**
      * @ngdoc property
@@ -35,7 +35,7 @@ export class ComponentTestHelper {
      * @propertyOf spec.ComponentTestHelper
      * @description
      *  The NgForward TestComponentBuilder
-     */    
+     */
     tcb: TestComponentBuilder;
     /**
      * @ngdoc property
@@ -43,8 +43,8 @@ export class ComponentTestHelper {
      * @propertyOf spec.ComponentTestHelper
      * @description
      *  The parsed component instance
-     */    
-    component: any;
+     */
+    component: T;
     /**
      * @ngdoc property
      * @name debugElement
@@ -52,7 +52,7 @@ export class ComponentTestHelper {
      * @description
      *  The debugElement representing a JQuery element attached to the component
      * on mock page.
-     */    
+     */
     debugElement: INgForwardJQuery;
  
     /**
@@ -62,7 +62,7 @@ export class ComponentTestHelper {
      * @description
      *  The constructor for this component.
      */
-    constructor(mockComponent: any, done: Function) {
+    constructor(mockComponent: ngClass, done: Function) {
         this.mockComponent = mockComponent;
         this.tcb = new TestComponentBuilder();
         this.init(done);
@@ -82,7 +82,12 @@ export class ComponentTestHelper {
             fixture.detectChanges();
             // The main debug element
             this.debugElement = fixture.debugElement;
-            this.component = this.debugElement.componentViewChildren[0].componentInstance;
+            this.component = <T>this.debugElement.componentViewChildren[0].componentInstance;
+            let mockObj = new this.mockComponent();
+            Object.keys(mockObj).forEach((key: any) => {
+                (<any>this.component)[key] = <any>mockObj[key];
+            });
+
         }).then(() => {
             // Force the resolution of components and sync
             done();
@@ -126,8 +131,8 @@ export class ComponentTestHelper {
  
 export function createClass({
     template = '<div></div>',
-    directives = [],
-    providers = [],
+    directives = <any[]>[],
+    providers = <any[]>[],
     properties = <any>{}
 }): any {
     @Component({ selector: 'component-test-helper-container', template, directives, providers })
@@ -140,4 +145,3 @@ export function createClass({
     }
     return Test;
 }
-
  
 import {ngClass, TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
 import {providers} from  'ng-forward/cjs/testing/providers';
-import {Injectable, Inject, Provider, Input, provide, Component} from 'ng-forward';
+import {Injectable, Inject, Provider, Input, Output, EventEmitter, provide, Component} from 'ng-forward';
  
  
 export var ngforward = {
@@ -19,8 +19,8 @@ export interface ComponentFixtureTemplate {
 export let tcb: TestComponentBuilder = new TestComponentBuilder();
  
 export function quickCreateComponent({
-    providers = [],
-    directives = [],
+    providers = <any[]>[],
+    directives = <any[]>[],
     template = '<div></div>',
     properties = <any>{},
 }): Promise<ComponentFixture> {
@@ -62,7 +62,6 @@ export function provideFilters(...filters: string[]) {
     return providers;
 }
  
-
 @Component({
     selector: 'helper_get_angular_service',
     template: 'not-used',
@@ -78,9 +77,11 @@ class AngularServiceHookComponent {
  * This helper class allows get angular services to be used in integration tests
  * i.e: '$http', '$q', '$location', etc...
  */
-class AngularServiceFactory {
+export class AngularServiceFactory {
+
+    private fixtureComponentHookPoint: ComponentFixture;
  
-    constructor(private fixtureComponentHookPoint: ComponentFixture) {
+    constructor() {
         this.fixtureComponentHookPoint = (<any>tcb)["create"](AngularServiceHookComponent);
     }
  
@@ -97,8 +98,8 @@ class AngularServiceFactory {
     }
 }
  
-export function getAngularServiceFactory(fixture: ComponentFixture) {
-    return new AngularServiceFactory(fixture);
+export function getAngularServiceFactory() {
+    return new AngularServiceFactory();
 }
  
 export {mocks} from "./mocks";
...	...	@@ -6,12 +6,12 @@ import { ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder'
6	6	/**
7	7	* @ngdoc object
8	8	* @name spec.ComponentTestHelper
9		- * @description
10		- *
	9	+ * @description
	10	+ *
11	11	* Helper class for creating tests. It encapsulates the TestComponentBuilder initialization,
12	12	* allowing the test to be DRY. To use, one must declare a beforeEach function in the
13	13	* test, and inside construct this object like:
14		- *
	14	+ *
15	15	* <pre>
16	16	* let helper = let helper : ComponentTestHelper;
17	17	* beforeEach( (done) => {
...	...	@@ -19,7 +19,7 @@ import { ComponentFixture } from 'ng-forward/cjs/testing/test-component-builder'
19	19	* }
20	20	* </pre>
21	21	*/
22		-export class ComponentTestHelper {
	22	+export class ComponentTestHelper<T extends any> {
23	23
24	24	/**
25	25	* @ngdoc property
...	...	@@ -35,7 +35,7 @@ export class ComponentTestHelper {
35	35	* @propertyOf spec.ComponentTestHelper
36	36	* @description
37	37	* The NgForward TestComponentBuilder
38		- */
	38	+ */
39	39	tcb: TestComponentBuilder;
40	40	/**
41	41	* @ngdoc property
...	...	@@ -43,8 +43,8 @@ export class ComponentTestHelper {
43	43	* @propertyOf spec.ComponentTestHelper
44	44	* @description
45	45	* The parsed component instance
46		- */
47		- component: any;
	46	+ */
	47	+ component: T;
48	48	/**
49	49	* @ngdoc property
50	50	* @name debugElement
...	...	@@ -52,7 +52,7 @@ export class ComponentTestHelper {
52	52	* @description
53	53	* The debugElement representing a JQuery element attached to the component
54	54	* on mock page.
55		- */
	55	+ */
56	56	debugElement: INgForwardJQuery;
57	57
58	58	/**
...	...	@@ -62,7 +62,7 @@ export class ComponentTestHelper {
62	62	* @description
63	63	* The constructor for this component.
64	64	*/
65		- constructor(mockComponent: any, done: Function) {
	65	+ constructor(mockComponent: ngClass, done: Function) {
66	66	this.mockComponent = mockComponent;
67	67	this.tcb = new TestComponentBuilder();
68	68	this.init(done);
...	...	@@ -82,7 +82,12 @@ export class ComponentTestHelper {
82	82	fixture.detectChanges();
83	83	// The main debug element
84	84	this.debugElement = fixture.debugElement;
85		- this.component = this.debugElement.componentViewChildren[0].componentInstance;
	85	+ this.component = <T>this.debugElement.componentViewChildren[0].componentInstance;
	86	+ let mockObj = new this.mockComponent();
	87	+ Object.keys(mockObj).forEach((key: any) => {
	88	+ (<any>this.component)[key] = <any>mockObj[key];
	89	+ });
	90	+
86	91	}).then(() => {
87	92	// Force the resolution of components and sync
88	93	done();
...	...	@@ -126,8 +131,8 @@ export class ComponentTestHelper {
126	131
127	132	export function createClass({
128	133	template = '<div></div>',
129		- directives = [],
130		- providers = [],
	134	+ directives = <any[]>[],
	135	+ providers = <any[]>[],
131	136	properties = <any>{}
132	137	}): any {
133	138	@Component({ selector: 'component-test-helper-container', template, directives, providers })
...	...	@@ -140,4 +145,3 @@ export function createClass({
140	145	}
141	146	return Test;
142	147	}
143		-
...	...
1	1
2	2	import {ngClass, TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder';
3	3	import {providers} from 'ng-forward/cjs/testing/providers';
4		-import {Injectable, Inject, Provider, Input, provide, Component} from 'ng-forward';
	4	+import {Injectable, Inject, Provider, Input, Output, EventEmitter, provide, Component} from 'ng-forward';
5	5
6	6
7	7	export var ngforward = {
...	...	@@ -19,8 +19,8 @@ export interface ComponentFixtureTemplate {
19	19	export let tcb: TestComponentBuilder = new TestComponentBuilder();
20	20
21	21	export function quickCreateComponent({
22		- providers = [],
23		- directives = [],
	22	+ providers = <any[]>[],
	23	+ directives = <any[]>[],
24	24	template = '<div></div>',
25	25	properties = <any>{},
26	26	}): Promise<ComponentFixture> {
...	...	@@ -62,7 +62,6 @@ export function provideFilters(...filters: string[]) {
62	62	return providers;
63	63	}
64	64
65		-
66	65	@Component({
67	66	selector: 'helper_get_angular_service',
68	67	template: 'not-used',
...	...	@@ -78,9 +77,11 @@ class AngularServiceHookComponent {
78	77	* This helper class allows get angular services to be used in integration tests
79	78	* i.e: '$http', '$q', '$location', etc...
80	79	*/
81		-class AngularServiceFactory {
	80	+export class AngularServiceFactory {
	81	+
	82	+ private fixtureComponentHookPoint: ComponentFixture;
82	83
83		- constructor(private fixtureComponentHookPoint: ComponentFixture) {
	84	+ constructor() {
84	85	this.fixtureComponentHookPoint = (<any>tcb)["create"](AngularServiceHookComponent);
85	86	}
86	87
...	...	@@ -97,8 +98,8 @@ class AngularServiceFactory {
97	98	}
98	99	}
99	100
100		-export function getAngularServiceFactory(fixture: ComponentFixture) {
101		- return new AngularServiceFactory(fixture);
	101	+export function getAngularServiceFactory() {
	102	+ return new AngularServiceFactory();
102	103	}
103	104
104	105	export {mocks} from "./mocks";
...	...