Asp.Net 5 和 Aurelia Karma 测试

Question

我正在尝试在新的 ASP.NET 5 应用程序中为 Aurelia 设置骨架导航项目。我已经尝试了很多事情并且相信我已经接近了，但是我真的被客户端测试赶上了。

我从 GitHub 上的 Aurelia 存储库下载了 skeleton project 并解压了它。

我利用 Scott Allen 关于设置 jspm 设置的建议将 jspm 包放在 wwwroot 文件夹中，如 this post 中所述。

然后我将项目结构更新为如下所示：

sln
|->wwwroot
 |->dist
 |->jspm_modules
 |->src
 |->styles
 |->test
 |->config.js
 |->index.html
 |->index.js
|->build
|->Controllers
|->doc
|->node_modules
|->aurelia.protractor.js
|->aureliafile.js
|->gulpfile.js
|->karma.conf.js
|->package.json
|->project.json
|->protractor.conf.js
|->Startup.cs

我有两个问题：

1. Aurelia骨架导航启动项目的测试文件夹应该放在哪里？一方面 wwwroot 很有意义，因为这是应用程序特定的其余部分 javascript 文件将会存在。另一方面，那些文件永远不应该提供给客户，所以把它们放在 wwwroot 中没有多大意义。

2. 一旦它们驻留在项目结构中的适当位置，files/values 需要更新什么才能适当地获得测试运行？目前我将它们放在 wwwroot 目录中。我将 karma.conf.js 文件中的 basePath 更新为 'wwwroot'。当我执行 karma start 命令时，尽管在尝试定位“/base/app-bundle.js”时出现 404 错误。该文件存在于 'wwwroot/dist/app-bundle.js'，但我不知道如何配置 karma 以在那里找到它。

如有任何帮助，我们将不胜感激。

Answer 1

IDK 如果此时有关于将测试文件夹放在哪里的明确答案，但我所做的是创建一个新的 "app" 文件夹，其中包含我的 "test" 文件夹和 "wwwroot" 作为兄弟姐妹。这样，就像您提到的那样，测试文件不在 wwwroot 内，因此它们不会被提供给客户端，并且您可以获得将它们逻辑组合在一起的好处。

那么只需更新引用 wwwroot 的路径即可：

karma.conf.js

package.json:

project.json:

Answer 2

这是一个很好的问题，希望将来能使其他人受益，不仅是 Visual Studio 和 IIS，还有由为应用程序服务的父框架驱动的任何项目结构。

karma.conf.js

首先，让我们看看我们实际测试的是什么。由于 karma-jspm 能够使用 babel 进行动态编译，我们将测试我们的 src， 而不是 我们的 dist。这很重要，因为我们要确保我们的业力配置路径都指向那里，但不要管我们的 config.js 这样 system.js 知道从 dist 获取文件，而实际上运行应用程序.

基本路径设置

让我们不要管我们的基本路径。我们在 wwwroot 中有我们的测试和 src，但就像你提到的那样，它并不是我们的测试真正属于的地方。让我们将它们移回根目录并设置 basePath: '' 以便所有路径都从根目录开始。

jspm 设置

接下来，让我们告诉 karma 如何设置我们的 jspm 特定设置，例如加载哪些文件和创建哪些路径。这里要记住的一件关键事情是，我们在 config.js 中定义的新 paths 作为助手需要在我们的 karma.conf.js 中更新，因为我们正在测试 src，而不是dist（config.js 指向）。还要确保将 wwwroot/ 添加到以 src 开头的任何文件或文件路径，以便 karma 知道 在哪里 加载它们。

jspm: {
  // Edit this to your needs
  loadFiles: ['wwwroot/src/**/*.js', '/test/unit/**/*.js'],
  paths: {
    '*': '*.js',
    "services/*": "wwwroot/src/services/*.js"
  }
},

babel 设置

最后，我们需要更新我们的 babel（或 traceur）设置，以便 karma 知道哪些文件需要预处理以及使用哪些选项。这是因为我们正在从 src 加载以进行测试。

preprocessors: {
  'test/**/*.js': ['babel'],
  'wwwroot/src/**/*.js': ['babel']
},

脚注

通常我会 link 一堆有帮助的代码示例，但在这种情况下，我认为在这个答案中使用垃圾代码是合适的，但如果将来 karma- jspm 可能值得在评论中进行编辑或注意，这样答案就不会变得陈旧。

Answer 3

基于@PWKad 的回答：

您可能还需要修改传递给 Karma 的 jspm 配置对象的 paths 属性以在每个路径前添加 base/ 以便 Karma 可以选择它们向上。

例如，我的 src/App/wwwroot/config.js 文件看起来像这样

paths: {
    "*": "app/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
}

我的karma.conf.js看起来像这样

basePath: '',
urlRoot: '/',
jspm: {
     config: 'src/app/wwwroot/config.js',
     packages: 'src/app/wwwroot/jspm_packages',
     loadFiles: 'tests/unit/**/*.js',
     serveFiles: 'src/app/wwwroot/app/**/*.js',
     paths: {
                "app/*": 'base/src/app/wwwroot/app/*',
                "test/*": 'base/test/*',
                "github:*": 'base/src/app/wwwroot/jspm_packages/github/*',
                "npm:*": 'base/src/app/wwwroot/jspm_packages/npm/*'
            }
}

This project 已针对这种情况设置了工作单元测试。它确实使用 Typescript，但概念是相同的。

Asp.Net 5 和 Aurelia Karma 测试

Asp.Net 5 and Aurelia Karma tests

karma-runner

gulp-karma

aurelia

asp.net-core

karma.conf.js

基本路径设置

jspm 设置

babel 设置

脚注