ci: added pre style

Author: makhnatkin

demo/components/Playground.scss

@@ -29,6 +29,8 @@
         margin: 0;
         padding: 5px 10px;
 
+        font-family: var(--g-font-family-monospace);
+
         background-color: var(--g-color-base-generic);
     }
 

tests/playwright/core/expectScreenshotFixture.ts

@@ -44,6 +44,9 @@ export const expectScreenshotFixture: PlaywrightFixture<ExpectScreenshotFixture>
         // Wait for loading fonts
         await page.evaluate(() => document.fonts.ready);
 
+        // Additional wait
+        await page.waitForTimeout(100);
+
         if (themes?.includes('light')) {
             await page.emulateMedia({colorScheme: 'light'});
 

tests/visual-tests/MarkdownExtensions.helpers.tsx

@@ -0,0 +1,15 @@
+import {PlaygroundMini} from '../../demo/components/PlaygroundMini';
+import {markup} from '../../demo/stories/markdown/markup';
+
+export const Heading = () => <PlaygroundMini initial={markup.heading} />;
+export const Blockquotes = () => <PlaygroundMini initial={markup.blockquote} />;
+export const Emphasis = () => <PlaygroundMini initial={markup.emphasis} />;
+export const HorizontalRules = () => <PlaygroundMini initial={markup.horizontalRules} />;
+export const Lists = () => <PlaygroundMini initial={markup.lists} />;
+export const Code = () => <PlaygroundMini initial={markup.code} />;
+export const Tables = () => <PlaygroundMini initial={markup.tables} />;
+export const Links = () => <PlaygroundMini initial={markup.links} />;
+export const Images = () => <PlaygroundMini initial={markup.images} />;
+export const SubscriptSuperscript = () => <PlaygroundMini initial={markup.subAndSub} />;
+export const Emojis = () => <PlaygroundMini initial={markup.emojis} />;
+export const DefinitionList = () => <PlaygroundMini initial={markup.deflist} />;

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

@@ -1,55 +1,67 @@
 import {test} from 'playwright/core';
 
-import {PlaygroundMini} from '../../demo/components/PlaygroundMini';
-import {markup} from '../../demo/stories/markdown/markup';
+import {
+    Blockquotes,
+    Code,
+    DefinitionList,
+    Emojis,
+    Emphasis,
+    Heading,
+    HorizontalRules,
+    Images,
+    Links,
+    Lists,
+    SubscriptSuperscript,
+    Tables,
+} from './MarkdownExtensions.helpers';
 
 test.describe('Extensions, Markdown', () => {
     test('Heading', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.heading} />);
+        await mount(<Heading />);
         await expectScreenshot();
     });
     test('Blockquotes', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.blockquote} />);
+        await mount(<Blockquotes />);
         await expectScreenshot();
     });
     test('Emphasis', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.emphasis} />);
+        await mount(<Emphasis />);
         await expectScreenshot();
     });
     test('Horizontal Rules', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.horizontalRules} />);
+        await mount(<HorizontalRules />);
         await expectScreenshot();
     });
     test('Lists', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.lists} />);
+        await mount(<Lists />);
         await expectScreenshot();
     });
     test('Code', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.code} />);
+        await mount(<Code />);
         await expectScreenshot();
     });
     test('Tables', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.tables} />);
+        await mount(<Tables />);
         await expectScreenshot();
     });
     test('Links', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.links} />);
+        await mount(<Links />);
         await expectScreenshot();
     });
     test('Images', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.images} />);
+        await mount(<Images />);
         await expectScreenshot();
     });
     test('Subscript & Superscript', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.subAndSub} />);
+        await mount(<SubscriptSuperscript />);
         await expectScreenshot();
     });
     test('Emojis', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.emojis} />);
+        await mount(<Emojis />);
         await expectScreenshot();
     });
     test('Definition list', async ({mount, expectScreenshot}) => {
-        await mount(<PlaygroundMini initial={markup.deflist} />);
+        await mount(<DefinitionList />);
         await expectScreenshot();
     });
 });

tests/visual-tests/helpers.tsx tests/visual-tests/Presets.helpers.tsxtests/visual-tests/helpers.tsx renamed to tests/visual-tests/Presets.helpers.tsx

@@ -1,6 +1,6 @@
 import {test} from 'playwright/core';
 
-import {Commonmark, Custom, Default, Full, Yfm, Zero} from './helpers';
+import {Commonmark, Custom, Default, Full, Yfm, Zero} from './Presets.helpers';
 
 test.describe('Extensions, Presets', () => {
     test('Zero', async ({mount, expectScreenshot}) => {