我们希望使用官方Angular文档中描述的一些帮助程序类来帮助我们跨应用程序测试各种事物.例如,官方doc位置,在testing / index.ts文件中,是一个模拟点击处理的函数.然后它可用于所有测试.

问题是doc中的项目使用SystemJS,我想在Angular CLI项目结构中重用这些帮助器.

在Angular CLI项目结构中,有没有办法加载这种文件并在我们的spec.ts文件中提供它们的功能？

Karma.conf提到了src / test.ts文件,但我不知道它是否适合这些存根和辅助函数.

文件示例

以下是doc和Angular CLI生成的karma.conf.js中的文件.

Angular.io doc testing / index.ts文件：

import { DebugElement }           from '@angular/core';
import { tick,ComponentFixture } from '@angular/core/testing';

export * from './jasmine-matchers';
export * from './router-stubs';

///// Short utilities /////

/** Wait a tick,then detect changes */
export function advance(f: ComponentFixture<any>): void {
  tick();
  f.detectChanges();
}

/**
 * Create custom DOM event the old fashioned way
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
 * Although officially deprecated,some browsers (phantom) don't accept the preferred "new Event(eventName)"
 */
export function newEvent(eventName: string,bubbles = false,cancelable = false) {
  let evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
  evt.initCustomEvent(eventName,bubbles,cancelable,null);
  return evt;
}

// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
/** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */
export const ButtonClickEvents = {
   left:  { button: 0 },right: { button: 2 }
};

/** Simulate element click. Defaults to mouse left-button click event. */
export function click(el: DebugElement | HTMLElement,eventObj: any = ButtonClickEvents.left): void {
  if (el instanceof HTMLElement) {
    el.click();
  } else {
    el.triggerEventHandler('click',eventObj);
  }
}

testing / router-stubs.ts文件：

// export for convenience.
export { ActivatedRoute,Router,RouterLink,RouterOutlet} from '@angular/router';

import { Component,Directive,Injectable,Input } from '@angular/core';
import { NavigationExtras } from '@angular/router';

@Directive({
  selector: '[routerLink]',host: {
    '(click)': 'onClick()'
  }
})
export class RouterLinkStubDirective {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

@Component({selector: 'router-outlet',template: ''})
export class RouterOutletStubComponent { }

@Injectable()
export class RouterStub {
  navigate(commands: any[],extras?: NavigationExtras) { }
}


// Only implements params and part of snapshot.params
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ActivatedRouteStub {

  // ActivatedRoute.params is Observable
  private subject = new BehaviorSubject(this.testParams);
  params = this.subject.asObservable();

  // Test parameters
  private _testParams: {};
  get testParams() { return this._testParams; }
  set testParams(params: {}) {
    this._testParams = params;
    this.subject.next(params);
  }

  // ActivatedRoute.snapshot.params
  get snapshot() {
    return { params: this.testParams };
  }
}

Angular CLI karma.conf.js文件

module.exports = function (config) {
  config.set({
    basePath: '',frameworks: ['jasmine','@angular/cli'],plugins: [
      require('karma-jasmine'),require('karma-chrome-launcher'),require('karma-jasmine-html-reporter'),require('karma-coverage-istanbul-reporter'),require('@angular/cli/plugins/karma')
    ],client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },files: [
      { pattern: './src/test.ts',watched: false }
    ],preprocessors: {
      './src/test.ts': ['@angular/cli']
    },mime: {
      'text/x-typescript': ['ts','tsx']
    },coverageIstanbulReporter: {
      reports: [ 'html','lcovonly' ],fixWebpackSourcePaths: true
    },angularCli: {
      environment: 'dev'
    },reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress','coverage-istanbul']
              : ['progress','kjhtml'],port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['Chrome'],singleRun: false
  });
};