組件/集成測試骨干網視圖等

Question

我希望編寫一些測試來測試Backbone視圖及其模型之間的連接。 我本質上是想用模型加載我的視圖，並確保所有內容都是桃紅色的（正確觸發/處理了事件，將元素添加到DOM等）。 我認為這與驗收/功能/端到端測試不同，但比簡單的單元測試要大。 換句話說，我不想寫：

var browser = new Browser()
  , fakeData = readFixtures("persons.json");

fakeAPIResponse('/persons', fakeData);

browser.visit("http://localhost:3000/", function () {
  assert.ok(browser.success);
  var persons = browser.queryAll(".persons li");
  assert.lengthOf(persons, 20);
});

而是類似

var router = require('routers/main'),
    UserModel = require('models/user'),
    AccountView = require('views/account');
...
# In a test
var model = new UserModel({ userId: 1 });
router._showView(new AccountView({ model: model });
expect(document.getElementsByClassName('account-panel')).to.have.length(1);
model.set('name', 'Test Testerson');
expect(document.getElementById('name-field').value).to.equal('Test Testerson');

也許我還沒走，應該進行一些端到端測試，但是在我看來，這似乎是一種有價值的測試方法。 我的問題是：我該怎么做？ 我需要一個完整的DOM，所以我認為它們應該在PhantomJS之類的文件中運行； DOM應該在每次測試之前重置，但是讓瀏覽器針對每個單獨的測試導航到新頁面似乎很愚蠢/效率低下。 是否有用於以這種方式運行測試的框架？ 隨時告訴我，我想要這個是錯誤的。

Answer 1

我們正在使用casperJs執行此操作。 Casper將為您提供完整的DOM，但這不應該是選擇集成測試而不是單元測試的原因。 當我發現自己無法創建測試環境時，我傾向於選擇集成。

但是，話雖如此，我認為您可以進行單元測試，這就是我的方法。 我們將testem與chaiJs斷言一起用於此類測試。 如果安裝了燈具，則可以執行類似的操作（您將擁有完整的DOM，並且能夠測試事件以及OP中列出的所有其他內容）。

beforeEach(function () {
    var theModel = new Backbone.Model(),
        theViewToTest = new TheViewToTest({
            model: theModel,
            el: $(fixtures.get('some-fixture.html'))
        });

    theViewToTest.render();

    this.theViewToTest = theViewToTest;

});

describe('Checking event handlers', function () {
    it('Should fire some events', function () {

        // I would setup a spy here and listen to the button handler
        this.theViewToTest.$el.find('.some-button').trigger('click');

        // Assert the spy was called once


    });
});