ep_headings2 0.2.110 → 0.2.112

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "Adds heading support to Etherpad Lite.  Includes improved suppot for export, i18n etc.",
   "name": "ep_headings2",
-  "version": "0.2.110",
+  "version": "0.2.112",
   "author": {
     "name": "John McLear",
     "email": "john@mclear.co.uk"
@@ -34,7 +34,7 @@
     "url": "https://github.com/ether/ep_headings2/issues"
   },
   "dependencies": {
-    "ep_plugin_helpers": "^0.2.7"
+    "ep_plugin_helpers": "^0.2.8"
   },
   "devDependencies": {
     "eslint": "^8.57.1",

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

@@ -0,0 +1,76 @@
+import {expect, test} from '@playwright/test';
+import {clearPadContent, getPadBody, goToNewPad, writeToPad}
+    from 'ep_etherpad-lite/tests/frontend-new/helper/padHelper';
+
+test.beforeEach(async ({page}) => {
+  await goToNewPad(page);
+});
+
+test.describe('ep_headings2 - Set Heading and ensure its removed properly', () => {
+  test('Heading select has aria-label for accessibility', async ({page}) => {
+    const select = page.locator('#heading-selection');
+    await expect(select).toHaveAttribute('aria-label', /.+/);
+  });
+
+  test('Focus returns to editor after selecting a heading', async ({page}) => {
+    const padBody = await getPadBody(page);
+    await padBody.click();
+    await clearPadContent(page);
+    await writeToPad(page, 'Test focus');
+
+    // Pick H1 in the heading-selection <select>; the niceSelect wrapper
+    // intercepts native change events so we set the value on the
+    // underlying element and dispatch change manually, matching what
+    // the legacy spec did with chrome$('#heading-selection').change().
+    await page.evaluate(() => {
+      const sel = document.querySelector<HTMLSelectElement>('#heading-selection')!;
+      sel.value = '0';
+      sel.dispatchEvent(new Event('change', {bubbles: true}));
+    });
+
+    // The line gains an <h1> wrapper.
+    await expect(padBody.locator('div').first().locator('h1')).toHaveCount(1);
+
+    // Focus should return to the inner ace iframe (not the toolbar
+    // <select> the user just clicked). Verify by checking activeElement
+    // in the outer document is the ace_inner iframe.
+    const focusedFrameName = await page.evaluate(() => {
+      const ae = document.activeElement as HTMLElement | null;
+      return (ae?.tagName === 'IFRAME' && (ae as HTMLIFrameElement).name) || null;
+    });
+    expect(focusedFrameName).toBe('ace_outer');
+  });
+
+  test('Option select is changed when heading is changed', async ({page}) => {
+    const padBody = await getPadBody(page);
+    await padBody.click();
+    await clearPadContent(page);
+    await writeToPad(page, 'First Line!');
+
+    // Apply H1 to the first line.
+    await page.evaluate(() => {
+      const sel = document.querySelector<HTMLSelectElement>('#heading-selection')!;
+      sel.value = '0';
+      sel.dispatchEvent(new Event('change', {bubbles: true}));
+    });
+    await expect(padBody.locator('div').first().locator('h1')).toHaveCount(1);
+
+    // Move to a fresh second line — the selector should reset to
+    // "no heading" (-1) because the cursor is no longer on an H1.
+    await page.keyboard.press('End');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('Second Line');
+
+    // Wait for the selector to update to "-1" (Etherpad polls the
+    // current line's heading attribute on caret moves).
+    await expect.poll(async () =>
+      page.evaluate(() =>
+        (document.querySelector<HTMLSelectElement>('#heading-selection')!).value),
+    {timeout: 10_000}).toBe('-1');
+
+    // Second line is plain text, not wrapped in <h1>.
+    const second = padBody.locator('div').nth(1);
+    await expect(second.locator('h1')).toHaveCount(0);
+    await expect(second).toHaveText('Second Line');
+  });
+});

package/static/tests/frontend/specs/test.js

@@ -1,73 +0,0 @@
-'use strict';
-
-describe('ep_headings2 - Set Heading and ensure its removed properly', function () {
-  // create a new pad before each test run
-  beforeEach(function (cb) {
-    helper.newPad(cb);
-    this.timeout(60000);
-  });
-
-  // Create Pad
-  // Check Default Text has no Heading
-  // Set Line 1 heading and check it's set
-  // Set Line 2 to null heading value and check it's set
-
-  it('Heading select has aria-label for accessibility', async function () {
-    this.timeout(60000);
-    const chrome$ = helper.padChrome$;
-    const $select = chrome$('#heading-selection');
-    expect($select.attr('aria-label')).to.not.be(undefined);
-    expect($select.attr('aria-label').length).to.be.greaterThan(0);
-  });
-
-  it('Focus returns to editor after selecting a heading', async function () {
-    this.timeout(60000);
-    const chrome$ = helper.padChrome$;
-    const inner$ = helper.padInner$;
-
-    // Type some text
-    const $firstTextElement = inner$('div').first();
-    $firstTextElement.sendkeys('{selectall}');
-    $firstTextElement.sendkeys('Test focus');
-
-    // Select heading 1
-    chrome$('#heading-selection').val('0');
-    chrome$('#heading-selection').change();
-
-    // Wait for heading to be applied, then check focus is back in the editor
-    await helper.waitForPromise(() => inner$('div').first().find('h1').length === 1);
-
-    // The editor iframe should have focus, not the toolbar
-    const editorHasFocus = inner$('div').first().is(':focus') ||
-        inner$.document.hasFocus() ||
-        $(helper.padOuter$.document).find('iframe[name="ace_inner"]').is(':focus');
-    expect(editorHasFocus).to.be(true);
-  });
-
-  it('Option select is changed when heading is changed', async function () {
-    this.timeout(60000);
-    const chrome$ = helper.padChrome$;
-    const inner$ = helper.padInner$;
-
-    const $firstTextElement = inner$('div').first();
-
-    const $editorContents = inner$('div');
-    $editorContents.sendkeys('{selectall}');
-    $firstTextElement.sendkeys('First Line!');
-
-    // sets first line to h1
-    chrome$('#heading-selection').val('0');
-    chrome$('#heading-selection').change();
-
-    $firstTextElement.sendkeys('{enter}');
-
-    await helper.waitForPromise(() => chrome$('#heading-selection').val() === '0');
-    inner$('div').first().sendkeys('{selectall}');
-    const $secondElement = inner$('div').first().next();
-    $secondElement.sendkeys('Second Line');
-    $secondElement.sendkeys('{selectall}');
-    await helper.waitForPromise(() => chrome$('#heading-selection').val() === '-1');
-    expect($secondElement.find('h1').length).to.be(0);
-    expect($secondElement.text()).to.be('Second Line');
-  });
-});