CODEWITHSUNDEEP
ember.jsember-cliacceptance-testing
stravid
stravid

Reputation: 1009

Acceptance Testing a Ember Datepicker Component with Ember CLI

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.

Upvotes: 1

Views: 1529

Answers (4)

morhook
morhook

Reputation: 1259

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

Upvotes: 0

stravid
stravid

Reputation: 1009

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

Upvotes: 1

Gaurav
Gaurav

Reputation: 12796

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

Upvotes: 1

Stanley Stuart
Stanley Stuart

Reputation: 1145

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.

Upvotes: 0

Related Questions