Не удается правильно связать тесты для Angular с шаблонами HTML

Question

В нашем текущем проекте мы создали специальное гибридное приложение NGJS / NGX в качестве промежуточного шага для полной миграции на Angular.

Гибрид содержит каждую версию Angular в отдельном каталоге. Они взаимодействуют в обоих направлениях - мы добавили файлы Angular в AngularJS и файлы AngularJS в Angular.

Сборка работает точно так, как ожидалось (все файлы выводятся правильно), однако мы не можем заставить тесты работать (Karma + Webpack).

Они терпят неудачу в очень специфический момент - когдаВы включаете файл AngularJS, который требует HTML любого типа, например, import Tpl from '../templates/my-template.tpl.html.

. Ошибка выглядит следующим образом:

TypeError: Cannot read property 'module' of undefined
at eval (webpack-internal:///./src/ngjs/Account/templates/account.password.edit.tpl.html:4:16)
at Module../src/ngjs/Account/templates/account.password.edit.tpl.html (http://localhost:9879/absolute/path-to-repo/karma.bundle.js?b7d10f4cb57d9b36c6b149128e3c9810b2901be0:7594:1)
at __webpack_require__ (http://localhost:9879/absolute/path-to-repo/karma.bundle.js?b7d10f4cb57d9b36c6b149128e3c9810b2901be0:20:30)
at eval (webpack-internal:///./src/ngjs/Core/services/user.service.ts:11:64)
at Object../src/ngjs/Core/services/user.service.ts (http://localhost:9879/absolute/path-to-repo/karma.bundle.js?b7d10f4cb57d9b36c6b149128e3c9810b2901be0:7610:1)
at __webpack_require__ (http://localhost:9879/absolute/path-to-repo/karma.bundle.js?b7d10f4cb57d9b36c6b149128e3c9810b2901be0:20:30)
at eval (webpack-internal:///./src/ngx/core/components/display-groups-dropdown/display-groups-dropdown.component.ts:14:22)
at Object../src/ngx/core/components/display-groups-dropdown/display-groups-dropdown.component.ts (http://localhost:9879/absolute/path-to-repo/karma.bundle.js?b7d10f4cb57d9b36c6b149128e3c9810b2901be0:8092:1)
at __webpack_require__ (http://localhost:9879/absolute/path-to-repo/karma.bundle.js?b7d10f4cb57d9b36c6b149128e3c9810b2901be0:20:30)
at eval (webpack-internal:///./src/ngx/core/components/display-groups-dropdown/display-groups-dropdown.component.spec.ts:4:43)

(ngx является угловой частью приложения и ngjs будучи AngularJS).

Наша конфигурация Karma:

export default (config) => {
config.set({
    basePath: 'src',
    frameworks: ['jasmine'],
    plugins: [
        karmaJasminePlugin,
        karmaChromeLauncherPlugin,
        karmaWebpackPlugin,
        tsLoaderPlugin,
        karmaMochaReporterPlugin,
        karmaCoverageIstanbulReporterPlugin,
    ],
    preprocessors: {
        '../karma.bundle.ts': ['webpack'],
    },
    client: { clearContext: false }, // leave Jasmine Spec Runner output visible in browser
    files: [
        { pattern: '../karma.bundle.ts', watched: false },
    ],
    mime: {
        'text/x-typescript': ['ts', 'tsx'],
    },
    coverageIstanbulReporter: {
        dir: require('path').join(__dirname, 'coverage'),
        reports: ['html', 'lcovonly', 'text-summary'],
        combineBrowserReports: true,
        fixWebpackSourcePaths: true
    },
    reporters: config.codeCoverage ? ['mocha', 'coverage-istanbul'] : ['mocha'],
    mochaReporter: { ignoreSkipped: true },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    singleRun: true,
    browsers: ['ChromeHeadless'],
    customLaunchers: {
        ChromeDebug: {
            base: 'Chrome',
            flags: ['--remote-debugging-port=9333'],
            debug: true
        },
    },
    webpack: config.codeCoverage ? webpackMerge(webpackConf,
        {
            module: {
                rules: [
                    {
                        test: /\.ts$/,
                        exclude: /\.spec\.ts$/,
                        enforce: 'post',
                        use: {
                            loader: 'istanbul-instrumenter-loader',
                            options: {
                                esModules: true
                            },
                        }
                    }
                ]
            }
        }
    ) : webpackConf,
    webpackMiddleware: {
        noInfo: true,
        stats: 'errors-only'
    },
    concurrency: Infinity,
    browserDisconnectTolerance: 3,
    browserDisconnectTimeout: 210000,
    browserNoActivityTimeout: 210000,
});
};

Наш tsconfig для тестов:

{
"extends": "../tsconfig.json",
"compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
        "jasmine",
        "node"
    ]
},
"include": [
    "../karma.bundle.ts",
    "**/*.spec.ts",
    "**/*.d.ts"
]
}

karma.bundle.ts (скорее стандарт):

// First, initialize the Angular testing environment.
beforeAll(() => {
    testing.TestBed.resetTestEnvironment();
    testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule,
        browser.platformBrowserDynamicTesting());
});

/**
 * Get all the files, for each file, call the context function
 * that will require the file and load it up here. Context will
 * loop and require those spec files here
 */
function requireAll(requireContext) {
    return requireContext.keys().map((key) => {
        requireContext(key);
    });
}

/**
 * Requires and returns all modules that match
 */
const context = (require as any).context('./src', true, /\.spec\.ts$/);
console.log('Keys: ', context.keys());
requireAll(context);

Пока у меня есть следующие подозрения:

• Карма не видит печатных машин при загрузке модулей, поэтому HTML не распознается как тип
• Webpack не делаетобрабатывать HTML как следует, несмотря на правильную настройку, но только в контексте кармы

Я был бы рад любой помощи, поскольку мы полностью застряли и наши тесты на данный момент непригодны.

Answer 1

После дальнейшего исследования мы нашли частичное решение, которое позволяет тестам проходить и игнорирует module ошибки. Мы изменили наш код для требования контекста в Karma:

function requireAll(requireContext) {
    return requireContext.keys().map((key) => {
        try {
            requireContext(key);
        } catch (err) {
            console.log('Cannot require:', err);
        }
    }
}

Также стоит упомянуть: порядок импорта важен в файле комплекта (это была еще одна проблема, с которой мы столкнулись karma.bundle.ts). Мы переключились с:

import * as testing from '@angular/core/testing';
import * as browser from '@angular/platform-browser-dynamic/testing';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';

на:

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-testing';

import * as testing from '@angular/core/testing';
import * as browser from '@angular/platform-browser-dynamic/testing';

Это не решает нашу проблему напрямую, но позволяет тестам проходить до тех пор, пока импортированные шаблоны, вызывающие ошибки, неиспользуется в тестах (все ошибки импорта будут подавлены предложением catch()).

Однако, если у кого-то есть лучшее решение, я буду рад его реализовать:)