forgejo/tests/e2e/markdown-editor.test.e2e.ts

// @watch start
// web_src/js/features/comp/ComboMarkdownEditor.js
// web_src/css/editor/combomarkdowneditor.css
// templates/shared/combomarkdowneditor.tmpl
// @watch end

import {expect} from '@playwright/test';
import {test, load_logged_in_context, login_user} from './utils_e2e.ts';

test.beforeAll(async ({browser}, workerInfo) => {
  await login_user(browser, workerInfo, 'user2');
});

test('Markdown image preview behaviour', async ({browser}, workerInfo) => {
  test.skip(workerInfo.project.name === 'Mobile Safari', 'Flaky behaviour on mobile safari;');

  const context = await load_logged_in_context(browser, workerInfo, 'user2');

  // Editing the root README.md file for image preview
  const editPath = '/user2/repo1/src/branch/master/README.md';

  const page = await context.newPage();
  const response = await page.goto(editPath, {waitUntil: 'domcontentloaded'});
  expect(response?.status()).toBe(200);

  // Click 'Edit file' tab
  await page.locator('[data-tooltip-content="Edit file"]').click();

  // This yields the monaco editor
  const editor = page.getByRole('presentation').nth(0);
  await editor.click();
  // Clear all the content
  await page.keyboard.press('ControlOrMeta+KeyA');
  // Add the image
  await page.keyboard.type('![Logo of Forgejo](./assets/logo.svg "Logo of Forgejo")');

  // Click 'Preview' tab
  await page.locator('a[data-tab="preview"]').click();

  // Check for the image preview via the expected attribute
  const preview = page.locator('div[data-tab="preview"] p[dir="auto"] a');
  await expect(preview).toHaveAttribute('href', 'http://localhost:3003/user2/repo1/media/branch/master/assets/logo.svg');
});

test('markdown indentation', async ({browser}, workerInfo) => {
  const context = await load_logged_in_context(browser, workerInfo, 'user2');

  const initText = `* first\n* second\n* third\n* last`;

  const page = await context.newPage();
  const response = await page.goto('/user2/repo1/issues/new');
  expect(response?.status()).toBe(200);

  const textarea = page.locator('textarea[name=content]');
  const tab = '    ';
  const indent = page.locator('button[data-md-action="indent"]');
  const unindent = page.locator('button[data-md-action="unindent"]');
  await textarea.fill(initText);
  await textarea.click(); // Tab handling is disabled until pointer event or input.

  // Indent, then unindent first line
  await textarea.focus();
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(0, 0));
  await indent.click();
  await expect(textarea).toHaveValue(`${tab}* first\n* second\n* third\n* last`);
  await unindent.click();
  await expect(textarea).toHaveValue(initText);

  // Indent second line while somewhere inside of it
  await textarea.focus();
  await textarea.press('ArrowDown');
  await textarea.press('ArrowRight');
  await textarea.press('ArrowRight');
  await indent.click();
  await expect(textarea).toHaveValue(`* first\n${tab}* second\n* third\n* last`);

  // Subsequently, select a chunk of 2nd and 3rd line and indent both, preserving the cursor position in relation to text
  await textarea.focus();
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.indexOf('cond'), it.value.indexOf('hird')));
  await indent.click();
  const lines23 = `* first\n${tab}${tab}* second\n${tab}* third\n* last`;
  await expect(textarea).toHaveValue(lines23);
  await expect(textarea).toHaveJSProperty('selectionStart', lines23.indexOf('cond'));
  await expect(textarea).toHaveJSProperty('selectionEnd', lines23.indexOf('hird'));

  // Then unindent twice, erasing all indents.
  await unindent.click();
  await expect(textarea).toHaveValue(`* first\n${tab}* second\n* third\n* last`);
  await unindent.click();
  await expect(textarea).toHaveValue(initText);

  // Indent and unindent with cursor at the end of the line
  await textarea.focus();
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.indexOf('cond'), it.value.indexOf('cond')));
  await textarea.press('End');
  await indent.click();
  await expect(textarea).toHaveValue(`* first\n${tab}* second\n* third\n* last`);
  await unindent.click();
  await expect(textarea).toHaveValue(initText);

  // Check that Tab does work after input
  await textarea.focus();
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
  await textarea.press('Shift+Enter'); // Avoid triggering the prefix continuation feature
  await textarea.pressSequentially('* least');
  await indent.click();
  await expect(textarea).toHaveValue(`* first\n* second\n* third\n* last\n${tab}* least`);

  // Check that partial indents are cleared
  await textarea.focus();
  await textarea.fill(initText);
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.indexOf('* second'), it.value.indexOf('* second')));
  await textarea.pressSequentially('  ');
  await unindent.click();
  await expect(textarea).toHaveValue(initText);
});

