From 3374b17281bf760098eede96303311dd4b0a002f Mon Sep 17 00:00:00 2001 From: cibernox Date: Mon, 16 Apr 2018 23:20:51 +0200 Subject: [PATCH] Modernize test suite part 5 --- .../power-select/custom-search-test.js | 104 ++++++++---------- .../customization-with-attrs-test.js | 13 +-- .../customization-with-components-test.js | 54 ++++----- 3 files changed, 75 insertions(+), 96 deletions(-) diff --git a/tests/integration/components/power-select/custom-search-test.js b/tests/integration/components/power-select/custom-search-test.js index a0417f2e7..58ab08f7b 100644 --- a/tests/integration/components/power-select/custom-search-test.js +++ b/tests/integration/components/power-select/custom-search-test.js @@ -7,7 +7,6 @@ import { render, settled, click} from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; import { typeInSearch, clickTrigger } from 'ember-power-select/test-support/helpers'; import { numbers, countries } from '../constants'; -import { find, findAll } from 'ember-native-dom-helpers'; import RSVP from 'rsvp'; module('Integration | Component | Ember Power Select (Custom search function)', function(hooks) { @@ -25,7 +24,7 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(find('.ember-power-select-option').textContent.trim(), 'Type to search', 'The dropdown shows the "type to search" message'); + assert.dom('.ember-power-select-option').hasText('Type to search', 'The dropdown shows the "type to search" message'); }); test('The search text shouldn\'t appear if options are loading', async function(assert) { @@ -46,8 +45,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', }, 100); })); clickTrigger(); - assert.notOk(/Type to search/.test(find('.ember-power-select-dropdown').textContent), 'The type to search message doesn\'t show'); - assert.ok(/Loading options\.\.\./.test(find('.ember-power-select-dropdown').textContent), '"Loading options..." message appears'); + assert.dom('.ember-power-select-dropdown').doesNotIncludeText('Type to search', 'The type to search message doesn\'t show'); + assert.dom('.ember-power-select-dropdown').includesText('Loading options...', '"Loading options..." message appears'); }); test('When no options are given but there is a search action, a "type to search" message is rendered', async function(assert) { @@ -61,8 +60,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(find('.ember-power-select-option').textContent.trim(), 'Type to search'); - assert.ok(find('.ember-power-select-option').classList.contains('ember-power-select-option--search-message'), 'The option with the search message has a special class'); + assert.dom('.ember-power-select-option').hasText('Type to search'); + assert.dom('.ember-power-select-option').hasClass('ember-power-select-option--search-message', 'The option with the search message has a special class'); }); test('The "type to search" message can be customized passing `searchMessage=something`', async function(assert) { @@ -76,7 +75,7 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(find('.ember-power-select-option').textContent.trim(), 'Type the name of the thing'); + assert.dom('.ember-power-select-option').hasText('Type the name of the thing'); }); test('The search function can return an array and those options get rendered', async function(assert) { @@ -94,7 +93,7 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); - assert.equal(findAll('.ember-power-select-option').length, 7); + assert.dom('.ember-power-select-option').exists({ count: 7 }); }); test('The search function can return a promise that resolves to an array and those options get rendered', async function(assert) { @@ -117,9 +116,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); - return settled().then(function() { - assert.equal(findAll('.ember-power-select-option').length, 7); - }); + await settled() + assert.dom('.ember-power-select-option').exists({ count: 7 }); }); test('While the async search is being performed the "Type to search" dissapears the "Loading..." message appears', async function(assert) { @@ -140,11 +138,10 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.ok(/Type to search/.test(find('.ember-power-select-dropdown').textContent), 'The type to search message is displayed'); + assert.dom('.ember-power-select-dropdown').includesText('Type to search', 'The type to search message is displayed'); typeInSearch('teen'); - assert.ok(!/Type to search/.test(find('.ember-power-select-dropdown').textContent), 'The type to search message dissapeared'); - assert.ok(/Loading options\.\.\./.test(find('.ember-power-select-dropdown').textContent), '"Loading options..." message appears'); - return settled(); + assert.dom('.ember-power-select-dropdown').doesNotIncludeText('Type to search', 'The type to search message dissapeared'); + assert.dom('.ember-power-select-dropdown').includesText('Loading options...', '"Loading options..." message appears'); }); test('When the search resolves to an empty array then the "No results found" message or block appears.', async function(assert) { @@ -166,9 +163,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); - return settled().then(function() { - assert.ok(/No results found/.test(find('.ember-power-select-option').textContent), 'The default "No results" message renders'); - }); + await settled(); + assert.dom('.ember-power-select-option').includesText('No results found', 'The default "No results" message renders'); }); test('When the search resolves to an empty array then the custom "No results" message appears', async function(assert) { @@ -190,9 +186,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); - return settled().then(function() { - assert.ok(/Meec\. Try again/.test(find('.ember-power-select-option').textContent), 'The customized "No results" message renders'); - }); + await settled(); + assert.dom('.ember-power-select-option').includesText('Meec. Try again', 'The customized "No results" message renders'); }); test('When the search resolves to an empty array then the custom alternate block renders', async function(assert) { @@ -216,9 +211,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); - return settled().then(function() { - assert.ok(find('.ember-power-select-dropdown .foo-bar'), 'The alternate block message gets rendered'); - }); + await settled(); + assert.dom('.ember-power-select-dropdown .foo-bar').exists('The alternate block message gets rendered'); }); // Random failure test. Fix @@ -274,9 +268,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); - return settled().then(function() { - assert.equal(findAll('.ember-power-select-option')[0].attributes['aria-current'].value, 'true', 'The first result is highlighted'); - }); + await settled(); + assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first result is highlighted'); }); test('On an select with a selected value, if after a search this value is not among the options the first element is highlighted', async function(assert) { @@ -299,12 +292,11 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(findAll('.ember-power-select-option')[2].attributes['aria-current'].value, 'true', 'The 3rd result is highlighted'); + assert.dom('.ember-power-select-option:nth-child(3)').hasAttribute('aria-current', 'true', 'The 3rd result is highlighted'); typeInSearch('teen'); - return settled().then(function() { - assert.equal(findAll('.ember-power-select-option')[0].attributes['aria-current'].value, 'true', 'The first result is highlighted'); - }); + await settled(); + assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first result is highlighted'); }); test('Closing a component with a custom search cleans the search box and the results list', async function(assert) { @@ -322,14 +314,14 @@ module('Integration | Component | Ember Power Select (Custom search function)', await clickTrigger(); typeInSearch('teen'); - assert.equal(findAll('.ember-power-select-option').length, 7, 'Results are filtered'); - assert.equal(find('.ember-power-select-search-input').value, 'teen'); + assert.dom('.ember-power-select-option').exists({ count: 7 }, 'Results are filtered'); + assert.dom('.ember-power-select-search-input').hasValue('teen'); await click('#different-node'); await clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 1, 'Results have been cleared'); - assert.equal(find('.ember-power-select-option').textContent.trim(), 'Type to search'); - assert.equal(find('.ember-power-select-search-input').value, '', 'The searchbox was cleared'); + assert.dom('.ember-power-select-option').exists({ count: 1 }, 'Results have been cleared'); + assert.dom('.ember-power-select-option').hasText('Type to search'); + assert.dom('.ember-power-select-search-input').hasNoValue('The searchbox was cleared'); }); test('When received both options and search, those options are shown when the dropdown opens before the first search is performed', async function(assert) { @@ -352,13 +344,12 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 20, 'All the options are shown'); + assert.dom('.ember-power-select-option').exists({ count: 20 }, 'All the options are shown'); typeInSearch('teen'); - assert.equal(findAll('.ember-power-select-option').length, 21, 'All the options are shown and also the loading message'); - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'Loading options...'); - return settled().then(function() { - assert.equal(findAll('.ember-power-select-option').length, 7, 'All the options are shown but no the loading message'); - }); + assert.dom('.ember-power-select-option').exists({ count: 21 }, 'All the options are shown and also the loading message'); + assert.dom('.ember-power-select-option').hasText('Loading options...'); + await settled(); + assert.dom('.ember-power-select-option').exists({ count: 7 }, 'All the options are shown but no the loading message'); }); test('Don\'t return from the search action and update the options instead also works as an strategy', async function(assert) { @@ -379,12 +370,11 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 20, 'All the options are shown'); + assert.dom('.ember-power-select-option').exists({ count: 20 }, 'All the options are shown'); typeInSearch('teen'); - return settled().then(function() { - assert.equal(findAll('.ember-power-select-option').length, 7); - }); + await settled(); + assert.dom('.ember-power-select-option').exists({ count: 7 }); }); // This test fails randomly @@ -468,8 +458,8 @@ module('Integration | Component | Ember Power Select (Custom search function)', typeInSearch(''); }, 200); setTimeout(function() { - assert.equal(findAll('.ember-power-select-option').length, numbers.length, 'All the options are displayed after clearing the search'); - assert.equal(findAll('.ember-power-select-option')[1].textContent.trim(), 'two:', 'The results are the original options'); + assert.dom('.ember-power-select-option').exists({ count: numbers.length }, 'All the options are displayed after clearing the search'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('two:', 'The results are the original options'); done(); }, 300); }); @@ -495,10 +485,10 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); setTimeout(function() { - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'thirteen:teen', 'The results and the lastSearchedText have updated'); + assert.dom('.ember-power-select-option').hasText('thirteen:teen', 'The results and the lastSearchedText have updated'); typeInSearch('four'); - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'Loading options...', 'There is a search going on'); - assert.equal(findAll('.ember-power-select-option')[1].textContent.trim(), 'thirteen:teen', 'The results and the lastSearchedText are still the same because the search has not finished yet'); + assert.dom('.ember-power-select-option').hasText('Loading options...', 'There is a search going on'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('thirteen:teen', 'The results and the lastSearchedText are still the same because the search has not finished yet'); done(); }, 150); }); @@ -524,10 +514,10 @@ module('Integration | Component | Ember Power Select (Custom search function)', clickTrigger(); typeInSearch('teen'); setTimeout(function() { - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'thirteen:teen', 'The results and the searchTerm have updated'); + assert.dom('.ember-power-select-option').hasText('thirteen:teen', 'The results and the searchTerm have updated'); typeInSearch('four'); - assert.equal(findAll('.ember-power-select-option')[0].textContent.trim(), 'Loading options...', 'There is a search going on'); - assert.equal(findAll('.ember-power-select-option')[1].textContent.trim(), 'thirteen:teen', 'The results and the searchTerm are still the same because the search has not finished yet'); + assert.dom('.ember-power-select-option').hasText('Loading options...', 'There is a search going on'); + assert.dom('.ember-power-select-option:nth-child(2)').hasText('thirteen:teen', 'The results and the searchTerm are still the same because the search has not finished yet'); done(); }, 150); }); @@ -577,11 +567,11 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); clickTrigger(); - assert.equal(findAll('.ember-power-select-option').length, 20, 'There is 20 options'); + assert.dom('.ember-power-select-option').exists({ count: 20 }, 'There is 20 options'); typeInSearch('teen'); - assert.equal(findAll('.ember-power-select-option').length, 7, 'There is 7 options'); + assert.dom('.ember-power-select-option').exists({ count: 7 }, 'There is 7 options'); typeInSearch(''); - assert.equal(findAll('.ember-power-select-option').length, 20, 'There is 20 options again§'); + assert.dom('.ember-power-select-option').exists({ count: 20 }, 'There is 20 options again§'); }); test('BUGFIX: If the user provides a custom matcher, that matcher receives the entire option even if the user also provided a searchField', async function(assert) { diff --git a/tests/integration/components/power-select/customization-with-attrs-test.js b/tests/integration/components/power-select/customization-with-attrs-test.js index e25e596e9..bb72da088 100644 --- a/tests/integration/components/power-select/customization-with-attrs-test.js +++ b/tests/integration/components/power-select/customization-with-attrs-test.js @@ -3,7 +3,6 @@ import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; import { countries } from '../constants'; -import { find } from 'ember-native-dom-helpers'; module('Integration | Component | Ember Power Select (Customization using attrs)', function(hooks) { setupRenderingTest(hooks); @@ -15,12 +14,12 @@ module('Integration | Component | Ember Power Select (Customization using attrs) this.country = countries[1]; // Spain await render(hbs` - {{#power-select renderInPlace=true classNames="ember-power-select" options=countries selected=country onchange=(action (mut foo)) as |country|}} + {{#power-select renderInPlace=true classNames="foo" options=countries selected=country onchange=(action (mut foo)) as |country|}} {{country.name}} {{/power-select}} `); - assert.ok(find('.ember-basic-dropdown.ember-power-select'), 'Class was added.'); + assert.dom('.ember-basic-dropdown').hasClass('foo', 'Class was added.'); }); test('trigger on single selects can be customized using triggerClass', async function(assert) { @@ -35,7 +34,7 @@ module('Integration | Component | Ember Power Select (Customization using attrs) {{/power-select}} `); - assert.ok(find('.country-single-trigger'), 'Class was added.'); + assert.dom('.ember-power-select-trigger').hasClass('country-single-trigger', 'Class was added.'); }); test('trigger on multiple selects can be customized using triggerClass', async function(assert) { @@ -50,7 +49,7 @@ module('Integration | Component | Ember Power Select (Customization using attrs) {{/power-select}} `); - assert.ok(find('.country-multiple-trigger'), 'Class was added.'); + assert.dom('.ember-power-select-trigger').hasClass('country-multiple-trigger', 'Class was added.'); }); test('Trigger can have a custom id passing triggerId', async function(assert) { @@ -65,7 +64,7 @@ module('Integration | Component | Ember Power Select (Customization using attrs) {{/power-select}} `); - assert.equal(find('.ember-power-select-trigger').id, 'this-is-my-id', 'The `id` was added.'); + assert.dom('.ember-power-select-trigger').hasAttribute('id', 'this-is-my-id', 'The `id` was added.'); }); test('Trigger can have a custom id passing triggerId', async function(assert) { @@ -80,6 +79,6 @@ module('Integration | Component | Ember Power Select (Customization using attrs) {{/power-select-multiple}} `); - assert.equal(find('.ember-power-select-trigger').id, 'this-is-my-id', 'The `id` was added.'); + assert.dom('.ember-power-select-trigger').hasAttribute('id', 'this-is-my-id', 'The `id` was added.'); }); }); diff --git a/tests/integration/components/power-select/customization-with-components-test.js b/tests/integration/components/power-select/customization-with-components-test.js index 8b7416637..2c6b249f4 100644 --- a/tests/integration/components/power-select/customization-with-components-test.js +++ b/tests/integration/components/power-select/customization-with-components-test.js @@ -5,7 +5,6 @@ import hbs from 'htmlbars-inline-precompile'; import { countries } from '../constants'; import { groupedNumbers } from '../constants'; import { clickTrigger } from 'ember-power-select/test-support/helpers'; -import { find, findAll } from 'ember-native-dom-helpers'; import { get } from '@ember/object'; import Component from '@ember/component'; import { isPresent } from '@ember/utils'; @@ -25,9 +24,9 @@ module('Integration | Component | Ember Power Select (Customization using compon {{/power-select}} `); - assert.notOk(find('.ember-power-select-status-icon'), 'The provided trigger component is not rendered'); - assert.ok(find('.ember-power-select-trigger .icon-flag'), 'The custom flag appears.'); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'Spain', 'With the country name as the text.'); + assert.dom('.ember-power-select-status-icon').doesNotExist('The provided trigger component is not rendered'); + assert.dom('.ember-power-select-trigger .icon-flag').exists('The custom flag appears.'); + assert.dom('.ember-power-select-trigger').hasText('Spain', 'With the country name as the text.'); }); test('triggerComponent receives loading message', async function(assert) { @@ -41,7 +40,7 @@ module('Integration | Component | Ember Power Select (Customization using compon {{option}} {{/power-select}} `); - assert.equal(find('.custom-trigger-component').textContent, 'hmmmm paella', 'The loading message is passed to the trigger component'); + assert.dom('.custom-trigger-component').hasText('hmmmm paella', 'The loading message is passed to the trigger component'); }); test('selected item option can be customized using selectedItemComponent', async function(assert) { @@ -56,9 +55,9 @@ module('Integration | Component | Ember Power Select (Customization using compon {{/power-select}} `); - assert.ok(find('.ember-power-select-status-icon'), 'The provided trigger component is rendered'); - assert.ok(find('.ember-power-select-trigger .icon-flag'), 'The custom flag appears.'); - assert.equal(find('.ember-power-select-trigger').textContent.trim(), 'Spain', 'With the country name as the text.'); + assert.dom('.ember-power-select-status-icon').exists('The provided trigger component is rendered'); + assert.dom('.ember-power-select-trigger .icon-flag').exists('The custom flag appears.'); + assert.dom('.ember-power-select-trigger').hasText('Spain', 'With the country name as the text.'); }); test('the list of options can be customized using optionsComponent', async function(assert) { @@ -74,9 +73,8 @@ module('Integration | Component | Ember Power Select (Customization using compon `); clickTrigger(); - let text = find('.ember-power-select-options').textContent.trim(); - assert.ok(/Countries:/.test(text), 'The given component is rendered'); - assert.ok(/3\. Russia/.test(text), 'The component has access to the options'); + assert.dom('.ember-power-select-options').includesText('Countries:', 'The given component is rendered'); + assert.dom('.ember-power-select-options').includesText('3. Russia', 'The component has access to the options'); }); test('the `optionsComponent` receives the `extra` hash', async function(assert) { @@ -92,9 +90,8 @@ module('Integration | Component | Ember Power Select (Customization using compon `); clickTrigger(); - let text = find('.ember-power-select-options').textContent.trim(); - assert.ok(/Countries:/.test(text), 'The given component is rendered'); - assert.ok(/3\. RU/.test(text), 'The component uses the field in the extra has to render the options'); + assert.dom('.ember-power-select-options').includesText('Countries:', 'The given component is rendered'); + assert.dom('.ember-power-select-options').includesText('3. RU', 'The component uses the field in the extra has to render the options'); }); test('the content before the list can be customized passing `beforeOptionsComponent`', async function(assert) { @@ -116,12 +113,10 @@ module('Integration | Component | Ember Power Select (Customization using compon `); clickTrigger(); - - let element = find('.ember-power-select-dropdown #custom-before-options-p-tag'); - assert.ok(element, 'The custom component is rendered instead of the usual search bar'); - assert.equal(element.innerText, 'inception', 'The placeholder attribute is passed through.'); - assert.ok(find('.ember-power-select-dropdown .ember-power-select-placeholder'), 'The placeholder component is passed through.'); - assert.notOk(find('.ember-power-select-search-input'), 'The search input is not visible'); + assert.dom('.ember-power-select-dropdown #custom-before-options-p-tag').exists('The custom component is rendered instead of the usual search bar'); + assert.dom('.ember-power-select-dropdown #custom-before-options-p-tag').hasText('inception', 'The placeholder attribute is passed through.'); + assert.dom('.ember-power-select-dropdown .ember-power-select-placeholder').exists('The placeholder component is passed through.'); + assert.dom('.ember-power-select-search-input').doesNotExist('The search input is not visible'); }); test('the content after the list can be customized passing `afterOptionsComponent`', async function(assert) { @@ -137,8 +132,8 @@ module('Integration | Component | Ember Power Select (Customization using compon `); clickTrigger(); - assert.ok(find('.ember-power-select-dropdown #custom-after-options-p-tag'), 'The custom component is rendered instead of the usual search bar'); - assert.ok(find('.ember-power-select-search-input'), 'The search input is still visible'); + assert.dom('.ember-power-select-dropdown #custom-after-options-p-tag').exists('The custom component is rendered instead of the usual search bar'); + assert.dom('.ember-power-select-search-input').exists('The search input is still visible'); }); test('the `beforeOptionsComponent` and `afterOptionsComponent` receive the `extra` hash', async function(assert) { @@ -193,7 +188,7 @@ module('Integration | Component | Ember Power Select (Customization using compon {{/power-select}} `); - focus('#focusable-input'); + await focus('#focusable-input'); }); test('the search message can be customized passing `searchMessageComponent`', async function(assert) { @@ -208,7 +203,7 @@ module('Integration | Component | Ember Power Select (Customization using compon `); clickTrigger(); - assert.ok(find('.ember-power-select-dropdown #custom-search-message-p-tag'), 'The custom component is rendered instead of the usual message'); + assert.dom('.ember-power-select-dropdown #custom-search-message-p-tag').exists('The custom component is rendered instead of the usual message'); }); test('placeholder can be customized using placeholderComponent', async function(assert) { @@ -226,12 +221,8 @@ module('Integration | Component | Ember Power Select (Customization using compon {{/power-select}} `); - assert.ok(find('.ember-power-select-placeholder'), 'The placeholder appears.'); - assert.equal( - find('.ember-power-select-placeholder').textContent.trim(), - 'This is a very bold placeholder', - 'The placeholder content is equal.' - ); + assert.dom('.ember-power-select-placeholder').exists('The placeholder appears.'); + assert.dom('.ember-power-select-placeholder').hasText('This is a very bold placeholder', 'The placeholder content is equal.'); }); test('groupComponent can be overridden', async function(assert) { @@ -250,8 +241,7 @@ module('Integration | Component | Ember Power Select (Customization using compon `); clickTrigger(); - - assert.equal(findAll('.ember-power-select-options .custom-component').length, numberOfGroups); + assert.dom('.ember-power-select-options .custom-component').exists({ count: numberOfGroups }); }); test('groupComponent has extension points', async function(assert) {