Visual Studio Team Services Build yml npm test 无法识别

Question

我正在尝试在 Visual Studio Team Services Build 上运行 npm 安装和测试（使用 YAML 配置构建）。我有以下定义。

** 更新**

queue:
  name: Hosted VS2017
  demands: npm

steps:
- task: NodeTool@0
  inputs:
    versionSpec: "8.x"


task: Npm@1
inputs:
command: "custom"
verbose: "false"
customCommand: "install @angular/cli -g"
task: Npm@1
inputs:
verbose: "false"
task: CmdLine@1
inputs:
filename: "ng"
arguments: "test --watch=false --single-run=true --reporters=junit,progress"
task: PublishTestResults@2
inputs:
testResultsFiles: "**\test.xml"
testRunTitle: "Jasmine Tests"

安装运行良好，但在测试步骤中出现错误：

85% chunk id optimization 86% hashing 87% module assets processing 88% chunk assets processing 89% additional chunk assets processing 90% recording 91% additional asset processing 92% chunk asset optimization 94% asset optimization 95% emitting
2017-12-06T06:21:34.7643927Z ##[error]Process completed with exit code 1. 2017-12-06T06:21:34.7682485Z ##[section]Finishing: Run Tests

我正在使用 puppeteer 来解决缺少 chrome 来运行测试的问题。

Answer 1

改用此代码：

queue: Hosted VS2017
steps:
- script: echo installing packages
- task: Npm@1
  displayName: npm install
  inputs:
    command: install
- task: Npm@1
  displayName: npm test
  inputs:
    command: custom
    customCommand: run test

顺便说一句，您需要在 package.json 中添加 @angular/cli 依赖项以在运行 npm install 命令期间安装 angular cli。

Answer 2

终于搞定了，但对解决方案不是100%满意，在这里发布进度和开放点以及详细信息以重现它，希望它可以帮助其他人，我们可以改进它。

场景：我需要在 Angular 4 项目上配置 CI 并在 Visual Studio Team Service CI 托管环境下运行它，我想使用基于 yaml 的配置。 p>

我发现的问题：

• 托管环境带有旧节点版本 (1)。
• 默认情况下，托管环境中未安装 Chrome，幻影浏览器不再是解决方案，因为它是一个废弃的项目。
• 您需要全局安装 angular-cli。

我得到的当前工作解决方案，步骤：

关于您的项目：

打开你的命令提示符，安装 puppeteer, karma-junit-reporter

npm install puppeteer karma-junit-reporter --save-dev

配置你的 karma.conf.js

在文件顶部添加以下代码行

process.env.CHROME_BIN = require('puppeteer').executablePath();

然后在插件部分（添加 karma-junit-reporter）

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-junit-reporter'), // add karma-unit reporter
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],

在记者部分将junit记者设置为有效，并进行配置：

    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul', 'junit']
              : ['progress', 'kjhtml', 'junit'],
    junitReporter: {
      outputDir: '',
      outputFile: 'test.xml',
    },

现在是时候在项目的根目录中添加一个名为 .vsts-ci.yml 的文件（刚刚将原始内容粘贴到此链接中：https://pastebin.com/0XpmpPrp）

queue:
  name: Hosted VS2017
  demands: npm

steps:
- task: NodeTool@0
  displayName: "Updating node to version 8.x"
  inputs:
    versionSpec: "8.x"


task: Npm@1
displayName: "installing angular-cli"
inputs:
command: "custom"
verbose: "false"
customCommand: "install @angular/cli@1.0.2 -g"
task: Npm@1
inputs:
verbose: "false"
task: CmdLine@1
displayName: "run tests: ng test"
inputs:
filename: "ng"
arguments: "test --watch=false --single-run=true --reporters=junit,progress"
task: PublishTestResults@2
displayName: "Publish Test Results (test.xml)"
inputs:
testResultsFiles: "**\test.xml"
testRunTitle: "Jasmine Tests"

它的作用：

• 更新节点版本。
• 全局安装 angular-cli（我坚持使用包中使用的版本）。
• 执行 noop 命令（我不知道为什么需要它，但如果我不添加它会中断）。
• 执行 ng 测试（单次运行并使用 junit 作为报告器）。
• 发布测试结果。

我发现的提示和有趣的帖子：

• 使用 UI 构建工具创建构建，然后有一个选项可以将其转换为 yaml。

• 节点工具更新任务：https://docs.microsoft.com/en-us/vsts/build-release/tasks/tool/node-js

• Puppeteer 和 VSTS：http://benjaminspencer.me/post/14/headless-chrome-vsts

• Angular 4 和 VSTS (I)：https://csharperimage.jeremylikness.com/2016/12/integrating-angular-2-unit-tests-with.html

• Angular 4 和 VSTS (II)：https://blogs.msdn.microsoft.com/premier_developer/2017/05/17/integrating-angular-4-unit-tests-with-visual-studio-team-services-vsts/

改进空间：

• 避免必须全局安装 angular-cli，尝试将自定义脚本添加到我的 package-json 中，但是当我调用类似“npm run test:ci”之类的内容时，Visual Studio 构建运行程序无法识别它。
• 我想摆脱 puppeteer，可以选择 karma-jsdom-launcher 吗？