open-nomad/ui/tests/acceptance/search-test.js
Buck Doyle 6d037633da
ui: Change global search to use fuzzy search API (#10412)
This updates the UI to use the new fuzzy search API. It’s a drop-in
replacement so the / shortcut to jump to search is preserved, and
results can be cycled through and chosen via arrow keys and the
enter key.

It doesn’t use everything returned by the API:
* deployments and evaluations: these match by id, doesn’t seem like
  people would know those or benefit from quick navigation to them
* namespaces: doesn’t seem useful as they currently function
* scaling policies
* tasks: the response doesn’t include an allocation id, which means they
  can’t be navigated to in the UI without an additional query
* CSI volumes: aren’t actually returned by the API

Since there’s no API to check the server configuration and know whether
the feature has been disabled, this adds another query in
route:application#beforeModel that acts as feature detection: if the
attempt to query fails (500), the global search field is hidden.

Upon having added another query on load, I realised that beforeModel was
being triggered any time service:router#transitionTo was being called,
which happens upon navigating to a search result, for instance, because
of refreshModel being present on the region query parameter. This PR
adds a check for transition.queryParamsOnly and skips rerunning the
onload queries (token permissions check, license check, fuzzy search
feature detection).

Implementation notes:

* there are changes to unrelated tests to ignore the on-load feature
  detection query
* some lifecycle-related guards against undefined were required to
  address failures when navigating to an allocation
* the minimum search length of 2 characters is hard-coded as there’s
  currently no way to determine min_term_length in the UI
2021-04-28 13:31:05 -05:00

185 lines
6.4 KiB
JavaScript

/* eslint-disable ember-a11y-testing/a11y-audit-called */ // TODO
import { module, test } from 'qunit';
import { currentURL, triggerEvent, visit } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { setupMirage } from 'ember-cli-mirage/test-support';
import Layout from 'nomad-ui/tests/pages/layout';
import JobsList from 'nomad-ui/tests/pages/jobs/list';
import { selectSearch } from 'ember-power-select/test-support';
import Response from 'ember-cli-mirage/response';
module('Acceptance | search', function(hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
test('search exposes and navigates to results from the fuzzy search endpoint', async function(assert) {
server.create('node', { name: 'xyz' });
const otherNode = server.create('node', { name: 'ghi' });
server.create('job', { id: 'vwxyz', namespaceId: 'default', groupsCount: 1, groupTaskCount: 1 });
server.create('job', { id: 'xyz', name: 'xyz job', namespaceId: 'default', groupsCount: 1, groupTaskCount: 1 });
server.create('job', { id: 'abc', namespaceId: 'default', groupsCount: 1, groupTaskCount: 1 });
const firstAllocation = server.schema.allocations.all().models[0];
const firstTaskGroup = server.schema.taskGroups.all().models[0];
server.create('csi-plugin', { id: 'xyz-plugin', createVolumes: false });
await visit('/');
await selectSearch(Layout.navbar.search.scope, 'xy');
Layout.navbar.search.as(search => {
assert.equal(search.groups.length, 5);
search.groups[0].as(jobs => {
assert.equal(jobs.name, 'Jobs (2)');
assert.equal(jobs.options.length, 2);
assert.equal(jobs.options[0].text, 'vwxyz');
assert.equal(jobs.options[1].text, 'xyz job');
});
search.groups[1].as(clients => {
assert.equal(clients.name, 'Clients (1)');
assert.equal(clients.options.length, 1);
assert.equal(clients.options[0].text, 'xyz');
});
search.groups[2].as(allocs => {
assert.equal(allocs.name, 'Allocations (0)');
assert.equal(allocs.options.length, 0);
});
search.groups[3].as(groups => {
assert.equal(groups.name, 'Task Groups (0)');
assert.equal(groups.options.length, 0);
});
search.groups[4].as(plugins => {
assert.equal(plugins.name, 'CSI Plugins (1)');
assert.equal(plugins.options.length, 1);
assert.equal(plugins.options[0].text, 'xyz-plugin');
});
});
await Layout.navbar.search.groups[0].options[1].click();
assert.equal(currentURL(), '/jobs/xyz');
await selectSearch(Layout.navbar.search.scope, otherNode.name);
await Layout.navbar.search.groups[1].options[0].click();
assert.equal(currentURL(), `/clients/${otherNode.id}`);
await selectSearch(Layout.navbar.search.scope, firstAllocation.name);
assert.equal(Layout.navbar.search.groups[2].options[0].text, firstAllocation.name);
await Layout.navbar.search.groups[2].options[0].click();
assert.equal(currentURL(), `/allocations/${firstAllocation.id}`);
await selectSearch(Layout.navbar.search.scope, firstTaskGroup.name);
assert.equal(Layout.navbar.search.groups[3].options[0].text, firstTaskGroup.name);
await Layout.navbar.search.groups[3].options[0].click();
assert.equal(currentURL(), `/jobs/vwxyz/${firstTaskGroup.name}`);
await selectSearch(Layout.navbar.search.scope, 'xy');
await Layout.navbar.search.groups[4].options[0].click();
assert.equal(currentURL(), '/csi/plugins/xyz-plugin');
const featureDetectionQueries = server.pretender.handledRequests
.filterBy('url', '/v1/search/fuzzy')
.filter(request => request.requestBody.includes('feature-detection-query'));
assert.equal(featureDetectionQueries.length, 1, 'expect the feature detection query to only run once');
});
test('search does not perform a request when only one character has been entered', async function(assert) {
await visit('/');
await selectSearch(Layout.navbar.search.scope, 'q');
assert.ok(Layout.navbar.search.noOptionsShown);
assert.equal(server.pretender.handledRequests.filterBy('url', '/v1/search/fuzzy').length, 1, 'expect the feature detection query');
});
test('when fuzzy search is disabled on the server, the search control is hidden', async function(assert) {
server.post('/search/fuzzy', function() {
return new Response(500, {}, '');
});
await visit('/');
assert.ok(Layout.navbar.search.isHidden);
});
test('results are truncated at 10 per group', async function(assert) {
server.create('node', { name: 'xyz' });
for (let i = 0; i < 11; i++) {
server.create('job', { id: `job-${i}`, namespaceId: 'default' });
}
await visit('/');
await selectSearch(Layout.navbar.search.scope, 'job');
Layout.navbar.search.as(search => {
search.groups[0].as(jobs => {
assert.equal(jobs.name, 'Jobs (showing 10 of 11)');
assert.equal(jobs.options.length, 10);
});
});
});
test('server-side truncation is indicated in the group label', async function(assert) {
server.create('node', { name: 'xyz' });
for (let i = 0; i < 21; i++) {
server.create('job', { id: `job-${i}`, namespaceId: 'default' });
}
await visit('/');
await selectSearch(Layout.navbar.search.scope, 'job');
Layout.navbar.search.as(search => {
search.groups[0].as(jobs => {
assert.equal(jobs.name, 'Jobs (showing 10 of 20+)');
});
});
});
test('clicking the search field starts search immediately', async function(assert) {
await visit('/');
assert.notOk(Layout.navbar.search.field.isPresent);
await Layout.navbar.search.click();
assert.ok(Layout.navbar.search.field.isPresent);
});
test('pressing slash starts a search', async function(assert) {
await visit('/');
assert.notOk(Layout.navbar.search.field.isPresent);
await triggerEvent('.page-layout', 'keydown', {
keyCode: 191, // slash
});
assert.ok(Layout.navbar.search.field.isPresent);
});
test('pressing slash when an input element is focused does not start a search', async function(assert) {
server.create('node');
server.create('job');
await visit('/');
assert.notOk(Layout.navbar.search.field.isPresent);
await JobsList.search.click();
await JobsList.search.keydown({ keyCode: 191 });
assert.notOk(Layout.navbar.search.field.isPresent);
});
});