unit-testing - Angular2 组件测试。 Karma 没有加载 templateUrl

Question

我目前正在尝试为我的 Angular2 应用程序编写一些测试，但遇到了一些问题，而如果我使用 Angular2 组件的 templateUrl 属性(链接到 HTML 文件)而不是模板，则测试不会运行。由于未加载 .html 文件，测试中的异步回调将超时。当我将模板代码放入组件文件本身时，它可以正常工作。我还可以在我的浏览器中看到对 .html 的请求超时，这导致我遇到找不到 .html 文件的问题。

我查看了我的 karma.conf 文件，一切似乎都井井有条。当 Karma 在 karma.conf 文件中运行时，我还将此行设置为“true”以包含 .html 文件:

{ pattern: appBase + '**/*.html', included: true, watched: true },

这是我的整个 karma.conf 文件:

module.exports = function(config) {

    var appBase    = 'app/';      // transpiled app JS and map files
    var appSrcBase = 'app/';      // app source TS files
    var appAssets  = '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-jasmine-html-reporter')
        ],

        client: {
            builtPaths: [appSrcBase, 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',
            'node_modules/reflect-metadata/Reflect.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',

            // 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: true, 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', 'kjhtml'],

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

我不确定为什么没有加载这些 .html 文件，所以任何人都可以看到为什么会这样吗？我不想在每个组件中包含模板代码，因为其中一些非常大，而且我的文件结构已经补偿了单独的 View 文件功能。

组件(注释掉了有效的代码):

import { Component } from "@angular/core";

@Component({
    selector: 'categories-component',
    templateUrl: '/app/views/catalog/categories/categories-dashboard.html',
    //template: '<h1>{{ title }}</h1>',
    moduleId: module.id
})

export class CategoriesComponent {
    public title:String = 'Categories';
}

测试模块:

import {TestBed, ComponentFixture, ComponentFixtureAutoDetect, async} from "@angular/core/testing";
import { By} from "@angular/platform-browser";
import { CategoriesComponent } from "../../../../components/catalog/categories/CategoriesComponent";
import { DebugElement } from "@angular/core";

let comp:    CategoriesComponent;
let fixture: ComponentFixture<CategoriesComponent>;
let de:      DebugElement;
let el:      HTMLElement;

describe('Component: CategoriesComponent', () => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ CategoriesComponent ],
            providers: [
                { provide: ComponentFixtureAutoDetect, useValue: true }
            ]
        });
    });

    it('should display original title', (done) => {
        TestBed.compileComponents()
            .then(() => {
                done();
                fixture = TestBed.createComponent(CategoriesComponent);

                comp = fixture.componentInstance; // CategoriesComponent test instance

                // query for the title <h1> by CSS element selector
                de = fixture.debugElement.query(By.css('h1'));
                el = de.nativeElement;

                expect(el.textContent).toContain(comp.title);
                done();
            });
    });
});

启动 Karma 时，我也在 Karma Runner 中遇到此错误:

07 12 2016 14:17:15.658:WARN [proxy]: failed to proxy app/views/catalog/categories/categories-dashboard.html (socket hang up)

我添加这些 URL 是为了让我的回答更加清晰。当我访问应用程序时，成功的模板 XHR 请求是:

http://product-admin.dev/app/views/catalog/categories/categories-dashboard.html

被调用以从测试运行器获取模板(并且失败)的 URL 是:

http://localhost:9879/app/views/catalog/categories/categories-dashboard.html

karma-test-shim 文件:

// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.

// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
// Error.stackTraceLimit = Infinity; //

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

// builtPaths: root paths for output ("built") files
// get from karma.config.js, then prefix with '/base/' (default is 'app/')
var builtPaths = (__karma__.config.builtPaths || ['app/'])
    .map(function(p) { return '/base/'+p;});

__karma__.loaded = function () { };

function isJsFile(path) {
    return path.slice(-3) == '.js';
}

function isSpecFile(path) {
    return /\.spec\.(.*\.)?js$/.test(path);
}

// Is a "built" file if is JavaScript file in one of the "built" folders
function isBuiltFile(path) {
    return isJsFile(path) &&
        builtPaths.reduce(function(keep, bp) {
            return keep || (path.substr(0, bp.length) === bp);
        }, false);
}

var allSpecFiles = Object.keys(window.__karma__.files)
    .filter(isSpecFile)
    .filter(isBuiltFile);

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

System.import('systemjs.config.js')
    .then(importSystemJsExtras)
    .then(initTestBed)
    .then(initTesting);

/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
    return System.import('systemjs.config.extras.js')
        .catch(function(reason) {
            console.log(
                'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
            );
            console.log(reason);
        });
}

function initTestBed(){
    return Promise.all([
        System.import('@angular/core/testing'),
        System.import('@angular/platform-browser-dynamic/testing')
    ])

        .then(function (providers) {
            var coreTesting    = providers[0];
            var browserTesting = providers[1];

            coreTesting.TestBed.initTestEnvironment(
                browserTesting.BrowserDynamicTestingModule,
                browserTesting.platformBrowserDynamicTesting());
        })
}

// Import all spec files and start karma
function initTesting () {
    return Promise.all(
        allSpecFiles.map(function (moduleName) {
            return System.import(moduleName);
        })
    )
        .then(__karma__.start, __karma__.error);
}

Answer 1

我设法让这个工作，但我不明白如何。我将 appAssets 变量更改为以下内容:

var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler

我不明白这是如何工作的，因为我不确定“基础”文件存在于何处，因为我在我的文件结构中看不到它。它已经奏效了，所以如果有人愿意提供任何进一步的解释，那就太好了。