Karma

1. 请确保您的计算机上已安装 Node.js。

2. 请确保在设置中启用了 Karma 插件。 按下 Ctrl+Alt+S 打开设置，然后选择 插件。 单击 已安装 选项卡。 在搜索字段中输入 Karma。 有关插件的详细信息，请参阅 管理插件。

1. 打开嵌入式 终端 （Alt+F12）。

2. 输入以下命令之一：

   • 如果已在 package.json 中定义 Karma 及其所有所需插件，则使用 npm install。

   • 要将 Karma 及插件安装为 开发依赖项：

     npm install --save-dev karma npm install --save-dev <karma_plugin> <another_karma_plugin>

创建 Karma 配置文件

1. 打开 终端 并根据操作系统输入下列命令之一以启动 karma.conf.js 生成向导：

   • 对于 macOS 或 Linux： ./node_modules/karma/bin/karma init

   • 对于 Windows：

     npm install -g karma-cli karma init

2. 按照向导提示回答相关问题，指定要使用的测试框架以及需自动捕获的浏览器。

   另请参阅 Karma 文件：模式匹配。

从编辑器运行单个测试

• 点击左侧标识栏中的 或 ，然后从列表中选择 运行 <test_name>。

  借助标识栏中的 测试状态 图标 和 ，您还可以直接在编辑器中查看测试是否通过或失败。

创建 Karma 运行配置

1. 打开 运行/调试配置 对话框（位于主菜单中的 运行 | 编辑配置 ），点击左侧窗格中的 ，并从列表中选择 Karma。 将打开 运行/调试配置：Karma 对话框。

2. 指定要使用的 Node.js 解释器。

   如果选择 项目 别名，WebStorm 将自动使用来自 Node 解释器 字段中 Node.js 页面上的项目默认解释器。 在大多数情况下，WebStorm 会自动检测项目的默认解释器并填充该字段。

   您也可以选择另一个已配置的本地或远程解释器，或点击 来配置一个新解释器。

   如需了解更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统 Linux 中使用 Node.js。

   可选地，指定要传递给 Node.js 的 Node.js 专用参数 和 环境变量。

3. 指定 karma.conf.js 的路径。

4. 指定要使用的 karma 包。 可以是下列之一：

   • Karma 安装目录 /npm/node_modules/karma 。 如果通过 Node Package Manager 正常安装 Karma ，WebStorm 会自动检测 Karma 安装目录。

   • 到 node_modules/@angular/cli 的路径。

   • 如果使用 Nx ，则为 node_modules/nx 的路径。

   

5. 指定应用的工作目录。 默认情况下， 工作目录 字段显示项目根目录。 如需更改此默认设置，请指定所需文件夹的路径。

6. 指定要运行的测试。 可以是特定测试或测试套件、完整的测试文件，亦或包含测试文件的文件夹。

7. 也可以选择性地指定要传递给 Karma 的命令行选项，以覆盖 karma.conf.js 配置文件中的默认设置。

   例如，要在 Headless Chrome 中运行或调试测试，请在 Karma 选项 字段中键入 --browsers ChromeHeadless。 如需了解更多信息，请参阅 使用 Headless Chrome 进行自动化测试。

   要查看所有可用的 CLI 选项，请在 Alt+F12 中的 终端 中键入 karma start --help。

通过运行配置运行测试

1. 从配置列表中选择 Karma 运行/调试配置，然后点击列表中或工具栏上的 。

   

2. 在 测试运行器 选项卡中的 运行 工具窗口中监视测试执行情况并分析测试结果。 如需了解更多信息，请参阅 浏览测试结果。

重新运行失败的测试

• 点击测试结果工具栏上的 。 WebStorm 将执行上一次会话中失败的所有测试。

  

• 如需重新运行某个特定失败的测试，请在该测试的上下文菜单中选择 运行 <test name>。

  

• 如需重新运行上次会话中的所有测试，请点击测试结果工具栏上的 或按 Ctrl+F5。

  

• 如需在更改相关源代码后自动重新运行测试，请点击测试结果工具栏上的 。

  

如需了解更多信息，请参阅 重新运行测试。

• 如需在测试及其目标之间导航，请在编辑器中打开该文件，然后从上下文菜单中选择 转到 | 测试(S) 或 转到 | 测试目标 ，或直接按 Ctrl+Shift+T。

• 如需从测试结果跳转到测试定义，请在 测试运行器 选项卡中双击测试名称，或从上下文菜单中选择 跳转到源 ，或直接按 F4。 测试文件将在编辑器中打开，光标将定位在测试定义处。

• 对于失败的测试，WebStorm 会根据堆栈跟踪将您定位到测试中的失败代码行。 如果堆栈跟踪中未包含确切的代码行，将跳转到测试定义。

从编辑器开始调试单个测试

1. 在测试中设置断点。

2. 单击 或 在边距中，并从列表中选择 调试 <test_name>。

通过运行/调试配置启动测试调试

1. 在必要的位置 设置断点。

2. 如上所述创建 Karma 运行/调试配置。

3. 从配置列表中选择 Karma 运行/调试配置，并单击列表或工具栏中的 。

   

4. 在打开的 调试工具窗口 中，照常操作： 逐步执行程序、 暂停并恢复程序执行、 在程序挂起时进行检查 、查看调用栈和变量、设置监视、计算变量值、 查看实际的 HTML DOM等。

安装 karma-coverage

• 在嵌入式 终端 （Alt+F12 ）中键入：

  npm install  --save-dev karma-coverage

将 karma-coverage 定义添加到配置文件中

1. 在编辑器中打开 karma.conf.js 。

2. 定位 reporters 定义，并以如下格式将 coverage 添加到数值列表中：

   reporters: ['progress', 'coverage']

3. 添加一个 preprocessors 定义，并以如下格式指定覆盖范围：

   preprocessors: {'**/*.js': ['coverage']}

使用覆盖率启动测试

1. 如上所述创建 Karma 运行/调试配置。

2. 从配置列表中选择 Karma 运行/调试配置，并单击列表或工具栏中的 。

   

   或者，使用编辑器中的测试图标快速运行特定套件或测试并收集覆盖率信息。

   

3. 在 Coverage 工具窗口中监视代码覆盖情况。

   每次运行 Karma 测试时，都会在磁盘上生成覆盖率报告。 覆盖率报告的格式可以在配置文件中进行配置，例如：

   // karma.conf.js module.exports = function(config) { config.set({ ... // optionally, configure the reporter coverageReporter: { type : 'html', dir : 'coverage/' } ... });};

   以下为可接受的 type 值：

   • html 会生成一组带有注释源代码的 HTML 文件。

   • lcovonly 会生成一个 lcov.info 文件。

   • lcov 会生成 HTML + .lcov 文件。 默认采用此格式。

   • cobertura 会生成一个 cobertura-coverage.xml 文件，以便轻松集成 Hudson。

   • text-summary 会生成一份简洁的覆盖率文本摘要，通常输出到控制台。

   • text 会生成包含所有文件覆盖率的详细文本表格。