Asp.Net 5 和 Aurelia Karma 测试

Question

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

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

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

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

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.一旦它们位于项目结构中的适当位置，需要更新哪些文件/值才能使测试正常运行？目前我将它们放在 wwwroot 目录中。我将 karma.conf.js 文件中的 basePath 更新为“wwwroot”。当我执行 karma start 命令时，它给了我一个 404 错误，试图定位“/base/app-bundle.js”。该文件存在于“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。这很重要，因为我们要确保我们的 karma 配置路径都指向那里，但不要管我们的 config.js，以便 system.js 在实际运行应用程序时知道从 dist 获取文件。

基本路径设置

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

jspm 设置

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

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']
},

脚注

通常我会链接到一堆有用的代码示例，但在这种情况下，我认为此答案中的代码垃圾邮件是合适的，但如果将来对 karma-jspm 发生任何更改，则可能值得编辑或注意在 cmets 中，因此答案不会过时。

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，但概念是一样的。