Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modernize test suite part 5 #1093

Merged
merged 1 commit into from
Apr 16, 2018
Merged

Modernize test suite part 5 #1093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 47 additions & 57 deletions tests/integration/components/power-select/custom-search-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -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);
});
Expand All @@ -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);
});
Expand All @@ -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);
});
Expand Down Expand Up @@ -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) {
Expand Down
13 changes: 6 additions & 7 deletions tests/integration/components/power-select/customization-with-attrs-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand All @@ -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.');
});
});
Loading