前端临床手札——单元测试

godlong_X 发布于2019-05-29 16:57 / 3268人阅读

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习

最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。

经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简单使用的笔记，其他不懂的google吧！:)

由于测试的项目是前端项目，测试的方式也是打开页面。下面先说明一下目录结构

test/
    vendor/
        chai-as-promised.js //后面介绍是怎么使用
        chai.js
        mocha.css
        mocha.js
    units/
        account.js
        sample.js
        ...
    index.html
    index.js

测试用的页面

###index.html###




    
    Testing
    


    
    
    
    
    
    



###index.js###

mocha.setup("tdd"); //设置使用什么模式 tdd / bdd 
require("units/sample")(); //引入对应测试用例
mocha.run(); //运行

具体用例，关于chai的使用请看 chai.assert api

###units/sample.js###

module.exports = function(){
    
    //chai.assert 是经典的断言风格
    var assert = require("../vendor/chai").assert;
        
    //定义一组测试用例。
    suite("Array", function(){
        
        //此方法会在这个suite所有测试用例执行前执行一次，只一次，这是跟setup的区别。
        suiteSetup(function(){
            console.log("suitSetup...");
        });
        
        //此方法会在每个测试用例执行前都执行一遍。
        setup(function(){
            console.log("setup...");
        });

        suite("indexOf()", function(){
            //具体执行的测试用例实现代码。
            test("should return -1 when not present", function(){
                assert.equal(-1, [1, 2, 3].indexOf(4));
            });
        });

        suite("indexOf2()", function(){
            test("should return not -1 when present", function(){
                assert.equal(0, [1, 2, 3].indexOf(1));
            });
        });

        //此方法会在每个测试用例执行后都执行一遍，与setup相反。
        teardown(function(){
            console.log("teardown...");
        });

        //此方法会在这个suite所有测试用例执行后执行一次，与suiteSetup相反。
        suiteTeardown(function(){
            console.log("suiteTeardown..."); 
        });
    });

}

断言Promise

###units/account.js###
var chai = require("../vendor/chai"),
    chaiAsPromised = require("../vendor/chai-as-promised");

chai.use(chaiAsPromised);

module.exports = function(){
        
    //这个是项目的model类
    var account = require("models/account.model")
        
    suite("Account", function(){
        //测试登录
        test("signin", function(){
        
            var user = {
                username: "admin@ggg.com",
                password: "654321"
            }

            //当请求登录接口没返回用户id时显示`登录失败`
            return assert.eventually.deepProperty(account.signin(user), "attrs.id", "登录失败");
        });

        //测试登出
        test("signout", function(){
            //当请求登出接口后返回对象的code属性不等于0时提示`退出失败`
            return assert.eventually.propertyVal(account.signout(), "code", 0, "退出失败");
        });

    });

}

目前会在整个项目的根目录下创建test目录进行存放测试相关的代码，使用也很方便，打开test/index.html即可。

测试工具 mocha
断言库 chai
测试驱动开发(TDD)及测试框架Mocha.js入门学习

私有云 idc机房托管单元测试单元测试规范单元测试图片测试java php单元测试’

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8728.html

前端临床手札——单元测试

摘要：感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。具体执行的测试用例实现代码。测试工具断言库测试驱动开发及测试框架入门学习最近博主工作是和另一枚后端合作，但是经常发现他写的接口出错，苦逼连连。感觉不能这样下去就学写一下单元测试，等他更新代码我都跑一遍确认一下，这样工作安心多了。经过博主一番查找，貌似被推荐比较多的有mocha和chai，下面记录简...

kid143 2019-08-19 18:17 评论0 收藏0
前端临床手札——webpack构建逐步解构（上）

摘要：前言由于博主最近又闲下来了，之前觉得的官方文档比较难啃一直放到现在。文章会逐步分析每个处理的用意当然是博主自己的理解，不足之处欢迎指出沟通交流。后续将会补上构建生产的配置分析，案例参考。前端临床手札构建逐步解构下前言由于博主最近又闲下来了，之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得还是得自己写个手脚架，当然这个案例是基于vue的，...

lowett 2019-08-22 10:36 评论0 收藏0
前端临床手札——webpack构建逐步解构（下）

摘要：续前端临床手札构建逐步解构上工作流程案例最近添加了雪碧图功能，并把替换成的，详细可以看分支构建生产上一篇说完了本地测试和是如何工作，接下来分析构建生产模式下配置如何配置和每个模块干了什么。续前端临床手札——webpack构建逐步解构（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 评论0 收藏0
前端临床手札——文件上传

摘要：文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。但前提是需要约定传入值和返回类型。文件上传基本是学习前端路上必定遇到的例子，然而网上能找到的都是单单满足上传这步的案例。大多文章之所以只说上传这步估计是简单易入门，但是实际工作时就会发现上传文件这个功能上是简单的，逻辑上却比较复杂。先说一下需求和功能点：需求：上传文件到服务器功能：上传单这么...

SexySix 2019-08-19 18:07 评论0 收藏0
前端临床手札——在微信播放视频的那些事

摘要：然而我真的太天真，微信浏览器怎样会让你这样好过问题集中于自动播放视频这块，需求很简单自动播放全屏不显示工具条自动播放一步步来，自动播放这个问题在十分肯定默认是不支持的，必须基于用户操作下才能加载视频。至于在微信下和一个样。某天收到旧同事的信息说希望我帮手做一下一个简单的H5，然后我看了看的确很简单：就是图片滚动到最后自动播放视频，播完显示个按钮交互。然而我真的太天真，微信浏览器怎...

_Zhao 2019-06-21 16:15 评论0 收藏0