Geek Answers Handbook

How do we write the basic unit test in angular 2?

I have the following angular documentation on the official website. but in terms of testing the documentation is outdated and does not work with current versions of angular 2 beta. I need to write a basic test to verify if. how can i do this using jasmine in angular 2.

+7
javascript unit-testing angular
source share
3 answers

Now angular has good documentation on angular 2 unit test and end to end using jasmine and karma. he explains this with an example and is very easy to understand and follow.

Link: angular 2 test

0
source share

Configuring jasmine to run typescript unit tests with angular2 (beta.7):

  • Configuring Angular -Project
    (see description of 5 Min Quickstart https://angular.io/guide/quickstart )

    Rootdir - myproject

  • install jasmine using mpm

    npm install jasmine-core --save-dev --save-exact

  • Install live server
    https://www.npmjs.com/package/live-server

  • Get syntax support / intellisense:
    in myproject / typings create a new jasmine.d.ts file

     /// <reference path="jasmine\jasmine.d.ts" />

    Get jasmine.d.ts from
    https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jasmine/jasmine.d.ts

    and save it in myproject \ typings \ jasmine as a jasmine.d.ts file

  • Save unit-test.html to myproject

     <html> <head> <title>Angular2: Jasmine 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.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/app.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>

    .then (window.onload) it is important to run a test run.

    see here Wait for the module to load to run the tests it contains

  • Create a new app.spec.ts file in the myproject \ app directory

     import {AppComponent} from './app.component'; // Jasmin Test App title property describe('AppComponent', () => { var app: AppComponent = null beforeEach(() => { app = new AppComponent(); app.title = "App in Test"; }); it('should have an title property', () => { expect(app.title).toBeDefined(); }); it('should have the title App in Test', () => { expect(app.title).toBe("App in Test"); }) }); // Jasmin Test without Angular describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); });

  • From the beginning of cmdline

     live-server --open=unit-test.html

This is my working setup for running Unit-Tests with Jasmine, written in typescript with Angular 2.

If you have any errors, write down what you tried and where you failed, like Günther suggested in his comment.

+9
source share

I found this to be a good guide for testing angular

While the command is missing:

 typings install jasmine --save-dev --ambient
0
source share

More articles:


All Articles