diff --git a/tests/integration/components/power-select/general-behaviour-test.js b/tests/integration/components/power-select/general-behaviour-test.js index dc08f6e79..d71c95ccd 100644 --- a/tests/integration/components/power-select/general-behaviour-test.js +++ b/tests/integration/components/power-select/general-behaviour-test.js @@ -10,7 +10,6 @@ import { run } from '@ember/runloop'; import { numbers, names, countries } from '../constants'; import PromiseProxyMixin from '@ember/object/promise-proxy-mixin'; import ArrayProxy from '@ember/array/proxy'; -import { find, findAll } from 'ember-native-dom-helpers'; const PromiseArrayProxy = ArrayProxy.extend(PromiseProxyMixin); @@ -307,7 +306,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi typeInSearch('o'); setTimeout(function() { - assert.equal(findAll('.ember-power-select-option').length, 1, 'The dropdown is opened and results shown after proxy is updated'); + assert.dom('.ember-power-select-option').exists({ count: 1 }, 'The dropdown is opened and results shown after proxy is updated'); assert.dom('.ember-power-select-option').hasText('one'); done(); }, 150); @@ -334,15 +333,15 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); - assert.ok(find('.ember-power-select-option'), 'The dropdown is opened and results shown with initial proxy contents'); + assert.dom('.ember-power-select-option').exists('The dropdown is opened and results shown with initial proxy contents'); assert.dom('.ember-power-select-option').hasText('one'); typeInSearch('o'); setTimeout(function() { - assert.equal(findAll('.ember-power-select-option').length, 2, 'The dropdown is opened and results shown after proxy is updated'); - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'one'); - assert.equal(findAll('.ember-power-select-option')[1].textContent.trim(), 'owner'); + assert.dom('.ember-power-select-option').exists({ count: 2 }, 'The dropdown is opened and results shown after proxy is updated'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('one'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('owner'); done(); }, 150); }); @@ -358,9 +357,9 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'two', 'The second options is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('two', 'The second options is highlighted'); run(() => this.set('numbers', ['foo', 'bar', 'baz'])); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'foo', 'The first element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('foo', 'The first element is highlighted'); }); test('If the user passes `dropdownClass` the dropdown content should have that class', async function(assert) { @@ -373,7 +372,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown').classList.contains('this-is-a-test-class'), 'dropdownClass can be customized'); + assert.dom('.ember-power-select-dropdown').hasClass('this-is-a-test-class', 'dropdownClass can be customized'); }); test('The filtering is reverted after closing the select', async function(assert) { @@ -388,10 +387,10 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); await typeInSearch('th'); - assert.equal(findAll('.ember-power-select-option').length, 2, 'the dropdown has filtered the results'); + assert.dom('.ember-power-select-option').exists({ count: 2 }, 'the dropdown has filtered the results'); await triggerEvent('#outside-div', 'mousedown'); await clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, numbers.length, 'the dropdown has shows all results'); + assert.dom('.ember-power-select-option').exists({ count: numbers.length }, 'the dropdown has shows all results'); }); test('The publicAPI is yielded as second argument in single selects', async function(assert) { @@ -405,8 +404,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); typeInSearch('tw'); - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'tw:two', 'Each option receives the public API'); - await click(findAll('.ember-power-select-option')[0]); + assert.dom('.ember-power-select-option').hasText('tw:two', 'Each option receives the public API'); + await click('.ember-power-select-option'); await clickTrigger(); typeInSearch('thr'); assert.dom('.ember-power-select-trigger').hasText('thr:two', 'The trigger also receives the public API'); @@ -420,7 +419,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); await clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 1); + assert.dom('.ember-power-select-option').exists({ count: 1 }); assert.dom('.ember-power-select-option').hasText('No results found'); assert.dom('.ember-power-select-option').hasClass('ember-power-select-option--no-matches-message', 'The row has a special class to differentiate it from regular options'); }); @@ -434,10 +433,10 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); await clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 1); + assert.dom('.ember-power-select-option').exists({ count: 1 }); assert.dom('.ember-power-select-option').hasText('Type to search'); typeInSearch('foo'); - assert.equal(findAll('.ember-power-select-option').length, 1); + assert.dom('.ember-power-select-option').exists({ count: 1 }); assert.dom('.ember-power-select-option').hasText('No results found'); }); @@ -449,7 +448,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); await clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 1); + assert.dom('.ember-power-select-option').exists({ count: 1 }); assert.dom('.ember-power-select-option').hasText('Nope'); }); @@ -462,9 +461,9 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); await clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 0); + assert.dom('.ember-power-select-option').exists({ count: 0 }); typeInSearch('foo'); - assert.equal(findAll('.ember-power-select-option').length, 1); + assert.dom('.ember-power-select-option').exists({ count: 1 }); assert.dom('.ember-power-select-option').hasText('No results found'); }); @@ -479,7 +478,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); assert.dom('.ember-power-select-option').doesNotExist('No list elements, just the given alternate block'); - assert.ok(find('.empty-option-foo')); + assert.dom('.empty-option-foo').exists(); }); test('When no `selected` is provided, the first item in the dropdown is highlighted', async function(assert) { @@ -494,8 +493,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); - assert.equal(findAll('.ember-power-select-option[aria-current="true"]').length, 1, 'One element is highlighted'); - assert.equal(findAll('.ember-power-select-option')[0].attributes['aria-current'].value, 'true', 'The first one to be precise'); + assert.dom('.ember-power-select-option[aria-current="true"]').exists({ count: 1 }, 'One element is highlighted'); + assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first one to be precise'); }); test('When `selected` option is provided, it appears in the trigger yielded with the same block as the options', async function(assert) { @@ -529,9 +528,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - let highlightedOption = find('.ember-power-select-option[aria-current="true"]'); - assert.ok(highlightedOption, 'One element is highlighted'); - assert.equal(highlightedOption.textContent.trim(), 'three', 'The third option is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').exists({ count: 1}, 'One element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('three', 'The third option is highlighted'); }); test('When `selected` option is provided, that option is marked as `.selected`', async function(assert) { @@ -545,8 +543,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - let selectedOption = findAll('.ember-power-select-option')[2]; - assert.equal(selectedOption.attributes['aria-selected'].value, 'true', 'The third option is marked as selected'); + assert.dom('.ember-power-select-option:nth-child(3)').hasAttribute('aria-selected', 'true', 'The third option is marked as selected'); }); test('The default search strategy matches disregarding diacritics differences and capitalization', async function(assert) { @@ -561,19 +558,16 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); typeInSearch('mar'); - let options = findAll('.ember-power-select-option'); - assert.equal(options.length, 2, 'Only 2 results match the search'); - assert.equal(options[0].textContent.trim(), 'María'); - assert.equal(options[1].textContent.trim(), 'Marta'); + assert.dom('.ember-power-select-option').exists({ count: 2 }, 'Only 2 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('María'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('Marta'); typeInSearch('mari'); - options = findAll('.ember-power-select-option'); - assert.equal(options.length, 1, 'Only 1 results match the search'); - assert.equal(options[0].textContent.trim(), 'María'); + assert.dom('.ember-power-select-option').exists({ count: 1 }, 'Only 1 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('María'); typeInSearch('o'); - options = findAll('.ember-power-select-option'); - assert.equal(options.length, 2, 'Only 2 results match the search'); - assert.equal(options[0].textContent.trim(), 'Søren Larsen'); - assert.equal(options[1].textContent.trim(), 'João'); + assert.dom('.ember-power-select-option').exists({ count: 2 }, 'Only 2 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('Søren Larsen'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('João'); }); test('You can pass a custom marcher with `matcher=myFn` to customize the search strategy', async function(assert) { @@ -594,7 +588,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi typeInSearch('on'); assert.dom('.ember-power-select-option').hasText('No results found', 'No number ends in "on"'); typeInSearch('teen'); - assert.equal(findAll('.ember-power-select-option').length, 7, 'There is 7 number that end in "teen"'); + assert.dom('.ember-power-select-option').exists({ count: 7 }, 'There is 7 number that end in "teen"'); }); test('When no `selected` is provided, the first item in the dropdown is highlighted', async function(assert) { @@ -609,8 +603,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); - assert.equal(findAll('.ember-power-select-option[aria-current="true"]').length, 1, 'One element is highlighted'); - assert.equal(findAll('.ember-power-select-option')[0].attributes['aria-current'].value, 'true', 'The first one to be precise'); + assert.dom('.ember-power-select-option[aria-current="true"]').exists({ count: 1 }, 'One element is highlighted'); + assert.dom('.ember-power-select-option:nth-child(1)').hasAttribute('aria-current', 'true', 'The first one to be precise'); }); test('When a option is provided that options is rendered in the trigger using the same block as the options', async function(assert) { @@ -639,9 +633,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - let highlightedOption = find('.ember-power-select-option[aria-current="true"]'); - assert.ok(highlightedOption, 'One element is highlighted'); - assert.equal(highlightedOption.textContent.trim(), 'ES: Spain', 'The second option is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').exists('One element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('ES: Spain', 'The second option is highlighted'); }); test('When `selected` option (object) is provided, that option is marked as `.selected`', async function(assert) { @@ -657,7 +650,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); let selectedOption = findContains('.ember-power-select-option', 'ES: Spain'); - assert.equal(selectedOption.attributes['aria-selected'].value, 'true', 'The second option is marked as selected'); + assert.dom(selectedOption).hasAttribute('aria-selected', 'true', 'The second option is marked as selected'); }); test('The default search strategy matches disregarding diacritics differences and capitalization', async function(assert) { @@ -680,19 +673,16 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); typeInSearch('mar'); - let options = findAll('.ember-power-select-option'); - assert.equal(options.length, 2, 'Only 2 results match the search'); - assert.equal(options[0].textContent.trim(), 'María Murray'); - assert.equal(options[1].textContent.trim(), 'Marta Stinson'); + assert.dom('.ember-power-select-option').exists({ count: 2 }, 'Only 2 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('María Murray'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('Marta Stinson'); typeInSearch('mari'); - options = findAll('.ember-power-select-option'); - assert.equal(options.length, 1, 'Only 1 results match the search'); - assert.equal(options[0].textContent.trim(), 'María Murray'); + assert.dom('.ember-power-select-option').exists({ count: 1 }, 'Only 1 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('María Murray'); typeInSearch('o'); - options = findAll('.ember-power-select-option'); - assert.equal(options.length, 2, 'Only 2 results match the search'); - assert.equal(options[0].textContent.trim(), 'Søren Williams'); - assert.equal(options[1].textContent.trim(), 'João Jin'); + assert.dom('.ember-power-select-option').exists({ count: 2 }, 'Only 2 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('Søren Williams'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('João Jin'); }); test('You can pass a custom marcher with `matcher=myFn` to customize the search strategy', async function(assert) { @@ -719,11 +709,10 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); typeInSearch('s'); - let options = findAll('.ember-power-select-option'); - assert.equal(options.length, 3, 'Only 3 results match the search'); - assert.equal(options[0].textContent.trim(), 'Søren Williams'); - assert.equal(options[1].textContent.trim(), 'Marta Stinson'); - assert.equal(options[2].textContent.trim(), 'Lisa Simpson'); + assert.dom('.ember-power-select-option').exists({ count: 3 }, 'Only 3 results match the search'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('Søren Williams'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('Marta Stinson'); + assert.dom('.ember-power-select-option:nth-child(3)').hasText('Lisa Simpson'); }); test('BUGFIX: The highlighted element is reset when single selects are closed', async function(assert) { @@ -738,12 +727,12 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'three', 'The third element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('three', 'The third element is highlighted'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'four', 'The forth element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('four', 'The forth element is highlighted'); await clickTrigger(); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'three', 'The third element is highlighted again'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('three', 'The third element is highlighted again'); }); test('BUGFIX: The highlighted element is reset when multiple selects are closed', async function(assert) { @@ -757,12 +746,12 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The first element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The first element is highlighted'); await triggerKeyEvent('.ember-power-select-trigger-multiple-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'two', 'The second element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('two', 'The second element is highlighted'); await clickTrigger(); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The first element is highlighted again'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The first element is highlighted again'); }); test('If the passed options is a promise that is resolved, searching should filter the results from a promise', async function(assert) { @@ -785,12 +774,11 @@ module('Integration | Component | Ember Power Select (General behavior)', functi clickTrigger(); typeInSearch('o'); - let options = findAll('.ember-power-select-option'); - assert.equal(options.length, 4, 'The dropdown is opened and results shown.'); - assert.equal(options[0].textContent.trim(), 'one'); - assert.equal(options[1].textContent.trim(), 'two'); - assert.equal(options[2].textContent.trim(), 'four'); - assert.equal(options[3].textContent.trim(), 'fourteen'); + assert.dom('.ember-power-select-option').exists({ count: 4 }, 'The dropdown is opened and results shown.'); + assert.dom('.ember-power-select-option:nth-child(1)').hasText('one'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('two'); + assert.dom('.ember-power-select-option:nth-child(3)').hasText('four'); + assert.dom('.ember-power-select-option:nth-child(4)').hasText('fourteen'); done(); }, 150); }); @@ -806,7 +794,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); - assert.notOk(find('ember-power-select-clear-btn'), 'There is no clear button'); + assert.dom('ember-power-select-clear-btn').doesNotExist('There is no clear button'); }); test('If the passed selected element is a pending promise, the first element is highlighted and the trigger is empty', async function(assert) { @@ -822,8 +810,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi run.later(resolve, numbers[3], 50); })); clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The first element is highlighted'); - assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The first element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').doesNotExist('no element is selected'); assert.dom('.ember-power-select-trigger').hasText('', 'Nothing is selected yet'); }); @@ -840,8 +828,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'four', 'The 4th element is highlighted'); - assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'four', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('four', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').hasText('four', 'The 4th element is highlighted'); assert.dom('.ember-power-select-trigger').hasText('four', 'The trigger has the proper content'); }); @@ -860,13 +848,13 @@ module('Integration | Component | Ember Power Select (General behavior)', functi })); clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The first element is highlighted'); - assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The first element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').doesNotExist('no element is selected'); assert.dom('.ember-power-select-trigger').hasText('', 'Nothing is selected yet'); setTimeout(function() { - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'four', 'The 4th element is highlighted'); - assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'four', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('four', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').hasText('four', 'The 4th element is highlighted'); assert.dom('.ember-power-select-trigger').hasText('four', 'The trigger has the proper content'); done(); }, 100); @@ -898,14 +886,14 @@ module('Integration | Component | Ember Power Select (General behavior)', functi clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The first element is highlighted'); - assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The first element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').doesNotExist('no element is selected'); assert.dom('.ember-power-select-trigger').hasText('', 'Nothing is selected yet'); return new RSVP.Promise(function(resolve) { setTimeout(function() { - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'five', 'The 5th element is highlighted'); - assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'five', 'The 5th element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('five', 'The 5th element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').hasText('five', 'The 5th element is highlighted'); assert.dom('.ember-power-select-trigger').hasText('five', 'The trigger has the proper content'); resolve(); }, 500); @@ -932,7 +920,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi // await clickTrigger(); - // assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected'); + // assert.dom('.ember-power-select-option[aria-selected="true"]').doesNotExist('no element is selected'); // assert.dom('.ember-power-select-trigger').hasText('', 'Nothing is selected yet'); // setTimeout(function() { @@ -940,8 +928,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi // }, 20); // setTimeout(function() { - // assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'four', 'The 4th element is highlighted'); - // assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'four', 'The 4th element is selected'); + // assert.dom('.ember-power-select-option[aria-current="true"]').hasText('four', 'The 4th element is highlighted'); + // assert.dom('.ember-power-select-option[aria-selected="true"]').hasText('four', 'The 4th element is selected'); // assert.dom('.ember-power-select-trigger').hasText('four', 'The trigger has the proper content'); // done(); // }, 220); @@ -970,17 +958,17 @@ module('Integration | Component | Ember Power Select (General behavior)', functi // await clickTrigger(); - // assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected'); + // assert.dom('.ember-power-select-option[aria-selected="true"]').doesNotExist('no element is selected'); // assert.dom('.ember-power-select-trigger').hasText('', 'Nothing is selected yet'); // setTimeout(function() { // assert.dom('.ember-power-select-trigger').hasText('', 'The trigger is still empty'); - // assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The 1st element is highlighted'); + // assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The 1st element is highlighted'); // }, 100); // setTimeout(function() { - // assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'four', 'The 4th element is highlighted'); - // assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'four', 'The 4th element is selected'); + // assert.dom('.ember-power-select-option[aria-current="true"]').hasText('four', 'The 4th element is highlighted'); + // assert.dom('.ember-power-select-option[aria-selected="true"]').hasText('four', 'The 4th element is selected'); // assert.dom('.ember-power-select-trigger').hasText('four', 'The trigger has the proper content'); // done(); // }, 350); @@ -996,10 +984,10 @@ module('Integration | Component | Ember Power Select (General behavior)', functi {{/power-select}} `); - assert.ok(!find('.ember-power-select-trigger').classList.contains('ember-power-select-trigger--active'), 'The select doesn\'t have the class yet'); + assert.dom('.ember-power-select-trigger').doesNotHaveClass('ember-power-select-trigger--active', 'The select doesn\'t have the class yet'); await clickTrigger(); focus('.ember-power-select-search-input'); - assert.ok(find('.ember-power-select-trigger').classList.contains('ember-power-select-trigger--active'), 'The select has the class now'); + assert.dom('.ember-power-select-trigger').hasClass('ember-power-select-trigger--active', 'The select has the class now'); }); test('[BUGFIX] When the component opens, if the selected option is not visible the list is scrolled to make it visible', async function(assert) { @@ -1013,8 +1001,8 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'nine'); - assert.ok(findAll('.ember-power-select-options')[0].scrollTop > 0, 'The list has scrolled'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('nine'); + assert.ok(document.querySelector('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); }); test('The destination where the content is rendered can be customized by passing a `destination=id-of-the-destination`', async function(assert) { @@ -1031,7 +1019,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi assert.dom('.ember-power-select-dropdown').doesNotExist('Dropdown is not rendered'); await clickTrigger(); - assert.ok(find('#alternative-destination .ember-power-select-dropdown'), 'Dropdown is rendered inside the destination element'); + assert.dom('#alternative-destination .ember-power-select-dropdown').exists('Dropdown is rendered inside the destination element'); }); test('[BUGFIX] When the component is open and it has a `search` action, if options get updated the highlighted items is reset', async function(assert) { @@ -1048,9 +1036,9 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'two'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('two'); run(() => this.set('numbers', ['one', 'three', 'five', 'seven', 'nine'])); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one'); }); test('the item that is highlighted by default can be customized passing a value to `defaultHighlighted`', async function(assert) { @@ -1066,7 +1054,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); - assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'five', 'the given element is highlighted instead of the first, as usual'); + assert.dom('.ember-power-select-option[aria-current=true]').hasText('five', 'the given element is highlighted instead of the first, as usual'); }); test('the item that is highlighted by default can be customized passing a function to `defaultHighlighted`', async function(assert) { @@ -1094,7 +1082,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); - assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'five', 'the given element is highlighted instead of the first, as usual'); + assert.dom('.ember-power-select-option[aria-current=true]').hasText('five', 'the given element is highlighted instead of the first, as usual'); }); test('If the options of a single select implement `isEqual`, that option is used to determine whether or not two items are the same', async function(assert) { @@ -1125,12 +1113,11 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); typeInSearch('M'); - await click(findAll('.ember-power-select-option')[1]); + await click('.ember-power-select-option:nth-child(2)'); await clickTrigger(); typeInSearch('i'); - let firstOption = findAll('.ember-power-select-option')[0]; - assert.equal(firstOption.attributes['aria-selected'].value, 'true', 'The item in the list is marked as selected'); - await click(firstOption); + assert.dom('.ember-power-select-option:nth-child(1)').hasAttribute('aria-selected', 'true', 'The item in the list is marked as selected'); + await click('.ember-power-select-option:nth-child(1)'); assert.equal(onChangeInvocationsCount, 1); }); @@ -1165,18 +1152,16 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - let dropdownContent = find('.ember-power-select-dropdown'); - assert.ok(dropdownContent.classList.contains('ember-basic-dropdown-content--above'), 'The dropdown is above'); - assert.ok(dropdownContent.classList.contains('ember-basic-dropdown-content--right'), 'The dropdown is in the right'); - assert.equal(dropdownContent.attributes.style.value, 'top: 111px;right: 222px;', 'The style attribute is the expected one'); + assert.dom('.ember-power-select-dropdown').hasClass('ember-basic-dropdown-content--above', 'The dropdown is above'); + assert.dom('.ember-power-select-dropdown').hasClass('ember-basic-dropdown-content--right', 'The dropdown is in the right'); + assert.dom('.ember-power-select-dropdown').hasAttribute('style', 'top: 111px;right: 222px;', 'The style attribute is the expected one'); await clickTrigger(); run(() => this.set('renderInPlace', true)); await clickTrigger(); - dropdownContent = find('.ember-power-select-dropdown'); - assert.ok(dropdownContent.classList.contains('ember-basic-dropdown-content--below'), 'The dropdown is below'); - assert.ok(dropdownContent.classList.contains('ember-basic-dropdown-content--left'), 'The dropdown is in the left'); - assert.equal(dropdownContent.attributes.style.value, 'top: 333px;right: 444px;', 'The style attribute is the expected one'); + assert.dom('.ember-power-select-dropdown').hasClass('ember-basic-dropdown-content--below', 'The dropdown is below'); + assert.dom('.ember-power-select-dropdown').hasClass('ember-basic-dropdown-content--left', 'The dropdown is in the left'); + assert.dom('.ember-power-select-dropdown').hasAttribute('style', 'top: 333px;right: 444px;', 'The style attribute is the expected one'); }); test('The `selected` option can be a thenable', async function(assert) { @@ -1195,13 +1180,13 @@ module('Integration | Component | Ember Power Select (General behavior)', functi })); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'Toby', 'The first element is highlighted'); - assert.notOk(find('.ember-power-select-option[aria-selected="true"]'), 'no element is selected'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('Toby', 'The first element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').doesNotExist('no element is selected'); assert.dom('.ember-power-select-trigger').hasText('', 'Nothing is selected yet'); await this.mainUser.bestie; - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'Lucius', 'The 4th element is highlighted'); - assert.equal(find('.ember-power-select-option[aria-selected="true"]').textContent.trim(), 'Lucius', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('Lucius', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option[aria-selected="true"]').hasText('Lucius', 'The 4th element is highlighted'); assert.dom('.ember-power-select-trigger').hasText('Lucius', 'The trigger has the proper content'); }); diff --git a/tests/integration/components/power-select/keyboard-control-test.js b/tests/integration/components/power-select/keyboard-control-test.js index 53c4166bc..422a87eb7 100644 --- a/tests/integration/components/power-select/keyboard-control-test.js +++ b/tests/integration/components/power-select/keyboard-control-test.js @@ -21,9 +21,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'two', 'The next options is highlighted now'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('two', 'The next options is highlighted now'); }); test('Pressing keyup highlights the previous option', async function(assert) { @@ -37,9 +37,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'three'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('three'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 38); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'two', 'The previous options is highlighted now'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('two', 'The previous options is highlighted now'); }); test('When the last option is highlighted, pressing keydown doesn\'t change the highlighted', async function(assert) { @@ -54,9 +54,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'twenty'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('twenty'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'twenty', 'The last option is still the highlighted one'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('twenty', 'The last option is still the highlighted one'); }); test('When the first option is highlighted, pressing keyup doesn\'t change the highlighted', async function(assert) { @@ -71,9 +71,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 38); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'one', 'The first option is still the highlighted one'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('one', 'The first option is still the highlighted one'); }); test('The arrow keys also scroll the list if the new highlighted element if it is outside of the viewport of the list', async function(assert) { @@ -87,11 +87,11 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'seven'); - assert.equal(find('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('seven'); + assert.equal(document.querySelector('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.equal(find('.ember-power-select-option[aria-current="true"]').textContent.trim(), 'eight', 'The next option is highlighted now'); - assert.ok(find('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); + assert.dom('.ember-power-select-option[aria-current="true"]').hasText('eight', 'The next option is highlighted now'); + assert.ok(document.querySelector('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); }); test('Pressing ENTER selects the highlighted element, closes the dropdown and focuses the trigger', async function(assert) { @@ -113,9 +113,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi await clickTrigger(); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 13); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'two', 'The highlighted element was selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - assert.ok(find('.ember-power-select-trigger') === document.activeElement, 'The trigger is focused'); + assert.dom('.ember-power-select-trigger').hasText('two', 'The highlighted element was selected'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + assert.dom('.ember-power-select-trigger').isFocused('The trigger is focused'); }); test('Pressing ENTER on a single select with search disabled selects the highlighted element, closes the dropdown and focuses the trigger', async function(assert) { @@ -137,9 +137,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi await clickTrigger(); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 40); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 13); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'two', 'The highlighted element was selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - assert.ok(find('.ember-power-select-trigger') === document.activeElement, 'The trigger is focused'); + assert.dom('.ember-power-select-trigger').hasText('two', 'The highlighted element was selected'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + assert.dom('.ember-power-select-trigger').isFocused('The trigger is focused'); }); test('Pressing ENTER when there is no highlighted element, closes the dropdown and focuses the trigger without calling the onchange function', async function(assert) { @@ -157,11 +157,11 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi await clickTrigger(); typeInSearch('asjdnah'); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'two', 'Two is selected'); - assert.equal(find('.ember-power-select-option').textContent.trim(), 'No results found'); + assert.dom('.ember-power-select-trigger').hasText('two', 'Two is selected'); + assert.dom('.ember-power-select-option').hasText('No results found'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 13); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - assert.ok(find('.ember-power-select-trigger') === document.activeElement, 'The trigger is focused'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + assert.dom('.ember-power-select-trigger').isFocused('The trigger is focused'); }); test('Pressing SPACE on a select without a searchbox selects the highlighted element, closes the dropdown and focuses the trigger without scrolling the page', async function(assert) { @@ -184,9 +184,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi await clickTrigger(); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 40); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 32); // Space - assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'two', 'The highlighted element was selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - assert.ok(find('.ember-power-select-trigger') === document.activeElement, 'The trigger is focused'); + assert.dom('.ember-power-select-trigger').hasText('two', 'The highlighted element was selected'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + assert.dom('.ember-power-select-trigger').isFocused('The trigger is focused'); }); test('Pressing TAB closes the select WITHOUT selecting the highlighed element and focuses the trigger', async function(assert) { @@ -202,9 +202,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi await clickTrigger(); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 9); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), '', 'The highlighted element wasn\'t selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - assert.ok(find('.ember-power-select-trigger') === document.activeElement, 'The trigges is focused'); + assert.dom('.ember-power-select-trigger').hasText('', 'The highlighted element wasn\'t selected'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + assert.dom('.ember-power-select-trigger').isFocused('The trigges is focused'); }); test('The component is focusable using the TAB key as any other kind of input', async function(assert) { @@ -230,11 +230,11 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); focus('.ember-power-select-trigger'); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 13); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 13); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed again'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed again'); }); test('If the single component is focused and has no search, pressing SPACE toggles it', async function(assert) { @@ -248,11 +248,11 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); focus('.ember-power-select-trigger'); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 32); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 32); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed again'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed again'); }); test('If the single component is focused, pressing KEYDOWN opens it', async function(assert) { @@ -266,9 +266,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); focus('.ember-power-select-trigger'); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 40); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); }); test('If the single component is focused, pressing KEYUP opens it', async function(assert) { @@ -282,9 +282,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); focus('.ember-power-select-trigger'); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 38); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); }); test('Pressing ESC while the component is opened closes it and focuses the trigger', async function(assert) { @@ -298,10 +298,10 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 27); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); - assert.ok(find('.ember-power-select-trigger') === document.activeElement, 'The select is focused'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); + assert.dom('.ember-power-select-trigger').isFocused('The select is focused'); }); test('In single-mode, when the user presses a key being the search input focused the passes `onkeydown` action is invoked with the public API and the event', async function(assert) { @@ -326,9 +326,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 13); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); }); test('In single-mode, when the user presses SPACE on the searchbox, the highlighted option is not selected, and that space is part of the search', async function(assert) { @@ -353,10 +353,10 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 32); - assert.ok(find('.ember-power-select-dropdown'), 'The select is still opened'); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), '', 'Nothing was selected'); + assert.dom('.ember-power-select-dropdown').exists('The select is still opened'); + assert.dom('.ember-power-select-trigger').hasText('', 'Nothing was selected'); }); test('In multiple-mode, when the user presses SPACE on the searchbox, the highlighted option is not selected, and that space is part of the search', async function(assert) { @@ -381,10 +381,10 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-trigger-multiple-input', 'keydown', 32); - assert.ok(find('.ember-power-select-dropdown'), 'The select is still opened'); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), '', 'Nothing was selected'); + assert.dom('.ember-power-select-dropdown').exists('The select is still opened'); + assert.dom('.ember-power-select-trigger').hasText('', 'Nothing was selected'); }); test('in single-mode if the users returns false in the `onkeydown` action it prevents the component to do the usual thing', async function(assert) { @@ -403,9 +403,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 13); - assert.ok(find('.ember-power-select-dropdown'), 'The select is still opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is still opened'); }); test('In multiple-mode, when the user presses a key being the search input focused the passes `onkeydown` action is invoked with the public API and the event', async function(assert) { @@ -430,9 +430,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-trigger-multiple-input', 'keydown', 13); - assert.notOk(find('.ember-power-select-dropdown'), 'The select is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The select is closed'); }); test('in multiple-mode if the users returns false in the `onkeydown` action it prevents the component to do the usual thing', async function(assert) { @@ -449,9 +449,9 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi `); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The select is opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is opened'); await triggerKeyEvent('.ember-power-select-trigger-multiple-input', 'keydown', 13); - assert.ok(find('.ember-power-select-dropdown'), 'The select is still opened'); + assert.dom('.ember-power-select-dropdown').exists('The select is still opened'); }); test('Typing on a closed single select selects the value that matches the string typed so far', async function(assert) { @@ -464,14 +464,13 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi {{/power-select}} `); - let trigger = find('.ember-power-select-trigger'); - await focus(trigger); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - triggerKeyEvent(trigger, 'keydown', 78); // n - triggerKeyEvent(trigger, 'keydown', 73); // i - await triggerKeyEvent(trigger, 'keydown', 78); // n - assert.equal(trigger.textContent.trim(), 'nine', '"nine" has been selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + await focus('.ember-power-select-trigger'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + triggerKeyEvent('.ember-power-select-trigger', 'keydown', 78); // n + triggerKeyEvent('.ember-power-select-trigger', 'keydown', 73); // i + await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 78); // n + assert.dom('.ember-power-select-trigger').hasText('nine', '"nine" has been selected'); + assert.dom('.ember-power-select-dropdown').doesNotExist( 'The dropdown is still closed'); }); test('Typing with modifier keys on a closed single select does not select the value that matches the string typed so far', async function(assert) { @@ -484,12 +483,11 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi {{/power-select}} `); - let trigger = find('.ember-power-select-trigger'); - focus(trigger); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); - await triggerKeyEvent(trigger, 'keydown', 82, { ctrlKey: true }); // r - assert.notEqual(trigger.textContent.trim(), 'three', '"three" is not selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + focus('.ember-power-select-trigger'); + assert.dom('.ember-power-select-dropdown').doesNotExist('The dropdown is closed'); + await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 82, { ctrlKey: true }); // r + assert.dom('.ember-power-select-trigger').doesNotIncludeText('three', '"three" is not selected'); + assert.dom('.ember-power-select-dropdown').doesNotExist( 'The dropdown is still closed'); }); // @@ -509,17 +507,16 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi {{/power-select}} `); - let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); - assert.equal(find('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); - triggerKeydown(trigger, 78); // n - triggerKeydown(trigger, 73); // i - triggerKeydown(trigger, 78); // n - assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); - assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'nine', 'The option containing "nine" has been highlighted'); - assert.ok(find('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still open'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); + assert.equal(document.querySelector('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); + triggerKeydown('.ember-power-select-trigger', 78); // n + triggerKeydown('.ember-power-select-trigger', 73); // i + triggerKeydown('.ember-power-select-trigger', 78); // n + assert.dom('.ember-power-select-trigger').hasText('', 'nothing has been selected'); + assert.dom('.ember-power-select-option[aria-current=true]').hasText('nine', 'The option containing "nine" has been highlighted'); + assert.ok(document.querySelector('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still open'); }); test('Typing from the Numpad on an opened single select highlights the first value that matches the string typed so far, scrolling if needed', async function(assert) { @@ -532,15 +529,14 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi {{/power-select}} `); - let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); - assert.equal(find('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); - triggerKeydown(trigger, 104); // Numpad 8 - assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); - assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), '853', 'The option containing "853" has been highlighted'); - assert.ok(find('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); + assert.equal(document.querySelector('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); + triggerKeydown('.ember-power-select-trigger', 104); // Numpad 8 + assert.dom('.ember-power-select-trigger').hasText('', 'nothing has been selected'); + assert.dom('.ember-power-select-option[aria-current=true]').hasText('853', 'The option containing "853" has been highlighted'); + assert.ok(document.querySelector('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still closed'); }); test('Typing on an opened multiple select highlights the value that matches the string typed so far, scrolling if needed', async function(assert) { @@ -555,15 +551,15 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); - assert.equal(find('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); + assert.equal(document.querySelector('.ember-power-select-options').scrollTop, 0, 'The list is not scrolled'); triggerKeydown(trigger, 78); // n triggerKeydown(trigger, 73); // i triggerKeydown(trigger, 78); // n assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'nine', 'The option containing "nine" has been highlighted'); - assert.ok(find('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.ok(document.querySelector('.ember-power-select-options').scrollTop > 0, 'The list has scrolled'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still closed'); }); test('The typed string gets reset after 1s idle', async function(assert) { @@ -579,15 +575,15 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi let trigger = find('.ember-power-select-trigger'); focus(trigger); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist( 'The dropdown is closed'); triggerKeydown(trigger, 84); // t triggerKeydown(trigger, 87); // w assert.equal(trigger.textContent.trim(), 'two', '"two" has been selected'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist( 'The dropdown is still closed'); setTimeout(function() { triggerKeydown(trigger, 79); // o assert.equal(trigger.textContent.trim(), 'one', '"one" has been selected, instead of "two", because the typing started over'); - assert.notOk(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').doesNotExist( 'The dropdown is still closed'); done(); }, 1100); }); @@ -626,12 +622,12 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); triggerKeydown(trigger, 80); // p triggerKeydown(trigger, 79); // o assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'Portugal', 'The option containing "Portugal" has been highlighted'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still closed'); }); test('Typing on an opened single select containing groups highlights the value that matches the string', async function(assert) { @@ -646,12 +642,12 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); triggerKeydown(trigger, 69); // e triggerKeydown(trigger, 76); // l assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'eleven', 'The option containing "eleven" has been highlighted'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still closed'); }); test('Typing on an opened single select highlights skips disabled options', async function(assert) { @@ -667,11 +663,11 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); triggerKeydown(trigger, 85); // u assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'United Kingdom', 'The option containing "United Kingdom" has been highlighted'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still closed'); }); test('Typing on an opened single select highlights skips disabled groups', async function(assert) { @@ -686,12 +682,12 @@ module('Integration | Component | Ember Power Select (Keyboard control)', functi let trigger = find('.ember-power-select-trigger'); await clickTrigger(); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is open'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is open'); triggerKeydown(trigger, 84); // t triggerKeydown(trigger, 87); // w assert.equal(trigger.textContent.trim(), '', 'nothing has been selected'); assert.equal(find('.ember-power-select-option[aria-current=true]').textContent.trim(), 'twelve', 'The option containing "United Kingdom" has been highlighted'); - assert.ok(find('.ember-power-select-dropdown'), 'The dropdown is still closed'); + assert.dom('.ember-power-select-dropdown').exists( 'The dropdown is still closed'); }); test('BUGFIX: If pressing up/down arrow on a single select open the dropdown, the event is defaultPrevented', async function(assert) {