7

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

我从 GitHub 上的 Aurelia repo下载了骨架项目并将其解压缩。

我利用 Scott Allen 的建议来设置 jspm 设置，将 jspm 包放在 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 以在那里找到它。

任何帮助将不胜感激。

4

3 回答 3

4

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

业力.conf.js

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

基本路径设置

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

jspm 设置

接下来，让我们告诉 karma 如何设置我们的 jspm 特定设置，例如要加载哪些文件以及要创建哪些路径。这里要记住的关键一件事是，我们在 as 助手paths中定义的新内容config.js需要在我们的 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（或 traceur）设置，以便 karma 知道哪些文件需要预处理以及使用哪些选项。这是因为我们正在从加载src进行测试。

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

脚注

通常我会链接到一堆有帮助的代码示例，但在这种情况下，我认为这个答案中的代码垃圾邮件是合适的，但如果将来对 karma-jspm 发生任何更改，可能值得编辑或注意在评论中，所以答案不会变得陈旧。

于 2015-09-14T14:09:12.837 回答
2

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

网站结构

然后只需更新引用 wwwroot 的路径即可：

业力.conf.js

在此处输入图像描述

包.json：

包.json

项目.json：

在此处输入图像描述

于 2015-09-14T14:08:58.090 回答
1

基于@PWKad 的回答：

您可能还需要修改传递给 Karmapaths的配置对象的属性，以在每个路径前面加上，以便 Karma 可以拾取它们。jspmbase/

例如，我的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/*'
            }
}

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

于 2015-09-14T19:03:14.667 回答