2

我已经退出了我的 angular-cli 项目,并且无法让任何代码覆盖工作。我尝试了各种软件包和配置,但似乎找不到合适的组合。当我运行npm run test测试时,请成功运行并显示 Chrome 浏览器输出。我只想能够设置阈值并输出覆盖范围。

这是我的 package.json

{
"name": "spa-stay-mgmt",
"version": "0.0.0",
"license": "MIT",
"scripts": {
  "ng": "ng",
  "lint": "ng lint",
  "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
  "build": "webpack",
  "start": "mvn clean spring-boot:run",
  "test": "karma start ./karma.conf.js --code-coverage",
  "e2e": "protractor ./protractor.conf.js",
  "watch": "webpack --watch --progress"
 },
 "private": true,
 "dependencies": {
   "@angular/animations": "^4.4.6",
   "@angular/common": "^4.4.6",
   "@angular/compiler": "^4.4.6",
   "@angular/core": "^4.4.6",
   "@angular/forms": "^4.4.6",
   "@angular/http": "^4.4.6",
   "@angular/platform-browser": "^4.4.6",
   "@angular/platform-browser-dynamic": "^4.4.6",
   "@angular/router": "^4.4.6",
   "angular2-uuid": "^1.1.1",
   "core-js": "^2.4.1",
   "enquire.js": "^2.1.6",
   "ng2-device-detector": "^1.0.0",
   "ng2-redux": "^5.1.2",
   "ng2-simple-timer": "^1.3.3",
   "ngx-cookie-service": "^1.0.9",
   "redux": "^3.7.2",
   "redux-devtools-extension": "^2.13.2",
   "redux-ui-router": "^0.7.2",
   "rxjs": "^5.1.0",
   "urijs": "^1.18.12",
   "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-in-memory-web-api": "^0.3.2",
    "autoprefixer": "^6.5.3",
    "clean-webpack-plugin": "^0.1.16",
    "codelyzer": "~3.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.1",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^3.0.0",
   "file-loader": "^0.10.0",
   "istanbul-instrumenter-loader": "^2.0.0",
   "jasmine-core": "~2.6.2",
   "jasmine-node": "^1.14.5",
   "jasmine-spec-reporter": "~4.1.0",
   "json-loader": "^0.5.4",
   "karma": "~1.7.0",
   "karma-chrome-launcher": "~2.1.1",
   "karma-cli": "~1.0.1",
   "karma-coverage-istanbul-reporter": "^1.2.1",
   "karma-jasmine": "~1.1.0",
   "karma-jasmine-html-reporter": "^0.2.2",
   "karma-phantomjs-launcher": "^1.0.4",
   "less-loader": "^4.0.2",
   "node-sass": "^4.5.3",
   "phantomjs-prebuilt": "^2.1.14",
   "postcss-loader": "^1.3.3",
   "postcss-rtl": "^0.5.10",
   "postcss-url": "^5.1.2",
   "protractor": "~5.1.2",
   "raw-loader": "^0.5.1",
   "sass-lint": "^1.10.2",
   "sass-loader": "^6.0.3",
   "script-loader": "^0.7.0",
   "source-map-loader": "^0.2.0",
   "style-loader": "^0.13.1",
   "stylus-loader": "^3.0.1",
   "ts-node": "~3.0.4",
   "tslint": "~5.3.2",
   "typescript": "~2.3.3",
   "url-loader": "^0.5.7",
   "webpack": "^3.4.1",
   "webpack-dev-server": "^2.6.1"
  },
 "browserslist": [
   "> 1%",
   "last 2 versions"
 ]
}

这是我的 karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
      captureConsole: true
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true,
      dir: '%browser%',
      // enforce percentage thresholds
      // anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
      thresholds: {
        emitWarning: false, // set to `true` to not fail the test command when thresholds are not met
        global: { // thresholds for all files
          statements: 100,
          lines: 100,
          branches: 100,
          functions: 100
        },
        each: { // thresholds per file
          statements: 100,
          lines: 100,
          branches: 100,
          functions: 100
        }
      }
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity,
    files:[
      { pattern: 'src/main/webapp/stay-mgmt/app/**/*.spec.ts',  watched: false }
    ]
  });
};

这是我的 webpack.config.js

const fs = require('fs');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const postcssUrl = require('postcss-url');
const cssnano = require('cssnano');

