test: updated visual tests for cut block (#735)

Author: makhnatkin

scripts/generate-playwright-test.js

@@ -8,7 +8,7 @@ const ALIASES = {
 };
 const TEMPLATE_DIR = 'tests/playwright/templates';
 const DEFAULT_OUTPUT_DIR = 'tests/visual-tests/playground';
-const templatePath = path.join(TEMPLATE_DIR, 'Extension.template.test.tsx');
+const templatePath = path.join(TEMPLATE_DIR, 'Extension.template.tsx');
 
 if (!fs.existsSync(templatePath)) {
     console.error(`❌ Template file not found at ${templatePath}`);

tests/playwright/core/editor.ts

@@ -47,57 +47,70 @@ export class MarkdownEditorPage {
         this.locators = new MarkdownEditorLocators(page);
     }
 
-    /** Returns the current editor mode */
+    /**
+     * Checks that the current editor mode matches the expected one
+     */
+    async assertMode(mode: MarkdownEditorMode) {
+        await this.expect.poll(() => this.getMode()).toBe(mode);
+    }
+
+    /**
+     * Asserts that the toolbar button is disabled
+     */
+    async assertToolbarButtonDisabled(label: string) {
+        const button = this.getToolbarButton(label);
+        await this.expect(button).toHaveClass(/disabled/);
+    }
+
+    /**
+     * Asserts that the toolbar button is enabled
+     */
+    async assertToolbarButtonEnabled(label: string) {
+        const button = this.getToolbarButton(label);
+        await this.expect(button).not.toHaveClass(/disabled/);
+    }
+
+    /**
+     * Returns the current editor mode
+     */
     async getMode(): Promise<MarkdownEditorMode> {
         const value = await this.locators.editor.getAttribute('data-mode');
         const mode = value as MarkdownEditorMode | null;
         if (mode === 'wysiwyg' || mode === 'markup') return mode;
         throw new Error(`MarkdownEditorPage.getMode(): unknown editor mode "${mode}"`);
     }
 
-    /** Finds a command menu item by text */
+    /**
+     * Finds an element in the command menu by its text
+     */
     getByTextInCommandMenu(text: string): Locator {
         return this.locators.commandMenu.getByText(text);
     }
 
-    /** Finds an element inside the editable area by selector */
+    /**
+     * Finds an element by selector within the contenteditable area
+     */
     getBySelectorInContenteditable(selector: string): Locator {
         return this.locators.contenteditable.locator(selector);
     }
 
-    /** Finds a command menu item by text */
+    /**
+     * Finds an element by text within the contenteditable area
+     */
     getByTextInContenteditable(text: string): Locator {
         return this.locators.contenteditable.getByText(text);
     }
 
-    /** Opens the settings popup if it's not already open */
-    async openSettingsPopup() {
-        if (await this.locators.settingsContent.isVisible()) return;
-
-        await this.locators.settingsButton.click();
-        await this.locators.settingsContent.waitFor({state: 'visible'});
-    }
-
-    /** Asserts that the current mode matches the expected one */
-    async assertMode(mode: MarkdownEditorMode) {
-        await this.expect.poll(() => this.getMode()).toBe(mode);
-    }
-
-    /** Clicks the toolbar "more actions" button. */
-    async clickToolbarMoreActionButton() {
-        await this.locators.toolbarMoreActionButton.click();
+    /**
+     * Returns a locator for the toolbar button by its aria-label
+     */
+    getToolbarButton(label: string): Locator {
+        return this.page.getByLabel(label);
     }
 
-    /** Switches the editor to the specified mode */
-    async switchMode(mode: MarkdownEditorMode) {
-        if ((await this.getMode()) === mode) return;
-
-        await this.openSettingsPopup();
-        await this.locators.settingsContent.getByTestId(`g-md-settings-mode-${mode}`).click();
-        await this.assertMode(mode);
-    }
-
-    /** Returns the current preview visibility state */
+    /**
+     * Returns the current visibility state of the preview
+     */
     async getPreview(): Promise<VisibleState> {
         const previewContent = await this.locators.previewContent;
         if (await previewContent.isVisible()) {
@@ -111,7 +124,20 @@ export class MarkdownEditorPage {
         return undefined;
     }
 
-    /** Toggles or sets the preview visibility state */
+    /**
+     * Switches the editor to the specified mode
+     */
+    async switchMode(mode: MarkdownEditorMode) {
+        if ((await this.getMode()) === mode) return;
+
+        await this.openSettingsPopup();
+        await this.locators.settingsContent.getByTestId(`g-md-settings-mode-${mode}`).click();
+        await this.assertMode(mode);
+    }
+
+    /**
+     * Toggles or sets the preview visibility state
+     */
     async switchPreview(state?: VisibleState) {
         const currentState = await this.getPreview();
         const revertState = currentState === 'visible' ? 'hidden' : 'visible';
@@ -129,28 +155,76 @@ export class MarkdownEditorPage {
         });
     }
 
-    /** Removes focus from the editable area */
+    /**
+     * Opens the settings popup if it is not already open
+     */
+    async openSettingsPopup() {
+        if (await this.locators.settingsContent.isVisible()) return;
+
+        await this.locators.settingsButton.click();
+        await this.locators.settingsContent.waitFor({state: 'visible'});
+    }
+
+    /**
+     * Clicks the "more actions" button on the toolbar
+     */
+    async clickToolbarMoreActionButton() {
+        await this.locators.toolbarMoreActionButton.click();
+    }
+
+    /**
+     * Clicks a toolbar button using its aria-label
+     */
+    async clickToolbarButton(label: string) {
+        const button = this.getToolbarButton(label);
+
+        await this.expect(button).toBeEnabled();
+        await button.click();
+    }
+
+    /**
+     * Clears all content from the contenteditable area
+     */
+    async clearContent() {
+        await this.press('ControlOrMeta+A');
+        await this.press('Backspace');
+    }
+
+    /**
+     * Removes focus from the contenteditable area
+     */
     async blur() {
         await this.locators.contenteditable.blur();
     }
 
-    /** Presses a key in the editable area */
+    /**
+     * Presses a key within the contenteditable area
+     */
     async press(key: string) {
         await this.locators.contenteditable.press(key);
     }
 
-    /** Presses each character in sequence in the editable area */
+    /**
+     * Presses each character sequentially in the contenteditable area
+     */
     async pressSequentially(key: string) {
         await this.locators.contenteditable.pressSequentially(key);
     }
 
-    /** Clears all content from the editable area */
-    async clearContent() {
-        await this.press('ControlOrMeta+A');
-        await this.press('Backspace');
+    /**
+     * Simulates input rule behavior by typing a sequence in WYSIWYG mode.
+     * Clears the editor and types each character
+     */
+    async inputRule(sequence: string) {
+        await this.switchMode('wysiwyg');
+        await this.clearContent();
+        await this.pressSequentially(sequence);
+        await this.press('Space');
     }
 
-    /** Pastes data into the editable area */
+    /**
+     * Pastes data into the contenteditable area
+     */
     async paste(value: PasteData | string) {
         const data: PasteData = typeof value === 'string' ? {'text/plain': value} : value;
 
@@ -166,12 +240,16 @@ export class MarkdownEditorPage {
         }, data);
     }
 
-    /** Fills the editable area with the given text */
+    /**
+     * Fills the contenteditable area with the provided text
+     */
     async fill(text: string) {
         this.locators.contenteditable.fill(text);
     }
 
-    /** Selects text inside the editable area */
+    /**
+     * Selects text within the contenteditable area
+     */
     async selectTextIn(selector?: string) {
         let loc = this.locators.contenteditable;
         if (selector) loc = loc.locator(selector);

tests/playwright/templates/Extension.template.tsx

@@ -17,7 +17,7 @@ test.describe('%%name%%', () => {
     });
 
     test.describe('insert', () => {
-        test.skip(' should insert via toolbar @wysiwyg', async ({editor, wait}) => {
+        test.skip('should insert via toolbar @wysiwyg', async ({editor, wait}) => {
             /* TODO: unskip */
             await editor.switchMode('wysiwyg');
             await editor.clearContent();