一个带有因果报应的Angular2应用程序jasmine抛出多级目录结构的错误 [英] An Angular2 app with karma & jasmine throws errors with multi-level directory structure
问题描述
我正在使用当前的4.0.0-beta.1版本构建一个Angular 2应用程序。经过几个小时的挣扎，我得到了业力。我现在正试图让茉莉花重言式测试（true = true）运行，但业力报告未捕获的ReferenceError：描述未定义。以下是相关的代码部分。
I am building an Angular 2 app with the current 4.0.0-beta.1 release. After many hours of struggle, I got karma running. I'm now trying to get a jasmine tautology test (true=true) to run, but karma reports "Uncaught ReferenceError: describe is not defined". Here are relevant code sections.
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
// these plugins seem to be necessary. Without them, an error about a missing require in app.component.js occurs in karma
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-htmlfile-reporter')
],
files: [
'src/client/app/*.js',
'src/client/app/components/**/*.js'
],
1st.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
//////// SPECS /////////////
describe('1st tests', () => {
it('true is true', () => expect(true).toBe(true));
});
1st.spec.ts文件位于'src / client / app / * .js'文件夹中，该文件夹在文件中指定：karma.conf.js数组
The 1st.spec.ts file is in the 'src/client/app/*.js' folder, which is specified in the files: array of karma.conf.js
缺少什么？你如何让Angular2识别茉莉花功能？我没有将任何测试组件导入app.module.ts，因为我没有看到任何教程提到这一点。这是秘密吗？如果是这样的话呢？
What is missing? How do you get Angular2 to recognize jasmine functions? I do not have any of the testing components imported into app.module.ts because I haven't seen any tutorials mention that. Is that the secret? If so what goes in there?
推荐答案
经过几周的阅读教程，业力博士和购买ng-book2，我发现了当app.component.ts在目录结构中有几个级别时，没有人描述如何设置测试配置。 Karma文档可以解释这一点，但文档是如此冗长和抽象，没有例子，我无法从中获得任何意义。我还发现Angular的快速启动应用程序有各种秘密调味品，以实现业力和茉莉花测试，例如，karma-test-shim.js（你无法通过npm获得）。
After weeks of reading tutorials, karma docs, and buying ng-book2, I discovered that no one describes how to set test configs when app.component.ts is several levels down in the directory structure. Karma docs may explain this, but the docs are so verbose and abstract, without examples, I was not able to gain any meaning from them. I also found that Angular's quickstart apps have various 'secret sauces' to enable karma & jasmine testing, e.g., karma-test-shim.js (which you cannot get via npm).
在没有上述文档的帮助下，我重新开始使用Angular的安装程序。安装程序使用systemjs。 AngularCLI使用Webpack。了解这一点。它对我的解决方案和长期行动产生了影响。 Jasmine测试为Angular Setup的快速入门提供了现成的工作。我将目录结构轻推到我的多层次并调整了很多东西，以找到保持业力的人。茉莉花工作。底线 - Systemjs和karma.config.js都必须一起改变。只有其中一个的更改只会创建新的和新颖的控制台错误。
With no help from the above docs, I re-started with Angular's Setup. Setup uses systemjs. AngularCLI uses Webpack. Read about this. It makes a difference for my solution below and for your longer term actions. Jasmine tests work off the shelf for Angular Setup's Quickstart. I nudged the directory structure to my multi-level and tweaked lots of things to find configs that kept karma & jasmine working. Bottom line - Systemjs and karma.config.js both have to change - together. A change in only 1 of them just creates new and novel console errors.
Systemjs - 将地图对象中的app：更改为您的路径。在我的情况下，它
Systemjs - change app: in the map object to your path. In my case, its
map: {
app: 'src/client/app',
// the rest of map
}
karma.conf.js - 更改module.exports函数中的appBase和appSrcBase
karma.conf.js - change appBase and appSrcBase in the module.exports function
var appBase = 'src/client/app/'; //originally appBase='app/';
var appSrcBase = 'src/client/app/';
控制台错误让问题听起来好像在@angular包路径中。那里的变化只是创造了不同的错不要被吸进去。
The Console errors make it sound like the problem is in the @angular bundle paths. Changes there just created different errors. Don't get sucked in.
希望这可以节省你在具有真实生活目录结构的应用程序上进行测试的大量时间。
Hope this saves you lots of time in getting tests going on an app that has a real life directory structure.
这篇关于一个带有因果报应的Angular2应用程序jasmine抛出多级目录结构的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
