Component/Integration 测试 Backbone 观看次数等

Question

我希望编写一些测试来测试 Backbone 视图与其模型之间的连接。我基本上想用模型加载我的视图并确保一切都很好（事件正确 triggered/handled，元素添加到 DOM，等等）。我认为这不同于 acceptance/functional/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 应该在每次测试之前重置，但似乎 silly/inefficient 让浏览器导航到每个单独测试的新页面。运行有这样的测试框架吗？随时告诉我我想要这个是错误的。

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


    });
});

Component/Integration 测试 Backbone 观看次数等

Component/Integration testing Backbone views and more

javascript

integration-testing

dom

unit-testing

backbone.js