用 jest 单元测试改善老旧的 Backbone.js 项目

对于早期的前端 SPA 项目,Backbone.js + Require.js 是一种常见的技术组合,分别提供了基础的 MVC 框架和模块化能力。

对于这样的既有项目,在之前的文章中也进行过分析,常常面临依赖不清、封装混乱,以及缺乏测试等问题;对之进行维护和新需求开发时,结合其本身特点,在 TDD 的方式下进行渐进的改善,而非推倒重来,无疑是个可行的办法。

本文将尝试用一个重构实例来抛砖引玉,讲解如何对其应用较新的 jest 测试框架,并用 ES6 class 等新手段升级 Backbone.View 视图组件和改善页面结构,希望能对类似项目的改善起到开启思路的作用。

关于测试、重构的各种概念,不再重复介绍;请先参阅以下文章:

  • 《抽丝剥茧 - 实例简析重构代码的三板斧》 https://mp.weixin.qq.com/s/dvuMmBnAMZz3ywdRXIMiyQ
  • 《对 React 组件进行单元测试》 https://mp.weixin.qq.com/s/oE944uljXsWbnJQPCqjYIA

Backbone.js / Require.js 技术栈回顾

Require.js 模块化

首先说 Require.js,在没有 webpack 的日子里,这是最常见的模块化管理工具。

其本身可以提供 AMD 规范的 JS 模块,并提供了通过插件加载文本模板等能力。

在实际的项目中,我们采用了 ES6 语法和 ESM 模块规范来编写源文件,并借助 babel 将其转译为 UMD 模块;最后通过 Require.js 提供的优化工具 r.js 来打包,并由 Require.js 本身在浏览器里实现模块的加载。

当然,采用 ES6语法 和 babel 并非一定必要,AMD 也是可以实现测试的。

