将AngularJS的单元测试和端到端测试集成到gradle构建脚本中

简介: 我目前工作的一个项目后端使用java和spring建立了一个restful service,前端使用AngularJS来渲染页面,提供用户接口。在前端的AngularJS项目中,我们使用Jasmine来写单元测试,使用AngularJS自带的Angular_scenario来写端到端测试。

我目前工作的一个项目后端使用java和spring建立了一个restful service,前端使用AngularJS来渲染页面,提供用户接口。在前端的AngularJS项目中,我们使用Jasmine来写单元测试,使用AngularJS自带的Angular_scenario来写端到端测试。运行这些测试则使用的是Karma。

虽然使用Karma在命令行下可以很方便的运行所有的测试,但是我们想将这些集成到gradle的构建脚本中,从而将AngularJS的所有测试加入到CI的构建中。同时为了保证运行测试的效率,我们决定使用PhantomJS作为运行测试的浏览器环境。

环境搭建

  • 安装nodeJS。 直接去官网<http://nodejs.org/ >下载最新的安装包进行安装。

  • 安装Karma。 可以使用nodeJS提供的npm(node package manager)来安装。

1
$ npm install -g karma

如果想安装最新的开发者版本,则运行:

1
$ npm install -g karma@canary

方式一:使用npm来安装:

1
$ npm install -g phantomjs

方式二:从官网上下载最新的安装包自行安装。地址是http://phantomjs.org/ 。

不过为了方便其它人的使用,我将PhantomJS的文件直接放置到了项目的codebase中,并加入了svn管理。这样当setup一个新的工作电脑时就不需要安装它了,直接checkout项目代码就行。最大的原因是当Karma运行测试时会根据环境变量寻找PhantomJS的执行文件,将PhantomJS的执行文件放置在统一的地方方便管理,减少环境变量依赖。

配置Karma运行测试的配置文件

方式一:在项目根目录下运行Karma init,根据提示一步步创建配置文件。

方式二:如果对Karma的配置文件较为熟悉的话,可以自行创建一个。

以下是我为unit test创建的配置文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// Sample Karma configuration file, that contain pretty much all the available options
// It's used for running client tests on Travis (http://travis-ci.org/#!/karma-runner/karma)
// Most of the options can be overriden by cli arguments (see karma --help)
//
// For all available config options and default values, see:
// https://github.com/karma-runner/karma/blob/stable/lib/config.js#L54


// base path, that will be used to resolve files and exclude
basePath = '';

frameworks = ['jasmine'];

// list of files / patterns to load in the browser
files = [
    'spec/*.spec.js'
];

// list of files to exclude
exclude = [];

// web server port
// CLI --port 9876
port = 9876;

// cli runner port
// CLI --runner-port 9100
runnerPort = 9100;

// enable / disable colors in the output (reporters and logs)
// CLI --colors --no-colors
colors = true;

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
// CLI --log-level debug
logLevel = LOG_INFO;

// enable / disable watching file and executing tests whenever any file changes
// CLI --auto-watch --no-auto-watch
autoWatch = false;

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
// CLI --browsers Chrome,Firefox,Safari
browsers = ['PhantomJS'];

// If browser does not capture in given timeout [ms], kill it
// CLI --capture-timeout 5000
captureTimeout = 10000;

// Auto run tests on start (when browsers are captured) and exit
// CLI --single-run --no-single-run
singleRun = true;

// report which specs are slower than 500ms
// CLI --report-slower-than 500
reportSlowerThan = 500;

// compile coffee scripts
preprocessors = {
    '**/*.coffee': 'coffee'
};

plugins = [
    'karma-jasmine',
    'karma-chrome-launcher',
    'karma-firefox-launcher',
    'karma-phantomjs-launcher',
    'karma-junit-reporter'
]

由于需要在CI中运行测试,所以应当将autoWatch设置为false,将singleRun设置为true。这样Karma只会运行一遍测试。

由于我们将PhantomJS放置在工程目录下,为了让Karma能找到PhantomJS的执行文件,需要设置环境变量PHANTOMJS_BIN。在Karma.conf.js中加入如下代码:

