Question

我正在寻找一些测试来测试Backbone视图与其模型之间的连线。我本质上想用模型加载我的视图，并确保一切都是桃子（事件被正确触发/处理，元素添加到DOM等）。我认为这与验收/功能/ e2e测试不同，但比简单的单元测试更大。换句话说，我不打算写：

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，但这不应该是选择集成测试而非单元测试的原因。当我发现自己不顾一切地创建测试环境时，我倾向于选择集成。

然而，话虽如此，我认为你可以通过单元测试来逃避，我就是这样做的。我们正在使用带有chaiJs断言的testem进行此类测试。如果您设置了一个灯具，您可以执行类似的操作（并且您将拥有完整的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


    });
});

组件/集成测试骨干视图等

1 个答案: