Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 组件/集成测试主干视图等_Javascript_Unit Testing_Dom_Backbone.js_Integration Testing - Fatal编程技术网

Javascript 组件/集成测试主干视图等

Javascript 组件/集成测试主干视图等,javascript,unit-testing,dom,backbone.js,integration-testing,Javascript,Unit Testing,Dom,Backbone.js,Integration Testing,我想写一些测试来测试主干视图和它们的模型之间的连接。我本质上是想用一个模型来加载我的视图,并确保一切都很好(事件被正确触发/处理,元素被添加到DOM中,等等)。我认为这与验收/功能/e2e测试不同,但比简单的单元测试更大。换句话说,我不想写: var browser = new Browser() , fakeData = readFixtures("persons.json"); fakeAPIResponse('/persons', fakeData); browser.visit(

我想写一些测试来测试主干视图和它们的模型之间的连接。我本质上是想用一个模型来加载我的视图,并确保一切都很好(事件被正确触发/处理,元素被添加到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应该在每次测试之前重置,但是让浏览器为每个单独的测试导航到新页面似乎很愚蠢/低效。有没有这样的框架来运行测试?请随时告诉我我想要这个是错误的。

我们正在使用casperJs进行此操作。Casper将为您提供完整的DOM,但这不应成为选择集成测试而不是单元测试的原因。当我发现自己在创建一个测试环境时,我倾向于选择集成

然而,话虽如此,我认为您可以通过进行单元测试而逃脱,下面是我将如何进行的。我们将testem与chaiJs断言一起用于此类测试。如果您设置了一个fixture,您可以执行类似的操作(并且您将拥有完整的DOM,并且能够测试OP中列出的事件和所有其他内容)


我不太确定CasperJS在这里的位置。您是否使用
casper.evaluate
对远程DOM中的所有测试代码进行评估?抱歉,我在运行时写了这篇文章——我们只使用casper进行集成测试。上面的例子是针对单元测试的,我建议您在这里使用您提到的场景。啊,我明白了,我一直遇到的问题是,任何DOM更改/事件都会从一个测试用例转移到另一个测试用例。我希望找到一个解决方案,允许我在每次测试中使用新的DOM进行测试。我可能仍然能够和Casper一起解决这个问题,但我希望有一些现有的框架来处理这个问题。
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


    });
});