1
process.env.PHANTOMJS = require('path').resolve(__dirname, 'tools/PhantomJS/phantomjs.exe';

如果Karma运行测试时找不到浏览器的执行文件,会报一个错误。

1
2
3
4
5
6
INFO [karma]: Karma v0.9.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
ERROR [karma]: { [Error: spawn ENOENT] code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn' }
Error: spawn ENOENT
    at errnoException (child_process.js:977:11)
    at Process.ChildProcess._handle.onexit (child_process.js:768:34)

当时我花了好长时间来寻找原因,最后使用karma start karma.conf.js --log-level=debug来查看运行日志。

1
2
3
4
5
6
INFO [launcher]: Starting browser PhantomJS
DEBUG [launcher]: Creating temp dir at C:\Users\bowen\AppData\Local\2\karma-28747846
DEBUG [launcher]: C:\Program Files\PhantomJS\phamtomjs.exe  C:\Users\bowen\AppData\Local\2\karma-28747846capture.js
INFO [karma]: To run via this server, use "karma run --runner-port 9101"
ERROR [karma]: { [Error: spawn ENOENT] code: 'ENOENT', errno: 'ENOENT', syscall: 'spawn' }
Error: spawn ENOENT

通过DEBUG的log我发现C:\Program Files\PhantomJS\phamtomjs.exe下并未有该文件,最后使用上述的方法来设置PhantomJS的环境变量。(奇怪的是我已经在PowerShell里设置了该环境变量,并且Karma命令行也是在PowerShell运行的,但是nodeJS并未获取正确的环境变量值)。

在build.gradle中加入运行Karma的task

由于我们的开发机以及CI服务器都是Windows环境,所以需要调用CMD来执行Karma命令。

配置如下:

1
2
3
4
5
6
7
8
9
10
task jsUnit(type: Exec, description: 'JS unit tests') {
     workingDir './src/test/scripts'
     commandLine 'cmd', '/c', 'karma start karma.conf.js'
}


task e2eTest(type: Exec, description: ' e2e tests') {
     workingDir './src/test/scripts'
     commandLine 'cmd', '/c', 'karma start karma-e2e.conf.js'
}

注意运行端到端测试前要将restful服务器setup起来。

当时在Windows上配置Karma花了很多功夫,使用Firefox浏览器发现会同时打开3个tab页,并且将singRun改为true不能运行成功,使用Chrome浏览器则测试运行完毕后浏览器无法关闭,使用PhantomJS又由于环境变量的问题花了一些时间来找原因。但是在我自己的苹果笔记本上各个浏览器都工作良好,真想说Windows是个奇葩。

对于普通用户来说可能Windows系统更适合他们,但是对于程序员来说MAC系统真的非常棒,反应迅速,配置简单,能让你的开发效率提升一个档次。

相关文章
|
人工智能 自然语言处理 JavaScript
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
Magnitude是一个基于视觉AI代理的开源端到端测试框架,通过自然语言构建测试用例,结合推理代理和视觉代理实现智能化的Web应用测试,支持本地运行和CI/CD集成。
2945 15
测试工程师要失业?Magnitude:开源AI Agent驱动的端到端测试框架,让Web测试更智能,自动完善测试用例!
|
测试技术 开发者 UED
探索软件测试的深度:从单元测试到自动化测试
【10月更文挑战第30天】在软件开发的世界中,测试是确保产品质量和用户满意度的关键步骤。本文将深入探讨软件测试的不同层次,从基本的单元测试到复杂的自动化测试,揭示它们如何共同构建一个坚实的质量保证体系。我们将通过实际代码示例,展示如何在开发过程中实施有效的测试策略,以确保软件的稳定性和可靠性。无论你是新手还是经验丰富的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
Kubernetes 测试技术 持续交付
C# 一分钟浅谈:集成测试与系统测试
【10月更文挑战第19天】本文详细介绍了集成测试和系统测试的概念、目的及其在软件开发中的重要性。通过分析常见问题和易错点,结合代码示例,探讨了如何通过代码规范、自动化测试和持续集成等方法提高测试效果,确保软件质量和可靠性。
955 1
|
Devops jenkins 测试技术
DevOps实践:持续集成与自动化测试的融合之道
【9月更文挑战第29天】在软件开发的快节奏竞赛中,DevOps如同一位智慧的舵手,引领着船只驶向效率与质量的彼岸。本文将揭开DevOps的神秘面纱,探索其核心理念如何通过持续集成(CI)和自动化测试的实践,实现软件开发流程的优化与加速。我们将一同见证代码从构思到部署的旅程,以及这一过程中的关键技术和工具如何协同工作,确保软件质量和交付速度的双重提升。
|
jenkins 测试技术 持续交付
解锁.NET项目高效秘籍:从理论迷雾到实践巅峰,持续集成与自动化测试如何悄然改变游戏规则?
【8月更文挑战第28天】在软件开发领域,持续集成(CI)与自动化测试已成为提升效率和质量的关键工具。尤其在.NET项目中,二者的结合能显著提高开发速度并保证软件稳定性。本文将从理论到实践,详细介绍CI与自动化测试的重要性,并以ASP.NET Core Web API项目为例,演示如何使用Jenkins和NUnit实现自动化构建与测试。每次代码提交后,Jenkins自动触发构建流程,通过编译和运行NUnit测试确保代码质量。这种方式不仅节省了时间,还能快速发现并解决问题,推动.NET项目开发迈向更高水平。
327 8
|
IDE 测试技术 持续交付
Python自动化测试与单元测试框架:提升代码质量与效率
【9月更文挑战第3天】随着软件行业的迅速发展,代码质量和开发效率变得至关重要。本文探讨了Python在自动化及单元测试中的应用,介绍了Selenium、Appium、pytest等自动化测试框架,以及Python标准库中的unittest单元测试框架。通过详细阐述各框架的特点与使用方法,本文旨在帮助开发者掌握编写高效测试用例的技巧,提升代码质量与开发效率。同时,文章还提出了制定测试计划、持续集成与测试等实践建议,助力项目成功。
414 5
|
测试技术 C# 开发者
“代码守护者:详解WPF开发中的单元测试策略与实践——从选择测试框架到编写模拟对象,全方位保障你的应用程序质量”
【8月更文挑战第31天】单元测试是确保软件质量的关键实践,尤其在复杂的WPF应用中更为重要。通过为每个小模块编写独立测试用例,可以验证代码的功能正确性并在早期发现错误。本文将介绍如何在WPF项目中引入单元测试,并通过具体示例演示其实施过程。首先选择合适的测试框架如NUnit或xUnit.net,并利用Moq模拟框架隔离外部依赖。接着,通过一个简单的WPF应用程序示例,展示如何模拟`IUserRepository`接口并验证`MainViewModel`加载用户数据的正确性。这有助于确保代码质量和未来的重构与扩展。
1108 0
|
测试技术 Java Spring
Spring 框架中的测试之道:揭秘单元测试与集成测试的双重保障,你的应用真的安全了吗?
【8月更文挑战第31天】本文以问答形式深入探讨了Spring框架中的测试策略,包括单元测试与集成测试的有效编写方法,及其对提升代码质量和可靠性的重要性。通过具体示例,展示了如何使用`@MockBean`、`@SpringBootTest`等注解来进行服务和控制器的测试,同时介绍了Spring Boot提供的测试工具,如`@DataJpaTest`,以简化数据库测试流程。合理运用这些测试策略和工具,将助力开发者构建更为稳健的软件系统。
379 0
|
Java Spring UED
Spring框架的异常处理秘籍:打造不败之身的应用!
【8月更文挑战第31天】在软件开发中,异常处理对应用的稳定性和健壮性至关重要。Spring框架提供了一套完善的异常处理机制,包括使用`@ExceptionHandler`注解和配置`@ControllerAdvice`。本文将详细介绍这两种方式,并通过示例代码展示其具体应用。`@ExceptionHandler`可用于控制器类中的方法,处理特定异常;而`@ControllerAdvice`则允许定义全局异常处理器,捕获多个控制器中的异常。
314 0
|
测试技术 Java
全面保障Struts 2应用质量:掌握单元测试与集成测试的关键策略
【8月更文挑战第31天】Struts 2 的测试策略结合了单元测试与集成测试。单元测试聚焦于单个组件(如 Action 类)的功能验证,常用 Mockito 模拟依赖项;集成测试则关注组件间的交互,利用 Cactus 等框架确保框架拦截器和 Action 映射等按预期工作。通过确保高测试覆盖率并定期更新测试用例,可以提升应用的整体稳定性和质量。
316 0

热门文章

最新文章

推荐镜像

更多