关于模块化的发展可以参阅这篇文章 (https://mp.weixin.qq.com/s/WG_n9t4E4q0kBWczkSEdEA)

Backbone.js

不同于提供整套方案的 Angular 的是, Backbone.js 提供了一个非常基础和自由的 MVC 框架结构,不仅可以用多种方式组织项目,也可以自由替换其中的某一部分。

其主要功能模块包括:

  • Events:提供一系列事件的绑定和触发等功能
  • Model: 对数据或状态的转化、校验、计算派生值、提供访问控制等,也负责数据的远程同步等,并有事件触发机制;作用类似于 MobX
  • Collection: Model 的集合
  • Router: 提供了 SPA 的前端路由功能,支持 hashChange 和 pushState 两种方式
  • Sync: 一些远程请求的方法
  • View: 可以拼装模板数据、绑定事件等的视图组件

在我们的实际项目中,视图层同时支持了 Backbone.View 和早期的 react@13,这也正体现了其灵活之处。

通常的 Backbone 项目也可以忽略文中涉及 react 的部分。

升级测试框架

和之前文章中的例子相同,本次依然采用 Jest 作为测试框架。

原有用例

早期的项目中其实是有一些单元测试代码的,主要是用 Jasmine 对部分 model/collection 进行了测试。由于 Jest 内置了 Jasmine2,所以这部分的语法问题不大,基本可以无痛迁移。

早先测试的主要问题在于:

  • 一是没有整合到工作流中,采用单独的网页作为载体,久而久之就会遗忘这个步骤,用例可能失效,新加入的团队成员也不会注意到这项工作的存在
  • 二是当时对 model/collection 的单元测试并不严谨,依赖了提供 mock 数据的 php 服务器环境
  • 三是由于视图层没有很好的组件化,从而缺乏对视图组件的测试

jest for Backbone 的实践

jest 是比较新的测试框架,默认零配置,但也提供了灵活的适配方法,可以适应各种项目,包括 Backbone.js 的情况。

这位 @captbaritone 小哥提供了一个很好的讲解视频 (需要科学上网 https://www.youtube.com/watch?v=BwzjVNTxnUY&t=15s),并且配上了实例代码 (https://github.com/captbaritone/tdd-jest-backbone)。

配置必要的依赖和映射

//package.json

"scripts": {
	"tdd": "cross-env NODE_ENV=test jest --watch",
	"test": "cross-env NODE_ENV=test jest",
	...
},
"devDependencies": {
	"babel-cli": "^6.0.0",
	"babel-core": "^6.26.0",
	"babel-eslint": "^6.1.2",
	"babel-jest": "^22.1.0",
	"babel-preset-es2015": "^6.24.1",
	"babel-preset-react": "^6.24.1",
	"babel-preset-stage-1": "^6.24.1",
	"cross-env": "^5.1.3",
	"enzyme": "^3.3.0",
	"enzyme-adapter-react-13": "^1.0.3",
	"jest": "^22.1.4",
	"jquery": "^3.1.1",
	"regenerator-runtime": "^0.11.1",
	"sinon": "^4.2.2",
	"grunt-run": "^0.8.0",
	...
},
复制代码
  1. 配置两种 npm script,分别用于开发时实时运行测试和 build 时运行测试
  2. 目标项目中,其实是用 babel 5 做的 ES6 转译;但是由于之前的源代码已经全部采用了 ES6 语法开发(部分初始 AMD 代码也做过自动转化),所以我们完全可以在测试时采用较新的 babel 6

加入对老版本 react 的支持

//.babelrc

{
  "env": {
    "test": {
      "presets": [
	    "es2015", "stage-1", "react"
	  ],
	  "plugins": []
    }
  }
}
复制代码
//jest.config.js

moduleNameMapper: {
	"unmountMixin": "react-unmount-listener-mixin",
	...
},
...
复制代码
  1. 根据目标项目的情况采用了 enzyme-adapter-react-13 做适配
  2. 用 cross-env 设置环境变量 test,从而配置出适用于 jest 的 .babelrc 文件,且不影响生产环境
  3. 根据项目中的具体情况,按原来的规则做好组件名称的映射

将单元测试加入到 build 任务

如果只写好了测试,而单独存在,只能用 npm test 执行的话,那就重蹈了原来的覆辙;这里借助 grunt-run 插件将其加入已有的 grunt build 工作流:

// Gruntfile.js

build: function() {
	grunt.task.run([
		'run:test',
		'eslint',
		...
	]);
},

run: {
	test: {
		cmd: /^win/.test(process.platform) ? 'npm.cmd' : 'npm',
		args: ['test']
	}
},
复制代码

这样在之后的 build 任务中,一旦有单元测试未通过,整个流程将停止执行。

测试 model 和 collection

一个 model 大概长这个样子:

import Backbone from 'backbone';
	
const CardBinding = Backbone.Model.extend({
	urlRoot: _appFacade.ajaxPrefix + '/card/binding',	
	
	defaults: {
		identity: null,
		password: null
	},
	
	validate: function(attrs){
		if ( !attrs.identity ) {
			return CardBinding.ERR_NO_IDENTITY;
		}
		if ( !/^\d{6}$/.test(attrs.password) ) {
			return CardBinding.ERR_WRONG_PASSWORD;
		}
	}
});
	
CardBinding.ERR_NO_IDENTITY = 'err_no_identity';
CardBinding.ERR_WRONG_PASSWORD = 'err_wrong_password';
	
export default CardBinding;
复制代码

在测试中注入全局 url 前缀

可以发现 model 中依赖了以个全局变量中的属性 _appFacade.ajaxPrefix

首先编写一个假的全局对象:

// __test__/fakeAppFacade.js

var facade = {
	ajaxPrefix: 'fakeAjax',
	...
};

window._appFacade = facade;
module.exports = facade;
复制代码

测试套件中,在 model 之前引入这个模块就可以了:

// __test__/models/CardBinding.spec.js

import fakeAppFacade from '../fakeAppFacade';
import Model from "models/CardBinding";
复制代码

用 sinon 拦截异步请求

搞定了异步请求的地址,自然要拦截真正的请求;

// backbone.js

// Set the default implementation of `Backbone.ajax` to proxy through to `$`.
// Override this if you'd like to use a different library.
Backbone.ajax = function() {
	return Backbone.$.ajax.apply(Backbone.$, arguments);
};
...
复制代码

Backbone 中的请求,包括 Backbone.sync / model.fetch() 等, 本质上还是调用的 jQuery 中的 $.ajax 方法(默认情况下),也就是传统的 xhr 方式,使用 sinon 就可以很好的胜任这种暗度陈仓的工作:

it('should fetch from server', function(){
	//模拟的返回数据
	const server = sinon.createFakeServer();
	server.respondImmediately = true;
	server.respondWith(
		"GET", 
		`${fakeAppFacade.ajaxPrefix}/card`,
		[
			200,
			{"Content-Type": "application/json"},
			JSON.stringify({
				errcode: 0,
				errmsg: 'ok',
				result: {
					"docTitle": "i am a member card",
					"card": {
						"id": 123
					}
				}
			})
		]
	);

	model = new Model(mockData);
	model.fetch();
	
	expect(model.get('docTitle')).toEqual("i am a member card");
	expect(model.get('card')).not.toBeNull();
	expect(model.get('card').id).toEqual(123);

	//恢复请求原状
	server.restore();
});
复制代码

校验操作的测试

调用 Backbone.Model 实例的 isValid() 方法,会得到数据是否有效的布尔值结果,同时触发内部的 validate() 方法,并更新其 validationError 的值;利用这些特性,我们可以做如下测试:

//model中

validate(attrs) {
	const re = new RegExp(attrs.field_username.pattern);
	if ( !re.test(attrs.field_username.value) ) {
		return attrs.field_username.invalid;
	}
},
...
复制代码
//spec中

it('should validate username', function(){
	let mock1 = {
		field_username: {
			pattern: '^[\u4E00-\u9FA5a-zA-Z0-9_-]{2,}$',
			invalid: '请正确填写姓名'
		},
		field_birth: {}
	};

	model = new Model(mock1);

	model.set({
		'field_username': Object.assign(
			mock1.field_username, 
			{value: '尉迟恭hello123'}
		)
	});
	expect(model.isValid()).toBeTruthy(); //trigger model.validate()
	expect(model.validationError).toBeFalsy();

	model.set({
		'field_username': Object.assign(
			mock1.field_username, 
			{value: '尉'}
		)
	});
	expect(model.isValid()).toBeFalsy();
	expect(model.validationError).toEqual('请正确填写姓名');

	model.set({
		'field_username': Object.assign(
			mock1.field_username, 
			{value: '尉~22'}
		)
	});
	expect(model.isValid()).toBeFalsy();
	expect(model.validationError).toEqual('请正确填写姓名');
});
复制代码

collection 的测试和 model 相比并无特别,不再赘述

view 之必然的 testable 组件化

开篇提到过,项目中以前的过时测试用例中,是缺少 view 视图层部分的。

这一方面是囿于当时测试意识的不足,更主要的原因是没能很好解决组件化的问题。

要对 view 进行测试,就得将其拆分重构为功能明确、便于复用的各种小型组件。

Backbone.View 的 ES6 class 进化

首先进行的,是类似于 React.createClass 向 class extends Component 的进化,Backbone.View 也是可以华丽转身的。

传统的 view 写法是这样的:

const MyView = Backbone.View.extend({

	id: 'myView',
	urlBase: _appFacade.ajaxPrefix + '/info',

	events: {
		'click .submit': 'onSubmit'
	},

	render: function() {
		...
	},
		
	onSubmit: function () {
		...
	}

});
复制代码

采用 ES6 class 的写法,则可能是:

class MyView extends Backbone.View {
	get className() {
		return 'myComp';
	}
	get events() {
		return {
			"click .multi": "onShowShops"
		};
	}
	render() {
		const html = _.template(tmpl)(data);
		this.$el.html(html);
		return this;
	}
	onShowShops(e) {
		let cityId = e.currentTarget.id;
		if (cityId){
			...
		}
	}
}
复制代码

组件的提取

目标项目的很多页面,没有合理的封装出子组件,而仅仅是把需要复用部分的 html 提取成模板,在本页面“拼装”多个子模板,或和其他页面复用。这部分归因于 Backbone 的“过分自由”,官网或者当时的通用实践中并未给出很好的组件化方案,只是停留在用依赖的 underscore 实现 _.template() 的阶段。

这其实和早期微信小程序面临的困境是一样的:由于缺乏组件化方法,只能在 js/wxml/wxss 几个层面分别封装模块;而直到 2017 年底(1.6.3 版本),小程序才有了自己的 component 组件化方案。

另一个难点在于,Backbone.View 的 constructor / initialize “构造函数”中,并不能接受自定义的 props 参数。

解决的办法是进行一定的外层封装:

// components/Menu.js

import {View} from 'backbone';
...

const Menu = ({data})=>{
	class ViewClass extends View {
		get className() {
			return 'menu_component';
		}
		render() {
			const html = template(tmpl)(data);
			this.$el.html(html);
			return this;
		}
	}
	return ViewClass;
};
复制代码

也可以“继承”一个 View:

// components/MenuWithQRCode.js

import Menu from './Menu';
...

const onQRCode = (e)=>{
	...
};

const MenuWithQRCode = ({data})=>{
	const MenuView = Menu({data});
	class QRMenuView extends MenuView {
		get events() {
			return {
				"click #qrcode": onQRCode
			}
		}
	}
	return QRMenuView;
};
复制代码

在页面中使用时,先传参获取到真正的 Backbone.View 组件:

const Menu1View = MenuWithQRCode({
	data: {
		styleName: "menu1",
		list: tdata.menu1,
	}
});
复制代码

再手动调用其 render() 方法并加入页面视图的 DOM 中:

this.$el.find('.menu1_wrapper').replaceWith(
	(new Menu1View).render().$el
);
复制代码

这样就在很大程度上实现了 Backbone.View 组件的封装和嵌套。

测试 Backbone.View 组件

比之于测试 react 还需要 enzyme 等的支持,测试 Backbone.View 其实要简单许多,只需要获取到其 $el 属性,调用 jQuery 的惯有方法即可:

it("应该在不显示门店时渲染为空", function() {
	const ViewClass1 = CardShops({});
	const comp1 = (new ViewClass1).render();
	
	expect(comp1.$el.find('.single').length).toEqual(0);
	expect(comp1.$el.find('.multi').length).toEqual(0);
});
复制代码

对方法调用的测试

自然还是用 sinon 来做:

it('应正确响应事件回调并加载子模板', function() {

	//模拟的返回数据
	const server = sinon.createFakeServer();
	server.respondImmediately = true; //立即返回
	server.respondWith(
		"GET", 
		`${fakeAppFacade.ajaxPrefix}/privilege/222`,
		[
			200,
			{"Content-Type": "application/json"},
			JSON.stringify({
				errcode: 0,
				errmsg: 'ok',
				result: {
					...
				}
			})
		]
	);

	const spy = sinon.spy();
	const spy2 = sinon.spy();

	const ViewClass1 = CardPrivileges({
		data:{
			title: "商家优惠活动",
			list: [{
				"id": 111,
				"title": 'VIP会员专享8折优惠',
				"icon": 'assets_icon_card_vip'
			},{
				"id": 222,
				"title": '开卡送可乐一听开卡送可乐一听哈',
				"icon": 'assets_icon_card_priv1'
			},{
				"id": 333,
				"title": '满200送50元代金券',
				"icon": 'assets_icon_card_priv2',
				"hasNew": true
			}]
		},
		privOpenHandler: spy,
		detailLoadedHandler: spy2,
		responseHandler: (data,callback)=>callback(data)
	});
	
	const comp = (new ViewClass1).render();

	//模拟点击第二个,期望得到用例上方的假数据
	comp.$el.find('.privileges>li:nth-of-type(2)>a').click();

	expect(spy.callCount).toEqual(1);
	expect(spy2.callCount).toEqual(1);
	
	expect(comp.$el.find('.privileges>li:nth-of-type(2)').hasClass('opened')).toBeTruthy();
	expect(comp.$el.find('.privileges>li:nth-of-type(2) .cont_common').length).toEqual(1);
	expect(comp.$el.find('.cont_common li:nth-of-type(3)').html()).toEqual("有效期截至2014-09-20");

	server.restore();
});
复制代码

处理用 require.js 的 text 插件引入的模板

Backbone.js + Require.js 在测试中的一个小问题是:页面或组件中一般会用 text.js 组件引入模板,其 ES6 形式为:

import cardTmpl from 'text!templates/card.html';
复制代码

因为测试环境没有 require.js 或者 webpack 的加持,我们只能想办法将其劫持,并将正确的结果注入对应的测试模块中;

要实现这一目的,就要用到 jest.doMock() 方法,其缺点是用了这个就不能用 ES6 的 import 语法了,配置和使用简要说明如下:

// jest.config.js

moduleNameMapper: {
	"text!templates/(.*)": "templates/$1",
	...
},
...
复制代码
// __test__/TmplImporter.js

const fs = require('fs');
const path = require('path');

export default {
	import: tmplArrs=>tmplArrs.forEach(tmpl=>{
		jest.doMock(tmpl, ()=>{
			const filepath = path.resolve(__dirname, '../src/', tmpl);
			return fs.readFileSync(filepath, {encoding: 'utf8'});
		});
	})
}
复制代码
// __test__/components/CardFace/index.spec.js

const tmplImporter = require('../../TmplImporter').default;
tmplImporter.import([
	'templates/card/card.html',
	// 可以有多个,但凡该测试套件中用到的都写上
]);

// 因为无法用 ES6 import,注意写上 .default
const CardFace = require('components/CardFace/index').default;
复制代码

总结

  • jest 灵活的配置能力,使其能方便的应用于各种类型既有项目的 TDD 开发和重构
  • 之前的其他测试框架下的用例,可以快速迁移到 jest 中
  • Backbone.View 视图组件在经过 ES6 升级和合理封装后,可以明显改善页面的整洁度,并顺利应用于单元测试
  • 可以用 sinon.createFakeServer() 拦截 Backbone.Model 中的异步请求
  • 原来用 Require.js 下的 text.js 组件引入的模板,也可以用 jest.doMock() 很好的支持
  • 将单元测试任务加入原有的 build 工作流,可以保证相关代码之后的持续有效


(end)

----------------------------------------

长按二维码或搜索 fewelife 关注我们哦

你可能感兴趣的:(用 jest 单元测试改善老旧的 Backbone.js 项目)