Acceptance Testing a Ember Datepicker Component with Ember CLI

Question

I'm using Pikaday to create an Ember Datepicker Component within an Ember CLI project. It seems to be impossible to test user interactions within the component test. Does anyone know how to do this?

For example I'm trying to test that the Pikaday widget is displayed when the input of the component is clicked. The test looks like this:

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

The second tests fails due to ReferenceError: click is not defined. I don't know what I'm doing wrong, as far as I can tell my tests do the same as the example on the Ember.js website: http://emberjs.com/guides/testing/testing-components/#toc_interacting-with-components-in-the-dom

So I'm guessing the problem could be also with Ember CLI. Any help is welcome, I'm open to suggestions how to test the user interactions of an component.

Answer 1

You need to add the component to the 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

I ended up starting and destroying the app by hand. In addition I also teardown the component after every test by hand. This is necessary until a few upstream changes from the QUnit addon land in Ember CLI.

You can look at the complete test file on GitHub: https://github.com/edgycircle/ember-pikaday/blob/master/tests/unit/components/pikaday-input-test.js

Answer 3

I think you need to call App.setupForTesting, and in older versions of ember, additionally App.injectTestHelpers before the tests are run.

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

You also need to call this.append to make the component show up in the DOM.

Answer 4

In what version of Ember was this problem? I've tested with the auto-generated component test almost identically on how I tested on an ember App on an Ember AddOn (ember 2.4.3).

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