使用茉莉花的角度2組件測試

我正在開發用於組件測試的Angular 2的最終版本。我能夠運行我的應用程序，但是當我運行測試，瀏覽器顯示了以下結果 Error Message After Viewing Test in Browser 使用茉莉花的角度2組件測試

的Systemjs.config.js是如下

var map = { 
 
\t "rxjs": "node_modules/rxjs", 
 
\t "@angular/common": "node_modules/@angular/common", 
 
\t "@angular/forms": "node_modules/@angular/forms", 
 
\t "@angular/compiler": "node_modules/@angular/compiler", 
 
\t "@angular/core": "node_modules/@angular/core", 
 
\t "@angular/platform-browser": "node_modules/@angular/platform-browser", 
 
\t "@angular/testing":"node_modules/@angular/core/testing", 
 
\t "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic", 
 
}; 
 
var packages = { 
 
\t "rxjs": { "defaultExtension": "js" }, 
 
\t "@angular/common": { "main": "bundles/common.umd.js", "defaultExtension": "js" }, 
 
\t "@angular/forms": { "main": "bundles/forms.umd.js", "defaultExtension": "js" }, 
 
\t "@angular/compiler": { "main": "bundles/compiler.umd.js", "defaultExtension": "js" }, 
 
\t "@angular/core": { "main": "bundles/core.umd.js", "defaultExtension": "js" }, 
 
\t "@angular/platform-browser": { "main": "bundles/platform-browser.umd.js", "defaultExtension": "js" }, 
 
\t "@angular/platform-browser-dynamic": { "main": "bundles/platform-browser-dynamic.umd.js", "defaultExtension": "js" }, 
 
\t "@angular/testing" : {"main": "testing.js", "defaultExtension": "js"}, 
 
\t "app": { 
 
\t \t format: 'register', 
 
\t \t defaultExtension: 'js' 
 
\t } 
 
}; 
 

 
var config = { 
 
\t map: map, 
 
\t packages: packages 
 
}; 
 

 
System.config(config);

的apptester .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/zone.js/dist/zone.js"></script> 
 
    <script src="node_modules/zone.js/dist/long-stack-trace-zone.js"></script> 
 
    <script src="node_modules/zone.js/dist/proxy.js"></script> 
 
    <script src="node_modules/zone.js/dist/sync-test.js"></script> 
 
    <script src="node_modules/zone.js/dist/jasmine-patch.js"></script> 
 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
 
</head> 
 
<body> 
 
    <script src="systemjs.config.js"></script> 
 
    <script> 
 
    System.import('./app/app.component.spec') 
 
     .then(window.onload) 
 
     .catch(console.error.bind(console)); 
 
    </script> 
 
</body> 
 
</html>

測試代碼中app.component.spec.ts是如下

import {inject,TestBed,ComponentFixture } from '@angular/core/testing'; 
 
import { By } from '@angular/platform-browser'; 
 
import {EmployeeComponent} from './app.component'; 
 
import {Employee} from './employee.model'; 
 
describe('EmployeeComponent',() => { 
 
    let employee; 
 
    let app; 
 
    let fixture: ComponentFixture<EmployeeComponent>; 
 
    beforeEach(() => { 
 
    employee = new Employee(); 
 
// app = new EmployeeComponent(); 
 
    TestBed.configureTestingModule({ 
 
     declarations: [EmployeeComponent], 
 
    }); 
 
    TestBed.compileComponents(); 
 
     fixture = TestBed.createComponent(EmployeeComponent); 
 
     app = fixture.componentInstance; 
 
     console.log('In describe'); 
 
    }); 
 
it('getTax',() => { 
 
    employee.designation = "Manager"; 
 
    employee.salary = 40000; 
 
    let res = 12111000; 
 
    app.emp = employee; 
 
    fixture.detectChanges(); 
 
    let actRes = app.getTax(); 
 
    expect(actRes).toEqual(res); 
 
    }); 
 
});

相同的代碼工作在RC 1和2的釋放，但沒有角2最終版。我的package.json是如下

{ 
 
    "name": "ng2-databinding-application", 
 
    "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" 
 
    }, 
 
    "license": "ISC", 
 
    "dependencies": { 
 
    "@angular/common": "2.0.0", 
 
    "@angular/compiler": "2.0.0", 
 
    "@angular/core": "2.0.0", 
 
    "@angular/forms": "2.0.0", 
 
    "@angular/http": "2.0.0", 
 
    "@angular/platform-browser": "2.0.0", 
 
    "@angular/platform-browser-dynamic": "2.0.0", 
 
    "@angular/router": "3.0.0", 
 
    "@angular/upgrade": "2.0.0", 
 
    "core-js": "^2.4.1", 
 
    "reflect-metadata": "^0.1.3", 
 
    "rxjs": "5.0.0-beta.12", 
 
    "systemjs": "0.19.27", 
 
    "zone.js": "^0.6.23", 
 
    "angular2-in-memory-web-api": "0.0.20", 
 
    "bootstrap": "*", 
 
    "es6-shim": "^0.35.0", 
 
    "koa": "^1.2.0", 
 
    "koa-static": "^2.0.0", 
 
    "livereload": "^0.4.1", 
 
    "jasmine-core": "2.5.1", 
 
    "typescript": "^2.0.2", 
 
    "typings": "^1.3.2" 
 
    }, 
 
    "devDependencies": { 
 
    "concurrently": "^2.2.0", 
 
    "jasmine-core": "^2.5.1", 
 
    "lite-server": "^2.1.0", 
 
    "node-gyp": "^3.3.1", 
 
    "typescript": "^2.0.2", 
 
    "typings": "^1.3.2" 
 
    } 
 
}

來源

2016-09-16 Mahesh S

的問題來自於您的systemJS配置，讓我解釋這一點。

您添加了@angular/testing作爲包，這很好，但是您告訴systemJS他可以在testing.js中找到主要的JS。

所以，當你做import{Foo} from "@angular/testing";systemJS將得到node_modules/@angular/testing/testing.js導入它。

您@angular/testing項的主要屬性只需設置爲index.js，它會很好地工作：

var packages = { 
    ... 
    ... 
    "@angular/testing" : {"main":"index.js", "defaultExtension": "js"}, 
    ... 
    ... 
};

編輯：如果你想捆綁的版本中輸入：

var packages = { 
    ... 
    ... 
    "@angular/testing" : {"main":"bundles/testing.umd.js", "defaultExtension": "js"}, 
    ... 
    ... 
};

來源

2016-09-16 09:53:54 Supamiu

嗨Supamiu，謝謝很多評論，我試過你的解決方案，但不幸的是結果是一樣的。 –

bundle文件夾下沒有tests.umd.js，而是有core-testing.umd.js文件可用。 –

@MaheshS你有沒有試過core-testing.umd.js？ – Supamiu

使用茉莉花的角度2組件測試

回答

相關問題