All geek questions in one place

Angular 2 for testing TypeScript - specs appear several times in jasmine

I followed this tutorial to test an Angular 2 application: https://angular.io/docs/ts/latest/guide/testing.html

Having finished the First app test section and switched to unit-tests.html , I saw several specifications reports:

jasmine unit-tests.html

Although I have not 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 could go wrong?

+5
source share
5 answers

As my previous comment is marked deleted, I am writing down my final solution for sending the problem. This solution works, and the only problem is that for the first time it shows an HTML page with the text “No specifications”, but when all the modules are loaded, it shows all the specifications and results.

This decision was made in the book "Angular 2 Development with TypeScript v7 MEAP" 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>

Hope you find this solution helpful.

+2
source

I can not reproduce your problem. See This plunkr: https://plnkr.co/edit/viMSZD?p=preview .

The only difference I see is that I included SystemJS library files before Jasmine:

 <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>
+1
source

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

To fix this, I deleted the .then(window.onload) in System.import('app/hero.spec') Promise.

It seems that the SystemJS module can load hero.spec.js before the browser fires a window load event. This will make the subsequent call to the window.onload function obsolete.

+1
source

I can reproduce this odd behavior if I use lite-server . If you follow the example on the angular2 website, you will find that you are using a live-server (pay attention to " v " instead of " t "). Using live-server jasmine correctly performs my tests. Perhaps there are some problems with browser-sync magic being injected into html?

0
source

I had the same problem and after importing the main pad library the problem disappeared . Also be sure to import it as the very first script.

  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
0
source

Source: https://habr.com/ru/post/1247559/

More articles:


All Articles