open-nomad/ui/tests/unit/mixins/searchable-test.js
Buck Doyle bf7ed82def
Improve global search UX (#8249)
This updates the look of the search control, adds a hint about the slash
shortcut, adds highlighting of fuzzy search results, and addresses a few
edge case UX failures. It moves to using a fork of Ember Power Select
to handle an edge case where pressing escape would put the control
in an undesirable active-but-not-open state.
2020-06-25 08:51:52 -05:00

255 lines
8.5 KiB
JavaScript

import { alias } from '@ember/object/computed';
import EmberObject, { computed } from '@ember/object';
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';
import Searchable from 'nomad-ui/mixins/searchable';
module('Unit | Mixin | Searchable', function(hooks) {
setupTest(hooks);
hooks.beforeEach(function() {
this.subject = function() {
// eslint-disable-next-line ember/no-new-mixins
const SearchableObject = EmberObject.extend(Searchable, {
source: null,
searchProps: computed(function() {
return ['id', 'name'];
}),
listToSearch: alias('source'),
});
this.owner.register('test-container:searchable-object', SearchableObject);
return this.owner.lookup('test-container:searchable-object');
};
});
test('the searchable mixin does nothing when there is no search term', function(assert) {
const subject = this.subject();
subject.set('source', [{ id: '1', name: 'hello' }, { id: '2', name: 'world' }]);
assert.deepEqual(subject.get('listSearched'), subject.get('source'));
});
test('the searchable mixin allows for regex search', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'hello' },
{ id: '2', name: 'world' },
{ id: '3', name: 'oranges' },
]);
subject.set('searchTerm', '.+l+[A-Z]$');
assert.deepEqual(
subject.get('listSearched'),
[{ id: '1', name: 'hello' }, { id: '2', name: 'world' }],
'hello and world matched for regex'
);
});
test('the searchable mixin only searches the declared search props', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'United States of America', continent: 'North America' },
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
]);
subject.set('searchTerm', 'America');
assert.deepEqual(
subject.get('listSearched'),
[{ id: '1', name: 'United States of America', continent: 'North America' }],
'Only USA matched, since continent is not a search prop'
);
});
test('the fuzzy search mode is off by default', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'United States of America', continent: 'North America' },
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
]);
subject.set('searchTerm', 'Ameerica');
assert.deepEqual(
subject.get('listSearched'),
[],
'Nothing is matched since America is spelled incorrectly'
);
});
test('the fuzzy search mode can be enabled', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'United States of America', continent: 'North America' },
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
]);
subject.set('fuzzySearchEnabled', true);
subject.set('searchTerm', 'Ameerica');
assert.deepEqual(
subject.get('listSearched'),
[{ id: '1', name: 'United States of America', continent: 'North America' }],
'America is matched due to fuzzy matching'
);
});
test('the fuzzy search can include match results', function(assert) {
const subject = this.subject();
subject.set('source', [
EmberObject.create({ id: '1', name: 'United States of America', continent: 'North America' }),
EmberObject.create({ id: '2', name: 'Canada', continent: 'North America' }),
EmberObject.create({ id: '3', name: 'Mexico', continent: 'North America' }),
]);
subject.set('fuzzySearchEnabled', true);
subject.set('includeFuzzySearchMatches', true);
subject.set('searchTerm', 'Ameerica');
assert.deepEqual(
subject
.get('listSearched')
.map(object => object.getProperties('id', 'name', 'continent', 'fuzzySearchMatches')),
[
{
id: '1',
name: 'United States of America',
continent: 'North America',
fuzzySearchMatches: [
{
indices: [[2, 2], [4, 4], [9, 9], [11, 11], [17, 23]],
value: 'United States of America',
key: 'name',
},
],
},
],
'America is matched due to fuzzy matching'
);
});
test('the exact match search mode can be disabled', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'United States of America', continent: 'North America' },
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
]);
subject.set('regexSearchProps', []);
subject.set('searchTerm', 'Mexico');
assert.deepEqual(
subject.get('listSearched'),
[{ id: '3', name: 'Mexico', continent: 'North America' }],
'Mexico is matched exactly'
);
subject.set('exactMatchEnabled', false);
assert.deepEqual(
subject.get('listSearched'),
[],
'Nothing is matched now that exactMatch is disabled'
);
});
test('the regex search mode can be disabled', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'United States of America', continent: 'North America' },
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
]);
subject.set('searchTerm', '^.{6}$');
assert.deepEqual(
subject.get('listSearched'),
[
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
],
'Canada and Mexico meet the regex criteria'
);
subject.set('regexEnabled', false);
assert.deepEqual(
subject.get('listSearched'),
[],
'Nothing is matched now that regex is disabled'
);
});
test('each search mode has independent search props', function(assert) {
const subject = this.subject();
subject.set('source', [
{ id: '1', name: 'United States of America', continent: 'North America' },
{ id: '2', name: 'Canada', continent: 'North America' },
{ id: '3', name: 'Mexico', continent: 'North America' },
]);
subject.set('fuzzySearchEnabled', true);
subject.set('regexSearchProps', ['id']);
subject.set('exactMatchSearchProps', ['continent']);
subject.set('fuzzySearchProps', ['name']);
subject.set('searchTerm', 'Nor America');
assert.deepEqual(
subject.get('listSearched'),
[],
'Not an exact match on continent, not a matchAllTokens match on fuzzy, not a regex match on id'
);
subject.set('searchTerm', 'America States');
assert.deepEqual(
subject.get('listSearched'),
[{ id: '1', name: 'United States of America', continent: 'North America' }],
'Fuzzy match on one country, but not an exact match on continent'
);
subject.set('searchTerm', '^(.a){3}$');
assert.deepEqual(
subject.get('listSearched'),
[],
'Canada is not matched by the regex because only id is looked at for regex search'
);
});
test('the resetPagination method is a no-op', function(assert) {
const subject = this.subject();
assert.strictEqual(subject.get('currentPage'), undefined, 'No currentPage value set');
subject.resetPagination();
assert.strictEqual(subject.get('currentPage'), undefined, 'Still no currentPage value set');
});
});
module('Unit | Mixin | Searchable (with pagination)', function(hooks) {
setupTest(hooks);
hooks.beforeEach(function() {
this.subject = function() {
// eslint-disable-next-line ember/no-new-mixins
const SearchablePaginatedObject = EmberObject.extend(Searchable, {
source: null,
searchProps: computed(function() {
return ['id', 'name'];
}),
listToSearch: alias('source'),
currentPage: 1,
});
this.owner.register('test-container:searchable-paginated-object', SearchablePaginatedObject);
return this.owner.lookup('test-container:searchable-paginated-object');
};
});
test('the resetPagination method sets the currentPage to 1', function(assert) {
const subject = this.subject();
subject.set('currentPage', 5);
assert.equal(subject.get('currentPage'), 5, 'Current page is something other than 1');
subject.resetPagination();
assert.equal(subject.get('currentPage'), 1, 'Current page gets reset to 1');
});
});