web前端|js教程
Angular,单元测试
web前端-js教程
抢红包软件源码,vscode输出调试控制台,ubuntu实体安装,tomcat自动打开网页,jsoup 爬虫实例,php开源源码下载,seo快速优化的工具有哪些lzw
本文将探讨如何搭建测试环境、以及Angular测试工具集。
随机抽奖程序源码,释放缓存ubuntu,按日期截取tomcat日志,京东爬虫评论,php-curl配置,seo是什么职seolzw
测试环境
c mvc网站源码,ubuntu里安装ndk,python爬虫谷歌商店,php源代码拷贝过去就能使用,seo5036lzw
绝大部分都是利用Angular Cli来创建项目，因此，默认已经集成我们所需要的npm包与脚本；当然，如果你是使用自建或官网 quickstart 的话，需要自行安装；但所有核心数据全都是一样的。【相关教学推荐：angular教学】
Angular单元测试我们可以将其分成两类：独立单独测试与Angular测试工具集。
Pipe与Service适为独立单独测试，因为它们只需要new实例类即可；同样是无法与Angular组件进行任何交互。
与之相反就是Angular测试工具集。
测试框架介绍
Jasmine
Jasmine测试框架提供了编写测试脚本的工具集，而且非常优秀的语义化，让测试代码看起来像是在读一段话。
Karma
有测试脚本，还需要Karma来帮忙管理这些脚本，以便于在浏览器中运行。
Npm 包
如果你非要折腾，那么最简单的办法便是通过Angular Cli创建一个新项目，然后将以下Npm包复制到您折腾的项目中。
"jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0"
那么，我们重要还是看配置脚本部分。
配置脚本
我们核心是需要让 karma 运行器运行起来，而对于 Jasmine，是在我们编写测试脚本时才会使用到，因此，暂时无须过度关心。
我们需要在根目录创建karma.conf.js文件，这相当于一些约定。文件是为了告知karma需要启用哪些插件、加载哪些测试脚本、需要哪些测试浏览器环境、测试报告通知方式、日志等等。
karma.conf.js
以下是Angular Cli默认提供的 karma 配置文件：
// Karma configuration file, see link for more information// https://karma-runner.github.io/0.13/config/configuration-file.htmlmodule.exports = function(config) { config.set({ // 基础路径（适用file、exclude属性） basePath: \, // 测试框架，@angular/cli 指Angular测试工具集 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 }, // 哪些文件需要被浏览器加载，后面会专门介绍 `test.ts` files: [ { pattern: ./src/test.ts, watched: false } ], // 允许文件到达浏览器之前进行一些预处理操作 // 非常丰富的预处理器：/browse/keyword/karma-preprocessor preprocessors: { ./src/test.ts: [@angular/cli] }, // 指定请求文件MIME类型 mime: { ext/x-typescript: [ s, sx] }, // 插件【karma-coverage-istanbul-reporter】的配置项 coverageIstanbulReporter: { // 覆盖率报告方式 reports: [html, lcovonly], fixWebpackSourcePaths: true }, // 指定angular cli环境 angularCli: { environment: dev }, // 测试结果报告方式 reporters: config.angularCli && config.angularCli.codeCoverage ? [progress, coverage-istanbul] : [progress, kjhtml], port: 9876, colors: true, // 日志等级 logLevel: config.LOG_INFO, // 是否监听测试文件 autoWatch: true, // 测试浏览器列表 browsers: [Chrome], // 持续集成模式，true：表示浏览器执行测试后退出 singleRun: false });};
以上配置基本上可以满足我们的需求；一般需要变动的，我想是测试浏览器列表了，因为karma支持所有市面上的浏览器。另外，当你使用 Travis CI 持续集成时，启动一个禁用沙箱环境Chrome浏览器会让我们少了很多事：
customLaunchers: { Chrome_travis_ci: {base: Chrome,flags: [--no-sandbox] } }
有关karma config文件的所有信息，请参与官网文档。
test.ts
在编写karma.conf.js时，我们配置过浏览器加载的文件指向的是./src/test.ts文件。作用是为了引导 karma 启动，代码也简单许多：
// This file is required by karma.conf.js and loads recursively all the .spec and framework filesimport zone.js/dist/long-stack-trace-zone;import zone.js/dist/proxy.js;import zone.js/dist/sync-test;import zone.js/dist/jasmine-patch;import zone.js/dist/async-test;import zone.js/dist/fake-async-test;import { getTestBed } from @angular/core/testing;import { BrowserDynamicTestingModule, platformBrowserDynamicTesting} from @angular/platform-browser-dynamic/testing;// Unfortunately theres no typing for the `__karma__` variable. Just declare it as any.declare var __karma__: any;declare var require: any;// Prevent Karma from running prematurely.__karma__.loaded = function () {};// First, initialize the Angular testing environment.getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting());// Then we find all the tests.// 所有.spec.ts文件const context = require.context(./, true, /\.spec\.ts$/);// And load the modules.context.keys().map(context);// Finally, start Karma to run the tests.__karma__.start();
一切就绪后，我们可以尝试启动 karma 试一下，哪怕无任何测试代码，也是可以运行的。
如果是Angular Cli那么ng test。折腾的用node "./node_modules/karma-cli/bin/karma" start
最后，打开浏览器：http://localhost:9876，可以查看测试报告。
简单示例
既然环境搭好，那么我们来写个简单示例试一下。
创建./src/demo.spec.ts文件。.spec.ts为后缀这是一个约定，遵守它。
describe(demo test, () => { it(should be true, () => { expect(true).toBe(true); })});
运行ng test后，我们可以在控制台看到：
Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.031 secs / 0.002 secs)
或者浏览器：
1 spec, 0 failuresdemo test true is true
不管怎么样，毕竟我们已经进入Angular单元测试的世界了。
Angular测试工具集
普通类诸如Pipe或Service，只需要通过简单的new创建实例。而对于指令、组件而言，需要一定的环境。这是因为Angular的模块概念，要想组件能运行，首先得有一个@NgModule定义。
工具集的信息量并不很多，你很容易可以掌握它。下面我简略说明几个最常用的：
TestBed
TestBed就是Angular测试工具集提供的用于构建一个@NgModule测试环境模块。当然有了模块，还需要利用TestBed.createComponent创建一个用于测试目标组件的测试组件。
异步
Angular到处都是异步，而异步测试可以利用工具集中async、fakeAsync编写优雅测试代码看着是同步。
工具集还有更多，这一切我们将在[Angular单元测试-组件与指令单元测试]()逐一说明。
happy coding!
