debian-mirror-gitlab/spec/frontend/lib/utils/text_markdown_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

815 lines
28 KiB
JavaScript
Raw Normal View History

2022-05-07 20:08:51 +05:30
import $ from 'jquery';
2022-07-16 23:28:13 +05:30
import {
insertMarkdownText,
keypressNoteText,
compositionStartNoteText,
compositionEndNoteText,
2022-11-25 23:54:43 +05:30
updateTextForToolbarBtn,
2022-07-16 23:28:13 +05:30
} from '~/lib/utils/text_markdown';
2022-05-07 20:08:51 +05:30
import '~/lib/utils/jquery_at_who';
2022-11-25 23:54:43 +05:30
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2018-03-17 18:26:18 +05:30
describe('init markdown', () => {
2022-11-25 23:54:43 +05:30
let mdArea;
2018-03-17 18:26:18 +05:30
let textArea;
2022-11-25 23:54:43 +05:30
let indentButton;
let outdentButton;
2018-03-17 18:26:18 +05:30
beforeAll(() => {
2022-11-25 23:54:43 +05:30
setHTMLFixture(
`<div class='md-area'>
<textarea></textarea>
<button data-md-command="indentLines" id="indentButton"></button>
<button data-md-command="outdentLines" id="outdentButton"></button>
</div>`,
);
mdArea = document.querySelector('.md-area');
textArea = mdArea.querySelector('textarea');
indentButton = mdArea.querySelector('#indentButton');
outdentButton = mdArea.querySelector('#outdentButton');
2018-03-17 18:26:18 +05:30
textArea.focus();
2022-07-16 23:28:13 +05:30
// needed for the underlying insertText to work
document.execCommand = jest.fn(() => false);
2018-03-17 18:26:18 +05:30
});
afterAll(() => {
2022-11-25 23:54:43 +05:30
resetHTMLFixture();
2018-03-17 18:26:18 +05:30
});
2021-01-03 14:25:43 +05:30
describe('insertMarkdownText', () => {
it('will not error if selected text is a number', () => {
const selected = 2;
insertMarkdownText({
textArea,
text: '',
tag: '',
blockTag: null,
selected,
wrap: false,
});
expect(textArea.value).toBe(selected.toString());
});
});
2019-02-15 15:39:39 +05:30
describe('textArea', () => {
describe('without selection', () => {
it('inserts the tag on an empty line', () => {
const initialValue = '';
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
textArea.value = initialValue;
textArea.selectionStart = 0;
textArea.selectionEnd = 0;
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
insertMarkdownText({
textArea,
text: textArea.value,
2020-06-23 00:09:42 +05:30
tag: '- ',
2019-02-15 15:39:39 +05:30
blockTag: null,
selected: '',
wrap: false,
});
2020-06-23 00:09:42 +05:30
expect(textArea.value).toEqual(`${initialValue}- `);
2018-12-13 13:39:08 +05:30
});
2018-03-17 18:26:18 +05:30
2021-06-08 01:23:25 +05:30
it('inserts dollar signs correctly', () => {
const initialValue = '';
textArea.value = initialValue;
textArea.selectionStart = 0;
textArea.selectionEnd = 0;
insertMarkdownText({
textArea,
text: textArea.value,
tag: '```suggestion:-0+0\n{text}\n```',
blockTag: true,
selected: '# Does not parse the `$` currently.',
wrap: false,
});
expect(textArea.value).toContain('# Does not parse the `$` currently.');
});
2019-02-15 15:39:39 +05:30
it('inserts the tag on a new line if the current one is not empty', () => {
const initialValue = 'some text';
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
textArea.value = initialValue;
textArea.setSelectionRange(initialValue.length, initialValue.length);
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
insertMarkdownText({
textArea,
text: textArea.value,
2020-06-23 00:09:42 +05:30
tag: '- ',
2019-02-15 15:39:39 +05:30
blockTag: null,
selected: '',
wrap: false,
});
2018-03-17 18:26:18 +05:30
2020-06-23 00:09:42 +05:30
expect(textArea.value).toEqual(`${initialValue}\n- `);
2018-12-13 13:39:08 +05:30
});
2018-03-17 18:26:18 +05:30
2021-11-11 11:23:49 +05:30
it('unescapes new line characters', () => {
const initialValue = '';
textArea.value = initialValue;
textArea.selectionStart = 0;
textArea.selectionEnd = 0;
insertMarkdownText({
textArea,
text: textArea.value,
tag: '```suggestion:-0+0\n{text}\n```',
blockTag: true,
2021-12-11 22:18:48 +05:30
selected: '# Does not %br parse the %br currently.',
2021-11-11 11:23:49 +05:30
wrap: false,
});
2021-12-11 22:18:48 +05:30
expect(textArea.value).toContain('# Does not \\n parse the \\n currently.');
2021-11-11 11:23:49 +05:30
});
2019-02-15 15:39:39 +05:30
it('inserts the tag on the same line if the current line only contains spaces', () => {
const initialValue = ' ';
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
textArea.value = initialValue;
textArea.setSelectionRange(initialValue.length, initialValue.length);
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
insertMarkdownText({
textArea,
text: textArea.value,
2020-06-23 00:09:42 +05:30
tag: '- ',
2019-02-15 15:39:39 +05:30
blockTag: null,
selected: '',
wrap: false,
});
2018-03-17 18:26:18 +05:30
2020-06-23 00:09:42 +05:30
expect(textArea.value).toEqual(`${initialValue}- `);
2018-12-13 13:39:08 +05:30
});
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
it('inserts the tag on the same line if the current line only contains tabs', () => {
const initialValue = '\t\t\t';
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
textArea.value = initialValue;
textArea.setSelectionRange(initialValue.length, initialValue.length);
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
insertMarkdownText({
textArea,
text: textArea.value,
2020-06-23 00:09:42 +05:30
tag: '- ',
2019-02-15 15:39:39 +05:30
blockTag: null,
selected: '',
wrap: false,
});
2018-03-17 18:26:18 +05:30
2020-06-23 00:09:42 +05:30
expect(textArea.value).toEqual(`${initialValue}- `);
2018-12-13 13:39:08 +05:30
});
2018-03-17 18:26:18 +05:30
2019-02-15 15:39:39 +05:30
it('places the cursor inside the tags', () => {
const start = 'lorem ';
const end = ' ipsum';
const tag = '*';
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
textArea.value = `${start}${end}`;
textArea.setSelectionRange(start.length, start.length);
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
insertMarkdownText({
textArea,
text: textArea.value,
tag,
blockTag: null,
selected: '',
wrap: true,
});
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
expect(textArea.value).toEqual(`${start}**${end}`);
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
// cursor placement should be between tags
expect(textArea.selectionStart).toBe(start.length + tag.length);
2018-12-13 13:39:08 +05:30
});
2022-04-04 11:22:00 +05:30
describe('Continuing markdown lists', () => {
2023-04-23 21:23:45 +05:30
let enterEvent;
2022-04-04 11:22:00 +05:30
beforeEach(() => {
2023-04-23 21:23:45 +05:30
enterEvent = new KeyboardEvent('keydown', { key: 'Enter', cancelable: true });
2022-07-16 23:28:13 +05:30
textArea.addEventListener('keydown', keypressNoteText);
textArea.addEventListener('compositionstart', compositionStartNoteText);
textArea.addEventListener('compositionend', compositionEndNoteText);
2022-11-25 23:54:43 +05:30
gon.markdown_automatic_lists = true;
2022-04-04 11:22:00 +05:30
});
it.each`
text | expected
${'- item'} | ${'- item\n- '}
2022-06-21 17:19:12 +05:30
${'* item'} | ${'* item\n* '}
${'+ item'} | ${'+ item\n+ '}
2022-04-04 11:22:00 +05:30
${'- [ ] item'} | ${'- [ ] item\n- [ ] '}
2022-06-21 17:19:12 +05:30
${'- [x] item'} | ${'- [x] item\n- [ ] '}
${'- [X] item'} | ${'- [X] item\n- [ ] '}
2022-08-27 11:52:29 +05:30
${'- [~] item'} | ${'- [~] item\n- [ ] '}
2022-06-21 17:19:12 +05:30
${'- [ ] nbsp (U+00A0)'} | ${'- [ ] nbsp (U+00A0)\n- [ ] '}
2022-04-04 11:22:00 +05:30
${'- item\n - second'} | ${'- item\n - second\n - '}
2022-06-21 17:19:12 +05:30
${'- - -'} | ${'- - -'}
${'- --'} | ${'- --'}
${'* **'} | ${'* **'}
${' ** * ** * ** * **'} | ${' ** * ** * ** * **'}
${'- - -x'} | ${'- - -x\n- '}
${'+ ++'} | ${'+ ++\n+ '}
2022-05-07 20:08:51 +05:30
${'1. item'} | ${'1. item\n2. '}
${'1. [ ] item'} | ${'1. [ ] item\n2. [ ] '}
2022-06-21 17:19:12 +05:30
${'1. [x] item'} | ${'1. [x] item\n2. [ ] '}
${'1. [X] item'} | ${'1. [X] item\n2. [ ] '}
2022-08-27 11:52:29 +05:30
${'1. [~] item'} | ${'1. [~] item\n2. [ ] '}
2022-05-07 20:08:51 +05:30
${'108. item'} | ${'108. item\n109. '}
2022-04-04 11:22:00 +05:30
${'108. item\n - second'} | ${'108. item\n - second\n - '}
2022-05-07 20:08:51 +05:30
${'108. item\n 1. second'} | ${'108. item\n 1. second\n 2. '}
${'non-item, will not change'} | ${'non-item, will not change'}
2022-04-04 11:22:00 +05:30
`('adds correct list continuation characters', ({ text, expected }) => {
textArea.value = text;
textArea.setSelectionRange(text.length, text.length);
textArea.dispatchEvent(enterEvent);
expect(textArea.value).toEqual(expected);
expect(textArea.selectionStart).toBe(expected.length);
});
// test that when pressing Enter on an empty list item, the empty
// list item text is selected, so that when the Enter propagates,
// it's removed
it.each`
text | expected
${'- item\n- '} | ${'- item\n'}
${'- [ ] item\n- [ ] '} | ${'- [ ] item\n'}
${'- [x] item\n- [x] '} | ${'- [x] item\n'}
2022-06-21 17:19:12 +05:30
${'- [X] item\n- [X] '} | ${'- [X] item\n'}
2022-08-27 11:52:29 +05:30
${'- [~] item\n- [~] '} | ${'- [~] item\n'}
2022-04-04 11:22:00 +05:30
${'- item\n - second\n - '} | ${'- item\n - second\n'}
2022-05-07 20:08:51 +05:30
${'1. item\n2. '} | ${'1. item\n'}
${'1. [ ] item\n2. [ ] '} | ${'1. [ ] item\n'}
${'1. [x] item\n2. [x] '} | ${'1. [x] item\n'}
2022-06-21 17:19:12 +05:30
${'1. [X] item\n2. [X] '} | ${'1. [X] item\n'}
2022-08-27 11:52:29 +05:30
${'1. [~] item\n2. [~] '} | ${'1. [~] item\n'}
2022-05-07 20:08:51 +05:30
${'108. item\n109. '} | ${'108. item\n'}
2022-04-04 11:22:00 +05:30
${'108. item\n - second\n - '} | ${'108. item\n - second\n'}
${'108. item\n 1. second\n 1. '} | ${'108. item\n 1. second\n'}
2023-04-23 21:23:45 +05:30
`('remove list continuation characters', ({ text, expected }) => {
2022-04-04 11:22:00 +05:30
textArea.value = text;
textArea.setSelectionRange(text.length, text.length);
textArea.dispatchEvent(enterEvent);
expect(textArea.value.substr(0, textArea.selectionStart)).toEqual(expected);
expect(textArea.selectionStart).toBe(expected.length);
expect(textArea.selectionEnd).toBe(text.length);
});
2022-05-07 20:08:51 +05:30
// test that when we're in the middle of autocomplete, we don't
// add a new list item
it.each`
text | expected | atwho_selecting
${'- item @'} | ${'- item @'} | ${true}
${'- item @'} | ${'- item @\n- '} | ${false}
`('behaves correctly during autocomplete', ({ text, expected, atwho_selecting }) => {
jest.spyOn($.fn, 'atwho').mockReturnValue(atwho_selecting);
textArea.value = text;
textArea.setSelectionRange(text.length, text.length);
textArea.dispatchEvent(enterEvent);
expect(textArea.value).toEqual(expected);
});
it.each`
text | add_at | expected
${'1. one\n2. two\n3. three'} | ${13} | ${'1. one\n2. two\n2. \n3. three'}
${'108. item\n 5. second\n 6. six\n 7. seven'} | ${36} | ${'108. item\n 5. second\n 6. six\n 6. \n 7. seven'}
`(
'adds correct numbered continuation characters when in middle of list',
({ text, add_at, expected }) => {
textArea.value = text;
textArea.setSelectionRange(add_at, add_at);
textArea.dispatchEvent(enterEvent);
expect(textArea.value).toEqual(expected);
},
);
2023-04-23 21:23:45 +05:30
// test that when pressing Enter in the prefix area of a list item,
// such as between `2.`, we simply propagate the Enter,
// adding a newline. Since the event doesn't actually get propagated
// in the test, check that `defaultPrevented` is false
it.each`
text | add_at | prevented
${'- one\n- two\n- three'} | ${6} | ${false}
${'- one\n- two\n- three'} | ${7} | ${false}
${'- one\n- two\n- three'} | ${8} | ${true}
${'- [ ] one\n- [ ] two\n- [ ] three'} | ${10} | ${false}
${'- [ ] one\n- [ ] two\n- [ ] three'} | ${15} | ${false}
${'- [ ] one\n- [ ] two\n- [ ] three'} | ${16} | ${true}
${'- [ ] one\n - [ ] two\n- [ ] three'} | ${10} | ${false}
${'- [ ] one\n - [ ] two\n- [ ] three'} | ${11} | ${false}
${'- [ ] one\n - [ ] two\n- [ ] three'} | ${17} | ${false}
${'- [ ] one\n - [ ] two\n- [ ] three'} | ${18} | ${true}
${'1. one\n2. two\n3. three'} | ${7} | ${false}
${'1. one\n2. two\n3. three'} | ${9} | ${false}
${'1. one\n2. two\n3. three'} | ${10} | ${true}
`(
'allows a newline to be added if cursor is inside the list marker prefix area',
({ text, add_at, prevented }) => {
textArea.value = text;
textArea.setSelectionRange(add_at, add_at);
textArea.dispatchEvent(enterEvent);
expect(enterEvent.defaultPrevented).toBe(prevented);
},
);
2022-07-16 23:28:13 +05:30
it('does not duplicate a line item for IME characters', () => {
const text = '- 日本語';
const expected = '- 日本語\n- ';
2022-04-04 11:22:00 +05:30
2022-07-16 23:28:13 +05:30
textArea.dispatchEvent(new CompositionEvent('compositionstart'));
2022-04-04 11:22:00 +05:30
textArea.value = text;
2022-07-16 23:28:13 +05:30
// Press enter to end composition
textArea.dispatchEvent(enterEvent);
textArea.dispatchEvent(new CompositionEvent('compositionend'));
2022-04-04 11:22:00 +05:30
textArea.setSelectionRange(text.length, text.length);
2022-07-16 23:28:13 +05:30
// Press enter to make new line
2022-04-04 11:22:00 +05:30
textArea.dispatchEvent(enterEvent);
expect(textArea.value).toEqual(expected);
expect(textArea.selectionStart).toBe(expected.length);
});
2018-12-05 23:21:45 +05:30
2022-11-25 23:54:43 +05:30
it('does nothing if user preference disabled', () => {
const text = '- test';
gon.markdown_automatic_lists = false;
textArea.value = text;
textArea.setSelectionRange(text.length, text.length);
textArea.dispatchEvent(enterEvent);
2022-08-27 11:52:29 +05:30
2022-11-25 23:54:43 +05:30
expect(textArea.value).toEqual(text);
});
2022-08-27 11:52:29 +05:30
});
2022-11-25 23:54:43 +05:30
});
2022-08-27 11:52:29 +05:30
2022-11-25 23:54:43 +05:30
describe('shifting selected lines left or right', () => {
2022-08-27 11:52:29 +05:30
it.each`
selectionStart | selectionEnd | expected | expectedSelectionStart | expectedSelectionEnd
${0} | ${0} | ${' 012\n456\n89'} | ${2} | ${2}
${5} | ${5} | ${'012\n 456\n89'} | ${7} | ${7}
${10} | ${10} | ${'012\n456\n 89'} | ${12} | ${12}
${0} | ${2} | ${' 012\n456\n89'} | ${0} | ${4}
${1} | ${2} | ${' 012\n456\n89'} | ${3} | ${4}
${5} | ${7} | ${'012\n 456\n89'} | ${7} | ${9}
${0} | ${7} | ${' 012\n 456\n89'} | ${0} | ${11}
${2} | ${9} | ${' 012\n 456\n 89'} | ${4} | ${15}
`(
'indents the selected lines two spaces to the right',
({
selectionStart,
selectionEnd,
expected,
expectedSelectionStart,
expectedSelectionEnd,
}) => {
const text = '012\n456\n89';
textArea.value = text;
textArea.setSelectionRange(selectionStart, selectionEnd);
2022-11-25 23:54:43 +05:30
updateTextForToolbarBtn($(indentButton));
2022-08-27 11:52:29 +05:30
expect(textArea.value).toEqual(expected);
expect(textArea.selectionStart).toEqual(expectedSelectionStart);
expect(textArea.selectionEnd).toEqual(expectedSelectionEnd);
},
);
it('indents a blank line two spaces to the right', () => {
textArea.value = '012\n\n89';
textArea.setSelectionRange(4, 4);
2022-11-25 23:54:43 +05:30
updateTextForToolbarBtn($(indentButton));
2022-08-27 11:52:29 +05:30
expect(textArea.value).toEqual('012\n \n89');
expect(textArea.selectionStart).toEqual(6);
expect(textArea.selectionEnd).toEqual(6);
});
it.each`
selectionStart | selectionEnd | expected | expectedSelectionStart | expectedSelectionEnd
${0} | ${0} | ${'234\n 789\n 34'} | ${0} | ${0}
${3} | ${3} | ${'234\n 789\n 34'} | ${1} | ${1}
${7} | ${7} | ${' 234\n789\n 34'} | ${6} | ${6}
${0} | ${3} | ${'234\n 789\n 34'} | ${0} | ${1}
${8} | ${10} | ${' 234\n789\n 34'} | ${7} | ${9}
${14} | ${15} | ${' 234\n 789\n34'} | ${12} | ${13}
${0} | ${15} | ${'234\n789\n34'} | ${0} | ${10}
${3} | ${13} | ${'234\n789\n34'} | ${1} | ${8}
${6} | ${6} | ${' 234\n789\n 34'} | ${6} | ${6}
`(
'outdents the selected lines two spaces to the left',
({
selectionStart,
selectionEnd,
expected,
expectedSelectionStart,
expectedSelectionEnd,
}) => {
const text = ' 234\n 789\n 34';
textArea.value = text;
textArea.setSelectionRange(selectionStart, selectionEnd);
2022-11-25 23:54:43 +05:30
updateTextForToolbarBtn($(outdentButton));
2022-08-27 11:52:29 +05:30
expect(textArea.value).toEqual(expected);
expect(textArea.selectionStart).toEqual(expectedSelectionStart);
expect(textArea.selectionEnd).toEqual(expectedSelectionEnd);
},
);
it('outdent a blank line has no effect', () => {
textArea.value = '012\n\n89';
textArea.setSelectionRange(4, 4);
2022-11-25 23:54:43 +05:30
updateTextForToolbarBtn($(outdentButton));
2022-08-27 11:52:29 +05:30
expect(textArea.value).toEqual('012\n\n89');
expect(textArea.selectionStart).toEqual(4);
expect(textArea.selectionEnd).toEqual(4);
});
it('does not indent if meta is not set', () => {
const indentNoMetaEvent = new KeyboardEvent('keydown', { key: ']' });
const text = '012\n456\n89';
textArea.value = text;
textArea.setSelectionRange(0, 0);
textArea.dispatchEvent(indentNoMetaEvent);
expect(textArea.value).toEqual(text);
});
it.each`
keyEvent
${new KeyboardEvent('keydown', { key: ']', metaKey: false })}
${new KeyboardEvent('keydown', { key: ']', metaKey: true, shiftKey: true })}
${new KeyboardEvent('keydown', { key: ']', metaKey: true, altKey: true })}
${new KeyboardEvent('keydown', { key: ']', metaKey: true, ctrlKey: true })}
`('does not indent if meta is not set', ({ keyEvent }) => {
const text = '012\n456\n89';
textArea.value = text;
textArea.setSelectionRange(0, 0);
textArea.dispatchEvent(keyEvent);
expect(textArea.value).toEqual(text);
});
});
2019-02-15 15:39:39 +05:30
describe('with selection', () => {
2022-05-07 20:08:51 +05:30
let text = 'initial selected value';
let selected = 'selected';
2020-11-24 15:15:51 +05:30
let selectedIndex;
2019-02-15 15:39:39 +05:30
beforeEach(() => {
textArea.value = text;
2020-11-24 15:15:51 +05:30
selectedIndex = text.indexOf(selected);
2019-02-15 15:39:39 +05:30
textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length);
});
it('applies the tag to the selected value', () => {
const tag = '*';
2018-12-05 23:21:45 +05:30
2018-12-13 13:39:08 +05:30
insertMarkdownText({
textArea,
2018-12-05 23:21:45 +05:30
text: textArea.value,
tag,
blockTag: null,
selected,
2019-02-15 15:39:39 +05:30
wrap: true,
2018-12-13 13:39:08 +05:30
});
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
expect(textArea.value).toEqual(text.replace(selected, `*${selected}*`));
2018-12-13 13:39:08 +05:30
2019-02-15 15:39:39 +05:30
// cursor placement should be after selection + 2 tag lengths
expect(textArea.selectionStart).toBe(selectedIndex + selected.length + 2 * tag.length);
2018-12-05 23:21:45 +05:30
});
2019-02-15 15:39:39 +05:30
it('replaces the placeholder in the tag', () => {
2018-12-13 13:39:08 +05:30
insertMarkdownText({
textArea,
2018-12-05 23:21:45 +05:30
text: textArea.value,
2019-02-15 15:39:39 +05:30
tag: '[{text}](url)',
2018-12-05 23:21:45 +05:30
blockTag: null,
selected,
wrap: false,
2018-12-13 13:39:08 +05:30
});
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
expect(textArea.value).toEqual(text.replace(selected, `[${selected}](url)`));
2018-12-05 23:21:45 +05:30
});
2018-12-13 13:39:08 +05:30
2021-04-17 20:07:23 +05:30
describe('surrounds selected text with matching character', () => {
it.each`
key | expected
${'['} | ${`[${selected}]`}
${'*'} | ${`**${selected}**`}
${"'"} | ${`'${selected}'`}
${'_'} | ${`_${selected}_`}
${'`'} | ${`\`${selected}\``}
${'"'} | ${`"${selected}"`}
${'{'} | ${`{${selected}}`}
${'('} | ${`(${selected})`}
${'<'} | ${`<${selected}>`}
`('generates $expected when $key is pressed', ({ key, expected }) => {
const event = new KeyboardEvent('keydown', { key });
gon.markdown_surround_selection = true;
textArea.addEventListener('keydown', keypressNoteText);
textArea.dispatchEvent(event);
expect(textArea.value).toEqual(text.replace(selected, expected));
// cursor placement should be after selection + 2 tag lengths
expect(textArea.selectionStart).toBe(selectedIndex + expected.length);
});
2020-11-24 15:15:51 +05:30
2021-04-17 20:07:23 +05:30
it('does nothing if user preference disabled', () => {
const event = new KeyboardEvent('keydown', { key: '[' });
gon.markdown_surround_selection = false;
textArea.addEventListener('keydown', keypressNoteText);
textArea.dispatchEvent(event);
expect(textArea.value).toEqual(text);
});
2022-08-27 11:52:29 +05:30
it('does nothing if meta is set', () => {
const event = new KeyboardEvent('keydown', { key: '[', metaKey: true });
textArea.addEventListener('keydown', keypressNoteText);
textArea.dispatchEvent(event);
expect(textArea.value).toEqual(text);
});
2020-11-24 15:15:51 +05:30
});
2019-02-15 15:39:39 +05:30
describe('and text to be selected', () => {
const tag = '[{text}](url)';
const select = 'url';
it('selects the text', () => {
insertMarkdownText({
textArea,
text: textArea.value,
tag,
blockTag: null,
selected,
wrap: false,
select,
});
const expectedText = text.replace(selected, `[${selected}](url)`);
expect(textArea.value).toEqual(expectedText);
expect(textArea.selectionStart).toEqual(expectedText.indexOf(select));
expect(textArea.selectionEnd).toEqual(expectedText.indexOf(select) + select.length);
});
2018-12-13 13:39:08 +05:30
2019-02-15 15:39:39 +05:30
it('selects the right text when multiple tags are present', () => {
const initialValue = `${tag} ${tag} ${selected}`;
textArea.value = initialValue;
2020-11-24 15:15:51 +05:30
selectedIndex = initialValue.indexOf(selected);
2019-02-15 15:39:39 +05:30
textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length);
insertMarkdownText({
textArea,
text: textArea.value,
tag,
blockTag: null,
selected,
wrap: false,
select,
});
const expectedText = initialValue.replace(selected, `[${selected}](url)`);
expect(textArea.value).toEqual(expectedText);
expect(textArea.selectionStart).toEqual(expectedText.lastIndexOf(select));
expect(textArea.selectionEnd).toEqual(expectedText.lastIndexOf(select) + select.length);
});
2018-12-13 13:39:08 +05:30
2019-02-15 15:39:39 +05:30
it('should support selected urls', () => {
const expectedUrl = 'http://www.gitlab.com';
const expectedSelectionText = 'text';
const expectedText = `text [${expectedSelectionText}](${expectedUrl}) text`;
const initialValue = `text ${expectedUrl} text`;
textArea.value = initialValue;
2020-11-24 15:15:51 +05:30
selectedIndex = initialValue.indexOf(expectedUrl);
2019-02-15 15:39:39 +05:30
textArea.setSelectionRange(selectedIndex, selectedIndex + expectedUrl.length);
insertMarkdownText({
textArea,
text: textArea.value,
tag,
blockTag: null,
selected: expectedUrl,
wrap: false,
select,
});
expect(textArea.value).toEqual(expectedText);
expect(textArea.selectionStart).toEqual(expectedText.indexOf(expectedSelectionText, 1));
expect(textArea.selectionEnd).toEqual(
expectedText.indexOf(expectedSelectionText, 1) + expectedSelectionText.length,
);
2018-12-13 13:39:08 +05:30
});
2022-05-07 20:08:51 +05:30
2022-10-11 01:57:18 +05:30
it('only converts valid URLs', () => {
const notValidUrl = 'group::label';
const expectedUrlValue = 'url';
const expectedText = `other [${notValidUrl}](${expectedUrlValue}) text`;
const initialValue = `other ${notValidUrl} text`;
textArea.value = initialValue;
selectedIndex = initialValue.indexOf(notValidUrl);
textArea.setSelectionRange(selectedIndex, selectedIndex + notValidUrl.length);
insertMarkdownText({
textArea,
text: textArea.value,
tag,
blockTag: null,
selected: notValidUrl,
wrap: false,
select,
});
expect(textArea.value).toEqual(expectedText);
expect(textArea.selectionStart).toEqual(expectedText.indexOf(expectedUrlValue, 1));
expect(textArea.selectionEnd).toEqual(
expectedText.indexOf(expectedUrlValue, 1) + expectedUrlValue.length,
);
});
2022-05-07 20:08:51 +05:30
it('adds block tags on line above and below selection', () => {
selected = 'this text\nis multiple\nlines';
text = `before \n${selected}\nafter `;
textArea.value = text;
selectedIndex = text.indexOf(selected);
textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length);
insertMarkdownText({
textArea,
text,
tag: '',
blockTag: '***',
selected,
wrap: true,
});
expect(textArea.value).toEqual(`before \n***\n${selected}\n***\nafter `);
});
it('removes block tags on line above and below selection', () => {
selected = 'this text\nis multiple\nlines';
text = `before \n***\n${selected}\n***\nafter `;
textArea.value = text;
selectedIndex = text.indexOf(selected);
textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length);
insertMarkdownText({
textArea,
text,
tag: '',
blockTag: '***',
selected,
wrap: true,
});
expect(textArea.value).toEqual(`before \n${selected}\nafter `);
});
2019-02-15 15:39:39 +05:30
});
});
});
2021-09-30 23:02:18 +05:30
describe('Source Editor', () => {
2020-07-28 23:09:34 +05:30
let editor;
beforeEach(() => {
editor = {
getSelection: jest.fn().mockReturnValue({
startLineNumber: 1,
startColumn: 1,
endLineNumber: 2,
endColumn: 2,
}),
getValue: jest.fn().mockReturnValue('this is text \n in two lines'),
selectWithinSelection: jest.fn(),
replaceSelectedText: jest.fn(),
moveCursor: jest.fn(),
};
});
it('replaces selected text', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: '',
wrap: false,
editor,
});
expect(editor.replaceSelectedText).toHaveBeenCalled();
});
it('adds block tags on line above and below selection', () => {
const selected = 'this text \n is multiple \n lines';
const text = `before \n ${selected} \n after`;
insertMarkdownText({
text,
tag: '',
blockTag: '***',
selected,
wrap: true,
editor,
});
expect(editor.replaceSelectedText).toHaveBeenCalledWith(`***\n${selected}\n***\n`, undefined);
});
2022-05-07 20:08:51 +05:30
it('removes block tags on line above and below selection', () => {
const selected = 'this text\nis multiple\nlines';
const text = `before\n***\n${selected}\n***\nafter`;
editor.getSelection = jest.fn().mockReturnValue({
startLineNumber: 2,
startColumn: 1,
endLineNumber: 4,
endColumn: 2,
setSelectionRange: jest.fn(),
});
insertMarkdownText({
text,
tag: '',
blockTag: '***',
selected,
wrap: true,
editor,
});
expect(editor.replaceSelectedText).toHaveBeenCalledWith(`${selected}\n`, undefined);
});
it('uses editor to navigate back tag length when nothing is selected', () => {
2020-07-28 23:09:34 +05:30
editor.getSelection = jest.fn().mockReturnValue({
startLineNumber: 1,
startColumn: 1,
endLineNumber: 1,
endColumn: 1,
});
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: '',
wrap: true,
editor,
});
expect(editor.moveCursor).toHaveBeenCalledWith(-1);
});
2022-05-07 20:08:51 +05:30
it('editor does not navigate back when there is selected text', () => {
2020-07-28 23:09:34 +05:30
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: 'foobar',
wrap: true,
editor,
});
expect(editor.selectWithinSelection).not.toHaveBeenCalled();
});
});
2018-03-17 18:26:18 +05:30
});