为 angular 库设置 Karma

Question

我目前正在构建一个 Angular 库，我希望能够运行进行一些测试。在按照 these 说明进行操作后，我设法正确设置了所有内容，并且实际上能够运行我的测试。

主要问题

尽管一切运行都正常，但还是发生了一些尴尬的事情。当我在每个 .ts 文件旁边运行 npm test 生成一个 .js 文件。通常所有 d.ts 和一个大的 .js 文件都放在一个 dist 文件夹中，项目使用该库使用。那么有没有人知道这些 javascript 文件是从哪里生成的，如果确实需要它们，因为所有这些代码都已经存在，可以说在 dist 文件夹中。

加分题

没有上面那么重要，所有的测试结果都在终端显示，而浏览器只显示：

Karma v1.4.1 - 已连接 Chrome 61.0.3163 (Mac OS X 10.12.6) 空闲

那么是否有一个很好的修复程序可以像开箱即用的 angular-cli 一样好地显示我的测试？

注意做完功课没有在网上找到相关的东西，不想上传一堆难听的json。如果有人对问题的方向有想法，我会很乐意包含代码。

我的库的基本结构是由this

生成的

编辑： karma.config.js

module.exports = function(config) {
  config.set({
     basePath: '',
    frameworks: ['jasmine', 'karma-typescript'],
    files: [
    'init-test-bed.spec.ts',
    'src/**/*.ts'
    ],
    exclude: [
    ],
    preprocessors: {
         '**/*.ts': ['karma-typescript']
    },

    karmaTypescriptConfig: {
      bundlerOptions: {
        entrypoints: /\.spec\.ts$/,
        transforms: [
        require('karma-typescript-angular2-transform')
        ]
    },

    compilerOptions: {
        lib: ['ES2015', 'DOM']
    }
},
    reporters: ['progress',  'karma-typescript'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
})
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "rootDir": "./src",
     "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2015",
      "dom"
    ],
    "skipLibCheck": true,
    "types": [
      "jasmine",
      "node"
    ]
  }
}

最后 test 运行这个脚本

"test": "tsc && karma start"

Answer 1

由于您的打字稿配置，您正在为每个 .ts 文件获取 .js 文件。您可以在 tsconfig.json 中更改您的配置，以告诉编译器写入单个文件或文件夹并在其中添加所有脚本。

"outDir": "../out-tsc/spec" --> 将在单个文件夹中添加所有输出 javascript 文件。

关于你的第二个问题，当 karma 在内部运行时，它会运行 webdriver 并连接到浏览器。这就是您看到 localhost:9876 或类似 url 打开并在右侧显示调试按钮的原因。

虽然网络驱动程序是运行，但您还可以调试浏览器中的任何错误情况等等。

为 angular 库设置 Karma

Setting up Karma for an angular library

unit-testing

typescript

karma-jasmine

gulp-karma

angular