ep_comments_page 11.0.25 → 11.0.27

package/locales/be-tarask.json

@@ -0,0 +1,23 @@
+{
+	"@metadata": {
+		"authors": [
+			"Ucukor"
+		]
+	},
+	"ep_comments_page.comment": "Камэнтар",
+	"ep_comments_page.comments": "Камэнтары",
+	"ep_comments_page.delete_comment.title": "Выдаліць гэты камэнтар",
+	"ep_comments_page.edit_comment.title": "Рэдагаваць гэты камэнтар",
+	"ep_comments_page.show_comments": "Паказаць камэнтары",
+	"ep_comments_page.comments_template.suggested_change": "Прапанаваная зьмена",
+	"ep_comments_page.comments_template.from": "Ад",
+	"ep_comments_page.comments_template.accept_change.value": "Прыняць зьмены",
+	"ep_comments_page.comments_template.revert_change.value": "Адкаціць зьмены",
+	"ep_comments_page.comments_template.to": "Да",
+	"ep_comments_page.comments_template.comment.value": "Камэнтар",
+	"ep_comments_page.comments_template.cancel.value": "Скасаваць",
+	"ep_comments_page.comments_template.reply.value": "Адказаць",
+	"ep_comments_page.comments_template.reply.placeholder": "Адказаць",
+	"ep_comments_page.comments_template.edit_comment.save": "захаваць",
+	"ep_comments_page.comments_template.edit_comment.cancel": "скасаваць"
+}

package/locales/fr.json

