Ember-power-select: Possibility to test with ember-cli-page-object

[Sinled]

Hi, at first, thanks for the great plugin.

I am using ember-cli-page-object in my acceptance and integration tests,
but ember-power-select completely ignores events from page-object
am i missing something, or it is normal behaviour and the only way to access EPS in tests via test provided helpers?

[corrspt]

I'm starting my acceptance tests with ember-cli-page-object and ember-power-select as well, and this issue in the page object repo helped me advance a little in my efforts.

I don't think events are ignored, I'm still working through my component, but this is what I have (this is a component I call PowerLov (an ember-cli-page-object component)

import PageObject from 'app/tests/page-object';

const {
  text,
  clickable,
  count
} = PageObject;

export default function(scope) {
  return {
    scope: `[data-id="${scope}"]`,
    inputValue: text('.ember-power-select-selected-item'),
    open: clickable('.ember-power-select-trigger'),
    count: count('.ember-power-select-option', { resetScope: true }),
    select(optionText) {
      selectChoose(this.scope, optionText);
      return this;
    }
  };
}

[Sinled]

@corrspt thanks, helpers code from provided link works like a charm

import { buildSelector } from '../page-object';


export const selectableChoose = function(selector, options = {}) {
    return {
        isDescriptor: true,

        value(textToSelect) {


            selectChoose(buildSelector(this, selector, options), textToSelect);

            return this;
        }
    };
};

export const selectableSearch = function(selector, options = {}) {
    return {
        isDescriptor: true,

        value(textToSearch) {

            selectSearch(buildSelector(this, selector, options), textToSearch);

            return this;
        }
    };
};

updated: stating from ember 2.8+
using with wait helper results strange behaviour

[cibernox]

This is closed now, but the only thing to take into account is that this component uses onclick=/onmouseover= etc... and this kind of triggers are not fired with jquery events ($(selector).trigger('mouseover')), they require native events.

Because of that, it provides a couple acceptance helpers (selectChoose and selectSearch) to easy it's usage in testing.

[sukima]

This only works for acceptance tests where you have a full application and the async test helpers. integration tests can not use this as far as I can tell.

Is there anyway to use the test helpers for an integration test? Specifically, I have a component which uses a power-select inside it. I wish to test that my action is called when a user selects an option. Since it is a component it does not need a full application just to accomplish this. How would you recommend a page-object that can select an option in an integration test?

[cibernox]

The addon also provides a few integration tests, but they are a biy more low level: http://www.ember-power-select.com/docs/test-helpers

You can use those in ember-page-object

[sukima]

That is what I ended up doing:

import PageObject, { findElementWithAssert }
  from 'ember-cli-page-object';
import { nativeMouseDown, nativeMouseUp }
  from '../../../tests/helpers/ember-power-select';

export const FilterMultiSelect = {
  scope: '.ui-filter-multi-select',

  openPicker() {
    let $element = findElementWithAssert(
      this,
      '.ember-power-select-trigger'
    );
    nativeMouseDown($element.get(0));
    return this;
  },

  pickOption(text) {
    let $element = findElementWithAssert(
      this,
      '.ember-power-select-option',
      {contains: text}
    );
    nativeMouseUp($element.get(0));
    return this;
  },

  pick(text) {
    this.openPicker().pickOption(text);
    return this;
  }
};

export default PageObject.create(FilterMultiSelect);

Thanks.

[cibernox]

@sukima That is reasonable, although the clickTrigger() could have worked too 👍

[jelhan]

I'm using this ember-cli-page-object test helper for acceptance tests.

import { findElementWithAssert } from 'ember-cli-page-object';
import { nativeMouseDown, nativeMouseUp } from '<your-project>/tests/helpers/ember-power-select';
import Ember from 'ember';
import jQuery from 'jquery';
/* global wait */

const { Error: EmberError, assign } = Ember;

let selectable = function(selector, options = {}) {
  return {
    isDescriptor: true,

    get() {
      return function(optionText) {
        wait().then(() => {
          // find picker
          let $picker = findElementWithAssert(
            this,
            '.ember-power-select-trigger',
            assign({ scope: selector }, options)
          );
          // open picker
          nativeMouseDown($picker.get(0));


          wait().then(() => {
            // find ember-power-select-dropdown which uses ember-wormhole
            let $options = findElementWithAssert(
              this,
              '.ember-power-select-option',
              {
                contains: optionText,
                // more than one option may contain text
                // e.g. we have options `5`, `10`, `50` and optionText is `5`
                multiple: true,
                resetScope: true,
                scope: `#${$picker.attr('aria-owns')}`
              }
            );
            // we may have matched more than one element
            // if so we select the option which equals searched text
            if ($options.length > 1) {
              $options = $options.filter(function() {
                return jQuery(this).text().trim() === optionText;
              });
            }

            if ($options.length !== 1) {
              throw new EmberError(`Provided text "${optionText}" and selector "${selector}" matches multiple options.`);
            }

            // select option
            nativeMouseUp($options.get(0));

            return this;
          });
        });
      };
    }
  };
};

export { selectable };

I had quite a lot trouble with infinite rendering invalidation detected errors been thrown. Seems like wait().then() fixes it. But I think test helper therefore does not work in integration tests. ember-cli-page-object decides per execution context if it uses wait().then(() => { cb(); }) or run(() => { cb(); }) to execute async handlers.

Also this test helper breaks chaining. Not quite sure why.