diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs index 58ca427d3..ce65b2b83 100644 --- a/addon/components/power-select.hbs +++ b/addon/components/power-select.hbs @@ -39,7 +39,6 @@ {{on "blur" this.handleBlur}} class="ember-power-select-trigger {{@triggerClass}}{{if publicAPI.isActive " ember-power-select-trigger--active"}}" aria-activedescendant={{if dropdown.isOpen (unless @searchEnabled (concat publicAPI.uniqueId "-" this.highlightedIndex))}} - aria-controls={{unless @searchEnabled listboxId}} aria-describedby={{@ariaDescribedBy}} aria-haspopup={{unless @searchEnabled "listbox"}} aria-invalid={{@ariaInvalid}} diff --git a/tests/integration/components/power-select/nested-test.js b/tests/integration/components/power-select/nested-test.js new file mode 100644 index 000000000..f8b2956c5 --- /dev/null +++ b/tests/integration/components/power-select/nested-test.js @@ -0,0 +1,159 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, click, triggerKeyEvent } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; +import { clickTrigger as powerSelectClickTrigger } from 'ember-power-select/test-support/helpers'; +import { clickTrigger as basicDropdownClickTrigger } from 'ember-basic-dropdown/test-support/helpers'; +import { numbers } from '../constants'; + +module('Integration | Component | Ember Power Select (nested within basic-dropdown)', function(hooks) { + setupRenderingTest(hooks); + + test('Clicking the trigger of a nested closed select opens the dropdown', async function(assert) { + assert.expect(4); + this.numbers = numbers; + await render(hbs` + + Click me + + + {{option}} + + + + `); + + assert.dom('.ember-power-select-trigger').doesNotExist('power-select trigger is not rendered'); + await basicDropdownClickTrigger('[data-role=parent-dropdown-trigger]'); + assert.dom('.ember-power-select-trigger').exists('power-select trigger is rendered'); + assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + }); + + test('Clicking the trigger of an opened nested select closes the dropdown', async function(assert) { + assert.expect(4); + + this.numbers = numbers; + await render(hbs` + + Click me + + + {{option}} + + + + `); + + assert.dom('.ember-power-select-trigger').doesNotExist('power-select trigger is not rendered'); + await basicDropdownClickTrigger('[data-role=parent-dropdown-trigger]'); + assert.dom('.ember-power-select-trigger').exists('power-select trigger is rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); + }); + + test('The nested power-select trigger remains visible after selecting an option with the mouse', async function(assert) { + assert.expect(5); + + this.numbers = numbers; + await render(hbs` + + Click me + + + {{option}} + + + + `); + + assert.dom('.ember-power-select-trigger').doesNotExist('power-select trigger is not rendered'); + await basicDropdownClickTrigger('[data-role=parent-dropdown-trigger]'); + assert.dom('.ember-power-select-trigger').exists('power-select trigger is rendered'); + assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + await click('.ember-power-select-option:nth-child(4)'); + assert.dom('.ember-power-select-trigger').hasText('four', '"four" has been selected'); + }); + + test('The nested power-select trgger remains visible after selecting an option with the keyboard', async function(assert) { + assert.expect(5); + + this.numbers = numbers; + await render(hbs` + + Click me + + + {{option}} + + + + `); + + assert.dom('.ember-power-select-trigger').doesNotExist('power-select trigger is not rendered'); + await basicDropdownClickTrigger('[data-role=parent-dropdown-trigger]'); + assert.dom('.ember-power-select-trigger').exists('power-select trigger is rendered'); + assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 13); + assert.dom('.ember-power-select-trigger').hasText('one', '"one" has been selected'); + }); + + test('If the user passes `@closeOnSelect={{false}}` the dropdown remains visible after selecting an option with the mouse (nested)', async function(assert) { + assert.expect(6); + + this.numbers = numbers; + await render(hbs` + + Click me + + + {{option}} + + + + `); + + assert.dom('.ember-power-select-trigger').doesNotExist('power-select trigger is not rendered'); + await basicDropdownClickTrigger('[data-role=parent-dropdown-trigger]'); + assert.dom('.ember-power-select-trigger').exists('power-select trigger is rendered'); + assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + await click('.ember-power-select-option:nth-child(4)'); + assert.dom('.ember-power-select-trigger').hasText('four', '"four" has been selected'); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + }); + + test('If the user passes `@closeOnSelect={{false}}` the dropdown remains visible after selecting an option with the keyboard (nested)', async function(assert) { + assert.expect(6); + + this.numbers = numbers; + await render(hbs` + + Click me + + + {{option}} + + + + `); + + assert.dom('.ember-power-select-trigger').doesNotExist('power-select trigger is not rendered'); + await basicDropdownClickTrigger('[data-role=parent-dropdown-trigger]'); + assert.dom('.ember-power-select-trigger').exists('power-select trigger is rendered'); + assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); + await powerSelectClickTrigger(); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 13); + assert.dom('.ember-power-select-trigger').hasText('one', '"one" has been selected'); + assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); + }); +});