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');
});
});
<!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 enter image description here
The following error messages are displayed in Console of the browser
I have tries various solutions on Stackoverflow but not successful in it.
So can anybody help me on this? Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire