如何解决混合Angular Js和Angular 8应用程序的单元测试
我正在研究angular js和angular 8混合应用程序。在angular中创建的新组件已降级以在angular js中使用。模块的代码段如下所示：
if (Cache::has('myKey')){
$value = Cache::get('myKey');
} else {
$value = DB::table('myTable')->get();
Cache::put('myKey',$value);
}
//use cached value...
在@NgModule({
// Declaration and Imports
providers:[
ServiceName,// Other Services
],entryComponents: [
ComponentName,// Other components to be used in angular js
]
})
export class FeatureModule{
}
declare var angular: angular.IAngularStatic
angular.module('app')
.directive('cmpName',downgradeComponent({component: ComponentName }) as angular.IDirectiveFactory)
.factory('serviceName',downgradeInjectable(ServiceName));
文件中，有以下代码。
app.module.ts角度cli生成的组件规格文件中没有任何更新。
在// Usual Stuff
export class AppModule {
constructor(
private upgrade: UpgradeModule,) {
}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body,['app'],{ strictDi: true });
}
}
中，
tsconfig.spec.json {
"extends": "../tsconfig.json","compilerOptions": {
"baseUrl": "./","outDir": "../out-tsc/spec","types": ["jasmine","node","angular"]
},"files": ["test.ts","polyfills.ts"],"include": ["**/*.spec.ts","**/*.d.ts"]
}
如下所示。
karma.conf.js现在，如果我运行module.exports = function (config) {
config.set({
basePath: '',frameworks: ['jasmine','@angular-devkit/build-angular'],plugins: [
require('karma-jasmine'),require('karma-chrome-launcher'),require('karma-jasmine-html-reporter'),require('karma-coverage-istanbul-reporter'),require('@angular-devkit/build-angular/plugins/karma')
],client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},coverageIstanbulReporter: {
dir: require('path').join(__dirname,'../coverage/ProjectFolder'),reports: ['html','lcovonly','text-summary'],fixWebpackSourcePaths: true
},reporters: ['progress','kjhtml'],port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['Chrome'],singleRun: false,restartOnFileChange: true
});
};
或npm run test命令来运行测试套件，则出现以下错误。ng test
如何解决此问题？我是否必须模拟在模块文件中声明的An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at Module../..path-to-module-file/feature.module.ts.变量。感谢您的帮助吗？
解决方法
我不太了解具体细节，但是我使用Webpack和Karma运行混合应用程序。我降级了所有组件，以便像您一样可以在AngularJS中使用它们。
区别在于我有一个名为vendor.ts的文件，其中包含AngularJS。我敢打赌，您也这样做，因为您只说测试失败，而不是说产品坏了。我的业力配置文件中有一个条目：
files: [
{ pattern: "node_modules/babel-polyfill/dist/polyfill.js",watched: false },{ pattern: "node_modules/intl/locale-data/jsonp/en-GB.js",{ pattern: "node_modules/intl/locale-data/jsonp/fr-FR.js",{ pattern: "static/polyfills.ts",{ pattern: "static/vendor.ts",{ pattern: "node_modules/zone.js/dist/long-stack-trace-zone.js",{ pattern: "node_modules/zone.js/dist/proxy.js",{ pattern: "node_modules/zone.js/dist/sync-test.js",{ pattern: "node_modules/zone.js/dist/jasmine-patch.js",{ pattern: "node_modules/zone.js/dist/async-test.js",{ pattern: "node_modules/zone.js/dist/fake-async-test.js",{ pattern: "node_modules/angular-mocks/angular-mocks.js",{ pattern: "static/main.ts",{ pattern: "static/main.test.ts",],这会告诉Karma要watch and serve in the browser哪些文件。我认为这意味着在Webpack编译这些文件之后，Karma-Webpack可以找到已编译的文件并将其提供服务。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。