模擬本地存儲/覆蓋

Question

伊夫下面的代碼使用按預期工作的本地存儲，我想爲它創建單元測試的問題是，我在這個功能使用本地存儲

這是我想測試

open: function(url) { 
      var that = this; 
      if (!localStorage.getItem(「alert」)) {    
       that_run(url) 
        .then(function(isBlocked) { 
         if (isBlocked) { 
          that._notify(); 
          localStorage.setItem(「alert」, true); 
         } else { 
          localStorage.setItem(「alert」, true); 
          that._exe(「page」,url) 
         } 
        }).done(); 
      } else { 
       that._exe(「page」,url) 
      } 
     }, 

這是正在測試的功能，但我想重寫窗口是不好的做法，我的問題，如果我能寫這個測試最好？

it.only("test for open", function () { 
    var url = "http://mytesturl」; 
    winlocalStorage.getItem = function(){ 
        return false; 
    }; 
    var oSimulateSpy = sandbox.spy(exc "_simulate"); 
    return orun.open(url).then(function(){ 
        expect(oSimulateSpy.called).to.be.true; 
    }); 
});  

我看到了這篇文章，這個使用功能的編程 https://stackoverflow.com/a/20153543/6124024 但我認爲通過本地存儲的參數是在這種情況下有點大材小用，因爲該功能（開）從許多地方調用多次。 ..有沒有更好的/更清潔的方式來處理這個問題？

Answer 1

因爲你的代碼被加載了各種各樣的副作用，所以你在掙扎。因爲您不會從this._exe或that_run中返回任何值，所以在我看來，這些功能也有副作用。您最好從這些函數返回值或承諾值，而不是依賴這些函數來改變更多的外部狀態。

這裏是寫你的模塊

// use "wrapper" function that configures this module 
export default function(storage) { 
    return { 
    // other functions ... 
    async open (url) { 
     if (storage.getItem('alert')) { 
     return this._exe('page', url) // make sure _exe returns promise 
     } 
     else if (await that_run(url)) { 
     storage.setItem('alert', true) 
     return this.notify() // make sure notify returns Promise 
     // or return Promise.resolve() 
     } 
     else { 
     storage.setItem('alert', true) 
     return this._exe('page', url) 
    } 
    } 
} 

在測試代碼使用您的模塊

// import mock storage adapter 
const MockStorage = require('./mock-storage'); 

// create mock storage adapter 
const mockStorage = new MockStorage(); 

// pass mock storage adapter to your module as a config argument 
const myModule = require('./my-module')(mockStorage); 

// don't forget to reset storage before each test 
beforeEach(function() { 
    mockStorage.reset(); 
}); 

it("test for open", async function() { 
    var url = "http://mytesturl"; 
    mockStorage.set('alert', false); 
    let someValue = await myModule.open(url); 
    assert.equal(someValue, someExpectation); 
    assert.equal(mockStorage.get('alert'), true); 
}); 

的模擬存儲適配器可能是這樣的

export default class MockStorage { 
    constructor() { 
    this.storage = new Map(); 
    } 
    setItem (key, value) { 
    this.storage.set(key, value); 
    } 
    getItem (key) { 
    return this.storage.get(key); 
    } 
    removeItem (key) { 
    this.storage.delete(key); 
    } 
    clear() { 
    this.constructor(); 
    } 
} 

然後，可能更好的辦法，當你在生產代碼中使用你的模塊時，你可以通過真實的localStorage

// use window.localStorage as config argument in production code 
const myModule = require('./my-module')(window.localStorage);