在运行SystemJS的CDN上用Angular 2运行Jasmine单元测试

Running Jasmine Unit Testing with Angular 2 from CDN running SystemJS

本文关键字：运行 Jasmine 单元测试 Angular CDN SystemJS 上用      更新时间：2023-09-26

我希望从CDN链接与SystemJS运行Angular 2，也想设置单元测试与Jasmine。

我已经设法让它加载应用程序并在我的代码中设置Jasmine，如下所示:

/**
 * 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':                       'https://npmcdn.com/rxjs@' + rxJsVersion,
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    'ts':                         'https://npmcdn.com/plugin-typescript@' + typescriptPluginVersion + '/lib/plugin.js',
    'typescript':                 'https://npmcdn.com/typescript@' + 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': 'https://npmcdn.com/@angular/common@0.0.0-3'
  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'] = 'https://npmcdn.com/@angular/router@' + 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);

这样就成功地加载了Angular 2库，我可以通过下面的标记在页面中看到Angular渲染:

<script src="{{ asset('bundles/core/js/config.js') }}"></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>

但是当我尝试运行以下测试代码时:

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

我收到一个错误'TypeError: callback。Apply不是一个函数' (zone.js@0.6.21:192)。

然而，我在这里看到了这个库的测试版:

http://embed.plnkr.co/vUjNLCVG8SVRYK6ZnKG0/

为什么最新版本不能通过CDN url在Angular 2中运行单元测试?

我正在运行Angular 2 final(2.0.0)。

下面是我想要达到的目标:

https://embed.plnkr.co/7CCtow/

这个问题似乎有两个部分，所以我将把它们分别指出来回答。

我们可以运行茉莉单元测试与angular2从CDN运行systemjs?

是的。我已经创建了一个柱塞，似乎做什么你想做的。

在回答这个问题的时候，这个文件中的systemjs.config.js已经被修改过了，以帮助说明这些变化，但是我已经复制了下面的重要部分，以防将来我清理它。我需要做的主要改变是从旧的RC到"最新的";angular2发布版本(撰写本文时为2.4)是为了解决来自CDN的测试依赖关系:

    <
  • @angular/核心/测试/gh><
  • @angular platform-browser-dynamic/测试/gh><
  • @angular platform-browser/测试/gh><
  • @angular/编译器/测试/gh>

这是合适的片段

var map = {
    ...
    "@angular/core/testing": "https://npmcdn.com/@angular/core@2.4.0/bundles/core-testing.umd.js",
    "@angular/platform-browser-dynamic/testing": "https://npmcdn.com/@angular/platform-browser-dynamic@2.4.0/bundles/platform-browser-dynamic-testing.umd.js",
    "@angular/platform-browser/testing": "https://npmcdn.com/@angular/platform-browser@2.4.0/bundles/platform-browser-testing.umd.js",
    "@angular/compiler/testing": "https://npmcdn.com/@angular/compiler@2.4.0/bundles/compiler-testing.umd.js",
   ...
};

注意:我将/testing依赖映射到/bundles位置中的umd格式包。看起来你是想映射到@angular/core/testing/index里面的index.js，从我能看出这不是你要找的依赖项，在这种情况下我们想要umd。

有没有什么原因导致最新版本不能通过CDN url在Angular 2中运行单元测试?

关于你问题的第二部分，似乎你可能引用了最新的zone.js依赖，而不是angular2。

不，我看不见没有原因。在正确的配置下，它可以很好地与我测试的版本一起工作:

  • 0.6.21
  • 0.6.23
  • 0.6.25，最新值为0.6。x(撰写本文时)

我确实发现在这个时候zone.js项目中有很多变化和一些问题被提出，尽管许多问题似乎已经被我们正在讨论的版本解决了。在我的测试运行页面中，正确的配置和顺序是很重要的，我有这个片段。

<script src="https://npmcdn.com/zone.js@0.6.25?main=browser"></script>
<script src="https://npmcdn.com/zone.js@0.6.25/dist/long-stack-trace-zone.js?main=browser"></script>
<script src="https://npmcdn.com/zone.js@0.6.25/dist/async-test.js?main=browser"></script>
<script src="https://npmcdn.com/zone.js@0.6.25/dist/fake-async-test.js?main=browser"></script>
<script src="https://npmcdn.com/zone.js@0.6.25/dist/sync-test.js?main=browser"></script>
<script src="https://npmcdn.com/zone.js@0.6.25/dist/proxy.js?main=browser"></script>
<script src="https://npmcdn.com/zone.js@0.6.25/dist/jasmine-patch.js?main=browser"></script>
相关文章：