test('markdown list continuation', async ({browser}, workerInfo) => {
  const context = await load_logged_in_context(browser, workerInfo, 'user2');

  const initText = `* first\n* second\n* third\n* last`;

  const page = await context.newPage();
  const response = await page.goto('/user2/repo1/issues/new');
  expect(response?.status()).toBe(200);

  const textarea = page.locator('textarea[name=content]');
  const tab = '    ';
  const indent = page.locator('button[data-md-action="indent"]');
  await textarea.fill(initText);

  // Test continuation of '* ' prefix
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.indexOf('cond'), it.value.indexOf('cond')));
  await textarea.press('End');
  await textarea.press('Enter');
  await textarea.pressSequentially('middle');
  await expect(textarea).toHaveValue(`* first\n* second\n* middle\n* third\n* last`);

  // Test continuation of '    * ' prefix
  await indent.click();
  await textarea.press('Enter');
  await textarea.pressSequentially('muddle');
  await expect(textarea).toHaveValue(`* first\n* second\n${tab}* middle\n${tab}* muddle\n* third\n* last`);

  // Test breaking in the middle of a line
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.lastIndexOf('ddle'), it.value.lastIndexOf('ddle')));
  await textarea.pressSequentially('tate');
  await textarea.press('Enter');
  await textarea.pressSequentially('me');
  await expect(textarea).toHaveValue(`* first\n* second\n${tab}* middle\n${tab}* mutate\n${tab}* meddle\n* third\n* last`);

  // Test not triggering when Shift held
  await textarea.fill(initText);
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
  await textarea.press('Shift+Enter');
  await textarea.press('Enter');
  await textarea.pressSequentially('...but not least');
  await expect(textarea).toHaveValue(`* first\n* second\n* third\n* last\n\n...but not least`);

  // Test continuation of ordered list
  await textarea.fill(`1. one\n2. two`);
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
  await textarea.press('Enter');
  await textarea.pressSequentially('three');
  await expect(textarea).toHaveValue(`1. one\n2. two\n3. three`);

  // Test continuation of alternative ordered list syntax
  await textarea.fill(`1) one\n2) two`);
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
  await textarea.press('Enter');
  await textarea.pressSequentially('three');
  await expect(textarea).toHaveValue(`1) one\n2) two\n3) three`);

  // Test continuation of blockquote
  await textarea.fill(`> knowledge is power`);
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
  await textarea.press('Enter');
  await textarea.pressSequentially('france is bacon');
  await expect(textarea).toHaveValue(`> knowledge is power\n> france is bacon`);

  // Test continuation of checklists
  await textarea.fill(`- [ ] have a problem\n- [x] create a solution`);
  await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
  await textarea.press('Enter');
  await textarea.pressSequentially('write a test');
  await expect(textarea).toHaveValue(`- [ ] have a problem\n- [x] create a solution\n- [ ] write a test`);

  // Test all conceivable syntax (except ordered lists)
  const prefixes = [
    '- ', // A space between the bullet and the content is required.
    ' - ', // I have seen single space in front of -/* being used and even recommended, I think.
    '* ',
    '+ ',
    '  ',
    '    ',
    '    - ',
    '\t',
    '\t\t* ',
    '> ',
    '> > ',
    '- [ ] ',
    '- [ ]', // This does seem to render, so allow.
    '* [ ] ',
    '+ [ ] ',
  ];
  for (const prefix of prefixes) {
    await textarea.fill(`${prefix}one`);
    await textarea.evaluate((it:HTMLTextAreaElement) => it.setSelectionRange(it.value.length, it.value.length));
    await textarea.press('Enter');
    await textarea.pressSequentially('two');
    await expect(textarea).toHaveValue(`${prefix}one\n${prefix}two`);
  }
});

test('markdown insert table', async ({browser}, workerInfo) => {
  const context = await load_logged_in_context(browser, workerInfo, 'user2');

  const page = await context.newPage();
  const response = await page.goto('/user2/repo1/issues/new');
  expect(response?.status()).toBe(200);

  const newTableButton = page.locator('button[data-md-action="new-table"]');
  await newTableButton.click();

  const newTableModal = page.locator('div[data-markdown-table-modal-id="0"]');
  await expect(newTableModal).toBeVisible();

  await newTableModal.locator('input[name="table-rows"]').fill('3');
  await newTableModal.locator('input[name="table-columns"]').fill('2');

  await newTableModal.locator('button[data-selector-name="ok-button"]').click();

  await expect(newTableModal).toBeHidden();

  const textarea = page.locator('textarea[name=content]');
  await expect(textarea).toHaveValue('| Header  | Header  |\n|---------|---------|\n| Content | Content |\n| Content | Content |\n| Content | Content |\n');
});