ep_comments_page 11.0.25 → 11.0.27

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

@@ -0,0 +1,97 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {aNewCommentsPad} from '../helper/comments';
+
+// Replace pad content with raw HTML and select all (mirrors legacy
+// `$firstTextElement.html(targetText).sendkeys('{selectall}')`).
+const setHtmlAndSelectAll = async (
+  page: import('@playwright/test').Page, html: string,
+) => {
+  const inner = await getPadBody(page);
+  await inner.click();
+  await page.keyboard.press('Control+A');
+  await page.keyboard.press('Delete');
+  // Inject raw HTML into the first line.
+  await inner.evaluate((root, h) => {
+    const first = root.querySelector('div');
+    if (first) first.innerHTML = h;
+  }, html);
+  // Select-all so the addComment button selection covers the inserted content.
+  await inner.click();
+  await page.keyboard.press('Control+A');
+};
+
+const openCommentFormWithSuggestion = async (
+  page: import('@playwright/test').Page, targetText: string,
+) => {
+  await setHtmlAndSelectAll(page, targetText);
+  await page.locator('.addComment').first().click();
+  await expect.poll(async () =>
+    page.locator('#newComment.popup-show .suggestion-checkbox').count()).toBeGreaterThan(0);
+  await page.locator('#newComment.popup-show .suggestion-checkbox').first().click();
+};
+
+test.describe('ep_comments_page - Comment Suggestion', () => {
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    await aNewCommentsPad(page);
+  });
+
+  test('Fills suggestion Change From field when adding a comment with suggestion',
+      async ({page}) => {
+        const targetText =
+            '<span>A</span><ul><li> text with</li><li> line attributes</li></ul>';
+        await openCommentFormWithSuggestion(page, targetText);
+        const text = await page.locator('.from-value').textContent();
+        expect(text).toBe('A\n text with\n line attributes');
+      });
+
+  test('Cancel suggestion and try again fills suggestion Change From field',
+      async ({page}) => {
+        const outer = await getPadOuter(page);
+        await openCommentFormWithSuggestion(page, 'This content will receive a comment');
+        await page.locator('#comment-reset').click();
+        await expect.poll(async () =>
+          outer.locator('#newComments.active').count()).toBe(0);
+        await openCommentFormWithSuggestion(page, 'New target for comment');
+        const text = await page.locator('.from-value').textContent();
+        expect(text).toBe('New target for comment');
+      });
+
+  test('Fills suggestion Change From field, adds sugestion', async ({page}) => {
+    const inner = await getPadBody(page);
+    const outer = await getPadOuter(page);
+    const origText = 'This content will receive a comment';
+    const suggestedText = 'amp: & dq: " sq: \' lt: < gt: > bs: \\ end';
+    await openCommentFormWithSuggestion(page, origText);
+
+    await expect(page.locator('#newComment.popup-show')).toBeVisible();
+    await page.locator('#newComment textarea.comment-content').fill('A new comment text');
+    // Legacy bug-compatible selector: chrome$('#newComment').find('suggestion-checkbox').click()
+    // — that selector is invalid (missing dot) and matches nothing, but the suggestion
+    // checkbox was already clicked inside openCommentFormWithSuggestion above, so the
+    // textarea.to-value is already visible.
+    await expect.poll(async () =>
+      page.locator('#newComment textarea.to-value').count()).toBeGreaterThan(0);
+    await page.locator('#newComment textarea.to-value').fill(suggestedText);
+    await page.locator('#comment-create-btn').click();
+
+    await expect.poll(async () =>
+      inner.locator('div').first().locator('.comment').count()).toBeGreaterThan(0);
+    await inner.locator('div').first().locator('.comment').first().click();
+    await expect.poll(async () =>
+      outer.locator('.comment-container .full-display-content:visible').count())
+        .toBeGreaterThan(0);
+    await expect.poll(async () => {
+      const t = await outer.locator('.comment-container .comment-title-wrapper .from-label')
+          .first().textContent();
+      return t && t.includes(suggestedText);
+    }).toBe(true);
+
+    await outer.locator('.approve-suggestion-btn:visible').first().click();
+    await expect.poll(async () =>
+      (await inner.locator('div').first().locator('.comment').textContent())?.trim())
+        .toBe(suggestedText);
+  });
+});

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

