Angular学习笔记74：使用 Phantomjs 模拟浏览器进行Jenkins 持续构建测试

在 Jenkins + SonarQube 中，使用 ng test --code-coverage --watch=false只是来获取覆盖率，关于 Bugs 、Code Smells、Duplications 可以使用 Sonar-Scanner 来获取，所以使用 Phantomjs 模拟浏览器从而获取覆盖率。

安装PhantomJS

1. 下载PhantomJS

下载PhantomJS Windows 版本

下载PhantomJS MacOS 版本

下载PhantomJS Linux 64位 版本

2. 配置 Phantomjs

解压下载后的压缩包，将其添加到环境变量中。

• 执行vi .zshrc在其中添加

# phantomjs
export PHANTOMJS_HOME=/Users/wjy/Documents/phantomjs/phantomjs-2.1
export PATH=$PATH:$PHANTOMJS_HOME/bin

• 执行source .zshrc

• 验证安装

phantomjs --version

3. 在项目中安装 karma-phantomjs-launcher

在项目中执行命令：

npm install --save-dev karma-phantomjs-launcher

4. 修改 karma 配置文件

修改 karma.conf.js 配置文件

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    singleRun: false,
    browsers: ['PhantomJS'],
    phantomjsLauncher: {
      exitOnResourceError: true
    }
  });
};

5. 重新执行