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

393 lines
11 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import { insertMarkdownText } from '~/lib/utils/text_markdown';
2018-03-17 18:26:18 +05:30
describe('init markdown', () => {
let textArea;
beforeAll(() => {
textArea = document.createElement('textarea');
document.querySelector('body').appendChild(textArea);
textArea.focus();
});
afterAll(() => {
textArea.parentNode.removeChild(textArea);
});
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
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
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
});
2018-12-05 23:21:45 +05:30
});
2019-02-15 15:39:39 +05:30
describe('with selection', () => {
const text = 'initial selected value';
const selected = 'selected';
beforeEach(() => {
textArea.value = text;
const selectedIndex = text.indexOf(selected);
textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length);
});
it('applies the tag to the selected value', () => {
const selectedIndex = text.indexOf(selected);
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
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;
const selectedIndex = initialValue.indexOf(selected);
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;
const selectedIndex = initialValue.indexOf(expectedUrl);
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
});
2019-02-15 15:39:39 +05:30
});
});
});
describe('Ace Editor', () => {
let editor;
beforeEach(() => {
editor = {
2020-07-28 23:09:34 +05:30
getSelectionRange: jest.fn().mockReturnValue({
2019-02-15 15:39:39 +05:30
start: 0,
end: 0,
}),
2020-07-28 23:09:34 +05:30
getValue: jest.fn().mockReturnValue('this is text \n in two lines'),
insert: jest.fn(),
navigateLeft: jest.fn(),
2019-02-15 15:39:39 +05:30
};
});
it('uses ace editor insert text when editor is passed in', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: '',
wrap: false,
editor,
});
expect(editor.insert).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,
2018-12-13 13:39:08 +05:30
});
2019-02-15 15:39:39 +05:30
expect(editor.insert).toHaveBeenCalledWith(`***\n${selected}\n***`);
});
it('uses ace editor to navigate back tag length when nothing is selected', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: '',
wrap: true,
editor,
});
expect(editor.navigateLeft).toHaveBeenCalledWith(1);
});
it('ace editor does not navigate back when there is selected text', () => {
insertMarkdownText({
text: editor.getValue,
tag: '*',
blockTag: null,
selected: 'foobar',
wrap: true,
editor,
});
expect(editor.navigateLeft).not.toHaveBeenCalled();
2018-12-05 23:21:45 +05:30
});
});
2020-07-28 23:09:34 +05:30
describe('Editor Lite', () => {
let editor;
let origGon;
beforeEach(() => {
origGon = window.gon;
window.gon = {
features: {
monacoBlobs: true,
},
};
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(),
};
});
afterEach(() => {
window.gon = origGon;
});
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);
});
it('uses ace editor to navigate back tag length when nothing is selected', () => {
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);
});
it('ace editor does not navigate back when there is selected text', () => {
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
});