@@ -0,0 +1,63 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  aNewCommentsPad,
+  changeLanguageTo,
+  getCommentIdOfLine,
+  setPadLines,
+  waitForCommentOnLine,
+} from '../helper/comments';
+
+const commentedText = 'This content will receive a comment';
+const suggestedText = 'Change to this suggestion';
+
+test.describe('ep_comments_page - l10n', () => {
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    await aNewCommentsPad(page);
+    await setPadLines(page, [commentedText]);
+    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');
+    await page.locator('#newComment .suggestion-checkbox').first().click();
+    await page.locator('textarea.to-value').fill(suggestedText);
+    await page.locator('.comment-buttons input[type=submit]').first().click();
+    await waitForCommentOnLine(page, 0);
+    await changeLanguageTo(page, 'en');
+  });
+
+  test.afterEach(async ({page}) => {
+    // Restore English to avoid breaking other tests.
+    await changeLanguageTo(page, 'en');
+  });
+
+  test('uses default values when language was not localized yet', async ({page}) => {
+    await changeLanguageTo(page, 'oc');
+    const outer = await getPadOuter(page);
+    const text = await outer.locator('.comment-suggest').first().textContent();
+    expect(text).toBe(
+        '                                  Include suggested change             ');
+  });
+
+  test('localizes comment when Etherpad language is changed', async ({page}) => {
+    await changeLanguageTo(page, 'pt-br');
+    const outer = await getPadOuter(page);
+    const commentId = await getCommentIdOfLine(page, 0);
+    const text = await outer.locator(`#${commentId} .from-label`).first().textContent();
+    expect(text).toBe(`Alteração sugerida de "${commentedText}" para "${suggestedText}"`);
+  });
+
+  test("localizes 'new comment' form when Etherpad language is changed", async ({page}) => {
+    const inner = await getPadBody(page);
+    const outer = await getPadOuter(page);
+    // Select again and re-open the new-comment form.
+    await inner.locator('div').first().click({clickCount: 3});
+    await page.locator('.addComment').first().click();
+    await changeLanguageTo(page, 'pt-br');
+    const txt = await outer.locator('.new-comment label.label-suggestion-checkbox').first()
+        .textContent();
+    expect((txt || '').trim()).toBe('Incluir alteração sugerida');
+  });
+});

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

@@ -0,0 +1,47 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  aNewCommentsPad,
+  chooseToShowComments,
+} from '../helper/comments';
+
+// Faithful 1:1 port — all original tests were xit (skipped) in the legacy spec.
+test.describe('ep_comments_page - Comment settings', () => {
+  test.describe("when user unchecks 'Show Comments'", () => {
+    test.beforeEach(async ({page}) => {
+      test.setTimeout(60_000);
+      await aNewCommentsPad(page);
+      await chooseToShowComments(page, false);
+    });
+
+    test.skip('sidebar comments should not be visible when opening a new pad',
+        async ({page}) => {
+          // Force a new pad for validation on a brand new pad.
+          await aNewCommentsPad(page);
+          const outer = await getPadOuter(page);
+          await expect(outer.locator('#comments')).toBeHidden();
+        });
+
+    test.skip('sidebar comments not visible when adding a new comment to a new pad',
+        async ({page}) => {
+          await aNewCommentsPad(page);
+          const inner = await getPadBody(page);
+          const outer = await getPadOuter(page);
+          await inner.click();
+          await page.keyboard.press('Control+A');
+          await page.keyboard.press('Delete');
+          await page.keyboard.type('This content will receive a comment');
+          await inner.locator('div').first().click({clickCount: 3});
+          await page.locator('.addComment').first().click();
+          await page.locator('textarea.comment-content').fill('My comment');
+          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();
+          // After creating the comment, click Add Comment again — sidebar must remain hidden.
+          await inner.locator('div').first().click({clickCount: 3});
+          await page.locator('.addComment').first().click();
+          expect(await outer.locator('#comments:visible').count()).toBe(0);
+        });
+  });
+});

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

