为角度库

时间:2017-10-18 15:32:56

标签: angular unit-testing typescript karma-jasmine gulp-karma

我目前正在构建一个Angular库,我希望能够运行一些测试。遵循these指令后,我设法正确设置了所有内容,并且实际上可以运行我的测试。

主要问题

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

加分问题

不如上述重要,所有测试结果都显示在终端中,而浏览器只显示:

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

有没有一个很好的解决方案来显示我的测试,就像angular-cli开箱即用一样好?

注意在完成我的作业后,我没有找到相关的在线内容,我不想上传一堆令人不快的jsons。如果有人对问题的方向有所了解,我会很乐意加入代码。

我的库的基本结构由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"

1 个答案:

答案 0 :(得分:1)

由于您的打字稿配置,每个.ts文件都会收到.js个文件。您可以在tsconfig.json中更改配置,告诉编译器编写单个文件或在文件夹中添加所有脚本。

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

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

当webdriver正在运行时,您还可以调试浏览器中的任何错误情况等等。