接受使用Ember CLI测试Ember Datepicker组件

我正在使用Pikaday在Ember CLI项目中创建Ember Datepicker组件。在组件测试中测试用户交互似乎是不可能的。有谁知道如何做到这一点？接受使用Ember CLI测试Ember Datepicker组件

例如我试图测试点击组件的输入时显示的Pikaday小部件。测试如下所示：

import { test, moduleForComponent } from 'ember-qunit'; 

moduleForComponent('datepicker-input'); 

test('is an input tag', function() { 
    equal('INPUT', this.$().prop('tagName')); 
}); 

test('clicking the input opens the pikaday dialog', function() { 
    ok($('.pika-single').hasClass('is-hidden')); 
    click(this.$().find('input')); 
    ok(!$('.pika-single').hasClass('is-hidden')); 
});

第二个测试由于ReferenceError: click is not defined而失败。我不知道我在做什么错误，据我可以告诉我的测试做相同的Ember.js网站上的示例：http://emberjs.com/guides/testing/testing-components/#toc_interacting-with-components-in-the-dom

所以我猜这个问题也可以与Ember CLI。欢迎任何帮助，我愿意提供如何测试组件用户交互的建议。

来源

2014-09-04 stravid

我最终手动启动并销毁应用程序。另外我还会在每次测试后用手拆卸组件。这是必要的，直到QUINIT插件的一些上游更改在Ember CLI中登陆。

你可以看一下在GitHub上完整的测试文件：https://github.com/edgycircle/ember-pikaday/blob/master/tests/unit/components/pikaday-input-test.js

来源

2014-09-13 13:02:12 stravid

您需要将组件添加到DOM。

test('clicking the input opens the pikaday dialog', function() { 
    $input = this.append(); 

    ok($('.pika-single').hasClass('is-hidden')); 
    click('#your-input').then(function() { 
     ok(!$('.pika-single').hasClass('is-hidden')); 
    }); 
});

来源

2014-09-04 15:30:57 Gaurav

这使用jQuery中的'click'方法，而不是Ember.js提供的集成测试助手。所以不是我想要完成的。 – stravid 2014-09-04 19:45:42

确定使用集成测试助手。请注意，它需要一个选择器，而不是一个元素。 – Gaurav 2014-09-04 20:04:19

正如我的问题所述，问题在于'click'集成测试助手没有定义。 – stravid 2014-09-04 21:23:43

我认为你需要调用App.setupForTesting，并在旧版本余烬，另外App.injectTestHelpers的测试运行之前。

http://emberjs.com/guides/testing/integration/#toc_setup

您还需要调用this.append使组件展现出来的DOM。

来源

2014-09-04 15:31:50

在什么版本的余烬是这个问题？我已经使用自动生成的组件测试几乎完全相同地测试了如何在Ember AddOn（ember 2.4.3）上的ember App上进行测试。

import { moduleForComponent, test } from 'ember-qunit'; 
import hbs from 'htmlbars-inline-precompile'; 

moduleForComponent('image-item', 'Integration | Component | image item', { 
    integration: true 
}); 

test('it renders an image with alt', function(assert) { 
    this.set('src', 'image.png'); 
    this.set('alt', 'grandmother'); 

    this.render(hbs`{{image-item src=src alt=alt}}`); 

    assert.equal(this.$('img').attr('src'), 'image.png'); 
    assert.equal(this.$('img').attr('alt'), 'grandmother'); 
});

来源

2016-04-22 18:16:05 morhook

接受使用Ember CLI测试Ember Datepicker组件

回答

相关问题