【发布时间】：2019-01-17 09:28:22
【问题描述】：
一般问题
我刚刚开始将 angular 5 的 webpacker 添加到现有的 rails 应用程序中。一切都很好，除了测试中的 DI 出现了一个奇怪的问题。
似乎我的 Angular 组件在使用浏览器创建时才正常工作，但在使用 Jasmine/Karma 进行测试时，依赖注入器无法识别注入令牌。用伪代码：
@Component({...})
export class SomeComponent {
constructor(private service: SomeService) {}
}
以上在浏览器中工作，但在测试中给出Error: Can't resolve all parameters for SomeComponent: (?).。到目前为止，我注意到它适用于所有 @Injectable()，但是一旦我用显式 @Inject 替换每个注入：
@Component({...})
export class SomeComponent {
constructor(@Inject(SomeService) private service: SomeService) {}
}
一切正常（但显然很麻烦）。有什么明显的原因可能导致这种情况吗？
实际代码
我有一个使用 HttpClient 运行的非常简单的服务：
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import 'rxjs/add/operator/map'
@Injectable()
export class GeneralStatsService {
constructor(
private http : HttpClient
) {}
getMinDate() {
return this.http.get("/api/v1/general_stats/min_date")
.map(r => new Date(r))
}
}
当我导航到使用所述服务的组件时，它按预期工作。但是，在使用 Jasmine 进行测试时它不起作用：
import { TestBed } from "@angular/core/testing";
import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
import { GeneralStatsService } from "./general-stats.service";
describe('GeneralStatsService', () => {
let service : GeneralStatsService;
let httpMock : HttpTestingController;
beforeEach(()=> {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule
],
providers: [
GeneralStatsService
]
})
});
beforeEach(() => {
service = TestBed.get(GeneralStatsService);
httpMock = TestBed.get(HttpTestingController);
});
afterEach(() => {
httpMock.verify();
});
describe('getMinDate()', () => {
let fakeResponse : string = "2015-03-05T12:39:11.467Z";
it('returns instance of Date', (done) => {
service.getMinDate().subscribe((result : Date) => {
expect(result.getFullYear()).toBe(2015);
expect(result.getMonth()).toBe(2); // January is 0
expect(result.getDate()).toBe(5);
done();
});
const req = httpMock.expectOne("/api/v1/general_stats/min_date");
expect(req.request.method).toBe('GET');
req.flush(fakeResponse);
})
});
});
如上所述，添加显式 @Inject(HttpClient) 可以修复测试，但我更愿意避免这种情况。
配置
业力：
const webpackConfig = require('./config/webpack/test.js');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: [ 'jasmine' ],
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('karma-spec-reporter')
],
files: [
'config/webpack/angular-bundle.ts'
],
webpack: webpackConfig,
preprocessors: {
'config/webpack/angular-bundle.ts': ["webpack"]
},
mime: { "text/x-typescript": ["ts"]},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
client: { clearContext: false },
reporters: [ 'progress', 'kjhtml', 'coverage-istanbul' ],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [ 'Chrome' ],
singleRun: false,
concurrency: Infinity
})
};
config/webpack/test.js:
const environment = require('./environment');
environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test';
environment.loaders.set('istanbul-instrumenter', {
test: /\.ts$/,
enforce: 'post',
loader: 'istanbul-instrumenter-loader',
query: {
esModules: true
},
exclude: ["node_modules", /\.spec.ts$/]
});
module.exports = environment.toWebpackConfig()
config/webpack/angular-bundle.ts:
import 'zone.js/dist/zone'
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
jasmine.MAX_PRETTY_PRINT_DEPTH = 3;
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
const context = (require as any).context('../../app/javascript', true, /\.spec\.ts$/);
context.keys().map(context);
tsconfig.json：
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"exclude": [
"**/*.spec.ts",
"node_modules",
"vendor",
"public",
"config/**/*.ts"
],
"compileOnSave": false
}
环境.js：
const environment = require('@rails/webpacker').environment;
const typescript = require('./loaders/typescript');
const erb = require('./loaders/erb');
const elm = require('./loaders/elm');
const html = require('./loaders/html');
environment.loaders.append('elm', elm);
environment.loaders.append('erb', erb);
environment.loaders.append('typescript', typescript);
environment.loaders.append('html', html);
module.exports = environment;
以防万一加载器/打字稿：
module.exports = {
test: /\.(ts|tsx)?(\.erb)?$/,
use: [{
loader: 'ts-loader'
}]
}
【问题讨论】：
-
你有 tsconfig.test.json 文件吗？如果是这样，是否有“emitDecoratorMetadata”属性设置为 true？
-
@chrisvietor - 是的，这是问题中的最后一个 sn-p。这也是我第一次去，我一直想知道我的业力设置中是否有什么影响它。
-
您可以添加您的
./environment文件吗？ -
@GregRozmarynowycz - 与打字稿加载器一起添加。
标签： ruby-on-rails angular typescript dependency-injection webpacker