chore: fix visual tests (Punctuation) (#1017)

Author: makhnatkin

demo/scripts/playwright-docker.sh

@@ -66,8 +66,14 @@ fi
 
 if [[ "$1" = "update" ]]; then
   echo "Running playwright tests (update)"
+  EXTRA_ARGS=""
+  if [[ $# -ge 2 ]]; then
+    for arg in "${@:2}"; do
+      EXTRA_ARGS="$EXTRA_ARGS $(printf '%q' "$arg")"
+    done
+  fi
   run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm --filter '@gravity-ui/*' build'
-  run_command 'COREPACK_INTEGRITY_KEYS=0 corepack pnpm --filter '@markdown-editor/demo' run playwright:update'
+  run_command "cd demo && COREPACK_INTEGRITY_KEYS=0 corepack pnpm exec playwright test --config=tests/playwright/playwright.config.ts -u $EXTRA_ARGS"
   exit 0
 fi
 

demo/src/stories/markdown/Markdown.stories.tsx

@@ -61,7 +61,7 @@ export const PunctuationBoundaries: StoryObj<typeof component> = {
         initial: markup.punctuationBoundaries,
         initialEditor: 'markup',
         initialSplitModeEnabled: true,
-        splitModeOrientation: 'horizontal',
+        splitModeOrientation: 'vertical',
     },
 };
 

demo/tests/playwright/core/mount.tsx

@@ -35,6 +35,7 @@ export const mount: PlaywrightFixture<MountFixture> = async ({mount: baseMount},
                         `}
                     </style>
                 )}
+                {options?.styles && <style>{options.styles}</style>}
                 {component}
             </div>,
             options,

demo/tests/playwright/core/types.ts

@@ -24,6 +24,7 @@ interface ComponentFixtures {
             width?: number | string;
             rootStyle?: React.CSSProperties;
             hidePlaygroundBlocks?: boolean;
+            styles?: string;
         },
     ): Promise<MountResult>;
 }

demo/tests/visual-tests/MarkdownExtensions.visual.test.tsx

@@ -51,18 +51,12 @@ test.describe('Extensions, Markdown', () => {
         await mount(<MarkdownStories.DefinitionList />);
         await expectScreenshot();
     });
-    test('Punctuation boundaries', async ({mount, expectScreenshot, page}) => {
-        await page.setViewportSize({width: 1280, height: 1400});
+    test('Punctuation boundaries', async ({page, mount, expectScreenshot}) => {
         await mount(<MarkdownStories.PunctuationBoundaries />, {
-            rootStyle: {height: 'auto', width: 1200},
-        });
-        await page.addStyleTag({
-            content:
-                '.cm-editor { height: auto !important; } .cm-scroller { overflow: visible !important; }',
+            hidePlaygroundBlocks: true,
+            styles: '.cm-editor { height: auto !important; } .cm-scroller { overflow: visible !important; }',
         });
         await page.waitForTimeout(300);
-        await expectScreenshot({
-            component: page.locator('.playwright-wrapper-test'),
-        });
+        await expectScreenshot();
     });
 });