CODEWITHSUNDEEP
javascriptunit-testingangular
Rumes Shyaman
Rumes Shyaman

Reputation: 1082

How we write basic unit test in angular 2?

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.

Upvotes: 7

Views: 657

Answers (3)

Marc
Marc

Reputation: 1300

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.

Upvotes: 9

Rumes Shyaman
Rumes Shyaman

Reputation: 1082

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

Upvotes: 0

MrLehiste
MrLehiste

Reputation: 1036

I found this to be a good guide for angular testing

It is missing the following command though:

typings install jasmine --save-dev --ambient

Upvotes: 0

Related Questions