@@ -1,6 +1,7 @@
 {
 	"@metadata": {
 		"authors": [
+			"Chpol",
 			"Meaz",
 			"Verdy p"
 		]
@@ -18,6 +19,7 @@
 	"ep_comments_page.comments_template.accept_change.value": "Appliquer la proposition",
 	"ep_comments_page.comments_template.revert_change.value": "Annuler la proposition",
 	"ep_comments_page.comments_template.suggested_change_from": "Propose de remplacer « {{changeFrom}} » par « {{changeTo}} »",
+	"ep_comments_page.comments_template.suggested_change_from_label": "Modification suggérée par",
 	"ep_comments_page.comments_template.suggest_change_from": "Remplacer « {{changeFrom}} » par",
 	"ep_comments_page.comments_template.to": "Par",
 	"ep_comments_page.comments_template.include_suggestion": "Inclure la modification suggérée",

package/locales/nl.json

@@ -18,6 +18,7 @@
 	"ep_comments_page.comments_template.accept_change.value": "Accepteer wijziging",
 	"ep_comments_page.comments_template.revert_change.value": "Draai wijziging terug",
 	"ep_comments_page.comments_template.suggested_change_from": "Voorgestelde wijziging van \"{{changeFrom}}\" in \"{{changeTo}}\"",
+	"ep_comments_page.comments_template.suggested_change_from_label": "Voorgestelde wijziging van",
 	"ep_comments_page.comments_template.suggest_change_from": "Voorgestelde wijziging van \"{{changeFrom}}\" in",
 	"ep_comments_page.comments_template.to": "Naar",
 	"ep_comments_page.comments_template.include_suggestion": "Voeg voorgestelde wijziging toe",

package/locales/zh-hans.json

@@ -1,6 +1,7 @@
 {
 	"@metadata": {
 		"authors": [
+			"GuoPC",
 			"HellojoeAoPS",
 			"TsuyaMarisa",
 			"列维劳德"
@@ -19,6 +20,7 @@
 	"ep_comments_page.comments_template.accept_change.value": "接受更改",
 	"ep_comments_page.comments_template.revert_change.value": "恢复更改",
 	"ep_comments_page.comments_template.suggested_change_from": "建议从“{{changeFrom}}”更改为“{{changeTo}}”",
+	"ep_comments_page.comments_template.suggested_change_from_label": "建议的更改来自",
 	"ep_comments_page.comments_template.suggest_change_from": "建议从“{{changeFrom}}”更改为",
 	"ep_comments_page.comments_template.to": "至",
 	"ep_comments_page.comments_template.include_suggestion": "包括建议的更改",

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Adds comments on sidebar and link it to the text.  For no-skin use ep_page_view.",
   "name": "ep_comments_page",
-  "version": "11.0.25",
+  "version": "11.0.27",
   "author": {
     "name": "Nicolas Lescop",
     "email": "limplementeur@gmail.com"

package/static/tests/frontend-new/helper/comments.ts

@@ -0,0 +1,188 @@
+import {Frame, Locator, Page, expect} from '@playwright/test';
+import {getPadBody, getPadOuter, goToNewPad, goToPad}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+
+// Reproduces the legacy `utils.aNewPad`: open a new pad, then wait for
+// ep_comments_page's postAceInit to finish (initDone is a Promise that
+// resolves once plugin init is complete).
+export const aNewCommentsPad = async (page: Page): Promise<string> => {
+  const padId = await goToNewPad(page);
+  await waitForCommentsInit(page);
+  return padId;
+};
+
+export const reopenCommentsPad = async (page: Page, padId: string): Promise<void> => {
+  await goToPad(page, padId);
+  await waitForCommentsInit(page);
+};
+
+export const waitForCommentsInit = async (page: Page): Promise<void> => {
+  await expect.poll(async () => page.evaluate(async () => {
+    const w = window as any;
+    const ep = w.pad && w.pad.plugins && w.pad.plugins.ep_comments_page;
+    if (!ep || !ep.initDone) return false;
+    await ep.initDone;
+    return true;
+  }), {timeout: 60_000}).toBe(true);
+};
+
+// Returns the inner pad body (Locator).
+export const inner = async (page: Page): Promise<Locator> => getPadBody(page);
+
+// Returns the outer iframe Frame (where #commentIcons / sidebar comments live).
+export const outer = async (page: Page): Promise<Frame> => getPadOuter(page);
+
+export const enlargeScreen = async (page: Page, maxWidth = '3000px'): Promise<void> => {
+  await page.evaluate((mw) => {
+    const ifr = document.querySelector<HTMLIFrameElement>('#iframe-container iframe');
+    if (ifr) ifr.style.maxWidth = mw;
+  }, maxWidth);
+};
+
+export const restoreScreen = async (page: Page): Promise<void> => {
+  await page.evaluate(() => {
+    const ifr = document.querySelector<HTMLIFrameElement>('#iframe-container iframe');
+    if (ifr) ifr.style.maxWidth = '';
+  });
+};
+
+// Replace pad content with provided lines (joined with \n). Mirrors the
+// legacy cleanPad + sendkeys pattern.
+export const setPadLines = async (page: Page, lines: string[]): Promise<void> => {
+  const body = await getPadBody(page);
+  await body.click();
+  await page.keyboard.press('Control+A');
+  await page.keyboard.press('Delete');
+  // Wait for first line to be empty.
+  await expect.poll(async () => body.locator('div').count()).toBeGreaterThan(0);
+  for (let i = 0; i < lines.length; i++) {
+    await page.keyboard.type(lines[i]);
+    if (i < lines.length - 1) await page.keyboard.press('Enter');
+  }
+  await expect.poll(async () => body.locator('div').count())
+      .toBeGreaterThanOrEqual(lines.length);
+};
+
+// Select all text on a given line index (0-based). Implemented by triple-click
+// on the corresponding div, which selects the line content.
+export const selectLine = async (page: Page, lineIndex: number): Promise<void> => {
+  const body = await getPadBody(page);
+  const line = body.locator('div').nth(lineIndex);
+  await line.click();
+  // Triple-click to select the entire line content.
+  await line.click({clickCount: 3});
+};
+
+// Clicks the toolbar Add Comment button (lives in the chrome page).
+export const clickAddCommentButton = async (page: Page): Promise<void> => {
+  await page.locator('.addComment').first().click();
+};
+
+export const fillCommentForm = async (
+  page: Page,
+  commentText: string,
+  suggestion?: string,
+): Promise<void> => {
+  const field = page.locator('textarea.comment-content');
+  await field.fill(commentText);
+  if (suggestion !== undefined) {
+    await page.locator('#newComment .suggestion-checkbox').first().click();
+    await page.locator('textarea.to-value').fill(suggestion);
+  }
+};
+
+export const submitNewCommentForm = async (page: Page): Promise<void> => {
+  await page.locator('.comment-buttons input[type=submit]').first().click();
+};
+
+export const getCommentIdOfLine = async (
+  page: Page, lineIndex: number,
+): Promise<string | null> => {
+  const body = await getPadBody(page);
+  const cls = await body.locator('div').nth(lineIndex).locator('.comment').first()
+      .getAttribute('class').catch(() => null);
+  if (!cls) return null;
+  const m = /(?:^| )(c-[A-Za-z0-9]*)/.exec(cls);
+  return m ? m[1] : null;
+};
+
+export const waitForCommentOnLine = async (page: Page, lineIndex: number): Promise<string> => {
+  await expect.poll(async () => (await getCommentIdOfLine(page, lineIndex)) != null,
+      {timeout: 30_000}).toBe(true);
+  return (await getCommentIdOfLine(page, lineIndex))!;
+};
+
+export const commentIconsEnabled = async (page: Page): Promise<boolean> => {
+  const o = await getPadOuter(page);
+  return (await o.locator('#commentIcons').count()) > 0;
+};
+
+export const displayCommentAsIcon = async (page: Page): Promise<boolean> => {
+  return await page.evaluate(() => Boolean((window as any).clientVars?.displayCommentAsIcon));
+};
+
+export const highlightSelectedTextEnabled = async (page: Page): Promise<boolean> => {
+  return await page.evaluate(() => Boolean((window as any).clientVars?.highlightSelectedText));
+};
+
+// Add a comment to the given line, optionally with a suggested change.
+// Returns the new comment id.
+export const addCommentToLine = async (
+  page: Page,
+  lineIndex: number,
+  text: string,
+  suggestion?: string,
+): Promise<string> => {
+  await selectLine(page, lineIndex);
+  await clickAddCommentButton(page);
+  await fillCommentForm(page, text, suggestion);
+  await submitNewCommentForm(page);
+  return await waitForCommentOnLine(page, lineIndex);
+};
+
+export const addReplyToLine = async (
+  page: Page,
+  lineIndex: number,
+  replyText: string,
+  withSuggestion = false,
+  suggestionText?: string,
+): Promise<void> => {
+  const o = await getPadOuter(page);
+  const commentId = await getCommentIdOfLine(page, lineIndex);
+  const existing = await o.locator('.sidebar-comment-reply').count();
+
+  if (await commentIconsEnabled(page)) {
+    await o.locator(`#commentIcons #icon-${commentId}`).first().click();
+  }
+
+  await o.locator('.comment-content').first().fill(replyText);
+  if (withSuggestion) {
+    await o.locator('.suggestion-checkbox').first().click();
+    if (suggestionText !== undefined) {
+      await o.locator('textarea.to-value').first().fill(suggestionText);
+    }
+  }
+  await o.locator("form.new-comment input[type='submit']").first().click();
+  await expect.poll(async () => o.locator('.sidebar-comment-reply').count())
+      .toBe(existing + 1);
+};
+
+// Open Etherpad settings, toggle Show Comments to desired state, close settings.
+export const chooseToShowComments = async (
+  page: Page, shouldShow: boolean,
+): Promise<void> => {
+  const settings = page.locator('.buttonicon-settings');
+  await settings.click();
+  const showComments = page.locator('#options-comments');
+  const checked = await showComments.isChecked();
+  if (checked !== shouldShow) await showComments.click();
+  await settings.click();
+};
+
+// Change Etherpad UI language.
+export const changeLanguageTo = async (page: Page, lang: string): Promise<void> => {
+  const settings = page.locator('.buttonicon-settings');
+  await settings.click();
+  await page.locator('#languagemenu').selectOption(lang);
+  await settings.click();
+};

package/static/tests/frontend-new/specs/commentDelete.spec.ts

@@ -0,0 +1,57 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  addCommentToLine,
+  addReplyToLine,
+  aNewCommentsPad,
+  enlargeScreen,
+  reopenCommentsPad,
+  setPadLines,
+} from '../helper/comments';
+
+const textOfComment = 'original comment';
+const textOfReply = 'original reply';
+const FIRST_LINE = 0;
+
+test.describe('ep_comments_page - Comment Delete', () => {
+  let padId: string;
+
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    padId = await aNewCommentsPad(page);
+    await enlargeScreen(page);
+    await setPadLines(page, ['something', ' anything']);
+    await addCommentToLine(page, FIRST_LINE, textOfComment);
+    await addReplyToLine(page, FIRST_LINE, textOfReply);
+  });
+
+  test.describe('when user presses the delete button on a comment', () => {
+    test('should delete comment', async ({page}) => {
+      const outer = await getPadOuter(page);
+      const inner = await getPadBody(page);
+      await outer.locator('.comment-delete').first().click();
+      await expect.poll(async () => inner.locator('.comment').count()).toBe(0);
+    });
+  });
+
+  test.describe('when user presses the delete button on other users comment', () => {
+    test('should not delete comment', async ({page}) => {
+      // Reload as a fresh user — re-opens the same pad and waits for plugin init.
+      await page.waitForTimeout(500);
+      await reopenCommentsPad(page, padId);
+
+      const outer = await getPadOuter(page);
+      const inner = await getPadBody(page);
+      await expect.poll(async () => outer.locator('.comment-delete').count())
+          .toBeGreaterThan(0);
+      await outer.locator('.comment-delete').first().click();
+
+      // Error gritter shown.
+      await expect.poll(async () =>
+        page.locator('#gritter-container .error').count()).toBeGreaterThan(0);
+      // Comment was not deleted.
+      expect(await inner.locator('.comment').count()).toBeGreaterThan(0);
+    });
+  });
+});

package/static/tests/frontend-new/specs/commentEdit.spec.ts

@@ -0,0 +1,113 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  addCommentToLine,
+  addReplyToLine,
+  aNewCommentsPad,
+  enlargeScreen,
+  reopenCommentsPad,
+  setPadLines,
+} from '../helper/comments';
+
+const textOfComment = 'original comment';
+const textOfReply = 'original reply';
+const FIRST_LINE = 0;
+
+test.describe('ep_comments_page - Comment Edit', () => {
+  let padId: string;
+
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    padId = await aNewCommentsPad(page);
+    await enlargeScreen(page);
+    await setPadLines(page, ['something', ' anything']);
+    await addCommentToLine(page, FIRST_LINE, textOfComment);
+    await addReplyToLine(page, FIRST_LINE, textOfReply);
+  });
+
+  test.describe('when user presses the button edit on a comment', () => {
+    test('should add a comment form', async ({page}) => {
+      const outer = await getPadOuter(page);
+      await outer.locator('.comment-edit').first().click();
+      await expect(outer.locator('.comment-edit-form')).toHaveCount(1);
+    });
+
+    test('should show the original comment text on the edit form', async ({page}) => {
+      const outer = await getPadOuter(page);
+      await outer.locator('.comment-edit').first().click();
+      await expect(outer.locator('.comment-edit-form .comment-edit-text').first())
+          .toHaveText(textOfComment);
+    });
+
+    test('and presses edit button again should not add a new form', async ({page}) => {
+      const outer = await getPadOuter(page);
+      await outer.locator('.comment-edit').first().click();
+      await outer.locator('.comment-edit').first().click();
+      await expect(outer.locator('.comment-edit-form')).toHaveCount(1);
+    });
+
+    test('and presses cancel should remove the edit form', async ({page}) => {
+      const outer = await getPadOuter(page);
+      await outer.locator('.comment-edit').first().click();
+      await outer.locator('.comment-edit-form .comment-edit-cancel').first().click();
+      await expect(outer.locator('.comment-edit-form')).toHaveCount(0);
+    });
+
+    test('and writes a new comment text and presses save should update the comment text',
+        async ({page}) => {
+          const outer = await getPadOuter(page);
+          const updatedText = 'this comment was edited';
+          await outer.locator('.comment-edit').first().click();
+          // Set the new text in the contenteditable edit area.
+          await outer.locator('.comment-edit-form .comment-edit-text').first()
+              .evaluate((el, t) => { (el as HTMLElement).innerText = t; }, updatedText);
+          await outer.locator('.comment-edit-form .comment-edit-submit').first().click();
+          await expect.poll(async () =>
+            (await outer.locator('.comment-text').first().textContent())?.trim())
+              .toBe(updatedText);
+        });
+
+    test('and reloads the page shows the comment text updated', async ({page}) => {
+      const outer = await getPadOuter(page);
+      const updatedText = 'this comment was edited';
+      await outer.locator('.comment-edit').first().click();
+      await outer.locator('.comment-edit-form .comment-edit-text').first()
+          .evaluate((el, t) => { (el as HTMLElement).innerText = t; }, updatedText);
+      await outer.locator('.comment-edit-form .comment-edit-submit').first().click();
+      await expect.poll(async () =>
+        (await outer.locator('.comment-text').first().textContent())?.trim())
+          .toBe(updatedText);
+
+      // Allow time for the change to be persisted, then reload.
+      await page.waitForTimeout(1000);
+      await reopenCommentsPad(page, padId);
+      const outer2 = await getPadOuter(page);
+      await expect.poll(async () =>
+        (await outer2.locator('.comment-text').first().textContent())?.trim(),
+      {timeout: 20_000}).toBe(updatedText);
+    });
+
+    test('new user tries editing should not update the comment text', async ({page}) => {
+      const updatedText2 = 'this comment was edited again';
+      await page.waitForTimeout(500);
+      // Reopen as a "new" user (fresh page load).
+      await reopenCommentsPad(page, padId);
+      const outer = await getPadOuter(page);
+      await expect.poll(async () =>
+        outer.locator('#comments .comment-edit').count()).toBeGreaterThan(0);
+
+      await outer.locator('.comment-edit').first().click();
+      await outer.locator('.comment-edit-form .comment-edit-text').first()
+          .evaluate((el, t) => { (el as HTMLElement).innerText = t; }, updatedText2);
+      await outer.locator('.comment-edit-form .comment-edit-submit').first().click();
+
+      // Error gritter is shown.
+      await expect.poll(async () =>
+        page.locator('#gritter-container .error').count()).toBeGreaterThan(0);
+      // Comment text is not the new text.
+      const got = (await outer.locator('.comment-text').first().textContent())?.trim();
+      expect(got).not.toBe(updatedText2);
+    });
+  });
+});

