[英]Jasmine: "Incomplete: No specs found" in Angular Typescript project
[英]Angular 2 for TypeScript app testing - specs appear multiple times in jasmine
我已经按照本教程测试Angular 2应用程序: https : //angular.io/docs/ts/latest/guide/testing.html
完成第First app test
部分并转到unit-tests.html
我看到我的规范报告多次出现:
虽然我没有对教程代码进行任何更改,但是为了快速参考,我的unit-tests.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>
</head>
<body>
<!-- #1. add the system.js library -->
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
// #2. Configure systemjs to use the .js extension
// for imports from the app folder
System.config({
packages: {
'app': {defaultExtension: 'js'}
}
});
// #3. Import the spec file explicitly
System.import('app/hero.spec')
// #4. wait for all imports to load ...
// then re-execute `window.onload` which
// triggers the Jasmine test-runner start
// or explain what went wrong.
.then(window.onload)
.catch(console.error.bind(console));
</script>
</body>
</html>
hero.spec.ts
import {Hero} from './hero';
describe('Hero', () => {
it('has name', () => {
let hero:Hero = {id: 1, name: 'Super Cat'};
expect(hero.name).toEqual('Super Cat');
});
it('has id', () => {
let hero:Hero = {id: 1, name: 'Super Cat'};
expect(hero.id).toEqual(1);
});
});
什么可能出错?
由于我之前的评论标记为已删除,我写下了我的最终解决方案以驱逐问题。 这个解决方案有效,唯一的问题是它第一次显示带有“未找到规格”文本的HTML页面,但是当加载所有模块时,它会显示所有规格及其结果。
这个解决方案是由曼宁早期访问计划的“Angular 2开发与TypeScript v7 MEAP”一书所采用的:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Unit Tests</title>
<link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<!-- #1. Polyfills -->
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- #2. Zone.js dependencies -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/zone.js/dist/async-test.js"></script>
<script src="node_modules/zone.js/dist/fake-async-test.js"></script>
<!-- #3. Add specs dependencies -->
<script src="app/treeNode.spec.ts"></script>
<script src="app/template.spec.ts"></script>
<script src="app/services/tree.side.service.spec.ts"></script>
<script src="app/services/tree.service.spec.ts"></script>
<!-- #4. Add Jasmine dependencies -->
<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/jasmine-expect/dist/jasmine-matchers.js"></script>
<!-- #5. Add the system.js library -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>System.packageWithIndex = true;</script>
<script src="systemjs.config.js"></script>
<script>
// #6. Configure SystemJS to use the .js extension for imports from the app folder
System.config({
packages: {
'app': {defaultExtension: 'js'}
}
});
var SPEC_MODULES = [
'app/treeNode.spec',
'app/template.spec',
'app/services/tree.side.service.spec',
'app/services/tree.service.spec'
];
/**
* #7. Import the spec files explicitly
*/
Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
])
.then(function (modules) {
var testing = modules[0];
var testingBrowser = modules[1];
testing.TestBed.initTestEnvironment(testingBrowser.BrowserDynamicTestingModule, testingBrowser.platformBrowserDynamicTesting());
return Promise.all(SPEC_MODULES.map(function (module) {
return System.import(module);
}));
})
.then(window.onload)
.catch(console.error.bind(console));
</script>
</head>
<body>
</body>
</html>
我希望你发现这个解决方案很有用。
我无法重现你的问题。 请参阅此plunkr: https ://plnkr.co/edit/viMSZD ? p = preview。
我看到的唯一区别是我在Jasmine之前包含了SystemJS库文件:
<script src="https://code.angularjs.org/tools/system-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script>
我有完全相同的问题(测试用例出现3次而不是1次)。
为了解决这个问题,我删除了System.import('app/hero.spec')
Promise上的System.import('app/hero.spec')
.then(window.onload)
调用。
似乎SystemJS模块能够在浏览器引发窗口加载事件之前加载hero.spec.js。 这将使后续对window.onload函数的调用过时。
如果我使用lite-server
我可以重现这种奇怪的行为。 如果您按照angular2站点上的示例进行操作,您会发现他们正在使用live-server
(请注意“ v ”而不是“ t ”)。 使用live-server
jasmine正确地呈现我的测试。 也许有一些问题, browser-sync
魔法注入到HTML?
我遇到了同样的问题,导入核心填充库后问题就消失了 。 还要确保将其作为第一个脚本导入。
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.