jeudi 15 septembre 2016

Running Jasmine Unit Testing with Angular 2 from CDN running SystemJS

I am looking to run Angular 2 from CDN links with SystemJS and also want to setup unit testing with Jasmine.

I have managed to get it loading the application and setup Jasmine in my code which is shown below:

/**
 * based on systemjs.config.js in angular.io
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  var addRouting = false;

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'bundles/core/src', // 'dist',
    'rxjs':                       'http://ift.tt/2cAUaQo' + rxJsVersion,
    'angular2-in-memory-web-api': 'http://ift.tt/2aY4lzR', // get latest
    'ts':                         'http://ift.tt/2cATLxl' + typescriptPluginVersion + '/lib/plugin.js',
    'typescript':                 'http://ift.tt/2ch4U9k' + typescriptVersion + '/lib/typescript.js'
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/testing',
      '@angular/upgrade',
      '@angular/forms',
  ]

  // add map entries for angular packages in the form '@angular/common': 'http://ift.tt/2cAU9vV'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + '@' + angularVersion;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  if ( addRouting ){
    // Router API
    map['@angular/router'] = 'http://ift.tt/2ch4LTm' + angularRouterVersion;
    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
  }

  var config = {
    transpiler: 'ts',
    typescriptOptions: {
        emitDecoratorMetadata: true,
        module: "commonjs",
        experimentalDecorators: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

This loads the Angular 2 library sucessfully and I am able to see Angular render in the page using the following markup:

<script src=""></script>
            <script>

                function loadTestingScripts(){
                        return Promise.all([
                                        System.import('bundles/core/src/app/app.spec.ts')
                                ]);
                }

                        Promise.all([
                                System.import('app')
                        ])
                        .then( loadTestingScripts() )
                        .then( window.onload )
                        .catch( console.error.bind(console) );
            </script>

However when I try and run the following test code:

import { ComponentFixture, TestBed } from '@angular/core/testing/index';
import { By }              from '@angular/platform-browser/index';
import { DebugElement }    from '@angular/core/index';

import { AppComponent } from './app.component'; 

let comp:    AppComponent;
let fixture: ComponentFixture<AppComponent>;
let el:      DebugElement;

describe('1st tests', () => {
  it('true is true', () => expect(true).toBe(true));
});

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ AppComponent ], // declare the test component
    });

    fixture = TestBed.createComponent(AppComponent);

  });
});

I recieve an error 'Unexpected token import' which looks like it must refer to the typescript file being unreadable as it has not been transpiled.

However I have seen this achieved here with a beta version of the library:

http://ift.tt/2cAUmPr

Is there any reason why the latest version cannot run unit testing from CDN urls?

Aucun commentaire:

Enregistrer un commentaire