Merge branch 'form-focus-previous-incorrect-form' into 'master'

Fixed the preview keyboard shortcut focusing wrong tab

Closes #31101

See merge request !10849

1 files changed, 45 insertions, 0 deletions

diff --git a/spec/javascripts/shortcuts_spec.js b/spec/javascripts/shortcuts_spec.js
new file mode 100644
index 00000000000..9b8373df29e
--- /dev/null
+++ b/spec/javascripts/shortcuts_spec.js
@@ -0,0 +1,45 @@
+/* global Shortcuts */
+describe('Shortcuts', () => {
+  const fixtureName = 'issues/issue_with_comment.html.raw';
+  const createEvent = (type, target) => $.Event(type, {
+    target,
+  });
+
+  preloadFixtures(fixtureName);
+
+  describe('toggleMarkdownPreview', () => {
+    let sc;
+
+    beforeEach(() => {
+      loadFixtures(fixtureName);
+
+      spyOnEvent('.js-new-note-form .js-md-preview-button', 'focus');
+      spyOnEvent('.edit-note .js-md-preview-button', 'focus');
+
+      sc = new Shortcuts();
+    });
+
+    it('focuses preview button in form', () => {
+      sc.toggleMarkdownPreview(
+        createEvent('KeyboardEvent', document.querySelector('.js-new-note-form .js-note-text'),
+      ));
+
+      expect('focus').toHaveBeenTriggeredOn('.js-new-note-form .js-md-preview-button');
+    });
+
+    it('focues preview button inside edit comment form', (done) => {
+      document.querySelector('.js-note-edit').click();
+
+      setTimeout(() => {
+        sc.toggleMarkdownPreview(
+          createEvent('KeyboardEvent', document.querySelector('.edit-note .js-note-text'),
+        ));
+
+        expect('focus').not.toHaveBeenTriggeredOn('.js-new-note-form .js-md-preview-button');
+        expect('focus').toHaveBeenTriggeredOn('.edit-note .js-md-preview-button');
+
+        done();
+      });
+    });
+  });
+});