У нас есть гибридное приложение Angular, которое использует карму для юнит-тестирования.Я пытаюсь добавить наш первый набор тестов, но я получаю некоторые ошибки, которые указывают, что карма не может найти dashboard.component.html.
Вид:
import { Component, OnInit } from '@angular/core';
@Component({
templateUrl: './views/components/dashboard/dashboard.component.html'
})
export class DashboardComponent implements OnInit {
constructor() {}
ngOnInit() {
console.log('works!');
}
}
Вот мой karma.config.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['angular', 'jasmine'],
files: [
{ pattern: 'src/test.ts', watched: false },
{ pattern: 'dist/views/components/dashboard/dashboard.component.html', included: false, watched: true }
],
exclude: [],
preprocessors: {
'src/test.ts': ['webpack', 'sourcemap']
},
webpack: require('./webpack-base.config'),
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: true,
concurrency: Infinity,
browsers: ['Chrome_Headless'],
customLaunchers: {
Chrome_Headless: {
base: 'Chrome',
flags: [
'--headless',
'--disable-gpu',
'--remote-debugging-port=9222'
]
},
Chrome_without_security: {
base: 'Chrome',
flags: [
'--headless',
'--disable-gpu',
'--remote-debugging-port=9222',
'--disable-web-security'
]
}
},
// workaround for typescript and chrome/headless
mime: {
'text/x-typescript': ['ts', 'tsx']
}
});
};
Наше гибридное приложение скомпилировано с использованием Webpack.Все файлы просмотра копируются в /view.Вот наш файл веб-пакета:
/* eslint-env node */
const webpack = require('webpack');
const helpers = require('./helpers');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: 'css/[name].[hash].css',
disable: process.env.NODE_ENV === 'development'
});
module.exports = {
mode: 'development',
entry: {
app: './src/js/index.ts'
},
resolve: {
extensions: ['.ts', '.js', '.html'],
alias: {
'@angular/upgrade/static':
'@angular/upgrade/bundles/upgrade-static.umd.js'
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)@angular/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body'
}),
new CopyWebpackPlugin([
{ from: './src/views', to: 'views' },
{ from: './src/js/components', to: 'views/components', ignore: ['*.ts', '*.scss']},
{ from: './src/img', to: 'img' },
{ from: './src/config.js', to: '' }
]),
extractSass
],
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: {
disableDotRule: true
}
},
output: {
filename: 'js/[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular-router-loader']
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [
{
loader: 'css-loader',
options: {
url: false,
import: true,
minimize: true,
sourceMap: true,
importLoaders: 1
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
],
fallback: 'style-loader'
})
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
Наконец, вот мой очень простой тест:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('The Dashboard', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DashboardComponent]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
Это приложение работает правильно, как и при npm start.Опять проблема, которую я получаю, это 404 файла HTML.
ОШИБКА: 'Отклонение необработанного обещания:', 'Не удалось загрузить views / components / dashboard / dashboard.component.html', ';Зона: ',' ProxyZone ',';Задача: ',' Promise.then ',';Значение: ',' Не удалось загрузить views / components / dashboard / dashboard.component.html ', undefined
Я попытался переопределить тестовую спецификацию в TestBed.configureTestingModule() для поиска файла HTMLв разных местах.Я попытался добавить новый шаблон файлов в karma.config.js.Я также попробовал комбинацию двух безуспешно.