Blog

Blog

PHODAL

Requirejs Backbone Collection 测试

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

Backbone Collection

Bacbkbone主要由三部分组成

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

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

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

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

define(['backbone'], function(Backbone) {
    var RiceModel = Backbone.Model.extend({});
    var Rices = Backbone.Collection.extend({
        model: RiceModel,
        url: 'http://localhost:8080/all/rice',
        parse: function (data) {
            return data;
        }
    });
    return Rices;
});

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

define([
    'sinon',
    'js/Model/Rice_Model'
], function( sinon, Rices) {
    'use strict';

    beforeEach(function() {
        this.server = sinon.fakeServer.create();
        this.rices = new Rices();

    });

    afterEach(function() {
        this.server.restore();
    });

    describe("Collection Test", function() {
        it("should request the url and fetch", function () {
            this.rices.fetch();
            expect(this.server.requests.length)
                .toEqual(1);
            expect(this.server.requests[0].method)
                .toEqual("GET");
            expect(this.server.requests[0].url)
                .toEqual("http://localhost:8080/all/rice");
        });

    });
});

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

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

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

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

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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签