fips fips - 3 months ago 17
TypeScript Question

Angular 2 for TypeScript app testing - specs appear multiple times in jasmine

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:

jasmine unit-tests.html


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?

Answer

I have the exact same issue (test case appears 3 times instead of 1 time).

In order to fix it, I removed the .then(window.onload) call on the System.import('app/hero.spec') Promise.

It seems as if the SystemJS module is able to load hero.spec.js before the browser raises the window load event. This would make the subsequent call to window.onload function obsolete.