问题描述:

I've added custom no_results text for my Chosen component (which uses the Chosen jQuery plugin), and I'm trying to write integration tests to see if it works correctly. To do so, I need to find some way to trigger the chosen:no_results event.

Basically, my test breaks down into these parts:

  1. User clicks on the chosen component. They're presented with a dropdown menu, with a search bar at the top.
  2. User fills in the search bar with an option that's not present in the dropdown (e.g., they type in "Foo," but the dropdown only contains "Bar"). Instead of the default Chosen dialog, they're presented with, "No results found. Add a new option: ," with a link that displays the new option (e.g., "No results found. Add a new option: 'Foo'," with "Foo" as a link).
  3. They click on the new option, which then adds it to the dropdown.

I'm currently stuck on 2.

I've already tried simply filling in the input field, like so:

test('user can create a new option from the dialog box', function() {

visit('/collaborate/foo/430/bar/2/edit');

andThen(function() {

click('.chosen-container > .chosen-single');

andThen(function() {

fillIn('.chosen-container > .chosen-drop > .chosen-search > input', 'New Test');

andThen(function() {

equal(find('.chosen-container > .chosen-drop > .chosen-results > .no-results').text(), 'No results found. Add a new option: "New Test"');

});

});

});

});

However, that failed. Instead of the expected result, the test returned "". I put a break point immediately before the last equal, and the #ember-testing window still showed the default dropdown options instead of the no_results text.

So, then I realized that fillIn wasn't actually typing in the text, and I concluded that the event was triggered because of keypresses. With that in mind, I tried rewriting the test like this:

test('user can create a new owner from the dialog box', function() {

visit('/collaborate/foo/430/bar/2/edit');

andThen(function() {

click('.chosen-container > .chosen-single');

andThen(function() {

keyEvent('.chosen-container > .chosen-drop > .chosen-search > input', 'keypress', 84);

andThen(function() {

equal(find('.chosen-container > .chosen-drop > .chosen-results > .no-results').text(), 'No results found. Add a new option: "t"');

});

});

});

});

I tried triggering the keyup and keydown events as well. The results were the same as the first test.

I also tried a unit test for the component, but it seems I can't trigger events, and the component is listening for the chosen:no_results event.

Finally, I tried triggering the chosen:no_results event directly in the test:

test('user can create a new option from the dialog box', function() {

visit('/collaborate/foo/430/bar/2/edit');

andThen(function() {

click('.chosen-container > .chosen-single');

andThen(function() {

fillIn('.chosen-container > .chosen-drop > .chosen-search > input', 'New Test');

andThen(function() {

triggerEvent(find('.chosen-container').parent().find('select'), 'chosen:no_results');

andThen(function() {

equal(find('.chosen-container > .chosen-drop > .chosen-results > .no-results').text(), 'No results found. Add a new option: "New Test"');

});

});

});

});

});

The event does trigger, obviously, but I get an error. It seems that the chosen:no_results event passes in the Chosen object in the event options, which are needed for my component to function. I don't have access to it from the test itself, so I either need to find some way to trigger it using test helpers, or I have to find some way to pass in the Chosen object from the test itself.

How would I go about testing this?

相关阅读:
Top