混合角应用测试与噶无法加载HTML

Question

我们有一个使用人缘进行单元测试的混合角的应用程序。我想添加我们的测试，首套房，但我得到了一些错误，它们指明因果报应找不到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。这里是我们的WebPack文件：

/* 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。再次证明，我发现了问题是HTML文件的404。

ERROR： '未处理无极抑制：'， '无法加载视图/组件/仪表板/ dashboard.component.html'，“;区： ' 'ProxyZone'，';任务： ' 'Promise.then'，';值：”，‘无法加载视图/组件/仪表板/ dashboard.component.html’，未定义

我试着重写测试规范中TestBed.configureTestingModule()寻找在不同的地方HTML文件。我尝试添加在karma.config.js一个新的文件模式。我也试着两者的组合没有成功。

Answer 1

我固定它通过执行以下操作：

在karma.config.js我加入这一行：

proxies: { "/dist/": 'http://localhost:8080' }

在规范文件中添加此覆盖：

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [DashboardComponent]
        }).overrideComponent(DashboardComponent, {
            set: {
                templateUrl: '/dist/views/components/dashboard/dashboard.component.html'
            }
        })
        .compileComponents();
    }));

我没有删除{ pattern: 'dist/views/components/dashboard/dashboard.component.html', included: false, watched: true }模式，因为它是没有做任何事情有人在评论中指出。