Question

我正在为Angular混合应用程序（运行Angular 2组件的Angular 1）编写Angular 2组件测试。该组件使用templateUrl和styleUrls的相对路径，如下所示：

@Component({
    moduleId: module.id,
    selector: 'utilization-report',
    templateUrl: 'admin.utilization-report.ng2.html',
    styleUrls: ['admin.utilization-report.ng2.less'],
    providers:[ReportsService,ReportsGlobalNotificationService]
})
export class UtilizationReportComponent implements OnInit , OnDestroy {
...}

测试文件组件初始化：

beforeEach(async(()=>{
    TestBed.configureTestingModule({
        declarations: [UtilizationReportComponent],
        providers: [
            { provide: UsersSearchService, useValue: {} as   UsersSearchService},
            { provide: ReportsService, useValue: {} as ReportsService},
            { provide: ReportsGlobalNotificationService, useValue: {showNoSpecificCompanyMessageError: ()=>{}} as ReportsGlobalNotificationService},
            { provide: 'SubscribeCompanyChange', useValue: companyChange }
        ],
        schemas: [NO_ERRORS_SCHEMA]
    }).overrideComponent(UtilizationReportComponent, {
        set: {
            providers:[]
        }
    });

    TestBed.compileComponents().then(()=>{
        fixture = TestBed.createComponent(UtilizationReportComponent);
        component = fixture.componentInstance;
    });
}));

我使用CommonJS为业力加载模块和Browserify插件（karma-browserify）。测试失败，因为html和较少的文件路径不正确，Karma日志显示module.id被忽略 - html和较少的文件路径试图加载为绝对路径并获得404。

当我改变绝对路径时，一切正常。其他解决方法是使用inline-ng2-template插件。如何让Karma / Browserify使用相对路径？

tsconfig.json：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": ".",
        "rootDir": ".",
        "suppressImplicitAnyIndexErrors": true
}

karma.conf.js

module.exports = function (config) 
{
  config.set(
  {

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',


// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'browserify', 'es6-shim'],


// list of files / patterns to load in the browser
files: [
  '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',
  'node_modules/reflect-metadata/Reflect.js',
  'bower_components/jquery/dist/jquery.js',
  'bower_components/angular/angular.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-messages/angular-messages.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-bootstrap/ui-bootstrap.js',
  'bower_components/hub-bootstrap/hub-bootstrap.js',
  'bower_components/angular-ui-sortable/sortable.js',
  'bower_components/angular-ui-router/release/angular-ui-router.js',
  'bower_components/angular-route/angular-route.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-touch/angular-touch.js',
  'bower_components/angular-cookies/angular-cookies.js',
  'bower_components/angular-summernote/dist/angular-summernote.js',
  'bower_components/angularjs-dropdown-multiselect/dist/angularjs-dropdown-multiselect.min.js',
  'bower_components/moment/moment.js',
  'src-client/scripts/configuration.js',
  'src-client/vendor/line-chart.js',
  'test-addons/socket.mock.js',
  'src-client/modules/**/*.js',
    {pattern: 'src-client/modules/**/*.html', watched: true, included: false},
    {pattern: 'src-client/modules/**/*.less', watched: true, included: false}
],


// list of files to exclude
exclude: [
  'src-client/modules/**/upgrade.ng2.js',
  'src-client/modules/**/upgrade-adapter.ng2.js',
  'src-client/modules/**/upgrades.ng2.js',
  'src-client/modules/**/*module.ng2.js',
  'src-client/modules/**/boot.ng2.js',
  'src-client/modules/**/index.ng2.js'
],


// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  'src-client/modules/**/*.js': ['browserify']
},
"browserify": {
  "debug": true,
  "transform": ["browserify-istanbul"]
},

// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
coverageReporter: {
  type: 'html',
  dir: 'coverage/'
},


// web server port
port: 9876,


// enable / disable colors in the output (reporters and logs)
colors: true,


// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,


// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],


// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,

// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
  })
}

Angular v2.1.0

Karma v1.5.0

Angular2组件测试 - Karma无法通过teamplateUrl为相对路径加载html

0 个答案: