402 lines
14 KiB
JavaScript
402 lines
14 KiB
JavaScript
/**
|
|
* Copyright (c) HashiCorp, Inc.
|
|
* SPDX-License-Identifier: MPL-2.0
|
|
*/
|
|
|
|
/* eslint-disable qunit/require-expect */
|
|
import { module, test } from 'qunit';
|
|
import { setupApplicationTest } from 'ember-qunit';
|
|
import {
|
|
click,
|
|
currentURL,
|
|
visit,
|
|
triggerEvent,
|
|
triggerKeyEvent,
|
|
findAll,
|
|
} from '@ember/test-helpers';
|
|
import { setupMirage } from 'ember-cli-mirage/test-support';
|
|
import Layout from 'nomad-ui/tests/pages/layout';
|
|
import percySnapshot from '@percy/ember';
|
|
import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
|
|
import faker from 'nomad-ui/mirage/faker';
|
|
|
|
module('Acceptance | keyboard', function (hooks) {
|
|
setupApplicationTest(hooks);
|
|
setupMirage(hooks);
|
|
|
|
module('modal', function () {
|
|
test('Opening and closing shortcuts modal with key commands', async function (assert) {
|
|
faker.seed(1);
|
|
assert.expect(4);
|
|
await visit('/');
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
await percySnapshot(assert);
|
|
await a11yAudit(assert);
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
});
|
|
|
|
test('closing shortcuts modal by clicking dismiss', async function (assert) {
|
|
await visit('/');
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
assert.dom('button.dismiss').isFocused();
|
|
await click('button.dismiss');
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
});
|
|
|
|
test('closing shortcuts modal by clicking outside', async function (assert) {
|
|
await visit('/');
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
await click('.page-layout');
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
});
|
|
});
|
|
|
|
module('Enable/Disable', function (enableDisableHooks) {
|
|
enableDisableHooks.beforeEach(function () {
|
|
window.localStorage.clear();
|
|
});
|
|
|
|
test('Shortcuts work by default and stops working when disabled', async function (assert) {
|
|
await visit('/');
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'g' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'c' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/clients`,
|
|
'end up on the clients page after typing g c'
|
|
);
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
assert.dom('[data-test-enable-shortcuts-toggle]').hasClass('is-active');
|
|
await click('[data-test-enable-shortcuts-toggle]');
|
|
assert
|
|
.dom('[data-test-enable-shortcuts-toggle]')
|
|
.doesNotHaveClass('is-active');
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
triggerEvent('.page-layout', 'keydown', { key: 'g' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'j' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/clients`,
|
|
'typing g j did not bring you back to the jobs page, since shortcuts are disabled'
|
|
);
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
await click('[data-test-enable-shortcuts-toggle]');
|
|
assert.dom('[data-test-enable-shortcuts-toggle]').hasClass('is-active');
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'g' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'j' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs`,
|
|
'typing g j brings me to the jobs page after re-enabling shortcuts'
|
|
);
|
|
});
|
|
});
|
|
|
|
module('Local storage bind/rebind', function (rebindHooks) {
|
|
rebindHooks.beforeEach(function () {
|
|
window.localStorage.clear();
|
|
});
|
|
|
|
test('You can rebind shortcuts', async function (assert) {
|
|
await visit('/');
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'g' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'c' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/clients`,
|
|
'end up on the clients page after typing g c'
|
|
);
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'g' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'j' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs`,
|
|
'end up on the clients page after typing g j'
|
|
);
|
|
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
|
|
await click(
|
|
'[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
|
|
);
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'r' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'o' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'f' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'l' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Enter' });
|
|
assert
|
|
.dom(
|
|
'[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
|
|
)
|
|
.hasText('r o f l');
|
|
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs`,
|
|
'typing g c does not do anything, since I re-bound the shortcut'
|
|
);
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'r' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'o' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'f' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'l' });
|
|
|
|
assert.equal(
|
|
currentURL(),
|
|
`/clients`,
|
|
'typing the newly bound shortcut brings me to clients'
|
|
);
|
|
|
|
await click(
|
|
'[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
|
|
);
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'n' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'o' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'p' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'e' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Escape' });
|
|
assert
|
|
.dom(
|
|
'[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
|
|
)
|
|
.hasText(
|
|
'r o f l',
|
|
'text unchanged when I hit escape during recording'
|
|
);
|
|
|
|
await click(
|
|
'[data-test-command-label="Go to Clients"] button.reset-to-default'
|
|
);
|
|
assert
|
|
.dom(
|
|
'[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
|
|
)
|
|
.hasText('g c', 'Resetting to default rebinds the shortcut');
|
|
});
|
|
|
|
test('Rebound shortcuts persist from localStorage', async function (assert) {
|
|
window.localStorage.setItem(
|
|
'keyboard.command.Go to Clients',
|
|
JSON.stringify(['b', 'o', 'o', 'p'])
|
|
);
|
|
await visit('/');
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'g' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'c' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs`,
|
|
'After a refresh with a localStorage-found binding, a default key binding doesnt do anything'
|
|
);
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'b' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'o' });
|
|
triggerEvent('.page-layout', 'keydown', { key: 'o' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'p' });
|
|
assert.equal(
|
|
currentURL(),
|
|
`/clients`,
|
|
'end up on the clients page after typing the localstorage-bound shortcut'
|
|
);
|
|
|
|
assert.notOk(Layout.keyboard.modalShown);
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
assert
|
|
.dom(
|
|
'[data-test-command-label="Go to Clients"] button[data-test-rebinder]'
|
|
)
|
|
.hasText('b o o p');
|
|
});
|
|
});
|
|
|
|
module('Hints', function () {
|
|
test('Hints show up on shift', async function (assert) {
|
|
await visit('/');
|
|
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
|
|
assert.equal(
|
|
document.querySelectorAll('[data-test-keyboard-hint]').length,
|
|
7,
|
|
'Shows 7 hints by default'
|
|
);
|
|
await triggerEvent('.page-layout', 'keyup', { key: 'Shift' });
|
|
|
|
assert.equal(
|
|
document.querySelectorAll('[data-test-keyboard-hint]').length,
|
|
0,
|
|
'Hints disappear when you release Shift'
|
|
);
|
|
});
|
|
});
|
|
|
|
module('Dynamic Nav', function (dynamicHooks) {
|
|
dynamicHooks.beforeEach(async function () {
|
|
server.create('node');
|
|
});
|
|
test('Dynamic Table Nav', async function (assert) {
|
|
assert.expect(4);
|
|
server.createList('job', 3, { createRecommendations: true });
|
|
await visit('/jobs');
|
|
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
|
|
assert.equal(
|
|
document.querySelectorAll('[data-shortcut="Shift+01"]').length,
|
|
1,
|
|
'First job gets a shortcut hint'
|
|
);
|
|
assert.equal(
|
|
document.querySelectorAll('[data-shortcut="Shift+02"]').length,
|
|
1,
|
|
'Second job gets a shortcut hint'
|
|
);
|
|
assert.equal(
|
|
document.querySelectorAll('[data-shortcut="Shift+03"]').length,
|
|
1,
|
|
'Third job gets a shortcut hint'
|
|
);
|
|
|
|
triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
|
|
triggerEvent('.page-layout', 'keydown', { key: '0' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: '1' });
|
|
|
|
const clickedJob = server.db.jobs.sortBy('modifyIndex').reverse()[0].id;
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs/${clickedJob}@default`,
|
|
'Shift+01 takes you to the first job'
|
|
);
|
|
});
|
|
test('Multi-Table Nav', async function (assert) {
|
|
server.createList('job', 3, { createRecommendations: true });
|
|
await visit(
|
|
`/jobs/${server.db.jobs.sortBy('modifyIndex').reverse()[0].id}@default`
|
|
);
|
|
const numberOfGroups = findAll('.task-group-row').length;
|
|
const numberOfAllocs = findAll('.allocation-row').length;
|
|
|
|
await triggerEvent('.page-layout', 'keydown', { key: 'Shift' });
|
|
[...Array(numberOfGroups + numberOfAllocs)].forEach((_, iter) => {
|
|
assert.equal(
|
|
document.querySelectorAll(`[data-shortcut="Shift+0${iter + 1}"]`)
|
|
.length,
|
|
1,
|
|
`Dynamic item #${iter + 1} gets a shortcut hint`
|
|
);
|
|
});
|
|
await triggerEvent('.page-layout', 'keyup', { key: 'Shift' });
|
|
});
|
|
|
|
test('Dynamic nav arrows and looping', async function (assert) {
|
|
server.createList('job', 3, { createAllocations: true, type: 'system' });
|
|
const jobID = server.db.jobs.sortBy('modifyIndex').reverse()[0].id;
|
|
await visit(`/jobs/${jobID}@default`);
|
|
|
|
await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
|
|
shiftKey: true,
|
|
});
|
|
assert.ok(
|
|
currentURL().startsWith(`/jobs/${jobID}@default/definition`),
|
|
'Shift+ArrowRight takes you to the next tab (Definition)'
|
|
);
|
|
|
|
await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
|
|
shiftKey: true,
|
|
});
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs/${jobID}@default/versions`,
|
|
'Shift+ArrowRight takes you to the next tab (Version)'
|
|
);
|
|
|
|
await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
|
|
shiftKey: true,
|
|
});
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs/${jobID}@default/allocations`,
|
|
'Shift+ArrowRight takes you to the next tab (Allocations)'
|
|
);
|
|
|
|
await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
|
|
shiftKey: true,
|
|
});
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs/${jobID}@default/evaluations`,
|
|
'Shift+ArrowRight takes you to the next tab (Evaluations)'
|
|
);
|
|
|
|
await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
|
|
shiftKey: true,
|
|
});
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs/${jobID}@default/services`,
|
|
'Shift+ArrowRight takes you to the next tab (Services)'
|
|
);
|
|
|
|
await triggerKeyEvent('.page-layout', 'keydown', 'ArrowRight', {
|
|
shiftKey: true,
|
|
});
|
|
assert.equal(
|
|
currentURL(),
|
|
`/jobs/${jobID}@default`,
|
|
'Shift+ArrowRight takes you to the first tab in the loop'
|
|
);
|
|
});
|
|
|
|
test('Region switching', async function (assert) {
|
|
['Detroit', 'Halifax', 'Phoenix', 'Toronto', 'Windsor'].forEach((id) => {
|
|
server.create('region', { id });
|
|
});
|
|
|
|
await visit('/jobs');
|
|
|
|
// Regions are in the keynav modal
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: '?' });
|
|
assert.ok(Layout.keyboard.modalShown);
|
|
assert
|
|
.dom('[data-test-command-label="Switch to Detroit region"]')
|
|
.exists('First created region is in the modal');
|
|
|
|
assert
|
|
.dom('[data-test-command-label="Switch to Windsor region"]')
|
|
.exists('Last created region is in the modal');
|
|
|
|
// Triggers a region switch to Halifax
|
|
triggerEvent('.page-layout', 'keydown', { key: 'r' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: '2' });
|
|
assert.ok(
|
|
currentURL().includes('region=Halifax'),
|
|
'r 2 command takes you to the second region'
|
|
);
|
|
|
|
// Triggers a region switch to Phoenix
|
|
triggerEvent('.page-layout', 'keydown', { key: 'r' });
|
|
await triggerEvent('.page-layout', 'keydown', { key: '3' });
|
|
assert.ok(
|
|
currentURL().includes('region=Phoenix'),
|
|
'r 3 command takes you to the third region'
|
|
);
|
|
});
|
|
});
|
|
});
|