大佬教程收集整理的这篇文章主要介绍了Angular单元测试与集成测试,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Jasmine是一个用于测试JavaScript的行为驱动开发框架,不依赖于任何其他JavaScript框架。
Karma是测试运行器,为开发人员提供了高效的、真实的测试环境,支持多种浏览器,易于调试。
单元测试配置文件test.ts和karma.conf.js:
test.ts
import ‘zone.js/dist/zone-tesTing‘; import { getTESTBed } from ‘@angular/core/tesTing‘; import { BrowserDynamicTesTingModule,platformBrowserDynamicTesTing } from ‘@angular/platform-browser-dynamic/tesTing‘; declare const require: any; // First,initialize the Angular tesTing environment. getTESTBed().initTestEnvironment( BrowserDynamicTesTingModule,platformBrowserDynamicTesTing() ); // Then we find all the tests. const context = require.context(‘./‘,true,/\.spec\.ts$/); // And load the modules. context.keys().map(context);
测试文件扩展名必须为.spec.ts。
karma.conf.js
默认使用Chrome浏览器,可生成单元测试报告和覆盖率报告,覆盖率报告保存在根目录coverage文件夹内,启用autoWatch。
singleRun默认为false,如设为true则测试结束后会自动退出并根据测试结果返回代码0或1,常用于CI环境。
Karma支持的浏览器:
可同时配置多个浏览器进行测试,要启用其他浏览器,需安装依赖,比如启用Firefox:
npm install karma-firefox-launcher --save-dev
然后在karma.conf.js内增加配置:
... require(‘karma-chrome-launcher‘),require(‘karma-firefox-launcher‘),... browsers: [‘Chrome‘,‘Firefox‘],...
使用CLI创建App生成了一个单元测试文件app.component.spec.ts。运行CLI命令 ng test 即可执行单元测试:
ng test
在控制台会输出测试结果,还会打开浏览器:
常用参数:
--browsers 指定使用的浏览器
--code-coverage 输出覆盖率报告
--code-coverage-exclude 排除文件或路径
--karma-config 指定Karma配置文件
--prod 启用production环境
--progress 默认为true,在构建时将进度输出到控制台
--watch 默认为true,代码修改后会重新运行测试
karma-chrome-launcher、karma-firefox-launcher、karma-ie-launcher等均支持自定义Launcher,customLaunchers与--browsers结合使用可满足多种环境的测试需求。每种浏览器支持的自定义属性请查看Karma Browsers文档。
比如,CI环境下常用Headless模式,不必使用浏览器界面,karma.conf.js增加如下配置:
browsers: [‘Chrome‘],customLaunchers: { ChromeHeadlessCI: { base: ‘ChromeHeadless‘,flags: [‘--no-sandBox‘] } },
运行如下命令进行测试:
ng test --watch=false --progress=false --browsers=ChromeHeadlessCI
运行如下命令生成测试覆盖率报告,报告保存在项目根目录下的coverage文件夹内:
ng test --watch=false --code-coverage
如想每次测试都生成报告,可修改CLI配置文件angular.json:
"test": { "options": { "codeCoverage": true } }
设置排除的文件或路径
ng test --watch=false --code-coverage --code-coverage-exclude=src/app/heroes/heroes.component.ts --code-coverage-exclude=src/app/hero-search/*
同样可以在angular.json中配置:
"test": { "options": { "codeCoverage": true,"codeCoverageExclude": ["src/app/heroes/heroes.component.ts","src/app/hero-search/*"] } }
设定测试覆盖率指标
编辑配置文件karma.conf.js,增加如下内容:
coverageIstanbulReporter: { reports: [ ‘html‘,‘lcovonly‘ ],fixWebpacksourcePaths: true,thresholds: { statements: 80,lines: 80,branches: 80,functions: 80 } }
测试报告中达到标准的背景为绿色。
待续...
集成测试使用Jasmine和Protractor测试框架,Protractor是Angular端到端测试框架。
npm install -g protractor
在项目中执行npm install时会安装protractor,不必单独执行以上命令。安装protractor后会安装两个命令行工具protractor和webdriver-manager(位于node_modules\protractor\bin目录),webdriver-manager负责管理驱动、启停SELEnium Server。
webdriver-manager命令:
clean removes all downloaded driver files from the out_dir start start up the SELEnium server shutdown shut down the SELEnium server status list the current available drivers update install or update SELEcted binaries,更新的驱动保存在Node_modules\protractor\node_modules\webdriver-manager\SELEnium目录下。 version get the current version
使用CLI创建的App会生成一个e2e项目,其中包含测试配置protractor.conf.js及测试代码。
protractor.conf.js
const { SpecReporter } = require(‘jasmine-spec-reporter‘); exports.config = { allScriptsTimeout: 11000,specs: [ ‘./src/**/*.e2e-spec.ts‘ ],capabilities: { ‘browserName‘: ‘chrome‘ },directConnect: true,baseUrl: ‘http://localhost:4200/‘,framework: ‘jasmine‘,jasmineNodeOpts: { showColors: true,defaultTimeoutInterval: 30000,print: function() {} },onPrepare() { require(‘ts-node‘).register({ project: require(‘path‘).join(__dirname,‘./tsconfig.e2e.json‘) }); jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); } };
默认,Protractor使用Jasmine测试框架,使用直连方式连接Chrome浏览器,测试文件扩展名为.e2e-spec.ts。
Protractor支持Chrome、Firefox、Safari、IE等浏览器。
多浏览器
Protractor可同时启动多个浏览器,用一个浏览器时,在配置中使用capabilities选项;用多个浏览器时,使用multiCapabilities:
另外需在package.json中增加配置:
"scripts": { "webdriver-update": "webdriver-manager update" }
在运行测试前执行:
npm run webdriver-update
否则项目中的驱动不会更新(默认只有chrome驱动,在命令行运行webdriver-manager update仅更新全局的驱动),运行测试会报如下错误:
No update-config.json found. Run ‘webdriver-manager update‘ to download binaries
浏览器选项
capabilities: { ‘browserName‘: ‘chrome‘,‘chromeOptions‘: { ‘args‘: [‘show-fps-counter=true‘] } },
capabilities: { ‘browserName‘: ‘firefox‘,‘moz:firefoxOptions‘: { ‘args‘: [‘--safe-mode‘] } },
更多选项请查看相应驱动ChromeDriver、GeckoDriver。
使用Standalone SELEnium Server时,需安装JDK。
更新driver后启动SELEnium Server:
webdriver-manager update webdriver-manager start
删除原配置中的directConnect、baseUrl:
directConnect: true,
增加SELEniumAddress(默认为http://localhost:4444/wd/hub):
SELEniumAddress: ‘http://localhost:4444/wd/hub‘,
执行CLI命令 ng e2e即可运行集成测试:
ng e2e
常用参数:
--base-url Base URL for protractor to connect to. --configuration (-C) A named configuration environment,as specified in the "configurations" section of angular.json. --host Host to listen on. --port The port to use to serve the application. --prod When true,sets the build configuration to the production environment. --protractor-config The name of the Protractor configuration file. --webdriver-update Try to update webdriver.
不同的环境若配置不同,可使用不同的配置文件。
比如,在CI环境中启用Chrome Headless模式:
在e2e根目录下创建一名为protractor-ci.conf.js的新文件,内容如下:
const config = require(‘./protractor.conf‘).config; config.capabilities = { browserName: ‘chrome‘,chromeOptions: { args: [‘--headless‘,‘--no-sandBox‘] } }; exports.config = config;
注意: windows系统要增加参数--disable-gpu
运行以下命令测试:
ng e2e --protractor-config=e2e\protractor-ci.conf.js
待续...
Jasmine Behavior-Driven JavaScript
Karma
Protractor - end-to-end testing for Angular
以上是大佬教程为你收集整理的Angular单元测试与集成测试全部内容,希望文章能够帮你解决Angular单元测试与集成测试所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。