@@ -0,0 +1,25 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody} from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {aNewCommentsPad} from '../helper/comments';
+
+test.describe('ep_comments_page - New comment', () => {
+  test('new comment button focuses on comment textarea', async ({page}) => {
+    await aNewCommentsPad(page);
+    const inner = await getPadBody(page);
+    await inner.click();
+    await page.keyboard.press('Control+A');
+    await page.keyboard.press('Delete');
+    await page.keyboard.type('commented text');
+    await inner.locator('div').first().click({clickCount: 3});
+
+    await page.locator('.addComment').click();
+
+    // The textarea must be the active element in the chrome document.
+    const isFocused = await page.evaluate(() => {
+      const ta = document.querySelector<HTMLTextAreaElement>(
+          '#newComment .comment-content');
+      return !!ta && document.activeElement === ta;
+    });
+    expect(isFocused).toBe(true);
+  });
+});

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

@@ -0,0 +1,123 @@
+import {expect, test} from '@playwright/test';
+import {getPadBody, getPadOuter}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+import {
+  aNewCommentsPad,
+  highlightSelectedTextEnabled,
+  reopenCommentsPad,
+  waitForCommentOnLine,
+} from '../helper/comments';
+
+const createPadWithTwoLines = async (page: import('@playwright/test').Page) => {
+  const inner = await getPadBody(page);
+  await inner.click();
+  await page.keyboard.press('Control+A');
+  await page.keyboard.press('Delete');
+  await page.keyboard.type('Line 1');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('Line 2');
+  await expect.poll(async () => inner.locator('div').count()).toBeGreaterThanOrEqual(2);
+};
+
+const selectLineAndOpenCommentForm = async (
+  page: import('@playwright/test').Page, lineIndex: number,
+) => {
+  const inner = await getPadBody(page);
+  await inner.locator('div').nth(lineIndex).click({clickCount: 3});
+  await page.locator('.addComment').click();
+};
+
+test.describe('ep_comments_page - Pre-comment text mark', () => {
+  let padId: string;
+
+  test.beforeEach(async ({page}) => {
+    test.setTimeout(60_000);
+    padId = await aNewCommentsPad(page);
+    await createPadWithTwoLines(page);
+    await selectLineAndOpenCommentForm(page, 0);
+  });
+
+  test('marks selected text when New Comment form is opened', async ({page}) => {
+    if (!(await highlightSelectedTextEnabled(page))) return;
+    const inner = await getPadBody(page);
+    const marked = inner.locator('.pre-selected-comment');
+    await expect(marked).toHaveCount(1);
+    expect((await marked.textContent())?.trim()).toBe('Line 1');
+  });
+
+  test.describe('when user reloads pad', () => {
+    test('does not have any marked text after pad is fully loaded', async ({page}) => {
+      if (!(await highlightSelectedTextEnabled(page))) return;
+      // Wait for revision to be saved.
+      await page.waitForTimeout(5000);
+      await reopenCommentsPad(page, padId);
+      const inner = await getPadBody(page);
+      await expect.poll(async () =>
+        inner.locator('.pre-selected-comment').count(), {timeout: 20_000}).toBe(0);
+    });
+  });
+
+  test.describe('when user performs UNDO operation', () => {
+    test('keeps marked text', async ({page}) => {
+      if (!(await highlightSelectedTextEnabled(page))) return;
+      // Wait for revision and reload.
+      await page.waitForTimeout(5000);
+      await reopenCommentsPad(page, padId);
+      // Re-mark the text.
+      await selectLineAndOpenCommentForm(page, 0);
+      // Trigger UNDO.
+      await page.locator('.buttonicon-undo').click();
+      const inner = await getPadBody(page);
+      const marked = inner.locator('.pre-selected-comment');
+      await expect(marked).toHaveCount(1);
+      expect((await marked.textContent())?.trim()).toBe('Line 1');
+    });
+  });
+
+  test.describe('when user changes selected text', () => {
+    test('keeps marked text', async ({page}) => {
+      if (!(await highlightSelectedTextEnabled(page))) return;
+      const inner = await getPadBody(page);
+      // Select the second line.
+      await inner.locator('div').nth(1).click({clickCount: 3});
+      const marked = inner.locator('.pre-selected-comment');
+      await expect(marked).toHaveCount(1);
+      expect((await marked.textContent())?.trim()).toBe('Line 1');
+    });
+  });
+
+  test.describe('when user closes the New Comment form', () => {
+    test('unmarks text', async ({page}) => {
+      if (!(await highlightSelectedTextEnabled(page))) return;
+      const outer = await getPadOuter(page);
+      await outer.locator('#comment-reset').click();
+      const inner = await getPadBody(page);
+      await expect(inner.locator('.pre-selected-comment')).toHaveCount(0);
+    });
+  });
+
+  test.describe('when user submits the comment', () => {
+    test('unmarks text', async ({page}) => {
+      if (!(await highlightSelectedTextEnabled(page))) return;
+      const outer = await getPadOuter(page);
+      await page.locator('textarea.comment-content').fill('My comment');
+      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);
+      const inner = await getPadBody(page);
+      await expect(inner.locator('.pre-selected-comment')).toHaveCount(0);
+    });
+  });
+
+  test.describe('when user selects another text range and opens New Comment form for it', () => {
+    test('changes the marked text', async ({page}) => {
+      if (!(await highlightSelectedTextEnabled(page))) return;
+      await selectLineAndOpenCommentForm(page, 1);
+      const inner = await getPadBody(page);
+      const marked = inner.locator('.pre-selected-comment');
+      await expect(marked).toHaveCount(1);
+      expect((await marked.textContent())?.trim()).toBe('Line 2');
+    });
+  });
+});

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

