fips fips - 1 month ago 11x
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:

After finishing with the

First app test
section and went to
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>
<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>
<!-- #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>

// #2. Configure systemjs to use the .js extension
// for imports from the app folder
packages: {
'app': {defaultExtension: 'js'}

// #3. Import the spec file explicitly

// #4. wait for all imports to load ...
// then re-execute `window.onload` which
// triggers the Jasmine test-runner start
// or explain what went wrong.



import {Hero} from './hero';

describe('Hero', () => {
it('has name', () => {
let hero:Hero = {id: 1, name: 'Super Cat'};
expect('Super Cat');
it('has id', () => {
let hero:Hero = {id: 1, name: 'Super Cat'};

Any idea what might went wrong?


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.