text_markdown_spec.js 6.39 KB
Newer Older
1
import { insertMarkdownText } from '~/lib/utils/text_markdown';
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

describe('init markdown', () => {
  let textArea;

  beforeAll(() => {
    textArea = document.createElement('textarea');
    document.querySelector('body').appendChild(textArea);
    textArea.focus();
  });

  afterAll(() => {
    textArea.parentNode.removeChild(textArea);
  });

  describe('without selection', () => {
    it('inserts the tag on an empty line', () => {
      const initialValue = '';

      textArea.value = initialValue;
      textArea.selectionStart = 0;
      textArea.selectionEnd = 0;

Mike Greiling's avatar
Mike Greiling committed
24 25 26 27 28 29 30 31
      insertMarkdownText({
        textArea,
        text: textArea.value,
        tag: '*',
        blockTag: null,
        selected: '',
        wrap: false,
      });
32 33 34 35 36 37 38 39 40 41

      expect(textArea.value).toEqual(`${initialValue}* `);
    });

    it('inserts the tag on a new line if the current one is not empty', () => {
      const initialValue = 'some text';

      textArea.value = initialValue;
      textArea.setSelectionRange(initialValue.length, initialValue.length);

Mike Greiling's avatar
Mike Greiling committed
42 43 44 45 46 47 48 49
      insertMarkdownText({
        textArea,
        text: textArea.value,
        tag: '*',
        blockTag: null,
        selected: '',
        wrap: false,
      });
50 51 52 53 54 55 56 57 58 59

      expect(textArea.value).toEqual(`${initialValue}\n* `);
    });

    it('inserts the tag on the same line if the current line only contains spaces', () => {
      const initialValue = '  ';

      textArea.value = initialValue;
      textArea.setSelectionRange(initialValue.length, initialValue.length);

Mike Greiling's avatar
Mike Greiling committed
60 61 62 63 64 65 66 67
      insertMarkdownText({
        textArea,
        text: textArea.value,
        tag: '*',
        blockTag: null,
        selected: '',
        wrap: false,
      });
68 69 70 71 72 73 74 75 76 77

      expect(textArea.value).toEqual(`${initialValue}* `);
    });

    it('inserts the tag on the same line if the current line only contains tabs', () => {
      const initialValue = '\t\t\t';

      textArea.value = initialValue;
      textArea.setSelectionRange(initialValue.length, initialValue.length);

Mike Greiling's avatar
Mike Greiling committed
78 79 80 81 82 83 84 85
      insertMarkdownText({
        textArea,
        text: textArea.value,
        tag: '*',
        blockTag: null,
        selected: '',
        wrap: false,
      });
86 87 88

      expect(textArea.value).toEqual(`${initialValue}* `);
    });
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

    it('places the cursor inside the tags', () => {
      const start = 'lorem ';
      const end = ' ipsum';
      const tag = '*';

      textArea.value = `${start}${end}`;
      textArea.setSelectionRange(start.length, start.length);

      insertMarkdownText({
        textArea,
        text: textArea.value,
        tag,
        blockTag: null,
        selected: '',
        wrap: true,
      });

      expect(textArea.value).toEqual(`${start}**${end}`);

      // cursor placement should be between tags
      expect(textArea.selectionStart).toBe(start.length + tag.length);
    });
112
  });
113 114 115 116 117 118 119 120 121 122 123

  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', () => {
124 125 126
      const selectedIndex = text.indexOf(selected);
      const tag = '*';

Mike Greiling's avatar
Mike Greiling committed
127 128 129
      insertMarkdownText({
        textArea,
        text: textArea.value,
130
        tag,
Mike Greiling's avatar
Mike Greiling committed
131 132 133 134
        blockTag: null,
        selected,
        wrap: true,
      });
135 136

      expect(textArea.value).toEqual(text.replace(selected, `*${selected}*`));
137 138 139

      // cursor placement should be after selection + 2 tag lengths
      expect(textArea.selectionStart).toBe(selectedIndex + selected.length + 2 * tag.length);
140 141 142
    });

    it('replaces the placeholder in the tag', () => {
Mike Greiling's avatar
Mike Greiling committed
143 144 145 146 147 148 149 150
      insertMarkdownText({
        textArea,
        text: textArea.value,
        tag: '[{text}](url)',
        blockTag: null,
        selected,
        wrap: false,
      });
151 152 153 154 155 156 157 158 159

      expect(textArea.value).toEqual(text.replace(selected, `[${selected}](url)`));
    });

    describe('and text to be selected', () => {
      const tag = '[{text}](url)';
      const select = 'url';

      it('selects the text', () => {
Mike Greiling's avatar
Mike Greiling committed
160 161
        insertMarkdownText({
          textArea,
162 163 164 165 166
          text: textArea.value,
          tag,
          blockTag: null,
          selected,
          wrap: false,
Mike Greiling's avatar
Mike Greiling committed
167 168
          select,
        });
169 170

        const expectedText = text.replace(selected, `[${selected}](url)`);
171

172 173 174 175 176 177 178 179 180 181
        expect(textArea.value).toEqual(expectedText);
        expect(textArea.selectionStart).toEqual(expectedText.indexOf(select));
        expect(textArea.selectionEnd).toEqual(expectedText.indexOf(select) + select.length);
      });

      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);
Mike Greiling's avatar
Mike Greiling committed
182 183
        insertMarkdownText({
          textArea,
184 185 186 187 188
          text: textArea.value,
          tag,
          blockTag: null,
          selected,
          wrap: false,
Mike Greiling's avatar
Mike Greiling committed
189 190
          select,
        });
191 192

        const expectedText = initialValue.replace(selected, `[${selected}](url)`);
193

194 195 196 197
        expect(textArea.value).toEqual(expectedText);
        expect(textArea.selectionStart).toEqual(expectedText.lastIndexOf(select));
        expect(textArea.selectionEnd).toEqual(expectedText.lastIndexOf(select) + select.length);
      });
198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224

      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,
        );
      });
225 226
    });
  });
227
});