@@ -0,0 +1,244 @@
+import {expect, test} from '@playwright/test';
+import {aNewCommentsPad, changeLanguageTo} from '../helper/comments';
+
+// Time helpers (mirror legacy).
+const minutes = (n: number) => 60 * n;
+const hours = (n: number) => 60 * minutes(n);
+const days = (n: number) => 24 * hours(n);
+const weeks = (n: number) => 7 * days(n);
+const months = (n: number) => 4 * weeks(n);
+const years = (n: number) => 12 * months(n);
+
+// Evaluate `moment(<offsetMs from now>).fromNow()` inside the chrome window.
+// We initialise moment lazily on first call and set its 'ss' threshold to 0 to
+// match the legacy spec's `moment.relativeTimeThreshold('ss', 0)`.
+const initMoment = async (page: import('@playwright/test').Page) => {
+  await page.evaluate(() => {
+    const w = window as any;
+    if (w.__epcpMoment) return;
+    w.__epcpMoment = w.require(
+        'ep_comments_page/static/js/moment-with-locales.min');
+    w.__epcpMoment.relativeTimeThreshold('ss', 0);
+  });
+};
+
+const fromNow = async (
+  page: import('@playwright/test').Page, secondsOffset: number,
+): Promise<string> => {
+  return await page.evaluate((sec) => {
+    const w = window as any;
+    return w.__epcpMoment(Date.now() + sec * 1000).fromNow();
+  }, secondsOffset);
+};
+
+const waitMomentLocale = async (
+  page: import('@playwright/test').Page, expected: string,
+) => {
+  await expect.poll(async () => page.evaluate(() => (window as any).__epcpMoment.locale()))
+      .toBe(expected);
+};
+
+const switchLang = async (page: import('@playwright/test').Page, lang: string) => {
+  // First switch to a supported non-en language so we can detect when change took effect.
+  await changeLanguageTo(page, 'pt-br');
+  await waitMomentLocale(page, 'pt-br');
+  await changeLanguageTo(page, lang);
+  await waitMomentLocale(page, lang === 'qqq' ? 'en' : lang);
+};
+
+test.describe('ep_comments_page - Time format', () => {
+  test.beforeAll(async () => {
+    test.setTimeout(60_000);
+  });
+
+  for (const [lang, description] of Object.entries({
+    en: 'English',
+    qqq: 'a language that moment.js does not support',
+  })) {
+    test.describe(`in ${description}`, () => {
+      test.beforeEach(async ({page}) => {
+        test.setTimeout(60_000);
+        await aNewCommentsPad(page);
+        await initMoment(page);
+        await switchLang(page, lang);
+      });
+
+      test.afterEach(async ({page}) => {
+        // Restore English to avoid breaking other tests.
+        await changeLanguageTo(page, 'en');
+      });
+
+      test('returns "12 seconds ago" when time is 12 seconds in the past', async ({page}) => {
+        expect(await fromNow(page, -12)).toBe('12 seconds ago');
+      });
+      test('returns "in 12 seconds" when time is 12 seconds in the future', async ({page}) => {
+        expect(await fromNow(page, 12)).toBe('in 12 seconds');
+      });
+      test('returns "a minute ago" when time is 75 seconds in the past', async ({page}) => {
+        expect(await fromNow(page, -75)).toBe('a minute ago');
+      });
+      test('returns "in a minute" when time is 75 seconds in the future', async ({page}) => {
+        expect(await fromNow(page, 75)).toBe('in a minute');
+      });
+      test('returns "17 minutes ago" when time is 17+ε minutes in the past', async ({page}) => {
+        expect(await fromNow(page, -(minutes(17) + 2))).toBe('17 minutes ago');
+      });
+      test('returns "in 17 minutes" when time is 17+ε minutes in the future', async ({page}) => {
+        expect(await fromNow(page, minutes(17) + 2)).toBe('in 17 minutes');
+      });
+      test('returns "an hour ago" when time is 1+ε hour in the past', async ({page}) => {
+        expect(await fromNow(page, -(hours(1) + 3))).toBe('an hour ago');
+      });
+      test('returns "in an hour" when time is 1+ε hour in the future', async ({page}) => {
+        expect(await fromNow(page, hours(1) + 3)).toBe('in an hour');
+      });
+      test('returns "2 hours ago" when time is 2+ε hours in the past', async ({page}) => {
+        expect(await fromNow(page, -(hours(2) + 4))).toBe('2 hours ago');
+      });
+      test('returns "in 2 hours" when time is 2+ε hours in the future', async ({page}) => {
+        expect(await fromNow(page, hours(2) + 4)).toBe('in 2 hours');
+      });
+      test('returns "a day ago" when time is 24+ε hours in the past', async ({page}) => {
+        expect(await fromNow(page, -(hours(24) + 5))).toBe('a day ago');
+      });
+      test('returns "in a day" when time is 24+ε hours in the future', async ({page}) => {
+        expect(await fromNow(page, hours(24) + 5)).toBe('in a day');
+      });
+      test('returns "6 days ago" when time is 6+ε days in the past', async ({page}) => {
+        expect(await fromNow(page, -(days(6) + 6))).toBe('6 days ago');
+      });
+      test('returns "in 6 days" when time is 6+ε days in the future', async ({page}) => {
+        expect(await fromNow(page, days(6) + 6)).toBe('in 6 days');
+      });
+      test('returns "7 days ago" when time is 7+ε days in the past', async ({page}) => {
+        expect(await fromNow(page, -(days(7) + 7))).toBe('7 days ago');
+      });
+      test('returns "in 7 days" when time is 7+ε days in the future', async ({page}) => {
+        expect(await fromNow(page, days(7) + 7)).toBe('in 7 days');
+      });
+      test('returns "14 days ago" when time is 2+ε weeks in the past', async ({page}) => {
+        expect(await fromNow(page, -(weeks(2) + 8))).toBe('14 days ago');
+      });
+      test('returns "in 14 days" when time is 2+ε weeks in the future', async ({page}) => {
+        expect(await fromNow(page, weeks(2) + 8)).toBe('in 14 days');
+      });
+      test('returns "a month ago" when time is 4+ε weeks in the past', async ({page}) => {
+        expect(await fromNow(page, -(weeks(4) + 9))).toBe('a month ago');
+      });
+      test('returns "in a month" when time is 4+ε weeks in the future', async ({page}) => {
+        expect(await fromNow(page, weeks(4) + 9)).toBe('in a month');
+      });
+      test('returns "8 months ago" when time is 9+ε months in the past', async ({page}) => {
+        expect(await fromNow(page, -(months(9) + 10))).toBe('8 months ago');
+      });
+      test('returns "in 8 months" when time is 9+ε months in the future', async ({page}) => {
+        expect(await fromNow(page, months(9) + 10)).toBe('in 8 months');
+      });
+      test('returns "a year ago" when time is 12+ε months in the past', async ({page}) => {
+        expect(await fromNow(page, -(months(12) + 11))).toBe('a year ago');
+      });
+      test('returns "in a year" when time is 12+ε months in the future', async ({page}) => {
+        expect(await fromNow(page, months(12) + 11)).toBe('in a year');
+      });
+      test('returns "14 years ago" when time is 15+ε years in the past', async ({page}) => {
+        expect(await fromNow(page, -(years(15) + 12))).toBe('14 years ago');
+      });
+      test('returns " in 14 years" when time is 15+ε years in the future', async ({page}) => {
+        expect(await fromNow(page, years(15) + 12)).toBe('in 14 years');
+      });
+    });
+  }
+
+  test.describe('in Portuguese', () => {
+    test.beforeEach(async ({page}) => {
+      test.setTimeout(60_000);
+      await aNewCommentsPad(page);
+      await initMoment(page);
+      await changeLanguageTo(page, 'pt-br');
+      await waitMomentLocale(page, 'pt-br');
+    });
+
+    test.afterEach(async ({page}) => {
+      await changeLanguageTo(page, 'en');
+    });
+
+    test('returns "há 12 segundos" when time is 12 seconds in the past', async ({page}) => {
+      expect(await fromNow(page, -12)).toBe('há 12 segundos');
+    });
+    test('returns "em 12 segundos" when time is 12 seconds in the future', async ({page}) => {
+      expect(await fromNow(page, 12)).toBe('em 12 segundos');
+    });
+    test('returns "há um minuto" when time is 75 seconds in the past', async ({page}) => {
+      expect(await fromNow(page, -75)).toBe('há um minuto');
+    });
+    test('returns "em um minuto" when time is 75 seconds in the future', async ({page}) => {
+      expect(await fromNow(page, 75)).toBe('em um minuto');
+    });
+    test('returns "há 17 minutos" when time is 17+ε minutes in the past', async ({page}) => {
+      expect(await fromNow(page, -(minutes(17) + 2))).toBe('há 17 minutos');
+    });
+    test('returns "em 17 minutos" when time is 17+ε minutes in the future', async ({page}) => {
+      expect(await fromNow(page, minutes(17) + 2)).toBe('em 17 minutos');
+    });
+    test('returns "há uma hora" when time is 1+ε hour in the past', async ({page}) => {
+      expect(await fromNow(page, -(hours(1) + 3))).toBe('há uma hora');
+    });
+    test('returns "em uma hora" when time is 1+ε hour in the future', async ({page}) => {
+      expect(await fromNow(page, hours(1) + 3)).toBe('em uma hora');
+    });
+    test('returns "há 2 horas" when time is 2+ε hours in the past', async ({page}) => {
+      expect(await fromNow(page, -(hours(2) + 4))).toBe('há 2 horas');
+    });
+    test('returns "em 2 horas" when time is 2+ε hours in the future', async ({page}) => {
+      expect(await fromNow(page, hours(2) + 4)).toBe('em 2 horas');
+    });
+    test('returns "há um dia" when time is 24+ε hours in the past', async ({page}) => {
+      expect(await fromNow(page, -(hours(24) + 5))).toBe('há um dia');
+    });
+    test('returns "em um dia" when time is 24+ε hours in the future', async ({page}) => {
+      expect(await fromNow(page, hours(24) + 5)).toBe('em um dia');
+    });
+    test('returns "há 6 dias" when time is 6+ε days in the past', async ({page}) => {
+      expect(await fromNow(page, -(days(6) + 6))).toBe('há 6 dias');
+    });
+    test('returns "em 6 dias" when time is 6+ε days in the future', async ({page}) => {
+      expect(await fromNow(page, days(6) + 6)).toBe('em 6 dias');
+    });
+    test('returns "há 7 dias" when time is 7+ε days in the past', async ({page}) => {
+      expect(await fromNow(page, -(days(7) + 7))).toBe('há 7 dias');
+    });
+    test('returns "em 7 dias" when time is 7+ε days in the future', async ({page}) => {
+      expect(await fromNow(page, days(7) + 7)).toBe('em 7 dias');
+    });
+    test('returns "há 14 dias" when time is 2+ε weeks in the past', async ({page}) => {
+      expect(await fromNow(page, -(weeks(2) + 8))).toBe('há 14 dias');
+    });
+    test('returns "em 14 dias" when time is 2+ε weeks in the future', async ({page}) => {
+      expect(await fromNow(page, weeks(2) + 8)).toBe('em 14 dias');
+    });
+    test('returns "há um mês" when time is 4+ε weeks in the past', async ({page}) => {
+      expect(await fromNow(page, -(weeks(4) + 9))).toBe('há um mês');
+    });
+    test('returns "em um mês" when time is 4+ε weeks in the future', async ({page}) => {
+      expect(await fromNow(page, weeks(4) + 9)).toBe('em um mês');
+    });
+    test('returns "há 8 meses" when time is 9+ε months in the past', async ({page}) => {
+      expect(await fromNow(page, -(months(9) + 10))).toBe('há 8 meses');
+    });
+    test('returns "em 8 meses" when time is 9+ε months in the future', async ({page}) => {
+      expect(await fromNow(page, months(9) + 10)).toBe('em 8 meses');
+    });
+    test('returns "há um ano" when time is 12+ε months in the past', async ({page}) => {
+      expect(await fromNow(page, -(months(12) + 11))).toBe('há um ano');
+    });
+    test('returns "em um ano" when time is 12+ε months in the future', async ({page}) => {
+      expect(await fromNow(page, months(12) + 11)).toBe('em um ano');
+    });
+    test('returns "há 14 anos" when time is 15+ε years in the past', async ({page}) => {
+      expect(await fromNow(page, -(years(15) + 12))).toBe('há 14 anos');
+    });
+    test('returns "em 14 anos" when time is 15+ε years in the future', async ({page}) => {
+      expect(await fromNow(page, years(15) + 12)).toBe('em 14 anos');
+    });
+  });
+});

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

