test: added basic clipboard tests for wysiwyg

Author: d3m1d0v

package-lock.json

@@ -75,6 +75,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                         pin="round-round"
                         onClick={togglePopup}
                         ref={setChevronElement}
+                        qa="md-settings-button"
                         className={bSettings('dropdown-button')}
                     >
                         <Icon data={Gear} />
@@ -125,9 +126,10 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
     showPreview,
 }) {
     return (
-        <div className={bContent(null, [className])}>
+        <div className={bContent(null, [className])} data-qa="md-settings-content">
             <Menu size="l" className={bContent('mode')}>
                 <Menu.Item
+                    qa="md-settings-mode-wysiwyg"
                     active={mode === 'wysiwyg'}
                     onClick={() => {
                         onModeChange('wysiwyg');
@@ -138,6 +140,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                     {i18n('settings_wysiwyg')}
                 </Menu.Item>
                 <Menu.Item
+                    qa="md-settings-mode-markup"
                     active={mode === 'markup'}
                     onClick={() => {
                         onModeChange('markup');

src/bundle/settings/index.tsx

@@ -0,0 +1,95 @@
+import type {Expect, Page} from '@playwright/test';
+
+import type {DataTransferType, MarkdownEditorMode} from 'src';
+
+class MarkdownEditorLocators {
+    readonly component;
+    readonly editor;
+
+    readonly settingsButton;
+    readonly settingsContent;
+
+    readonly contenteditable;
+
+    constructor(page: Page) {
+        this.component = page.locator('.g-md-editor-component');
+        this.editor = page.locator('.g-md-editor-component__editor');
+
+        this.settingsButton = page.getByTestId('md-settings-button');
+        this.settingsContent = page.getByTestId('md-settings-content');
+
+        this.contenteditable = this.editor.locator('[contenteditable=true]');
+    }
+}
+
+type PasteData = Partial<Record<DataTransferType, string>>;
+
+export class MarkdownEditorPage {
+    protected readonly page: Page;
+    protected readonly expect: Expect;
+    protected readonly locators;
+
+    constructor(page: Page, expect: Expect) {
+        this.page = page;
+        this.expect = expect;
+
+        this.locators = new MarkdownEditorLocators(page);
+    }
+
+    async getMode(): Promise<MarkdownEditorMode> {
+        return await this.locators.editor.evaluate((element) => {
+            if (element.classList.contains('g-md-editor-component__editor_mode_wysiwyg')) {
+                return 'wysiwyg';
+            }
+
+            if (element.classList.contains('g-md-editor-component__editor_mode_markup')) {
+                return 'markup';
+            }
+
+            throw new Error('MarkdownEditorPage.getMode(): unknown editor mode');
+        });
+    }
+
+    async openSettingsPopup() {
+        if (await this.locators.settingsContent.isVisible()) return;
+
+        await this.locators.settingsButton.click();
+        await this.locators.settingsContent.waitFor({state: 'visible'});
+    }
+
+    async setMode(mode: MarkdownEditorMode) {
+        if ((await this.getMode()) === mode) {
+            return;
+        }
+
+        await this.openSettingsPopup();
+        await this.locators.settingsContent.getByTestId(`md-settings-mode-${mode}`).click();
+        await this.assertMode(mode);
+    }
+
+    async assertMode(mode: MarkdownEditorMode) {
+        await this.expect.poll(() => this.getMode()).toBe(mode);
+    }
+
+    async blur() {
+        await this.locators.contenteditable.blur();
+    }
+
+    async clearContent() {
+        await this.locators.contenteditable.press('ControlOrMeta+A');
+        await this.locators.contenteditable.press('Backspace');
+    }
+
+    async paste(data: PasteData) {
+        await this.locators.contenteditable.evaluate((element, data) => {
+            const clipboardData = new DataTransfer();
+
+            for (const [key, value] of Object.entries(data)) {
+                clipboardData.setData(key, value);
+            }
+
+            element.focus();
+            element.dispatchEvent(new ClipboardEvent('paste', {clipboardData}));
+        }, data);
+    }
+}

tests/playwright/core/editor.ts

@@ -1,5 +1,6 @@
-import {test as base} from '@playwright/experimental-ct-react';
+import {test as base, expect} from '@playwright/experimental-ct-react';
 
+import {MarkdownEditorPage} from './editor';
 import {expectScreenshot} from './expectScreenshot';
 import {mount} from './mount';
 import type {Fixtures} from './types';
@@ -9,6 +10,10 @@ export const test = base.extend<Fixtures>({
     mount,
     expectScreenshot,
     wait,
+    editor: async ({page}, use) => {
+        const editor = new MarkdownEditorPage(page, expect);
+        await use(editor);
+    },
 });
 
 export {expect} from '@playwright/experimental-ct-react';

tests/playwright/core/index.ts

@@ -12,6 +12,8 @@ import type {
     TestFixture,
 } from '@playwright/test';
 
+import type {MarkdownEditorPage} from './editor';
+
 interface ComponentFixtures {
     mount<HooksConfig>(
         component: JSX.Element,
@@ -31,6 +33,7 @@ export type Fixtures = {
     mount: MountFixture;
     expectScreenshot: ExpectScreenshotFixture;
     wait: WaitFixture;
+    editor: MarkdownEditorPage;
 };
 
 export type MountFixture = ComponentFixtures['mount'];

tests/playwright/core/types.ts

@@ -2,10 +2,13 @@ import {resolve} from 'node:path';
 
 import type {PlaywrightTestConfig} from '@playwright/experimental-ct-react';
 import {defineConfig, devices} from '@playwright/experimental-ct-react';
+import type {InlineConfig} from 'vite'; // eslint-disable-line import/no-extraneous-dependencies
 
-function pathFromRoot(p: string) {
+import tsConfig from '../../tsconfig.json';
+
+const pathFromRoot = (p: string) => {
     return resolve(__dirname, '../', p);
-}
+};
 
 const reporter: PlaywrightTestConfig['reporter'] = [];
 
@@ -23,7 +26,19 @@ reporter.push(
     ],
 );
 
-const ctViteConfig = {
+const aliasesFromTsConf = (() => {
+    const baseUrl = resolve(__dirname, '..', '..', tsConfig.compilerOptions.baseUrl);
+    const paths = tsConfig.compilerOptions.paths;
+
+    return Object.entries(paths).reduce<Record<string, string>>((acc, [key, value]) => {
+        const cleanKey = key.replace('/*', '');
+        const cleanValue = value[0].replace('/*', '');
+        acc[cleanKey] = resolve(baseUrl, cleanValue);
+        return acc;
+    }, {});
+})();
+
+const ctViteConfig: InlineConfig = {
     css: {
         preprocessorOptions: {
             scss: {
@@ -33,11 +48,7 @@ const ctViteConfig = {
     },
     resolve: {
         alias: {
-            '#core': resolve(__dirname, '../../src/core'),
-            '#cm': resolve(__dirname, '../../src/cm'),
-            '#pm': resolve(__dirname, '../../src/pm'),
-            src: resolve(__dirname, '../../src'),
-            playwright: resolve(__dirname),
+            ...aliasesFromTsConf,
             '~@gravity-ui/uikit/styles/mixins': '@gravity-ui/uikit/styles/mixins',
         },
     },

tests/playwright/playwright.config.ts

@@ -0,0 +1,23 @@
+import {test} from 'playwright/core';
+
+import {Playground} from './Playground.helpers';
+
+test.describe('Clipboard', () => {
+    test('should wysiwyg parse markdown markup when pasting', async ({
+        mount,
+        expectScreenshot,
+        editor,
+    }) => {
+        await mount(<Playground />);
+
+        await editor.assertMode('wysiwyg');
+        await editor.clearContent();
+
+        await editor.paste({
+            'text/plain': 'Lorem ipsum dolor sit amet',
+            'text/yfm': '## Lorem *ipsum* **dolor** ~~sit~~ amet',
+        });
+
+        await expectScreenshot();
+    });
+});

tests/visual-tests/playground/Clipboard.visual.test.tsx

@@ -0,0 +1,13 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultPlaygroundStories from '../../../demo/stories/playground/Playground.stories';
+
+const PlaygroundStories = composeStories(DefaultPlaygroundStories, {
+    argsEnhancers: [
+        () => ({
+            stickyToolbar: false,
+        }),
+    ],
+});
+
+export const Playground = PlaygroundStories.Story;