Unit Testing of Angular 2 Component using Jasmine

I am trying to unit test the Angular 2 Component using Jasmine. My Component is as follows

import { Component } from '@angular/core'; import {Employee} from './Employee';  @Component({     selector: 'emp-data',     templateUrl: './app/app.html' }) export class EmployeeComponent {     emp:Employee;     private name: string = 'John';     constructor() {         this.emp  =new Employee();      }       getTax():number{          console.log('sal' + this.emp.salary + ' desig ' + this.emp.designation);           if(this.emp.designation=='Manager'){              this.emp.tax = this.emp.salary*0.3;          }          if(this.emp.designation=='Lead'){              this.emp.tax = this.emp.salary*0.25;          }          console.log("Tax " + this.emp.tax);           return  this.emp.tax;      }      printMessage():string{             return `Hello ${this.name}`;      };   } 

The Spec file is as follows

import  {EmployeeComponent} from './appcomponent'; describe('EmployeeComponent',()=>{     beforeEach(()=>{         this.app = new EmployeeComponent();     });     it('should have name property', function() {     expect(this.app.name).toBe('Mahesh');   });    it('should say hello with name property', function() {     expect(this.app.printMessage()).toBe('Hello Mahesh');   }); });     

The Tester.html file is as follows

<!DOCTYPE html> <html> <head>   <meta http-equiv="content-type" content="text/html;charset=utf-8">   <title>Ng App Unit Tests</title>   <link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">   <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>   <script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>   <script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>   <script src="../node_modules/es6-shim/es6-shim.min.js"></script>     <script src="../node_modules/systemjs/dist/system-polyfills.js"></script>      <script src="../node_modules/es6-shim/es6-shim.min.js"></script>     <script src="../node_modules/reflect-metadata/Reflect.js"></script>     <script src="../node_modules/zone.js/dist/zone.js"></script> <script src="../node_modules/@angular/core/testing/testing.js"></script>  <script src="systemjs.config.js"></script>   <script src="../app/appcomponent.js"></script> <script src="../app/component.spec.js"></script> </head>  <body>   <script src="node_modules/systemjs/dist/system.src.js"></script>    <script>      System.config({       packages: {         'app': {defaultExtension: 'js'}       }     });       System.import('app/component.spec')       .then(window.onload)       .catch(console.error.bind(console));   </script> </body>  </html> 

The Package.json is as follows

{   "name": "ng2-component-testing",   "version": "1.0.0",   "scripts": {     "start": "concurrently \"tsc -w\" \"node server.js\"",     "tsc": "tsc",     "tsc:w": "tsc -w",     "lite": "lite-server",     "typings": "typings",     "postinstall": "typings install",     "testLite": "live-server --open=unit-tests.html",     "lite-server-test": "lite-server --config=liteserver-test-config.json",     "test": "tsc && concurrently \"npm run tsc:w\" \"npm run lite-server-test\" "    },   "license": "ISC",   "dependencies": {     "@angular/common": "2.0.0-rc.1",     "@angular/compiler": "2.0.0-rc.1",     "@angular/core": "2.0.0-rc.1",     "@angular/http": "2.0.0-rc.1",     "@angular/platform-browser": "2.0.0-rc.1",     "@angular/platform-browser-dynamic": "2.0.0-rc.1",     "@angular/router": "3.0.0-alpha.3",     "bootstrap": "^3.3.6",     "es6-shim": "^0.35.1",     "jasmine-core": "~2.4.1",     "koa": "^1.2.0",     "koa-static": "^2.0.0",     "livereload": "^0.4.1",     "reflect-metadata": "^0.1.3",     "rxjs": "5.0.0-beta.6",     "systemjs": "^0.19.24",     "zone.js": "0.6.6"   },   "devDependencies": {     "concurrently": "^2.0.0",     "jasmine-core": "2.4.1",     "lite-server": "^2.1.0",     "node-gyp": "^3.3.1",     "typescript": "^1.8.7",     "typings": "^0.7.5"   } } 

When I run the test, the following result is displayed

Unit Testing of Angular 2 Component using Jasmine

The following error messages are displayed in Console of the browser

Unit Testing of Angular 2 Component using Jasmine

I have tries various solutions on Stackoverflow but not successful in it.

So can anybody help me on this? Thanks in advance.


Category: unit testing Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.261 (s). 12 q(s)