수용 Ember CLI가있는 Ember Datepicker 구성 요소 테스트

Question

Pikaday를 사용하여 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. 어떤 도움도 환영합니다. 구성 요소의 사용자 상호 작용을 테스트하는 방법을 제안합니다.

Answer 1

나는 앱을 손으로 시작하고 파괴했다. 또한 모든 테스트가 끝나면 손으로 부품을 분해합니다. 이는 Ember CLI의 QUnit 애드온 토지에서 몇 가지 업스트림이 변경 될 때까지 필요합니다.

당신은 GitHub의에서 완전한 테스트 파일을 볼 수

: https://github.com/edgycircle/ember-pikaday/blob/master/tests/unit/components/pikaday-input-test.js

Answer 2

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')); 
    }); 
}); 

Answer 3

난 당신이 App.setupForTesting, 그리고 엠버의 이전 버전에서 테스트를 실행하기 전에 추가로 App.injectTestHelpers를 호출 할 필요가 있다고 생각합니다.

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

는 또한 DOM에서 구성 요소 쇼를 만들기 위해 this.append를 호출해야합니다.

Answer 4

이 문제는 엠버의 버전이었다에가? 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'); 
});