package/static/tests/frontend-new/specs/commentIcons.spec.ts

@@ -0,0 +1,131 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  aNewCommentsPad,
+  chooseToShowComments,
+  displayCommentAsIcon,
+  enlargeScreen,
+  getCommentIdOfLine,
+  setPadLines,
+  waitForCommentOnLine,
+} from '../helper/comments';
+
+const COMMENT_TEXT = 'This content will receive a comment';
+
+const addCommentNoSelect = async (page: import('@playwright/test').Page, text: string) => {
+  const inner = await getPadBody(page);
+  const before = await inner.locator('.comment').count();
+  await page.locator('.addComment').first().click();
+  await page.locator('textarea.comment-content').fill(text);
+  await page.locator('.comment-buttons input[type=submit]').first().click();
+  await expect.poll(async () => inner.locator('.comment').count())
+      .toBeGreaterThan(before);
+};
+
+test.describe('ep_comments_page - Comment icons', () => {
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    await aNewCommentsPad(page);
+    if (!(await displayCommentAsIcon(page))) test.skip();
+    // Smaller width — legacy used 1000px for icon tests.
+    await enlargeScreen(page, '1000px');
+    await chooseToShowComments(page, true);
+    // Create the initial commented line.
+    await setPadLines(page, [COMMENT_TEXT]);
+    const inner = await getPadBody(page);
+    // Select the line and add comment.
+    await inner.locator('div').first().click({clickCount: 3});
+    await addCommentNoSelect(page, 'My comment');
+    await waitForCommentOnLine(page, 0);
+  });
+
+  test('adds a comment icon on the same height of commented text', async ({page}) => {
+    const inner = await getPadBody(page);
+    const outer = await getPadOuter(page);
+    const commentId = (await getCommentIdOfLine(page, 0))!;
+    const icon = outer.locator(`#commentIcons #icon-${commentId}`);
+    await expect(icon).toHaveCount(1);
+    const iconTop = (await icon.boundingBox())!.y;
+    const textTop = (await inner.locator(`.${commentId}`).first().boundingBox())!.y;
+    // Legacy: icons are +5px down to adjust position.
+    expect(Math.round(iconTop)).toBe(Math.round(textTop + 5));
+  });
+
+  // Legacy was xit('does not show comment icon when commented text is removed')
+  test.skip('does not show comment icon when commented text is removed', async () => {});
+  // Legacy was xit('does not show comment icon when comment is deleted')
+  test.skip('does not show comment icon when comment is deleted', async () => {});
+
+  test('updates comment icon height when commented text is moved to another line',
+      async ({page}) => {
+        const inner = await getPadBody(page);
+        const outer = await getPadOuter(page);
+        const commentId = (await getCommentIdOfLine(page, 0))!;
+
+        await inner.locator('div').first().click();
+        await page.keyboard.press('Home');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('Enter');
+
+        await expect.poll(async () => inner.locator('div').count()).toBeGreaterThan(2);
+        await expect.poll(async () =>
+          outer.locator('#commentIcons .comment-icon').count()).toBeGreaterThan(0);
+
+        const icon = outer.locator(`#commentIcons #icon-${commentId}`);
+        const iconTop = (await icon.boundingBox())!.y;
+        const textTop = (await inner.locator(`.${commentId}`).first().boundingBox())!.y;
+        expect(Math.round(iconTop)).toBe(Math.round(textTop + 5));
+      });
+
+  test('shows comment when user clicks on comment icon', async ({page}) => {
+    const outer = await getPadOuter(page);
+    const commentId = (await getCommentIdOfLine(page, 0))!;
+    await outer.locator(`#commentIcons #icon-${commentId}`).first().click();
+    await expect(outer.locator('#comments .sidebar-comment:visible')).toHaveCount(1);
+  });
+
+  test('hides comment when user clicks on comment icon twice', async ({page}) => {
+    const outer = await getPadOuter(page);
+    const commentId = (await getCommentIdOfLine(page, 0))!;
+    const icon = outer.locator(`#commentIcons #icon-${commentId}`).first();
+    await icon.click();
+    await icon.click();
+    await expect(outer.locator('#comments .sidebar-comment:visible')).toHaveCount(0);
+  });
+
+  test('hides comment when user clicks outside of comment box', async ({page}) => {
+    const outer = await getPadOuter(page);
+    const commentId = (await getCommentIdOfLine(page, 0))!;
+    await outer.locator(`#commentIcons #icon-${commentId}`).first().click();
+    await outer.locator('#outerdocbody').click();
+    await expect(outer.locator('#comments .sidebar-comment:visible')).toHaveCount(0);
+  });
+
+  test('hides 1st, shows 2nd comment when user clicks on one then another icon',
+      async ({page}) => {
+        const inner = await getPadBody(page);
+        const outer = await getPadOuter(page);
+
+        // Add a second line and a second comment.
+        await inner.locator('div').last().click();
+        await page.keyboard.press('End');
+        await page.keyboard.type('Second line');
+        await page.keyboard.press('Enter');
+        await expect.poll(async () => inner.locator('div').count()).toBeGreaterThan(2);
+
+        const second = inner.locator('div').nth(1);
+        await second.click({clickCount: 3});
+        await addCommentNoSelect(page, 'Second Comment');
+        await waitForCommentOnLine(page, 1);
+
+        const id0 = (await getCommentIdOfLine(page, 0))!;
+        const id1 = (await getCommentIdOfLine(page, 1))!;
+        await outer.locator(`#commentIcons #icon-${id0}`).first().click();
+        await outer.locator(`#commentIcons #icon-${id1}`).first().click();
+
+        const visibleText = await outer.locator('#comments .sidebar-comment:visible .comment-text')
+            .first().textContent();
+        expect((visibleText || '').trim()).toBe('Second Comment');
+      });
+});

