Recently, I followed a tutorial on testing an Angular 2 application which can be found at: https://angular.io/docs/ts/latest/guide/testing.html
Upon completing the 'First app test' section and moving to 'unit-tests.html', I noticed that my spec reports were being displayed multiple times:
https://i.sstatic.net/XCIXA.png
Even though I did not make any changes to the tutorial code, here is the contents of my unit-tests.html for reference:
<!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);
});
});
Could you possibly shed some light on what may have caused this issue?