解决多project的angular应用单元测试报 ChromeHeadlessCI未注册的错误

此文章解决angular在单元测试时报：Cannot load browser "ChromeHeadlessCI": it is not registered! 错误。

angular在开发环境中的单元测试默认是基于chrome浏览器的，但在 CI 过程中的环境往往并没有桌面环境，没有桌面环境也就意味着无法在 CI 中运行chrome浏览器。这时候则需要一个可以在非桌面环境下运行的chrome浏览器：chromium。

同时又由于chromium默认在非root权限（sandbox）下运行，而我们 CI 时借助了docker容器，这个容器在运行时又是root权限，所以我们在 CI 的进行单元测试的过程中，则需要加入no-sandbox 的参数。

karma.conf

angular的单元测试由karma负责启动，我们需要的适用于CI的无头浏览器也需要配置在这，找到配置文件，修改以下几行：

    browsers: ['Chrome'],
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },

上述配置的作用是增加一个自定义的浏览器类型ChromeHeadlessCI，这个名字随便起。下面简单对配置做下说明：

    browsers: ['Chrome'],
    customLaunchers: {  // 自定义启动器
      ChromeHeadlessCI: { // 自定义一个名字为ChromeHeadlessCI的启动器
        base: 'ChromeHeadless', // 基于 ChromeHeadless
        flags: ['--no-sandbox'] // 在ChromeHeadless的基础上，增加--no-sandbox参数，这样就可以在root下运行了
      }
    },

命令

如果我们当前开发的是历史的项目，则新的angular cli与原项目中使用的angular cli必然会产生对node.js依赖的版本冲突。这时候我们就不要去使用本地全局的angular cli了，改用node_modules/@angular/cli/bin/ng会好很多。最后由于在 CI 时我们在为其加入--no-watch，以便可以顺利结束测试，最终的命令大体如下：

# node_modules/@angular/cli/bin/ng test wechat -- --no-watch --no-progress --browsers=ChromeHeadlessCI

多project

如果你的angular也是一个多project的项目，那么需要注意的是每个子项目（比如你有一个web, 一个lib，还有一个wechat)都可以对应唯一的配置文件，至于这个配置文件在哪，则需要去angular.json中去查看：

        "test": {
          "options": {
            "karmaConfig": "file/path/of/karma.conf.js",

在执行 CI 测试，推荐多写几条命令分别测试几个project，这样以来具体哪个project的配置文件有问题便可以一目了然了。