package/static/tests/frontend-new/specs/commentReply.spec.ts

@@ -0,0 +1,92 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  aNewCommentsPad,
+  chooseToShowComments,
+  commentIconsEnabled,
+  enlargeScreen,
+  getCommentIdOfLine,
+  setPadLines,
+  waitForCommentOnLine,
+} from '../helper/comments';
+
+const createReply = async (page: import('@playwright/test').Page, withSuggestion: boolean) => {
+  const outer = await getPadOuter(page);
+  const commentId = await getCommentIdOfLine(page, 0);
+  const existing = await outer.locator('.sidebar-comment-reply').count();
+  if (await commentIconsEnabled(page)) {
+    await outer.locator(`#commentIcons #icon-${commentId}`).first().click();
+  }
+  await outer.locator('.comment-content').first().fill('My reply');
+  if (withSuggestion) {
+    await outer.locator('.suggestion-checkbox').first().click();
+    await outer.locator('textarea.to-value').first().fill('My suggestion');
+  }
+  await outer.locator("form.new-comment input[type='submit']").first().click();
+  await expect.poll(async () => outer.locator('.sidebar-comment-reply').count())
+      .toBe(existing + 1);
+};
+
+// Faithful 1:1 port — all original tests were xit (skipped) in the legacy spec.
+test.describe('ep_comments_page - Comment Reply', () => {
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    await aNewCommentsPad(page);
+    await chooseToShowComments(page, true);
+    await setPadLines(page, ['This content will receive a comment']);
+    const inner = await getPadBody(page);
+    await inner.locator('div').first().click({clickCount: 3});
+    await page.locator('.addComment').first().click();
+    await page.locator('textarea.comment-content').fill('My comment');
+    const outer = await getPadOuter(page);
+    await outer.locator('.suggestion-checkbox').first().click();
+    await outer.locator('textarea.to-value').first().fill('Change to this suggestion');
+    await page.locator('.comment-buttons input[type=submit]').first().click();
+    await waitForCommentOnLine(page, 0);
+    await enlargeScreen(page, '1000px');
+  });
+
+  test.skip('Ensures a comment can be replied', async ({page}) => {
+    await createReply(page, false);
+  });
+
+  test.skip('Ensures a comment reply can have suggestion', async ({page}) => {
+    await createReply(page, true);
+    const outer = await getPadOuter(page);
+    await expect(outer.locator('.comment-changeTo-form')).toBeVisible();
+  });
+
+  test.skip('Clears the comment reply form after submitting a reply with suggestion',
+      async ({page}) => {
+        await createReply(page, true);
+        const outer = await getPadOuter(page);
+        const replyForm = outer.locator('form.new-comment');
+        expect(await replyForm.locator('.comment-content').textContent()).toBe('');
+        expect(await replyForm.locator('.suggestion-checkbox').isChecked()).toBe(false);
+        expect(await replyForm.locator('.to-value').textContent()).toBe('');
+      });
+
+  test.skip('Replaces the original text with reply suggestion', async ({page}) => {
+    await createReply(page, true);
+    const outer = await getPadOuter(page);
+    const inner = await getPadBody(page);
+    await outer.locator(".sidebar-comment-reply .comment-changeTo-form input[type='submit']")
+        .first().click();
+    await expect.poll(async () =>
+      (await inner.locator('div').first().textContent())?.trim()).toBe('My suggestion');
+  });
+
+  test.skip('Replaces orig with reply sugg. after replacing orig with comment sugg.',
+      async ({page}) => {
+        await createReply(page, true);
+        const outer = await getPadOuter(page);
+        const inner = await getPadBody(page);
+        await outer.locator(".sidebar-comment .comment-changeTo-form input[type='submit']")
+            .first().click();
+        await outer.locator(".sidebar-comment-reply .comment-changeTo-form input[type='submit']")
+            .first().click();
+        await expect.poll(async () =>
+          (await inner.locator('div').first().textContent())?.trim()).toBe('My suggestion');
+      });
+});