Merge pull request #23 from recurship/rc5-tests-fixes

rc5 upgrade - tests fixes and update typings

Author: mashhoodr

README.md

@@ -4,7 +4,7 @@ A small playground using Angular2 RC1 which demonstrates a way to structure an a
 
 ## Functionality
 
-- [x] **RC5 ready!** [Tests still need fixing :(]
+- [x] **RC5 ready!** 
 - [x] Dynamic rendering and customising for form fields
 - [x] Support for Text, Select, Radio and Checkboxes
 - [x] Large form broken over multiple components

angular-cli-build.js

@@ -16,7 +16,6 @@ module.exports = function(defaults) {
       'reflect-metadata/**/*.+(ts|js|js.map)',
       'rxjs/**/*.+(js|js.map)',
       '@angular/**/*.+(js|js.map)',
-      'angular2-ie9-shims/*.js',
 	    'ng2-bootstrap/**/*.*',
       'moment/**/*.js'
     ]

config/karma.conf.js

@@ -7,7 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-chrome-launcher')
+      require('karma-phantomjs-launcher')
     ],
     customLaunchers: {
       // chrome setup for travis CI using chromium
@@ -39,7 +39,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['PhantomJS'],
     singleRun: false
   });
 };

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('angular2-multicomponent-form App Tests: ', function() {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying \'Angular2 Multi Component Dynamic Form demo\'', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Angular2 Multi Component Dynamic Form demo');
+  });
+});

e2e/app.e2e.ts

