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

您需要将组件添加到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 2

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

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

Answer 3

我认为您需要在测试运行之前调用App.setupForTesting，并在旧版本的ember中调用App.injectTestHelpers。

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

您还需要调用this.append以使组件显示在DOM中。

Answer 4

在什么版本的Ember中出现了这个问题？我已经使用自动生成的组件测试进行了测试，几乎与我在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');
});

验收使用Ember CLI测试Ember Datepicker组件

4 个答案: