How to select an item from a combobox in Senchat Test

Question

Is there a way to select an item from a combobox without having the actual value of the item ?

Lets say we have a combo with Oranges, Apples and Lemons and the actual value of these items are keys that we don't know is there a way to do select by index ?

Or perhaps to retrieve the value based on the displayValue ?

Something like this works:

  this.comboBox().setValue(7);

But what if I only have the displayValue of what I want to select? Lets say 'Oranges', how do I select that from the combo ?

Answer 1

One way you could do this would be via execute(). The idea would be to find the correct record in the combobox's store, retrieve the id from that, and then use the id to set the correct value.

In an in-browser scenario, you could just do this directly by inspecting the combobox's store. However, in a WebDriver-based scenario, you don't have access to the context in which the app is running from the spec, so execute() is the easiest way (where there is no other way via the API) to get in there. Here's a simple example:

// Component
Ext.define('Sandbox.view.test.combobox.Base', {
    extend: 'Ext.form.field.ComboBox',
    id: 'futureCmp',
    displayField: 'text',
    valueField: 'id',
    store: {
        fields: ['id', 'text'],
        data: [
            [1, 'Apples'],
            [2, 'Oranges']
        ]
    }
});

// Spec
it('should select correct value from displayField', function () {
    var combo = ST.comboBox('@futureCmp');

    combo
        .execute(function (cmp) {
            // we're in the target context now, so we *can* 
            // interact with Ext JS now
            // we could return an object if needed, but we only need the id
            return cmp.getStore().findRecord('text', 'Oranges').get('id');
        })
        .and(function () {
            // "executeResult" is the value returned from execute()
            // in this case, it's the id of the item we want to select
            var id = this.future.data.executeResult;
            combo.setValue(id);
            // assert that the value has been correctly selected
            combo.value(id);
        });
});

The nice part about this approach is that it's portable between scenario types; since we're using the API exclusively, we could easily switch between in-browser and web-driver based scenarios and run the same test (in fact, this is borrowed from some internal tests that do precisely that).

Finally, we do have an item in the feature request tracker for adding select() style methods to the combobox future API, similar to what is available for Grid and DataView. I'm not sure when they will make it in, but I've personally been wanting it for a while :)