@@ -0,0 +1,29 @@
+import {test} from '@playwright/test';
+
+// Faithful 1:1 port — every test in the legacy spec was xit (skipped) because
+// the copy/paste flow could not be reliably triggered headlessly. We preserve
+// the test names with test.skip so the migration is visible in CI.
+
+test.describe('ep_comments_page - Comment copy and paste', () => {
+  test.describe('when user copies a text with a comment', () => {
+    test.skip('keeps the text copied on the buffer', async () => {});
+    test.skip('generates a fake comment class', async () => {});
+    test.skip('puts the comment data on the clipboardData', async () => {});
+    test.skip('puts the comment reply data on the clipboardData', async () => {});
+    test.skip('has the fields required to build a comment', async () => {});
+    test.skip('has the fields required to build a comment reply', async () => {});
+  });
+
+  test.describe('when user pastes a text with comment', () => {
+    test.skip('generates a different comment id for the comment pasted', async () => {});
+    test.skip('creates a new icon for the comment pasted', async () => {});
+    test.skip('creates the comment text field with the same text of the one copied',
+        async () => {});
+    test.skip('creates comment reply text field with the same text of the one copied',
+        async () => {});
+
+    test.describe('when user removes the original comment', () => {
+      test.skip('does not remove the comment pasted', async () => {});
+    });
+  });
+});