测试方案（待接入）

测试方案

组件的测试采用UI自动化测试方案。采用的框架是PhantomFlow, 他结合了PhantomJS, CasperJS 和 PhantomCSS, 通过Casper打开测试页面，模拟用户操作，PhantomCSS截图或者Casper检查DOM，来实现自动化测试。

测试文件目录

在项目根目录下有个test文件夹，来放置测试相关代码。

• test/test.js是运行测试的入口文件。
• test/index.html是测试页面，所有组件的测试共用这一个页面，通过inject不同的组件demo来测试不同的组件。
• test/components文件夹下是组件测试文件，目录结构保持跟src/js/components一致。
• 组件测试文件命名统一以.test.js结尾，程序只会运行以.test.js结尾的文件。这里推荐统一命名index.test.js。

测试运行流程

• npm run build 生成dist文件夹，执行这一步是因为index.html中需要引入dist下的nek-ui.js和nek-ui.default.min.css
• npm run test 运行测试。第一次运行的时候，测试会在test目录自动创建visuals文件夹，存放PhantomCSS截图，并以这次的截图作为baseline。当然index.test.js中有断言的地方也会在控制台显示结果。
• npm run test 再次运行。会将此次运行的截图和baseline比较，不同的就标记为失败。

其他命令：

• npm run test report 查看运行报告。如图：

• npm run test debug　　　　使用debug模式，输出更多的信息，运行会更慢，只会以单进程运行。
• npm run test threads=xx　　设置测试运行的进程数，默认不设置的情况下进程数是8
• npm run earlyexit　　　　　有报错的情况下立即退出
• npm run tests=xxx　　　　 设置运行的文件夹，默认运行test目录下的所有.test.js结尾的文件，如只希望运行ui.select，可使用npm run test tests=test/components/form/ui.input

测试文件书写介绍

Phantom基于决策树来模拟用户操作。包含这几个方法：

实际使用示例：

在report的体现类型(不对应上图的那个case)：

Phantomflow只是来组织操作流，具体的操作还要用过Casper来实现。

常用的casper API有： casper.thenOpen， casper.echo， casper.waitForSelector，casper.wait，casper.click，casper.mouseEvent，casper.test等。

casper module

tester module

phantomCSS只使用其截图功能，phantomCSS.screenshot(selector) 即可。