使用下划线库进行Angular2业力测试

我已经设置了一系列karma测试，可以很好地处理karma，但是我尝试添加一个新的测试，测试一个包含下划线的组件，但是当karma测试运行时，我得到一个错误404:/base/下划线，我不确定为什么。我已将下划线库放入文件数组中，但这似乎没有任何区别

这是正在测试的组件。您可以看到它是从顶部的“下划线”导入的

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 = [];
    }

}

这是karma.conf.js文件。在这个文件数组的中间可以看到下面的下划线。

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

当我带着业力开始测试时，我得到了错误

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

---

我需要添加到karma-test-shim.js文件中的映射数组中。它成功地将其添加到业力中，但当它从“下划线”中输入时；这行被更改为require（'下划线'），它找不到一个叫做下划线的东西，所以我必须将下划线映射到JS路径。这就是我在下面所做的。唯一的区别是，我开始使用lodash而不是下划线，但原理相同

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