mercredi 4 février 2015

Unit testing a component that uses a third-party library

I've created a date picker component that utilizes Kendo UI. I want to write a unit test that asserts that the date picker is opened when its input field is focussed. Unfortunately the test I've written passes when run in isolation, but fails when run with other tests. Here's my component:



//components/date-input.js

import Ember from 'ember';

export default Ember.TextField.extend({
_datePicker: null,

setupDatePicker: function() {
var datePicker = this.$().kendoDatePicker();
this.set('_datePicker', datePicker.data('kendoDatePicker'));
}.on('didInsertElement'),

destroyDatePicker: function() {
var datePicker = this.get('_datePicker');
if (datePicker) {
datePicker.destroy();
}
this.set('_datePicker', null);
}.on('willDestroyElement'),

openDatePicker: function() {
this.get('_datePicker').open();
}.on('focusIn')
});


and my unit test:



//tests/unit/components/date-input-test.js

import {
moduleForComponent,
test
} from 'ember-qunit';

moduleForComponent('date-input', 'DateInputComponent');

test('it opens the date picker when focused', function() {
expect(2);

this.append();

equal($('.k-calendar-container').css('display'), 'none',
'calendar is hidden by default');

this.subject().$().focus();

/**** This assertion fails. ****/
equal($('.k-calendar-container').css('display'), 'block',
'calendar is displayed after focus');
});


The final assertion fails when run with the full test suite with:



DateInputComponent: it opens the date picker when focused
✘ calendar is displayed after focus
expected block
actual none


Is there any reason this would pass in isolation but fail when run with the rest of the test suite? I'm using Ember CLI 0.1.12 which uses Ember 1.8.1.





Aucun commentaire:

Enregistrer un commentaire