test: added Image visual tests (#794)

Author: makhnatkin

src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.tsx

@@ -63,6 +63,7 @@ export const ImgSettingsButton: React.FC<{
 
             {isVisibleEditButton && (
                 <Button
+                    qa="g-md-image-settings-button"
                     onClick={togglePopup}
                     ref={setAnchorElement}
                     size="s"
@@ -79,9 +80,13 @@ export const ImgSettingsButton: React.FC<{
                 onOpenChange={unsetPopupOpen}
                 placement={placement}
             >
-                <Menu>
-                    <Menu.Item onClick={handleEdit}>{i18nCommon('edit')}</Menu.Item>
-                    <Menu.Item onClick={onDelete}>{i18nCommon('delete')}</Menu.Item>
+                <Menu qa="g-md-image-settings-menu">
+                    <Menu.Item extraProps={{'aria-label': i18nCommon('edit')}} onClick={handleEdit}>
+                        {i18nCommon('edit')}
+                    </Menu.Item>
+                    <Menu.Item extraProps={{'aria-label': i18nCommon('delete')}} onClick={onDelete}>
+                        {i18nCommon('delete')}
+                    </Menu.Item>
                 </Menu>
             </Popup>
         </>

src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/NodeView.tsx

@@ -109,7 +109,7 @@ export const ImageNodeView: React.FC<ReactNodeViewProps> = ({
     );
 
     return (
-        <div ref={imageContainerRef}>
+        <div ref={imageContainerRef} data-qa="g-md-image">
             <Resizable
                 hover={isNodeHovered}
                 resizing={state.resizing}

tests/playwright/core/editor.ts

@@ -144,6 +144,28 @@ class Colorify {
     }
 }
 
+class Image {
+    protected readonly imageSettingsButton: Locator;
+    protected readonly imageSettingsMenu: Locator;
+    protected readonly image: Locator;
+
+    constructor(page: Page) {
+        this.imageSettingsButton = page.getByTestId('g-md-image-settings-button');
+        this.imageSettingsMenu = page.getByTestId('g-md-image-settings-menu');
+        this.image = page.getByTestId('g-md-image');
+    }
+
+    async clickImageSettingsButton() {
+        const button = this.imageSettingsButton;
+        await button.click();
+    }
+
+    async clickImageSettingsMenu(label: string) {
+        const button = this.imageSettingsMenu.getByLabel(label);
+        await button.click();
+    }
+}
+
 class YfmNote {
     protected readonly yfmNoteToolbar: Locator;
 
@@ -205,6 +227,7 @@ export class MarkdownEditorPage {
     readonly yfmTable;
     readonly colorify;
     readonly yfmNote;
+    readonly image;
     protected readonly page: Page;
     protected readonly expect: Expect;
 
@@ -216,6 +239,7 @@ export class MarkdownEditorPage {
         this.yfmTable = new YfmTable(page);
         this.colorify = new Colorify(page, expect, this.locators);
         this.yfmNote = new YfmNote(page);
+        this.image = new Image(page);
     }
 
     /**

tests/playwright/playwright.config.ts

@@ -23,6 +23,7 @@ const aliasesFromTsConf = (() => {
 })();
 
 const ctViteConfig: InlineConfig = {
+    publicDir: pathFromRoot('visual-tests/public'),
     css: {
         preprocessorOptions: {
             scss: {