接受使用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組件

回答

相關問題