Ember select2 with test helper

This repo contains an Ember component wrapper for the select2 select box, and a page object test helper to make it easy to test in acceptance tests.

installation

ember install ember-select2-with-helper

This will install the select2-select component, and copy select2-helper.js to your app's tests/pages directory.

component

sample usage:

{{#select2-select
    action="onChangeSelect"
    config=config
    items=items
    selectId="mySelect"
}}
    <select id="mySelect">
    {{#each items as |item|}}
        <option value="{{item.id}}" selected={{item.selected}} data-label="{{item.label}}">
            {{item.label}}
        </option>
    </select>
{{/select2-select}}

action will be called whenever a user selects or deselects with two paramters: an array of currently selected values, and a string describing the action ("select" or "deselect")

config is a hash of settings passed to select2; see the select2 documentation

example: {tags: true, multiple: true, placeholder: 'Select some items'}

items is an array of objects with id, text, and (optional) selected properties. The Ember component needs the list of items to redraw the component if the items change.

example: [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug', selected: true }, ... ]

selectId is the id of the select element to select2-ize; this must match the selectId param

if data-label is set on option elements, use this value in the selected items chip.

if option elements contain HTML, override the escapeMarkup function as needed

test helper

setup

generate a page object for your page:

ember generate page-object my-page

in the page object file, import the select2 test helper:

import Select2Helper from './select2-helper';

define your page object, then add in the select2 helpers:

let MyPage = {
    visit: visitable('/:page'),
    ....
};

export default PageObject.create(Object.assign(Demo, Select2Helper));

usage

use the select2 helper methods in your test as your would any other:

andThen(function() {
    assert.equal(page.selectedCount, 1, '1 selected');
    page.selectByTitle('Cantaloupe');
});

andThen(function() {
    assert.equal(page.selectedCount, 2, '2 selected');
});

see the sample acceptance tests for more details