Skip to content

G
gitlab-ce
Commit d5b98c93 authored by Lukas 'Eipi' Eipert's avatar Lukas 'Eipi' Eipert Committed by Nicolò Maria Mezzopera
Browse files
Options

Move keyboard shortcut help modal to Vue 

Currently the keyboard shortcut modal is rendered via HAML and injected
into the DOM via JavaScript eval. This is rather inefficient and might
even introduce security vulnerabilities. Thus we move the static HAML
file to be a conditionally rendered Vue Component instead.
parent 295400e4
Hide whitespace changes
Inline Side-by-side
Showing with 559 additions and 408 deletions
.haml-lint_todo.yml
View file @ d5b98c93
......@@ -109,7 +109,6 @@ linters:
- 'app/views/groups/runners/edit.html.haml'
- 'app/views/groups/settings/_advanced.html.haml'
- 'app/views/groups/settings/_lfs.html.haml'
- 'app/views/help/_shortcuts.html.haml'
- 'app/views/help/index.html.haml'
- 'app/views/help/instance_configuration.html.haml'
- 'app/views/help/instance_configuration/_gitlab_ci.html.haml'
......
app/assets/javascripts/behaviors/shortcuts/shortcuts.js
View file @ d5b98c93
......@@ -3,12 +3,11 @@ import Cookies from 'js-cookie';
import Mousetrap from 'mousetrap';
import Vue from 'vue';
import { flatten } from 'lodash';
import { parseBoolean, getCspNonceValue } from '~/lib/utils/common_utils';
import axios from '../../lib/utils/axios_utils';
import { refreshCurrentPage, visitUrl } from '../../lib/utils/url_utility';
import findAndFollowLink from '../../lib/utils/navigation_utility';
import { refreshCurrentPage, visitUrl } from '~/lib/utils/url_utility';
import findAndFollowLink from '~/lib/utils/navigation_utility';
import { parseBoolean } from '~/lib/utils/common_utils';
import { disableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
import ShortcutsToggle from './shortcuts_toggle.vue';
import { keysFor, TOGGLE_PERFORMANCE_BAR, TOGGLE_CANARY } from './keybindings';
const defaultStopCallback = Mousetrap.prototype.stopCallback;
......@@ -20,15 +19,6 @@ Mousetrap.prototype.stopCallback = function customStopCallback(e, element, combo
return defaultStopCallback.call(this, e, element, combo);
};
function initToggleButton() {
return new Vue({
el: document.querySelector('.js-toggle-shortcuts'),
render(createElement) {
return createElement(ShortcutsToggle);
},
});
}
/**
* The key used to save and fetch the local Mousetrap instance
* attached to a `<textarea>` element using `jQuery.data`
......@@ -65,7 +55,8 @@ function getToolbarBtnToShortcutsMap($textarea) {
export default class Shortcuts {
constructor() {
this.onToggleHelp = this.onToggleHelp.bind(this);
this.enabledHelp = [];
this.helpModalElement = null;
this.helpModalVueInstance = null;
Mousetrap.bind('?', this.onToggleHelp);
Mousetrap.bind('s', Shortcuts.focusSearch);
......@@ -107,11 +98,33 @@ export default class Shortcuts {
}
onToggleHelp(e) {
if (e.preventDefault) {
if (e?.preventDefault) {
e.preventDefault();
}
Shortcuts.toggleHelp(this.enabledHelp);
if (this.helpModalElement && this.helpModalVueInstance) {
this.helpModalVueInstance.$destroy();
this.helpModalElement.remove();
this.helpModalElement = null;
this.helpModalVueInstance = null;
} else {
this.helpModalElement = document.createElement('div');
document.body.append(this.helpModalElement);
this.helpModalVueInstance = new Vue({
el: this.helpModalElement,
components: {
ShortcutsHelp: () => import('./shortcuts_help.vue'),
},
render: (createElement) => {
return createElement('shortcuts-help', {
on: {
hidden: this.onToggleHelp,
},
});
},
});
}
}
static onTogglePerfBar(e) {
......@@ -144,34 +157,6 @@ export default class Shortcuts {
$(document).triggerHandler('markdown-preview:toggle', [e]);
}
static toggleHelp(location) {
const $modal = $('#modal-shortcuts');
if ($modal.length) {
$modal.modal('toggle');
return null;
}
return axios
.get(gon.shortcuts_path, {
responseType: 'text',
})
.then(({ data }) => {
$.globalEval(data, { nonce: getCspNonceValue() });
if (location && location.length > 0) {
const results = [];
for (let i = 0, len = location.length; i < len; i += 1) {
results.push($(location[i]).show());
}
return results;
}
return $('.js-more-help-button').remove();
})
.then(initToggleButton);
}
focusFilter(e) {
if (!this.filterInput) {
this.filterInput = $('input[type=search]', '.nav-controls');
......
app/assets/javascripts/behaviors/shortcuts/shortcuts_help.vue 0 → 100644
View file @ d5b98c93
<script>
/* eslint-disable @gitlab/vue-require-i18n-strings */
import { GlIcon, GlModal } from '@gitlab/ui';
import ShortcutsToggle from './shortcuts_toggle.vue';
export default {
components: {
GlIcon,
GlModal,
ShortcutsToggle,
},
computed: {
ctrlCharacter() {
return window.gl.client.isMac ? '⌘' : 'ctrl';
},
onDotCom() {
return window.gon.dot_com;
},
},
};
</script>
<template>
<gl-modal
modal-id="keyboard-shortcut-modal"
size="lg"
data-testid="modal-shortcuts"
:visible="true"
:hide-footer="true"
@hidden="$emit('hidden')"
>
<template #modal-title>
<shortcuts-toggle />
</template>
<div class="row">
<div class="col-lg-4">
<table class="shortcut-mappings text-2">
<tbody>
<tr>
<th></th>
<th>{{ __('Global Shortcuts') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>?</kbd>
</td>
<td>{{ __('Toggle this dialog') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift p</kbd>
</td>
<td>{{ __('Go to your projects') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift g</kbd>
</td>
<td>{{ __('Go to your groups') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift a</kbd>
</td>
<td>{{ __('Go to the activity feed') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift l</kbd>
</td>
<td>{{ __('Go to the milestone list') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift s</kbd>
</td>
<td>{{ __('Go to your snippets') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>s</kbd>
/
<kbd>/</kbd>
</td>
<td>{{ __('Start search') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift i</kbd>
</td>
<td>{{ __('Go to your issues') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift m</kbd>
</td>
<td>{{ __('Go to your merge requests') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>shift t</kbd>
</td>
<td>{{ __('Go to your To-Do list') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>p</kbd>
<kbd>b</kbd>
</td>
<td>{{ __('Toggle the Performance Bar') }}</td>
</tr>
<tr v-if="onDotCom">
<td class="shortcut">
<kbd>g</kbd>
<kbd>x</kbd>
</td>
<td>{{ __('Toggle GitLab Next') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Editing') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>{{ ctrlCharacter }} shift p</kbd>
</td>
<td>{{ __('Toggle Markdown preview') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-up" />
</kbd>
</td>
<td>
{{ __('Edit your most recent comment in a thread (from an empty textarea)') }}
</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Wiki') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>e</kbd>
</td>
<td>{{ __('Edit wiki page') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Repository Graph') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-left" />
</kbd>
/
<kbd>h</kbd>
</td>
<td>{{ __('Scroll left') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-right" />
</kbd>
/
<kbd>l</kbd>
</td>
<td>{{ __('Scroll right') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-up" />
</kbd>
/
<kbd>k</kbd>
</td>
<td>{{ __('Scroll up') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-down" />
</kbd>
/
<kbd>j</kbd>
</td>
<td>{{ __('Scroll down') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
shift
<gl-icon name="arrow-up" />
/ k
</kbd>
</td>
<td>{{ __('Scroll to top') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
shift
<gl-icon name="arrow-down" />
/ j
</kbd>
</td>
<td>{{ __('Scroll to bottom') }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<table class="shortcut-mappings text-2">
<tbody>
<tr>
<th></th>
<th>{{ __('Project') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>p</kbd>
</td>
<td>{{ __("Go to the project's overview page") }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>v</kbd>
</td>
<td>{{ __("Go to the project's activity feed") }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>r</kbd>
</td>
<td>{{ __('Go to releases') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>f</kbd>
</td>
<td>{{ __('Go to files') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>t</kbd>
</td>
<td>{{ __('Go to find file') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>c</kbd>
</td>
<td>{{ __('Go to commits') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>n</kbd>
</td>
<td>{{ __('Go to repository graph') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>d</kbd>
</td>
<td>{{ __('Go to repository charts') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>i</kbd>
</td>
<td>{{ __('Go to issues') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>i</kbd>
</td>
<td>{{ __('New issue') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>b</kbd>
</td>
<td>{{ __('Go to issue boards') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>m</kbd>
</td>
<td>{{ __('Go to merge requests') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>j</kbd>
</td>
<td>{{ __('Go to jobs') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>l</kbd>
</td>
<td>{{ __('Go to metrics') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>e</kbd>
</td>
<td>{{ __('Go to environments') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>k</kbd>
</td>
<td>{{ __('Go to kubernetes') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>s</kbd>
</td>
<td>{{ __('Go to snippets') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>g</kbd>
<kbd>w</kbd>
</td>
<td>{{ __('Go to wiki') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Project Files') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-up" />
</kbd>
</td>
<td>{{ __('Move selection up') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>
<gl-icon name="arrow-down" />
</kbd>
</td>
<td>{{ __('Move selection down') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>enter</kbd>
</td>
<td>{{ __('Open Selection') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>esc</kbd>
</td>
<td>{{ __('Go back (while searching for files)') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>y</kbd>
</td>
<td>{{ __('Go to file permalink (while viewing a file)') }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4">
<table class="shortcut-mappings text-2">
<tbody>
<tr>
<th></th>
<th>{{ __('Epics, Issues, and Merge Requests') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>r</kbd>
</td>
<td>{{ __('Comment/Reply (quoting selected text)') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>e</kbd>
</td>
<td>{{ __('Edit description') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>l</kbd>
</td>
<td>{{ __('Change label') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Issues and Merge Requests') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>a</kbd>
</td>
<td>{{ __('Change assignee') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>m</kbd>
</td>
<td>{{ __('Change milestone') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Merge Requests') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>]</kbd>
/
<kbd>j</kbd>
</td>
<td>{{ __('Next file in diff') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>[</kbd>
/
<kbd>k</kbd>
</td>
<td>{{ __('Previous file in diff') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>{{ ctrlCharacter }} p</kbd>
</td>
<td>{{ __('Go to file') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>n</kbd>
</td>
<td>{{ __('Next unresolved discussion') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>p</kbd>
</td>
<td>{{ __('Previous unresolved discussion') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>b</kbd>
</td>
<td>{{ __('Copy source branch name') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Merge Request Commits') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>c</kbd>
</td>
<td>{{ __('Next commit') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>x</kbd>
</td>
<td>{{ __('Previous commit') }}</td>
</tr>
</tbody>
<tbody>
<tr>
<th></th>
<th>{{ __('Web IDE') }}</th>
</tr>
<tr>
<td class="shortcut">
<kbd>{{ ctrlCharacter }} p</kbd>
</td>
<td>{{ __('Go to file') }}</td>
</tr>
<tr>
<td class="shortcut">
<kbd>{{ ctrlCharacter }} enter</kbd>
</td>
<td>{{ __('Commit (when editing commit message)') }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</gl-modal>
</template>
app/views/help/_shortcuts.html.haml deleted 100644 → 0
View file @ 295400e4
#modal-shortcuts.modal{ tabindex: -1 }
.modal-dialog.modal-lg.modal-1040
.modal-content
.modal-header
.js-toggle-shortcuts
%button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
%span{ "aria-hidden": true } &times;
.modal-body
.row
.col-lg-4
%table.shortcut-mappings.text-2
%tbody
%tr
%th
%th= _('Global Shortcuts')
%tr
%td.shortcut
%kbd ?
%td= _('Toggle this dialog')
%tr
%td.shortcut
%kbd shift p
%td= _('Go to your projects')
%tr
%td.shortcut
%kbd shift g
%td= _('Go to your groups')
%tr
%td.shortcut
%kbd shift a
%td= _('Go to the activity feed')
%tr
%td.shortcut
%kbd shift l
%td= _('Go to the milestone list')
%tr
%td.shortcut
%kbd shift s
%td= _('Go to your snippets')
%tr
%td.shortcut
%kbd s
\/
%kbd /
%td= _('Start search')
%tr
%td.shortcut
%kbd shift i
%td= _('Go to your issues')
%tr
%td.shortcut
%kbd shift m
%td= _('Go to your merge requests')
%tr
%td.shortcut
%kbd shift t
%td= _('Go to your To-Do list')
%tr
%td.shortcut
%kbd p
%kbd b
%td= _('Toggle the Performance Bar')
- if Gitlab.com?
%tr
%td.shortcut
%kbd g
%kbd x
%td= _('Toggle GitLab Next')
%tbody
%tr
%th
%th= _('Editing')
%tr
%td.shortcut
- if browser.platform.mac?
%kbd &#8984; shift p
- else
%kbd ctrl shift p
%td= _('Toggle Markdown preview')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-up', size: 12)
%td= _('Edit your most recent comment in a thread (from an empty textarea)')
%tbody
%tr
%th
%th= _('Wiki')
%tr
%td.shortcut
%kbd e
%td= _('Edit wiki page')
%tbody
%tr
%th
%th= _('Repository Graph')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-left', size: 12)
\/
%kbd h
%td= _('Scroll left')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-right', size: 12)
\/
%kbd l
%td= _('Scroll right')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-up', size: 12)
\/
%kbd k
%td= _('Scroll up')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-down', size: 12)
\/
%kbd j
%td= _('Scroll down')
%tr
%td.shortcut
%kbd
shift
= sprite_icon('arrow-up', size: 12)
\/ k
%td= _('Scroll to top')
%tr
%td.shortcut
%kbd
shift
= sprite_icon('arrow-down', size: 12)
\/ j
%td= _('Scroll to bottom')
.col-lg-4
%table.shortcut-mappings.text-2
%tbody
%tr
%th
%th= _('Project')
%tr
%td.shortcut
%kbd g
%kbd p
%td= _('Go to the project\'s overview page')
%tr
%td.shortcut
%kbd g
%kbd v
%td= _('Go to the project\'s activity feed')
%tr
%td.shortcut
%kbd g
%kbd r
%td= _('Go to releases')
%tr
%td.shortcut
%kbd g
%kbd f
%td= _('Go to files')
%tr
%td.shortcut
%kbd t
%td= _('Go to find file')
%tr
%td.shortcut
%kbd g
%kbd c
%td= _('Go to commits')
%tr
%td.shortcut
%kbd g
%kbd n
%td= _('Go to repository graph')
%tr
%td.shortcut
%kbd g
%kbd d
%td= _('Go to repository charts')
%tr
%td.shortcut
%kbd g
%kbd i
%td= _('Go to issues')
%tr
%td.shortcut
%kbd i
%td= _('New issue')
%tr
%td.shortcut
%kbd g
%kbd b
%td= _('Go to issue boards')
%tr
%td.shortcut
%kbd g
%kbd m
%td= _('Go to merge requests')
%tr
%td.shortcut
%kbd g
%kbd j
%td= _('Go to jobs')
%tr
%td.shortcut
%kbd g
%kbd l
%td= _('Go to metrics')
%tr
%td.shortcut
%kbd g
%kbd e
%td= _('Go to environments')
%tr
%td.shortcut
%kbd g
%kbd k
%td= _('Go to kubernetes')
%tr
%td.shortcut
%kbd g
%kbd s
%td= _('Go to snippets')
%tr
%td.shortcut
%kbd g
%kbd w
%td= _('Go to wiki')
%tbody
%tr
%th
%th= _('Project Files')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-up', size: 12)
%td= _('Move selection up')
%tr
%td.shortcut
%kbd
= sprite_icon('arrow-down', size: 12)
%td= _('Move selection down')
%tr
%td.shortcut
%kbd enter
%td= _('Open Selection')
%tr
%td.shortcut
%kbd esc
%td= _('Go back (while searching for files)')
%tr
%td.shortcut
%kbd y
%td= _('Go to file permalink (while viewing a file)')
.col-lg-4
%table.shortcut-mappings.text-2
%tbody
%tr
%th
%th= _('Epics, Issues, and Merge Requests')
%tr
%td.shortcut
%kbd r
%td= _('Comment/Reply (quoting selected text)')
%tr
%td.shortcut
%kbd e
%td= _('Edit description')
%tr
%td.shortcut
%kbd l
%td= _('Change label')
%tbody
%tr
%th
%th= _('Issues and Merge Requests')
%tr
%td.shortcut
%kbd a
%td= _('Change assignee')
%tr
%td.shortcut
%kbd m
%td= _('Change milestone')
%tbody
%tr
%th
%th= _('Merge Requests')
%tr
%td.shortcut
%kbd ]
\/
%kbd j
%td= _('Next file in diff')
%tr
%td.shortcut
%kbd [
\/
%kbd k
%td= _('Previous file in diff')
%tr
%td.shortcut
- if browser.platform.mac?
%kbd &#8984; p
- else
%kbd ctrl p
%td= _('Go to file')
%tr
%td.shortcut
%kbd n
%td= _('Next unresolved discussion')
%tr
%td.shortcut
%kbd p
%td= _('Previous unresolved discussion')
%tr
%td.shortcut
%kbd b
%td= _('Copy source branch name')
%tbody
%tr
%th
%th= _('Merge Request Commits')
%tr
%td.shortcut
%kbd c
%td= _('Next commit')
%tr
%td.shortcut
%kbd x
%td= _('Previous commit')
%tbody
%tr
%th
%th= _('Web IDE')
%tr
%td.shortcut
- if browser.platform.mac?
%kbd &#8984; p
- else
%kbd ctrl p
%td= _('Go to file')
%tr
%td.shortcut
- if browser.platform.mac?
%kbd &#8984; enter
- else
%kbd ctrl enter
%td= _('Commit (when editing commit message)')
app/views/help/shortcuts.js.haml deleted 100644 → 0
View file @ 295400e4
:plain
$("body").append("#{escape_javascript(render('shortcuts'))}");
$("#modal-shortcuts").modal();
lib/gitlab/gon_helper.rb
View file @ d5b98c93
......@@ -13,7 +13,6 @@ module Gitlab
gon.asset_host = ActionController::Base.asset_host
gon.webpack_public_path = webpack_public_path
gon.relative_url_root = Gitlab.config.gitlab.relative_url_root
gon.shortcuts_path = Gitlab::Routing.url_helpers.help_page_path('shortcuts')
gon.user_color_scheme = Gitlab::ColorSchemes.for_user(current_user).css_class
if Gitlab.config.sentry.enabled
......
spec/features/help_pages_spec.rb
View file @ d5b98c93
......@@ -23,7 +23,7 @@ RSpec.describe 'Help Pages' do
it 'opens shortcuts help dialog' do
find('.js-trigger-shortcut').click
expect(page).to have_selector('#modal-shortcuts')
expect(page).to have_selector('[data-testid="modal-shortcuts"]')
end
end
end
......
spec/features/projects/user_uses_shortcuts_spec.rb
View file @ d5b98c93
......@@ -27,14 +27,13 @@ RSpec.describe 'User uses shortcuts', :js do
open_modal_shortcut_keys
# modal-shortcuts still in the DOM, but hidden
expect(find('#modal-shortcuts', visible: false)).not_to be_visible
expect(page).not_to have_selector('[data-testid="modal-shortcuts"]')
page.refresh
open_modal_shortcut_keys
# after reload, shortcuts modal doesn't exist at all until we add it
expect(page).not_to have_selector('#modal-shortcuts')
expect(page).not_to have_selector('[data-testid="modal-shortcuts"]')
end
it 're-enables shortcuts' do
......@@ -47,7 +46,7 @@ RSpec.describe 'User uses shortcuts', :js do
close_modal
open_modal_shortcut_keys
expect(find('#modal-shortcuts')).to be_visible
expect(find('[data-testid="modal-shortcuts"]')).to be_visible
end
def open_modal_shortcut_keys
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7