资讯专栏INFORMATION COLUMN

Requirejs Backbone Collection 测试

netScorpion / 1382人阅读

摘要:主要由三部分组成创建数据,进行数据验证,销毁或者保存到服务器上。绑定模板,绑定界面元素的事件,初始的渲染,模型值改变后的重新渲染和界面元素的销毁等。这样我们便可以完成一个简单地测试的书写。

在一点点慢慢地写一个简单的SPA应用,在这样的一个过程里,我们也不得不写一些测试以方便重构。

Backbone Collection

Bacbkbone主要由三部分组成

model:创建数据,进行数据验证,销毁或者保存到服务器上。

collection:可以增加元素,删除元素,获取长度,排序,比较等一系列工具方法,说白了就是一个保存 models的集合类。

view:绑定html模板,绑定界面元素的事件,初始的渲染,模型值改变后的重新渲染和界面元素的销毁等。

于是我们简单地定义了一个Model以及一个Collection

</>复制代码

  1. define(["backbone"], function(Backbone) {
  2. var RiceModel = Backbone.Model.extend({});
  3. var Rices = Backbone.Collection.extend({
  4. model: RiceModel,
  5. url: "http://localhost:8080/all/rice",
  6. parse: function (data) {
  7. return data;
  8. }
  9. });
  10. return Rices;
  11. });

用来获取数据,接着我们便可以创建一个测试,测试代码如下

</>复制代码

  1. define([
  2. "sinon",
  3. "js/Model/Rice_Model"
  4. ], function( sinon, Rices) {
  5. "use strict";
  6. beforeEach(function() {
  7. this.server = sinon.fakeServer.create();
  8. this.rices = new Rices();
  9. });
  10. afterEach(function() {
  11. this.server.restore();
  12. });
  13. describe("Collection Test", function() {
  14. it("should request the url and fetch", function () {
  15. this.rices.fetch();
  16. expect(this.server.requests.length)
  17. .toEqual(1);
  18. expect(this.server.requests[0].method)
  19. .toEqual("GET");
  20. expect(this.server.requests[0].url)
  21. .toEqual("http://localhost:8080/all/rice");
  22. });
  23. });
  24. });

在这里我们用sinon fake了一个简单的server

</>复制代码

  1. this.server = sinon.fakeServer.create();

这样我们就可以在fetch的时候mock一个response,在这时我们就可以测试这里的URL是不是我们想要的URL。

</>复制代码

  1. this.rices.fetch();
  2. expect(this.server.requests.length)
  3. .toEqual(1);
  4. expect(this.server.requests[0].method)
  5. .toEqual("GET");
  6. expect(this.server.requests[0].url)
  7. .toEqual("http://localhost:8080/all/rice");

这样我们便可以完成一个简单地测试的书写。

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

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

相关文章

  • 基于 Backbone + node 的个人简历生成器(个人学习总结)

    摘要:应用的功能这个应用是一个个人简历生成器。比较好的教程有这一个。这样的命名污染问题自然显而易见。而且发出多次请求也会影响性能。明显不利于维护。然而我希望能够不发生变化,因为是在文件的前提下的标签页,不能换一个标签就重建一个。 为什么学习backbone?这是个好问题。在这个前端框架爆炸的年代,比起backbone,对开发来说有更多更好的选择,react,vue,angular等等。但这些...

    lansheng228 评论0 收藏0
  • RequireJS进阶:配置文件的学习

    摘要:概述强大灵活的运用是通过配置文件决定的。下面通过示例来进行深度的探讨配置文件的使用。配置文件的位置配置文件的位置和声明用法是相对于这个脚本文件来决定的。配置文件参数的介绍所有模块的查找根路径。 概述 Requires强大灵活的运用是通过配置文件决定的。通过配置文件我们可以给模块取别名、给模块加上版本标识、设置模块依赖、包装非模块等强大功能。同时RequireJS的优化器也大量使用了配...

    lemon 评论0 收藏0
  • 前端优化:RequireJS Optimizer 的使用和配置方法

    摘要:是自带的前端优化工具,可以对项目中的和代码使用或者进行压缩合并。这篇文章介绍的使用和配置方法,帮助大家解决使用中碰到的问题。对脚本的优化支持目前流行的和两种压缩方式,需要环境支持,而则需要环境。定义要被优化的模块数组。 RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的JavaScript和CSS 代码使用 Ugli...

    Alan 评论0 收藏0
  • JS 模块化编程 require.js 的用法

    摘要:使用,会在相关的加载后执行回调函数,这个过程是异步的,所以它不会阻塞页面。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。 什么是RequireJS? RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和...

    xumenger 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<