Угловой 1,5 карма юнит испытывает нг-макет дважды
У меня есть веб-приложение, написанное на Typescript 2.4.2, скомпилированное последней версией Webpack (2.7.0).
Я в процессе добавления тестов кармы с использованием Jasmine в качестве библиотеки утверждений.
Это мой файл конфигурации кармы:
'use strict';
const webpack = require('./webpack.config');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const _ = require('lodash');
_.remove(webpack.plugins, plugin => plugin instanceof CleanWebpackPlugin);
webpack.module.rules.forEach(rule => {
if (rule.loader === 'ts-loader') {
rule.exclude = /sg\.d\.ts/;
}
});
module.exports = function (config) {
config.set({
webpack,
mime: {
'text/x-typescript': ['ts','tsx']
},
// 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'],
// list of files / patterns to load in the browser
files: [
{ pattern: 'app/scripts/**/*.test.ts', watched: true}
],
preprocessors: {
"app/scripts/**/*.test.ts": ["webpack"]
},
// list of files to exclude
exclude: [],
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'mocha'],
// 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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['jsdom', /*'Chrome'*/],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
В первом тесте у меня не было проблем, это выглядит примерно так:
import { default as moduleName } from "../module";
import { ListService, IListRequest } from "./listService";
import * as angular from 'angular';
import "angular-mocks";
import "jasmine";
const { module, inject } = angular.mock;
describe("List service", () => {
let serviceToTest: ListService;
let rootScope: ng.IRootScopeService;
let httpBackend: ng.IHttpBackendService;
beforeEach(module(moduleName));
beforeEach(() => {
inject(['$rootScope', '$httpBackend', ListService.SERVICE_NAME,
($rootScope: ng.IRootScopeService, $httpBackend: ng.IHttpBackendService, listService: ListService) => {
serviceToTest = listService;
rootScope = $rootScope;
httpBackend = $httpBackend;
}]);
});
it("service should not be null", () => {
expect(serviceToTest).toBeDefined();
});
// Other tests
});
Проблема началась, когда я попытался написать набор тестов для другого сервиса:
import { default as moduleName } from "../module";
import { RedirectionService } from "./RedirectionService";
import * as angular from 'angular';
import "angular-mocks";
import "jasmine";
const { module, inject } = angular.mock;
describe('Redirection service', () => {
});
Как видите, второй набор тестов пуст.
Моя проблема в том, что как только я добавляю второй набор, Angular начинает выдавать ошибки - он пытается загрузить Angular и ng-mock дважды, по одному разу для каждого нового файла, который их импортирует.
Выдается ошибка:
Ошибка: [$injector:modulerr] Не удалось создать экземпляр модуля ngLocale из-за: RangeError: Превышен максимальный размер стека вызовов
Быстрый поиск в Google выдает много сообщений по этому вопросу, говоря, что эта ошибка появляется, когда Karma загружает ng-mock дважды. Кроме того, отладка кода в Chrome подтверждает, что это ngMock, который не может быть инициализирован, и Angular выдает предупреждение о том, что Angular был загружен дважды.
Что я могу сделать по этому поводу? Мне кажется, что karma обрабатывает каждый тестовый файл отдельно, поэтому он не использует Webpack для объединения Angular в один модуль, а скорее компилирует каждый файл самостоятельно и добавляет Angular и ng-mock снова.
1 ответ
Я пошел другим путем, не мог понять, как решить эту проблему.
Мой конфиг webpack теперь имеет это:
entry: { entry: './app/scripts/main.ts'},
output: {
filename: isDev ? "[name].js" : '[name]-[hash].js',
path: path.resolve('dist'),
pathinfo: isDev
},
...
if (isDev) {
module.exports.devtool = 'source-map';
module.exports.entry.test = './test/test-main.ts';
}
И я сбросил все вещи из веб-пакета в конфиге Karma.
Я говорю Webpack, чтобы скомпилировать другой пакет, с простым файлом TS точки входа, который читает:
Import((<any>require).context('../app/scripts/', true, /.*\.test\.ts$/i), (_: any) => {});
Карма следит за выходным файлом пакета на предмет изменений.
Я решил эту проблему, добавив angular-services.test.ts
файлы, содержащие все тесты, использующие angular-mock. например, они используютangular.mock.module
и inject
метод внутри каждого.
angular-services.test.ts содержимое:
import 'angular';
import 'angular-mocks';
import 'test_angular_service_1.test'
import 'test_angular_service_2.test'
.
.
import 'test_angular_service_n.test'