Angular2 Karma Testing mit Underscore-Bibliothek

Question

Ich habe eine Reihe von Karma-Tests eingerichtet und funktioniert gut mit Karma, aber ich habe versucht, eine neue, die eine Komponente, die Unterstreichung darin hat, zu testen, aber wenn der Karma-Test läuft ich bekomme einen Fehler 404:/base/unterstrich und ich weiß nicht warum. Ich habe die Unterstrichbibliothek in das Dateiarray eingefügt, aber das scheint keinen Unterschied zu machen.

Hier ist die Komponente, die getestet wird. Sie können sehen, dass es import * als _ von "Unterstrich" an der Spitze ist.

import { Component, OnInit, Input } from '@angular/core'; 

import * as _ from 'underscore'; 

import { PlanPeriodService, IPlanPeriodService } from '../../planPeriod/planPeriod.service'; 
import { PlanPeriod } from '../../planperiod/planPeriod.model'; 

import { PlanningBrokerService, IPlanningBrokerService } from '../../planningBroker/planningBroker.service'; 
import { PlanningBroker } from '../../planningBroker/planningBroker.model'; 

import { PlanningCustomerService, IPlanningCustomerService } from '../../planningCustomer/planningCustomer.service'; 
import { PlanningCustomer } from '../../planningCustomer/planningCustomer.model'; 

import { ShipToService, IShipToService } from '../../shipTo/shipTo.service'; 
import { ShipTo } from '../../shipTo/shipTo.model'; 

@Component({ 
    selector: 'chargeTo', 
    templateUrl: './chargeTo.component.html', 
    providers: [PlanPeriodService, PlanningBrokerService, PlanningCustomerService, ShipToService] 
}) 
export class ChargeToComponent implements OnInit { 

    private tradeSystemId: number; 
    @Input() get TradeSystemId(): number { 
     return this.tradeSystemId; 
    } 
    set TradeSystemId(value: number) { 
     this.tradeSystemId = value; 
     this.loadPlanPeriods(); 
     this.loadPlanningBrokers(); 
    } 

    private planPeriodId: number; 
    @Input() get PlanPeriodId(): number { 
     return this.planPeriodId; 
    } 
    set PlanPeriodId(value: number) { 
     this.planPeriodId = value; 

     const item = _.find(this.PlanPeriods, (pp: PlanPeriod) => { 
      return pp.Id === value; 
     }); 
     if (item) this.PlanPeriod = item.Description; 
    } 

    private planPeriodIds: number[]; 
    @Input() get PlanPeriodIds(): number[] { 
     return this.planPeriodIds; 
    } 
    set PlanPeriodIds(value: number[]) { 
     this.planPeriodIds = value; 

     const items = _.filter(this.PlanPeriods, (pp: PlanPeriod) => { 
      var found = _.find(value, (n: number) => { 
       return n === pp.Id; 
      }); 
      return found !== undefined; 
     }); 

     if (items.length === 0) { 
      this.PlanPeriod = undefined; 
     } 
     else if (items.length === 1) { 
      this.PlanPeriod = items[0].Description; 
     } else { 
      this.PlanPeriod = 'Multiple Periods'; 
     } 
    } 

    allowMultiplePlanPeriods: boolean; 
    @Input() get AllowMultiplePlanPeriods(): boolean { 
     return this.allowMultiplePlanPeriods; 
    } 
    set AllowMultiplePlanPeriods(value: boolean) { 
     this.allowMultiplePlanPeriods = value; 
     if (value) { 
      this.PlanPeriodId = undefined; 
      this.PlanPeriodIds = []; 
     } else { 
      this.PlanPeriodId = undefined; 
      this.PlanPeriodIds = undefined; 
     } 
    } 

    private planningBrokerId: number; 
    @Input() get PlanningBrokerId(): number { 
     return this.planningBrokerId; 
    } 
    set PlanningBrokerId(value: number) { 
     this.planningBrokerId = value; 
     this.loadPlanningCustomers(); 

     const item = _.find(this.PlanningBrokers, (pb: PlanningBroker) => { 
      return pb.Id === value; 
     }); 
     if (item) this.PlanningBroker = item.Name; 
    } 

    private planningCustomerId: number; 
    @Input() get PlanningCustomerId(): number { 
     return this.planningCustomerId; 
    } 
    set PlanningCustomerId(value: number) { 
     this.planningCustomerId = value; 
     this.loadPlanningCustomerCompany(); 

     const item = _.find(this.PlanningCustomers, (pc: PlanningCustomer) => { 
      return pc.Id === value; 
     }); 
     if (item) this.PlanningCustomer = item.Name; 
    } 

    @Input() PlanPeriod: string; 
    @Input() PlanningBroker: string; 
    @Input() PlanningCustomer: string; 

    Company: number; 
    PlanPeriods: PlanPeriod[]; 
    PlanningBrokers: PlanningBroker[]; 
    PlanningCustomers: PlanningCustomer[]; 

    loadPlanPeriods(): void { 
     this.PlanPeriods = []; 

     this.planPeriodService.getByTradeSystem(this.TradeSystemId) 
      .subscribe((results: PlanPeriod[]) => this.PlanPeriods = results, 
      error => console.error(error)); 
    } 

    loadPlanningBrokers(): void { 
     this.PlanningBrokers = []; 

     this.planningBrokerService.getByTradeSystem(this.TradeSystemId, undefined) 
      .subscribe((results: PlanningBroker[]) => this.PlanningBrokers = results, 
      error => console.error(error)); 
    } 

