test: update environment for correct preview testing (cut) (#710)

Author: makhnatkin

demo/components/Playground.tsx

@@ -312,7 +312,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                 <MarkdownEditorView
                     autofocus
                     className={className}
-                    qa="playground-md-editor"
+                    qa="demo-md-editor"
                     stickyToolbar={Boolean(stickyToolbar)}
                     toolbarsPreset={toolbarsPreset}
                     wysiwygToolbarConfig={wysiwygToolbarConfig}

demo/components/SplitModePreview.tsx

@@ -86,6 +86,7 @@ export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
 
     return (
         <Preview
+            qa="demo-md-preview"
             ref={divRef}
             html={html}
             meta={meta}

src/bundle/MarkdownEditorView.tsx

@@ -277,7 +277,12 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
                     role="button"
                     tabIndex={0}
                 >
-                    <div className={b('editor-wrapper')} ref={editorWrapperRef}>
+                    <div
+                        className={b('editor-wrapper')}
+                        ref={editorWrapperRef}
+                        data-qa="g-md-editor-mode"
+                        data-mode={editor.currentMode}
+                    >
                         {showPreview ? (
                             <>
                                 <div className={b('preview-wrapper')}>
@@ -300,7 +305,6 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
                                         toolbarConfig={wysiwygToolbarConfig}
                                         toolbarVisible={editor.toolbarVisible}
                                         hiddenActionsConfig={wysiwygHiddenActionsConfig}
-                                        qa="g-md-editor-mode"
                                         className={b('editor', {mode: editorMode})}
                                         toolbarClassName={b('toolbar')}
                                         stickyToolbar={stickyToolbar}
@@ -318,7 +322,6 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
                                         splitMode={editor.splitMode}
                                         splitModeEnabled={editor.splitModeEnabled}
                                         hiddenActionsConfig={markupHiddenActionsConfig}
-                                        qa="g-md-editor-mode"
                                         className={b('editor', {mode: editorMode})}
                                         toolbarClassName={b('toolbar')}
                                         stickyToolbar={stickyToolbar}

src/bundle/MarkupEditorView.tsx

@@ -61,11 +61,7 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
     });
 
     return (
-        <div
-            className={b({toolbar: toolbarVisible}, [className])}
-            data-mode={editor.currentMode}
-            data-qa={qa}
-        >
+        <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>
             {toolbarVisible ? (
                 <MarkupToolbarContextProvider
                     value={{

src/bundle/WysiwygEditorView.tsx

@@ -56,11 +56,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
         });
     });
     return (
-        <div
-            className={b({toolbar: toolbarVisible}, [className])}
-            data-mode={editor.currentMode}
-            data-qa={qa}
-        >
+        <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>
             {toolbarVisible ? (
                 <ToolbarView
                     editor={editor}

src/bundle/settings/index.tsx

@@ -54,6 +54,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                         hotkey="mod+shift+p"
                     >
                         <Button
+                            qa="g-md-markup-preview-button"
                             size="m"
                             view="flat"
                             pin="round-round"
@@ -129,7 +130,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
         <div className={bContent(null, [className])} data-qa="g-md-settings-content">
             <Menu size="l" className={bContent('mode')}>
                 <Menu.Item
-                    qa="md-settings-mode-wysiwyg"
+                    qa="g-md-settings-mode-wysiwyg"
                     active={mode === 'wysiwyg'}
                     onClick={() => {
                         onModeChange('wysiwyg');
@@ -140,7 +141,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                     {i18n('settings_wysiwyg')}
                 </Menu.Item>
                 <Menu.Item
-                    qa="md-settings-mode-markup"
+                    qa="g-md-settings-mode-markup"
                     active={mode === 'markup'}
                     onClick={() => {
                         onModeChange('markup');

tests/playwright/core/editor.ts

@@ -10,9 +10,15 @@ class MarkdownEditorLocators {
     readonly settingsContent;
 
     readonly contenteditable;
+    readonly previewContent;
+
+    readonly previewButton;
 
     constructor(page: Page) {
-        this.component = page.getByTestId('playground-md-editor');
+        this.component = page.getByTestId('demo-md-editor');
+        this.previewContent = page.getByTestId('demo-md-preview');
+        this.previewButton = page.getByTestId('g-md-markup-preview-button');
+
         this.editor = page.getByTestId('g-md-editor-mode');
 
         this.settingsButton = page.getByTestId('g-md-settings-button');
@@ -24,6 +30,8 @@ class MarkdownEditorLocators {
 
 type PasteData = Partial<Record<DataTransferType, string>>;
 
+type VisibleState = 'attached' | 'detached' | 'visible' | 'hidden' | undefined;
+
 export class MarkdownEditorPage {
     protected readonly page: Page;
     protected readonly expect: Expect;
@@ -54,10 +62,40 @@ export class MarkdownEditorPage {
         if ((await this.getMode()) === mode) return;
 
         await this.openSettingsPopup();
-        await this.locators.settingsContent.getByTestId(`md-settings-mode-${mode}`).click();
+        await this.locators.settingsContent.getByTestId(`g-md-settings-mode-${mode}`).click();
         await this.assertMode(mode);
     }
 
+    async getPreview(): Promise<VisibleState> {
+        const previewContent = await this.locators.previewContent;
+        if (await previewContent.isVisible()) {
+            return 'visible';
+        }
+
+        const previewButton = await this.locators.previewButton;
+        if (await previewButton.isVisible()) {
+            return 'hidden';
+        }
+        return undefined;
+    }
+
+    async switchPreview(state?: VisibleState) {
+        const currentState = await this.getPreview();
+        const revertState = currentState === 'visible' ? 'hidden' : 'visible';
+        const targetState = state === undefined ? revertState : state;
+
+        if (currentState === targetState) {
+            return;
+        }
+
+        await this.switchMode('markup');
+        await this.locators.previewButton.click();
+
+        await this.locators.previewContent.waitFor({
+            state: targetState,
+        });
+    }
+
     async assertMode(mode: MarkdownEditorMode) {
         await this.expect.poll(() => this.getMode()).toBe(mode);
     }