Test helpers

Test helpers


Acceptance Tests

Ember Power Select bundles some handy test helpers (selectChoose, selectSearch, removeMultipleOption and clearSelected) that make it nicer to interact with the component in acceptance tests.

To use those helpers in acceptance tests that use moduleForAcceptance, you need to register them in the /tests/helpers/start-app.js file.

For that import the registration function and invoke it immedialty.

import { run } from '@ember/runloop';
import { merge } from '@ember/polyfills';
import Application from '../../app';
import config from '../../config/environment';
import registerPowerSelectHelpers from 'ember-power-select/test-support/helpers';

registerPowerSelectHelpers();

export default function startApp(attrs) {
  //...
}

However if you are using the new testing API described in RFC 232, available in ember-cli-qunit >= 4.2 and ember-cli-mocha >= 0.15.0, then you just can explicitly import those helpers where needed (even in integration tests!)

import { selectChoose, selectSearch, removeMultipleOption, clearSelected } from 'ember-power-select/test-support';

selectChoose(cssPath, optionTextOrOptionSelector, index?)

This async helper allows you to select an option of a select by it's text, without worrying about if the select is single or multiple or if it is opened or closed.

fillIn('.username', 'Tomster');
selectChoose('.city-selector', 'Rome');
// ...
click('.submit-btn');
It also allows to pass a complex CSS selector where using the text of the option is not convenient:
fillIn('.username', 'Tomster');
selectChoose('.select-with-only-images', '.ember-power-select-option', 3); // Select the 4th image
// ...
click('.submit-btn');

selectSearch(cssPath, searchText)

Use this helper to perform a search on a single/multiple select. You probably will use it in conjunction when the search perform some asynchronous operation

selectSearch('.city-selector', 'new');

andThen(function() {
  selectChoose('.city-selector', 'New Orleans');
});

removeMultipleOption(cssPath, optionText)

Use this helper to remove an option from a multiple select.

selectChoose('.city-selector', 'new');
// ...
removeMultipleOption('.city-selector', 'new');

clearSelected(cssPath, optionText)

Use this helper to remove an option from a single select when allowClear is set to true.

selectChoose('.city-selector', 'new');
// ...
clearSelected('.city-selector', 'new');

Note: Remember to whitelist selectChoose, selectSearch, removeMultipleOption and clearSelected in the list of allowed globals in your tests/.jshintrc manifest.


Integration Tests

Test helpers must be imported at the top of your integration test. The basic functionality of these helpers are unlikely to change, but may experience minor revisions in the future.

import { typeInSearch, clickTrigger } from 'ember-power-select/test-support/helpers'

Also note that you could extract the code for these test helpers into your own helpers file was well.

import { typeInSearch, clickTrigger } from 'my-app/tests/helpers/test-helpers'

clickTrigger(scope, options = {})

This helper opens the dropdown based on the class name (scope) defined on the power select. Scope is optional if integration test renders only one power select.

clickTrigger(".t-select-foo");
assert.equal($('.ember-power-select-dropdown').length, 1, 'Dropdown is rendered');

typeInSearch(text)

This helper is used in conjunction with opening a power select dropdown as long as search is not disabled.

clickTrigger(".t-select-foo");
typeInSearch("wat");

selectChoose(text)

Much like the acceptance one, this integration tests takes care of the entire process of opening a select and choosing one of its values witout you having to worry about the details.

selectChoose('.t-select-user', 'Robert');
// or
selectChoose('.t-select-user', '.ember-power-select-option', 3); // Third option