Menu
I have followed this tutorial for testing an Angular 2 app: https://angular.io/docs/ts/latest/guide/testing.html
After finishing with the First app test section and went to unit-tests.html I saw my spec reports appearing multiple times:
Although I haven't made any changes to the tutorial code, for a quick reference here is my 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);
});
});
Any idea what might went wrong?
463
As my previous comment is mark as deleted, I write down my final solution to evict the problem. This solution works and the only problem is that the first time it shows the HTML page with the text "No specs found" but when all modules are loaded, it shows all specs ans its results.
This solution is taken by the book "Angular 2 Development with TypeScript v7 MEAP" of Manning Early Access Program:
<!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>
I hope you find this solution useful.
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
