7

I have following angular documentation in official site. but in documentation testing part is outdated and not working with the current angular 2 beta versions. I need to write a basic test for check the if condition are working correctly. how can i do that using jasmine in angular 2.

Tuan Ha
  • 620
  • 2
  • 8
  • 25
Rumes Shyaman
  • 1,072
  • 1
  • 15
  • 30

3 Answers3

9

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

  1. Setup an Angular-Project
    (see description 5 Min Quickstart https://angular.io/guide/quickstart )

    Rootdir is myproject

  2. install jasmine with mpm 

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

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

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

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

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

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

  5. Save unit-test.html in 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) is important to start testexecution.

    see here Wait for a module to be loaded to execute the tests it contains

  6. Create new file app.spec.ts in dir myproject\app

    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);
    });
});

  7. From the cmdline start

    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 please post what you tried and where you failed like Günther proposed in his comment.

Evan Wieland
  • 1,445
  • 1
  • 20
  • 36
Marc
  • 1,300
  • 1
  • 10
  • 15
0

I found this to be a good guide for angular testing

It is missing the following command though:

typings install jasmine --save-dev --ambient
MrLehiste
  • 1,018
  • 1
  • 8
  • 14
0

Now angular have good documentation on angular 2 unit test and end to end testing using jasmine and karma. it have explain it using example and very easy to understand and follow.

Reference : angular 2 test

Rumes Shyaman
  • 1,072
  • 1
  • 15
  • 30