Question

我正在尝试使用Jasmine对Angular 2组件进行单元测试。我的组件如下

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}`;
     };


}

Spec文件如下

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');
  });
});

Tester.html文件如下

<!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>

Package.json如下

{
  "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"
  }
}

运行测试时，会显示以下结果

enter image description here

以下错误消息显示在浏览器的控制台中

enter image description here

我在Stackoverflow上尝试了各种解决方案，但没有成功。

那么有人可以帮助我吗？提前致谢。

使用Jasmine对Angular 2组分进行单元测试

0 个答案: