Тестирование компонентов/интеграции Магистральные представления и многое другое

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. Каспер предоставит вам полную 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 


    }); 
});