diff options
Diffstat (limited to 'spec/javascripts/shortcuts_issuable_spec.js')
-rw-r--r-- | spec/javascripts/shortcuts_issuable_spec.js | 77 |
1 files changed, 54 insertions, 23 deletions
diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js index b10d8be6781..a4753ab7cde 100644 --- a/spec/javascripts/shortcuts_issuable_spec.js +++ b/spec/javascripts/shortcuts_issuable_spec.js @@ -4,71 +4,102 @@ import ShortcutsIssuable from '~/shortcuts_issuable'; initCopyAsGFM(); -describe('ShortcutsIssuable', function () { - const fixtureName = 'merge_requests/diff_comment.html.raw'; +const FORM_SELECTOR = '.js-main-target-form .js-vue-comment-form'; + +describe('ShortcutsIssuable', function() { + const fixtureName = 'snippets/show.html.raw'; preloadFixtures(fixtureName); + beforeEach(() => { loadFixtures(fixtureName); + $('body').append( + `<div class="js-main-target-form"> + <textare class="js-vue-comment-form"></textare> + </div>`, + ); document.querySelector('.js-new-note-form').classList.add('js-main-target-form'); this.shortcut = new ShortcutsIssuable(true); }); + + afterEach(() => { + $(FORM_SELECTOR).remove(); + }); + describe('replyWithSelectedText', () => { // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML. - const stubSelection = (html) => { + const stubSelection = html => { window.gl.utils.getSelectedFragment = () => { const node = document.createElement('div'); node.innerHTML = html; + return node; }; }; - beforeEach(() => { - this.selector = '.js-main-target-form #note_note'; - }); describe('with empty selection', () => { it('does not return an error', () => { - this.shortcut.replyWithSelectedText(true); - expect($(this.selector).val()).toBe(''); + ShortcutsIssuable.replyWithSelectedText(true); + + expect($(FORM_SELECTOR).val()).toBe(''); }); + it('triggers `focus`', () => { - this.shortcut.replyWithSelectedText(true); - expect(document.activeElement).toBe(document.querySelector(this.selector)); + const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + expect(spy).toHaveBeenCalled(); }); }); + describe('with any selection', () => { beforeEach(() => { stubSelection('<p>Selected text.</p>'); }); + it('leaves existing input intact', () => { - $(this.selector).val('This text was already here.'); - expect($(this.selector).val()).toBe('This text was already here.'); - this.shortcut.replyWithSelectedText(true); - expect($(this.selector).val()).toBe('This text was already here.\n\n> Selected text.\n\n'); + $(FORM_SELECTOR).val('This text was already here.'); + expect($(FORM_SELECTOR).val()).toBe('This text was already here.'); + + ShortcutsIssuable.replyWithSelectedText(true); + expect($(FORM_SELECTOR).val()).toBe('This text was already here.\n\n> Selected text.\n\n'); }); + it('triggers `input`', () => { let triggered = false; - $(this.selector).on('input', () => { + $(FORM_SELECTOR).on('input', () => { triggered = true; }); - this.shortcut.replyWithSelectedText(true); + + ShortcutsIssuable.replyWithSelectedText(true); expect(triggered).toBe(true); }); + it('triggers `focus`', () => { - this.shortcut.replyWithSelectedText(true); - expect(document.activeElement).toBe(document.querySelector(this.selector)); + const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus'); + ShortcutsIssuable.replyWithSelectedText(true); + + expect(spy).toHaveBeenCalled(); }); }); + describe('with a one-line selection', () => { it('quotes the selection', () => { stubSelection('<p>This text has been selected.</p>'); - this.shortcut.replyWithSelectedText(true); - expect($(this.selector).val()).toBe('> This text has been selected.\n\n'); + ShortcutsIssuable.replyWithSelectedText(true); + + expect($(FORM_SELECTOR).val()).toBe('> This text has been selected.\n\n'); }); }); + describe('with a multi-line selection', () => { it('quotes the selected lines as a group', () => { - stubSelection('<p>Selected line one.</p>\n<p>Selected line two.</p>\n<p>Selected line three.</p>'); - this.shortcut.replyWithSelectedText(true); - expect($(this.selector).val()).toBe('> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n'); + stubSelection( + '<p>Selected line one.</p>\n<p>Selected line two.</p>\n<p>Selected line three.</p>', + ); + ShortcutsIssuable.replyWithSelectedText(true); + + expect($(FORM_SELECTOR).val()).toBe( + '> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n', + ); }); }); }); |