Requirejs Backbone Collection 測試

netScorpion 發(fā)布于2019-05-29 16:19 / 1332人閱讀

摘要：主要由三部分組成創(chuàng)建數(shù)據(jù)，進(jìn)行數(shù)據(jù)驗(yàn)證，銷毀或者保存到服務(wù)器上。綁定模板，綁定界面元素的事件，初始的渲染，模型值改變后的重新渲染和界面元素的銷毀等。這樣我們便可以完成一個(gè)簡單地測試的書寫。

在一點(diǎn)點(diǎn)慢慢地寫一個(gè)簡單的SPA應(yīng)用，在這樣的一個(gè)過程里，我們也不得不寫一些測試以方便重構(gòu)。

Backbone Collection

Bacbkbone主要由三部分組成

model：創(chuàng)建數(shù)據(jù)，進(jìn)行數(shù)據(jù)驗(yàn)證，銷毀或者保存到服務(wù)器上。

collection：可以增加元素，刪除元素，獲取長度，排序，比較等一系列工具方法，說白了就是一個(gè)保存 models的集合類。

view：綁定html模板，綁定界面元素的事件，初始的渲染，模型值改變后的重新渲染和界面元素的銷毀等。

于是我們簡單地定義了一個(gè)Model以及一個(gè)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;
});

用來獲取數(shù)據(jù)，接著我們便可以創(chuàng)建一個(gè)測試，測試代碼如下

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了一個(gè)簡單的server

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

這樣我們就可以在fetch的時(shí)候mock一個(gè)response，在這時(shí)我們就可以測試這里的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");

這樣我們便可以完成一個(gè)簡單地測試的書寫。