    loadPlanningCustomers(): void { 
     this.PlanningCustomers = []; 

     this.planningCustomerService.getByPlanningBroker(this.PlanningBrokerId, this.TradeSystemId) 
      .subscribe((results: PlanningCustomer[]) => this.PlanningCustomers = results, 
      error => console.error(error)); 
    } 

    loadPlanningCustomerCompany(): void { 
     this.Company = undefined; 

     this.shipToService.getById(this.planningCustomerId) 
      .subscribe((result: ShipTo) => this.Company = result.Company, 
      error => console.error(error)); 
    } 

    constructor(private readonly planPeriodService: IPlanPeriodService, private readonly planningBrokerService: IPlanningBrokerService, 
     private readonly planningCustomerService: IPlanningCustomerService, private readonly shipToService: IShipToService) { } 

    ngOnInit(): any { 
     this.PlanPeriods = []; 
    } 

} 

Hier ist die Datei karma.conf.js. Sie können in der Mitte dieses Dateiarrays sehen, dass der Unterstrich dort aufgeführt ist.

module.exports = function (config) { 

     var appBase = 'app/';  // transpiled app JS and map files 
     var appSrcBase = 'app/';  // app source TS files 
     var appAssets = '/base/app/'; // component assets fetched by Angular's compiler 

     // Testing helpers (optional) are conventionally in a folder called `testing` 
     var testingBase = 'testing/'; // transpiled test JS and map files 
     var testingSrcBase = 'testing/'; // test source TS files 

     config.set({ 
      basePath: '', 
      frameworks: ['jasmine'], 

      plugins: [ 
       require('karma-jasmine'), 
       require('karma-chrome-launcher'), 
       require('karma-htmlfile-reporter') 
      ], 

      client: { 
       builtPaths: [appBase, testingBase], // add more spec base paths as needed 
       clearContext: false // leave Jasmine Spec Runner output visible in browser 
      }, 

      customLaunchers: { 
       // From the CLI. Not used here but interesting 
       // chrome setup for travis CI using chromium 
       Chrome_travis_ci: { 
        base: 'Chrome', 
        flags: ['--no-sandbox'] 
       } 
      }, 

      files: [ 
       // System.js for module loading 
       'node_modules/systemjs/dist/system.src.js', 

       // Polyfills 
       'node_modules/core-js/client/shim.js', 

       // zone.js 
       'node_modules/zone.js/dist/zone.js', 
       'node_modules/zone.js/dist/long-stack-trace-zone.js', 
       'node_modules/zone.js/dist/proxy.js', 
       'node_modules/zone.js/dist/sync-test.js', 
       'node_modules/zone.js/dist/jasmine-patch.js', 
       'node_modules/zone.js/dist/async-test.js', 
       'node_modules/zone.js/dist/fake-async-test.js', 

       //underscore 
       { pattern: 'node_modules/underscore/underscore.js', included: true, watched: false }, 

       // RxJs 
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, 

       // Paths loaded via module imports: 
       // Angular itself 
       { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, 
       { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, 

       { pattern: 'systemjs.config.js', included: false, watched: false }, 
       { pattern: 'systemjs.config.extras.js', included: false, watched: false }, 

       'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels 

       // transpiled application & spec code paths loaded via module imports 
       { pattern: appBase + '**/*.js', included: false, watched: true }, 
       { pattern: testingBase + '**/*.js', included: false, watched: true }, 

       // Asset (HTML & CSS) paths loaded via Angular's component compiler 
       // (these paths need to be rewritten, see proxies section) 
       { pattern: appBase + '**/*.html', included: false, watched: true }, 
       { pattern: appBase + '**/*.css', included: false, watched: true }, 

       // Paths for debugging with source maps in dev tools 
       { pattern: appSrcBase + '**/*.ts', included: false, watched: false }, 
       { pattern: appBase + '**/*.js.map', included: false, watched: false }, 
       { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, 
       { pattern: testingBase + '**/*.js.map', included: false, watched: false } 
      ], 

      // Proxied base paths for loading assets 
      proxies: { 
       // required for component assets fetched by Angular's compiler 
       "/app/": appAssets 
      }, 

      exclude: [], 
      preprocessors: {}, 
      reporters: ['progress'], 

      port: 9876, 
      colors: true, 
      logLevel: config.LOG_INFO, 
      autoWatch: true, 
      browsers: ['Chrome'], 
      singleRun: false 
     }); 
    } 

Wenn beginne ich die Tests mit Karma I und Fehlern erhalten

WARN [web-server]: 404: /base/underscore 

Answer 1

ich in der Karma-Test-shim.js Datei auf die Karte Array hinzuzufügen benötigt. Es wurde erfolgreich in Karma hinzugefügt, aber dann, als es den Import * als _ von 'Unterstrich' traf; Zeile, die in require geändert wurde ('Unterstrich'), die nicht einfach einen Unterstrich gefunden hat, also musste ich dem JS-Pfad Unterstriche zuordnen. Was ich unten gemacht habe. Der einzige Unterschied ist, dass ich anfing, lodash anstelle von Unterstrich zu verwenden, aber denselben Prinzipal.

System.config({ 
    baseURL: 'base', 
    // Extend usual application package list with test folder 
    packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, 

    // Assume npm: is set in `paths` in systemjs.config 
    // Map the angular testing umd bundles 
    map: { 
     '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', 
     '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', 
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', 
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', 
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', 
     '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', 
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', 
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', 
     'lodash': 'npm:lodash/lodash.min.js' 
    }, 
});