open-nomad/ui/tests/pages/layout.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

56 lines
1.5 KiB
JavaScript

import { create, clickable, collection, isPresent, text } from 'ember-cli-page-object';
export default create({
navbar: {
scope: '[data-test-global-header]',
regionSwitcher: {
scope: '[data-test-region-switcher]',
isPresent: isPresent(),
open: clickable('.ember-power-select-trigger'),
options: collection('.ember-power-select-option', {
label: text(),
}),
},
search: {
scope: '[data-test-search]',
click: clickable('.ember-power-select-trigger'),
groups: collection('.ember-power-select-group', {
testContainer: '.ember-power-select-options',
resetScope: true,
name: text('.ember-power-select-group-name'),
options: collection('.ember-power-select-option', {
label: text(),
highlighted: text('.highlighted'),
}),
}),
field: {
scope: '.ember-power-select-search input',
testContainer: 'html',
resetScope: true,
},
},
},
gutter: {
scope: '[data-test-gutter-menu]',
namespaceSwitcher: {
scope: '[data-test-namespace-switcher]',
isPresent: isPresent(),
open: clickable('.ember-power-select-trigger'),
options: collection('.ember-power-select-option', {
label: text(),
}),
},
visitJobs: clickable('[data-test-gutter-link="jobs"]'),
visitClients: clickable('[data-test-gutter-link="clients"]'),
visitServers: clickable('[data-test-gutter-link="servers"]'),
visitStorage: clickable('[data-test-gutter-link="storage"]'),
},
});