javascript - 如何用QUnit和Sinon模拟cookie？

Question

我有这个代码:

var CookieHelper = function () {
    return {
        GetCookie : function (cookieName) {
            var cookieNameRequest = cookieName + "=";
            var cookiesCollection = document.cookie.split(";");
            for (var i = 0; i < cookiesCollection.length; i++) {
                var cookieValuePair = cookiesCollection[i];
                while (cookieValuePair.charAt(0) == " ") cookieValuePair = cookieValuePair.substring(1, cookieValuePair.length);
                if (cookieValuePair.indexOf(cookieNameRequest) == 0)
                    return cookieValuePair.substring(cookieNameRequest.length, cookieValuePair.length);
            }
            return null;
        },

        DeleteCookie : function (cookieName) {
            CookieHelper.SetCookie(cookieName, "", -1);
        },

        SetCookie : function (cookieName, cookieValue, cookieExpirationDays) {
            var tmpDate = new Date;
            if (cookieExpirationDays) {
                tmpDate.setTime(tmpDate.getTime() + cookieExpirationDays * 24 * 60 * 60 * 1000);
                var expires = "; expires=" + tmpDate.toGMTString();
            } else {
                // if cookieExpirationDays isn't set cookie will expire at the end of the day
                var expirationTime = new Date(tmpDate.getFullYear(), tmpDate.getMonth(), tmpDate.getDate(), 23, 59, 59);
                var expires = "; expires=" + expirationTime.toGMTString();
            }
            document.cookie = cookieName + "=" + cookieValue + expires + "; path=/;" + (location.protocol === "https:" ? "secure=true" : "");
        }
    };
}();

我需要为 GetCookie 编写单元测试。
我尝试过:

QUnit.module('Cookie Helper Tests');

QUnit.test('GetCookie - returns no cookie', function(assert) {
    var stub = sinon.spy(CookieHelper, 'GetCookie');

    var cookieName = 'testCookieName';
    var cookieValue = CookieHelper.GetCookie(cookieName);

    assert.ok(cookieValue == null, 'returns no cookie');    
}); 

我需要模拟/ stub document.cookie，但我对 Sinon 和 QUnit 完全陌生。
有人能给我解释一下我做错了什么吗？

提前致谢!
斯尔詹

Answer 1

实际上你不能用Sinon来模拟属性，而且你不能模拟document.cookies属性，因为它是不可变的。不过，您可以做的是使用模仿原始对象行为的假双对象，如 here 所述。

例如，如果您在浏览器外部(例如在 NodeJS 中)运行相同的测试，您会执行类似的操作

const chai = require('chai');
const sinon = require('sinon');
const SinonChai = require('sinon-chai');

chai.use(SinonChai);
chai.should();

context('test', function() {


  it('should pass',
    (done) => {

      var cookieName = 'testCookieName';

      document = {
        cookie: cookieName + '=123'
      };

      var cookieValue = CookieHelper.GetCookie(cookieName);

      console.log(cookieValue);

      done();
    });

});

为了向上下文引入一个文档对象，并通过返回固定结果来模仿它的cookie属性。

现在，浏览器有一个解决方法，其中涉及重新定义“document.cookie”的 getter 和 setter，如 here 中所述:

(function (document) {
    var cookies = {};
    document.__defineGetter__('cookie', function () {
        var output = [];
        for (var cookieName in cookies) {
            output.push(cookieName + '=' + cookies[cookieName]);
        }
        return output.join(';');
    });
    document.__defineSetter__('cookie', function (s) {
        var indexOfSeparator = s.indexOf('=');
        var key = s.substr(0, indexOfSeparator);
        var value = s.substring(indexOfSeparator + 1);
        cookies[key] = value;
        return key + '=' + value;
    });
    document.clearCookies = function () {
        cookies = {};
    };
})(document);