@@ -1,11 +1,22 @@
-export class Angular2MulticomponentFormPage {
-  
-  navigateTo(route: string = '/') {
-    return browser.get(route);
+export class AppPage {
+  waitTime: number = 3000;
+
+  navigateTo(route: string = '/#/') {
+    browser.get(route);
+    this.waitForPageToLoad();
+    return;
   }
 
   getParagraphText() {
-    return element(by.css('angular2-multicomponent-form-app h3')).getText();
+    return element(by.css('app-root h3')).getText();
+  }
+
+  waitForPageToLoad() {
+    browser.wait(() => {
+      return element(by.css('app-root')).getText().then((text) => {
+        return text !== 'Loading...';
+      });
+    }, this.waitTime);
   }
 
 }

e2e/app.po.ts

@@ -1,15 +1,29 @@
-export class AppStepFormPage {
-  step: string;
-  waitTime: number = 3000;
+import { AppPage } from './app.po';
 
+export class AppStepPage extends AppPage {
+  step: string;
+  
   constructor(step: string) {
+    super();
     this.step = step;
   }
 
+  /**
+   * OVERRIDE FUNCTIONS
+   */
+
   navigateTo() {
-    return browser.get('/' + this.step);
+    super.navigateTo('/#/' + this.step);
   }
 
+  getParagraphText() {
+    return element(by.css('app-' + this.step + ' p')).getText();
+  }
+
+  /**
+   * NEW FUNCTIONS
+   */
+
   waitForField(field: string, text: string) {
     browser.wait(() => {
       return this.getErrorTextForField(field).then((errTxt) => {
@@ -34,17 +48,13 @@ export class AppStepFormPage {
     return this.hasClass('p#sidebar-'+ this.step + '-status', 'text-success');
   }  
 
-  // form
+  // Form
 
   resetFields(fields: Array<string>) {
     fields.forEach((fieldname) => {
       this.getInputField(fieldname).clear();
     });
   }
-  
-  getParagraphText() {
-    return element(by.css('app-' + this.step + ' p')).getText();
-  }
 
   getErrorForField(fieldId: string) {
     return element(by.css('#' + fieldId + '_error_block em.text-danger'));
@@ -83,7 +93,7 @@ export class AppStepFormPage {
 
   }
 
-  /* Tooltip */
+  // Tooltip
 
   clickOnField(fieldId: string) {
     this.getInputField(fieldId).click();

e2e/app.step.po.ts

@@ -1,18 +1,20 @@
-import { AppStepFormPage } from './app.step.po';
+import { AppStepPage } from './app.step.po';
 
 describe('angular2-multicomponent-form App Step1 Tests: ', function() {
-  let page: AppStepFormPage;
+  let page: AppStepPage;
 
   beforeEach(() => {
-    page = new AppStepFormPage('step1');
+    page = new AppStepPage('step1');
     page.navigateTo();
     // page.resetFields(['input_name', 'input_age_user']);
   });
 
+  /*
   it('should display message saying `This is step1.`', (done) => {
     expect(page.getParagraphText()).toEqual('This is step1.');
     done();
   });
+  */
 
   it('should change input Area by changing input Region', (done) => {
     // default values set
@@ -45,17 +47,17 @@ describe('angular2-multicomponent-form App Step1 Tests: ', function() {
 
   // step1 form validation tests!
 
-  it('should display error message `Required..` on input field `input_name` when empty', (done) => {
+  it('should display error message `Required.` on input field `input_name` when empty', (done) => {
     page.clearInputField('input_name');
-    expect(page.getErrorTextForField('input_name')).toEqual('Required..');
+    expect(page.getErrorTextForField('input_name')).toEqual('Required.');
     expect(page.checkIfFieldHasError('input_name')).toBeTruthy();
     done();
   });
 
-  it('should perform validation on field as input value changes', (done) => {
+  it('should perform validation on field \'input_name\'as input value changes', (done) => {
     page.setInputFieldValue('input_name', 'test');
     expect(page.checkIfFieldHasError('input_name')).toBeTruthy();
-    expect(page.getErrorTextForField('input_name')).toEqual('Minimum length should be 5');
+    expect(page.getErrorTextForField('input_name')).toEqual('Name should be atleast 5 characters.');
     done();
   });
 

e2e/app.step1.e2e.ts renamed to e2e/app.step1.e2e-spec.ts

@@ -1,18 +1,20 @@
-import { AppStepFormPage } from './app.step.po';
+import { AppStepPage } from './app.step.po';
 
 describe('angular2-multicomponent-form App Step2 Tests: ', function() {
-  let page: AppStepFormPage;
+  let page: AppStepPage;
 
   beforeEach(() => {
-    page = new AppStepFormPage('step2');
+    page = new AppStepPage('step2');
     page.navigateTo();
     // page.resetFields(['input_dependants', 'input_number_of_children', 'input_savings']);
   });
 
+  /*
   it('should display message saying `This is step2.`', (done) => {
     expect(page.getParagraphText()).toEqual('This is step2.');
     done();
   });
+  */
 
   it('should create and show fields in step2 depend on field value in step1 i.e., `input_number_of_children` field.', (done) => {
     page.clickOnField('step1-button'); // step1
@@ -22,32 +24,14 @@ describe('angular2-multicomponent-form App Step2 Tests: ', function() {
     done();
   });
 
-  // Tooltip tests
-  
-  it('should have/display tooltip with text `Enter number of dependants` when click/hover on field `input_dependants`', (done) => {
-    page.clickOnField('input_dependants');
-    expect(page.getFieldTooltip('input_dependants').isPresent()).toBeTruthy();
-    expect(page.getFieldTooltipText('input_dependants')).toEqual('Enter number of dependants');
-    done();
-  });
-
-  // step2 form validation tests!
-
-  it('should display error message `Required..` on input field `input_savings` when empty', (done) => {
-    page.clearInputField('input_savings');
-    expect(page.getErrorTextForField('input_savings')).toEqual('Required..');
-    expect(page.checkIfFieldHasError('input_savings')).toBeTruthy();
-    done();
-  });
-
-  it('should perform validation on field as input value changes', (done) => {
+  it('should display error message \'The savings needs to be a number greater than zero.\' on input field `input_savings` when 0', (done) => {
     page.setInputFieldValue('input_savings', '0');
     expect(page.checkIfFieldHasError('input_savings')).toBeTruthy();
     expect(page.getErrorTextForField('input_savings')).toEqual('The savings needs to be a number greater than zero.');
     done();
   });
 
-  it('should not display error message on `input_savings` field if validation passes.', (done) => {
+  it('should not display error message on `input_savings` field if value greater than 0', (done) => {
     page.setInputFieldValue('input_savings', '50');
     expect(page.checkIfFieldHasError('input_savings')).toBeFalsy();
     done();

e2e/app.step2.e2e.ts renamed to e2e/app.step2.e2e-spec.ts

@@ -1 +1 @@
-/// <reference path="../typings/main.d.ts" />
+/// <reference path="../typings/index.d.ts" />

e2e/typings.d.ts

@@ -21,15 +21,14 @@
     "@angular/platform-browser": "2.0.0-rc.5",
     "@angular/platform-browser-dynamic": "2.0.0-rc.5",
     "@angular/router": "3.0.0-rc.1",
-    
+
     "systemjs": "0.19.27",
     "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
-    
     "es6-shim": "0.35.1",
-    "angular2-ie9-shims": "0.0.1",
+    
     "moment": "^2.13.0",
     "ng2-bootstrap": "^1.0.24"
   },
@@ -40,12 +39,13 @@
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
     "karma": "0.13.22",
-    "karma-chrome-launcher": "0.2.3",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "phantomjs-prebuilt": "^2.1.7",
     "karma-jasmine": "0.3.8",
     "protractor": "3.3.0",
     "ts-node": "0.5.5",
     "tslint": "3.11.0",
     "typescript": "1.8.10",
-    "typings": "0.8.1"
+    "typings": "^1.3.2"
   }
 }

package.json

@@ -1,49 +1,25 @@
-/*
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { Step1Component } from './step1.component';
-import { FormManager } from '../shared/form-manager';
-import { FormFieldService } from '../shared/form-field/';
+/* tslint:disable:no-unused-variable */
 
-describe('Component: Step1', () => {
-  let builder: TestComponentBuilder;
+import { addProviders, async, inject } from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
 
-  beforeEachProviders(() => [Step1Component, FormManager, FormFieldService]);
-  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
-    builder = tcb;
-  }));
+import { Step1Component } from './step1.component';
+import { FormManager, FormFieldService } from '../shared';
+
+describe('Component: Step1: ', () => {
+  
+  beforeEach(() => {
+    addProviders([
+      Step1Component,
+      FormBuilder, 
+      FormManager, 
+      FormFieldService 
+    ]);
+  });
 
   it('should inject the component', inject([Step1Component],
       (component: Step1Component) => {
     expect(component).toBeTruthy();
   }));
 
-  it('should create the component', inject([], () => {
-    return builder.createAsync(Step1ComponentTestController)
-      .then((fixture: ComponentFixture<any>) => {
-        let query = fixture.debugElement.query(By.directive(Step1Component));
-        expect(query).toBeTruthy();
-        expect(query.componentInstance).toBeTruthy();
-      });
-  }));
-});
-
-@Component({
-  selector: 'test',
-  template: `
-    <app-step1></app-step1>
-  `,
-  directives: [Step1Component]
-})
-class Step1ComponentTestController {
-}
-*/
+});