title: Angular 2 Component Testing using Jasmine
body: <p>I am working on the Final Release of the Angular 2 for component testing. I am able to run my application  but when I run the Test, The browser shows the following result
  <a href="http://i.stack.imgur.com/s4Ihs.png" rel="nofollow">Error Message After Viewing Test in Browser</a></p>
  
  <p>The Systemjs.config.js is as following</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map = {
   "rxjs": "node_modules/rxjs",
   "@angular/common": "node_modules/@angular/common",
   "@angular/forms": "node_modules/@angular/forms",
   "@angular/compiler": "node_modules/@angular/compiler",
   "@angular/core": "node_modules/@angular/core",
   "@angular/platform-browser": "node_modules/@angular/platform-browser",
   "@angular/testing":"node_modules/@angular/core/testing",
   "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browser-dynamic",
  };
  var packages = {
   "rxjs": { "defaultExtension": "js" },
   "@angular/common": { "main": "bundles/common.umd.js", "defaultExtension": "js" },
   "@angular/forms": { "main": "bundles/forms.umd.js", "defaultExtension": "js" },
   "@angular/compiler": { "main": "bundles/compiler.umd.js", "defaultExtension": "js" },
   "@angular/core": { "main": "bundles/core.umd.js", "defaultExtension": "js" },
   "@angular/platform-browser": { "main": "bundles/platform-browser.umd.js", "defaultExtension": "js" },
   "@angular/platform-browser-dynamic": { "main": "bundles/platform-browser-dynamic.umd.js", "defaultExtension": "js" },
   "@angular/testing" : {"main": "testing.js", "defaultExtension": "js"},
   "app": {
    format: 'register',
    defaultExtension: 'js'
   }  
  };
  
  var config = {
   map: map,
   packages: packages
  };
  
  System.config(config);</code></pre>
  </div>
  </div>
  </p>
  
  <p>The apptester.html is as following</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt;
    &lt;title&gt;Ng App Unit Tests&lt;/title&gt;
    &lt;link rel="stylesheet" href="./node_modules/jasmine-core/lib/jasmine-core/jasmine.css"&gt;
    &lt;script src="./node_modules/jasmine-core/lib/jasmine-core/jasmine.js"&gt;&lt;/script&gt;
    &lt;script src="./node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"&gt;&lt;/script&gt;
    &lt;script src="./node_modules/jasmine-core/lib/jasmine-core/boot.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/long-stack-trace-zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/proxy.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/sync-test.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/jasmine-patch.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
   &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('./app/app.component.spec')
         .then(window.onload)
         .catch(console.error.bind(console));
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Test Code in app.component.spec.ts is as following</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {inject,TestBed,ComponentFixture } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  import {EmployeeComponent} from './app.component';
  import {Employee} from './employee.model';
  describe('EmployeeComponent', () =&gt; {
    let employee;
    let app;
    let fixture: ComponentFixture&lt;EmployeeComponent&gt;;
    beforeEach(() =&gt; {
      employee = new Employee();
  //    app = new EmployeeComponent();
      TestBed.configureTestingModule({
        declarations: [EmployeeComponent],
      });
      TestBed.compileComponents();
         fixture = TestBed.createComponent(EmployeeComponent);
         app = fixture.componentInstance;
         console.log('In describe');
    });
  it('getTax', () =&gt; {
      employee.designation = "Manager";
      employee.salary = 40000;
      let res = 12111000;
      app.emp = employee;
      fixture.detectChanges();
      let actRes = app.getTax();
      expect(actRes).toEqual(res);
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Same code works in RC 1 and 2 release but not in Angular 2 final release. My package.json is as following</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "ng2-databinding-application",
    "version": "1.0.0",
    "scripts": {
      "start": "concurrently \"tsc -w\" \"node server.js\"",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "lite": "lite-server",
      "typings": "typings",
      "postinstall": "typings install"
    },
    "license": "ISC",
    "dependencies": {
      "@angular/common": "2.0.0",
      "@angular/compiler": "2.0.0",
      "@angular/core": "2.0.0",
      "@angular/forms": "2.0.0",
      "@angular/http": "2.0.0",
      "@angular/platform-browser": "2.0.0",
      "@angular/platform-browser-dynamic": "2.0.0",
      "@angular/router": "3.0.0",
      "@angular/upgrade": "2.0.0",
      "core-js": "^2.4.1",
      "reflect-metadata": "^0.1.3",
      "rxjs": "5.0.0-beta.12",
      "systemjs": "0.19.27",
      "zone.js": "^0.6.23",
      "angular2-in-memory-web-api": "0.0.20",
      "bootstrap": "*",
      "es6-shim": "^0.35.0",
      "koa": "^1.2.0",
      "koa-static": "^2.0.0",
      "livereload": "^0.4.1",
      "jasmine-core": "2.5.1",
      "typescript": "^2.0.2",
      "typings": "^1.3.2"
    },
    "devDependencies": {
      "concurrently": "^2.2.0",
      "jasmine-core": "^2.5.1",
      "lite-server": "^2.1.0",
      "node-gyp": "^3.3.1",
      "typescript": "^2.0.2",
      "typings": "^1.3.2"
    }
  }</code></pre>
  </div>
  </div>
  </p>