const rtl = require('postcss-rtl');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack');
const { GlobCopyWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack');
const { CommonsChunkPlugin } = require('webpack').optimize;
const { AotPlugin } = require('@ngtools/webpack');

const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src/main/webapp/stay-mgmt', '$$_gendir', 'node_modules');
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
const minimizeCss = true;
const baseHref = "";
const deployUrl = "";
const postcssPlugins = function () {
        // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
        const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
        const minimizeOptions = {
            autoprefixer: true,
            safe: true,
            mergeLonghand: false,
            discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
        };
        return [
            postcssUrl({
                url: (URL) => {
                    // Only convert root relative URLs, which CSS-Loader won't process into require().
                    if (!URL.startsWith('/') || URL.startsWith('//')) {
                        return URL;
                    }
                    if (deployUrl.match(/:\/\//)) {
                        // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
                        return `${deployUrl.replace(/\/$/, '')}${URL}`;
                    }
                    else if (baseHref.match(/:\/\//)) {
                        // If baseHref contains a scheme, include it as is.
                        return baseHref.replace(/\/$/, '') +
                            `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
                    }
                    else {
                        // Join together base-href, deploy-url and the original URL.
                        // Also dedupe multiple slashes into single ones.
                        return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
                    }
                }
            }),
            //rtl(),
            autoprefixer(),
        ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
    };

module.exports = {
  "resolve": {
    "extensions": [
      ".ts",
      ".js"
    ],
    "modules": [
      "./node_modules",
      "./node_modules"
    ],
    "symlinks": true
  },
  "resolveLoader": {
    "modules": [
      "./node_modules",
      "./node_modules"
    ]
  },
  "entry": {
    "main": [
      "./src/main/webapp/stay-mgmt/main.ts"
    ],
    "polyfills": [
      "./src/main/webapp/stay-mgmt/polyfills.ts"
    ],
    "styles": [
      "./src/main/webapp/stay-mgmt/style/styles.scss"
    ]
  },
  "output": {
    "path": path.join(process.cwd(), "./src/main/webapp/stay-mgmt/dist"),
    "filename": "[name].bundle.js",
    "chunkFilename": "[id].chunk.js"
  },
  "module": {
    "rules": [
      {
        "enforce": "pre",
        "test": /\.js$/,
        "loader": "source-map-loader",
        "exclude": [
          /\/node_modules\//
        ]
      },
      {
        "test": /\.json$/,
        "loader": "json-loader"
      },
      {
        "test": /\.html$/,
        "loader": "raw-loader"
      },
      {
        "test": /\.(eot|svg)$/,
        "loader": "file-loader?name=[name].[hash:20].[ext]"
      },
      {
        "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|cur|ani)$/,
        "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000"
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.css$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.scss$|\.sass$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "sass-loader",
            "options": {
              "sourceMap": false,
              "precision": 8,
              "includePaths": []
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.less$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "sourceMap": false
            }
          }
        ]
      },
      {
        "exclude": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.styl$/,
        "use": [
          "exports-loader?module.exports.toString()",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "stylus-loader",
            "options": {
              "sourceMap": false,
              "paths": []
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.css$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.scss$|\.sass$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "sass-loader",
            "options": {
              "sourceMap": false,
              "precision": 8,
              "includePaths": []
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.less$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "less-loader",
            "options": {
              "sourceMap": false
            }
          }
        ]
      },
      {
        "include": [
          path.join(process.cwd(), "src/main/webapp/stay-mgmt/style/styles.scss")
        ],
        "test": /\.styl$/,
        "use": [
          "style-loader",
          {
            "loader": "css-loader",
            "options": {
              "sourceMap": false,
              "importLoaders": 1
            }
          },
          {
            "loader": "postcss-loader",
            "options": {
              "ident": "postcss",
              "plugins": postcssPlugins
            }
          },
          {
            "loader": "stylus-loader",
            "options": {
              "sourceMap": false,
              "paths": []
            }
          }
        ]
      },
      {
        "test": /\.ts$/,
        "loader": "@ngtools/webpack"
      }
    ]
  },
  "plugins": [
    new CleanWebpackPlugin(['src/main/webapp/stay-mgmt/dist']),
    new CopyWebpackPlugin([
      { from: "src/main/resources/adrum/", to: "adrum/" },
      { from: "src/main/resources/translations/", to: 'translations/' }
    ]),
    new NoEmitOnErrorsPlugin(),
    new GlobCopyWebpackPlugin({
      "patterns": [
        "assets",
        "favicon.ico"
      ],
      "globOptions": {
        "cwd": path.join(process.cwd(), "src/main/webapp/stay-mgmt"),
        "dot": true,
        "ignore": "**/.gitkeep"
      }
    }),
    new ProgressPlugin(),
    new SourceMapDevToolPlugin({
      "filename": "[file].map[query]",
      "moduleFilenameTemplate": "[resource-path]",
      "fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
      "sourceRoot": "webpack:///"
    }),
    new HtmlWebpackPlugin({
      "template": "src/main/webapp/stay-mgmt/index.html",
      "filename": "./index.html",
      "hash": false,
      "inject": true,
      "compile": true,
      "favicon": false,
      "minify": false,
      "cache": true,
      "showErrors": true,
      "chunks": "all",
      "excludeChunks": [],
      "title": "Webpack App",
      "xhtml": true,
      "chunksSortMode": function sort(left, right) {
        let leftIndex = entryPoints.indexOf(left.names[0]);
        let rightindex = entryPoints.indexOf(right.names[0]);
        if (leftIndex > rightindex) {
            return 1;
        }
        else if (leftIndex < rightindex) {
            return -1;
        }
        else {
            return 0;
        }
    }
    }),
    new BaseHrefWebpackPlugin({}),
    new CommonsChunkPlugin({
      "minChunks": 2,
      "async": "common"
    }),
    new CommonsChunkPlugin({
      "name": [
        "inline"
      ],
      "minChunks": null
    }),
    new CommonsChunkPlugin({
      "name": [
        "vendor"
      ],
      "minChunks": (module) => {
                return module.resource
                    && (module.resource.startsWith(nodeModules)
                        || module.resource.startsWith(genDirNodeModules)
                        || module.resource.startsWith(realNodeModules));
            },
      "chunks": [
        "main"
      ]
    }),
    new NamedModulesPlugin({}),
    new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/environment.ts": "environments/environment.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/main/webapp/stay-mgmt/tsconfig.app.json",
      "skipCodeGeneration": true
    })
  ],
  "node": {
    "fs": "empty",
    "global": true,
    "crypto": "empty",
    "tls": "empty",
    "net": "empty",
    "process": true,
    "module": false,
    "clearImmediate": false,
    "setImmediate": false
  },
  "devServer": {
    "historyApiFallback": true
  }
};
4

2 回答 2

1

我在弹出的 CLI 应用程序中将以下内容添加到我的karma.conf.js文件中,以使覆盖范围起作用。

coverageIstanbulReporter: {
  reports: [ 'html', 'lcovonly', 'text-summary' ],
  fixWebpackSourcePaths: true
},
angularCli: {
  environment: 'dev',
  codeCoverage: true
},
reporters: config.angularCli && config.angularCli.codeCoverage
            ? ['progress', 'coverage-istanbul']
            : ['progress', 'kjhtml'],

与原始版本的唯一区别是text-summary在报道记者、codeCoverage: trueangularClireporters逻辑中添加了 。

现在,当我运行时npm run test,我会得到如下所示的文本摘要,以及项目文件夹根目录下的覆盖文件夹中的 HTML 报告。

=============================== Coverage summary ===============================
Statements   : 100% ( 28/28 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 6/6 )
Lines        : 100% ( 24/24 )
================================================================================

如果要关闭覆盖,请在karma.conf.js中设置codeCoverage为 false 。

这是我发现在弹出的CLI 应用程序中使覆盖报告工作的唯一方法。

我刚刚使用 CLI 版本 1.5.4 在一个新弹出的应用程序上对此进行了测试,并且它有效。

于 2017-11-24T17:43:54.520 回答
0

代码覆盖率采用一个参数,默认为 false。在您的情况下,您正在传递--code-coverage但未传递任何值,因此默认情况下采用false

尝试这个

 ng test -c karma.conf.js --code-coverage true --single-run true

您还可以将其添加到您的 package.json 并从命令中调用它

“测试”:“ng测试--code-coverage true”

然后npm run test

于 2017-11-24T17:07:18.340 回答