ci: integrated visual tests via playwright

.github/workflows/pr-visual-tests-report.yml

@@ -0,0 +1,43 @@
+name: PR Visual Tests Report
+
+on:
+  workflow_run:
+    workflows: ['PR Visual Tests']
+    types:
+      - completed
+
+jobs:
+  comment:
+    name: Create GitHub Comment
+    if: github.event.workflow_run.event == 'pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+      - name: Extract PR Number
+        id: pr
+        run: echo "::set-output name=id::$(<pr/pr-id.txt)"
+        shell: bash
+      - name: Install AWS CLI
+        uses: unfor19/install-aws-cli-action@v1
+        with:
+          version: 2.22.35
+          arch: amd64
+      - name: Upload to S3
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.STORYBOOK_S3_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
+          AWS_DEFAULT_REGION: ru-central1
+          AWS_EC2_METADATA_DISABLED: true
+        run: aws s3 cp playwright-report s3://playwright-reports/markdown-editor/pulls/${{ steps.pr.outputs.id}}/ --endpoint-url=https://storage.yandexcloud.net  --recursive
+        shell: bash
+      - name: Create Comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
+          number: ${{ steps.pr.outputs.id }}
+          header: visual tests report
+          message: '[Visual Tests Report](https://storage.yandexcloud.net/playwright-reports/markdown-editor/pulls/${{ steps.pr.outputs.id }}/index.html) is ready.'

.github/workflows/pr-visual-tests.yml

@@ -0,0 +1,42 @@
+name: PR Visual Tests
+
+on:
+  pull_request:
+
+jobs:
+  visual_tests:
+    name: Visual Tests
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.49.0-jammy
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install Packages
+        run: npm ci
+      - name: Run Visual Tests
+        run: npm run playwright
+        env:
+          CI: 'true'
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: ./playwright-report
+          retention-days: 1
+      - name: Save PR ID
+        if: always()
+        run: |
+          pr="${{ github.event.pull_request.number }}"
+          echo $pr > ./pr-id.txt
+        shell: bash
+      - name: Create PR Artifact
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: pr
+          path: ./pr-id.txt

.gitignore

@@ -17,8 +17,14 @@ temp/
 
 # build
 .cache
+.cache*
 build/
 coverage/
 storybook-static/
 .eslintcache
 demo/docs
+
+# tests
+playwright-report*
+test-results/
+

.storybook/manager.ts

@@ -3,7 +3,4 @@ import {themes} from './theme';
 
 addons.setConfig({
     theme: themes.light,
-    sidebar: {
-        collapsedRoots: ['docs'],
-    },
 });

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);
     }
 

demo/components/PlaygroundLayout.tsx

@@ -49,20 +49,23 @@ export const PlaygroundLayout: React.FC<PlaygroundLayoutProps> = function Playgr
             <div className={b('actions')}>{props.actions?.({})}</div>
 
             <hr />
-
-            <StrictMode>
-                <div className={b('editor')} style={{height: props.viewHeight ?? 'initial'}}>
-                    {props.view({className: b('editor-view')})}
-
-                    <WysiwygDevTools editor={editor} />
-                    <WysiwygSelection editor={editor} className={b('pm-selection')} />
+            <div className={b('editor-markup')}>
+                <StrictMode>
+                    <div className={b('editor')} style={{height: props.viewHeight ?? 'initial'}}>
+                        {props.view({className: b('editor-view')})}
+
+                        <WysiwygDevTools editor={editor} />
+                        <WysiwygSelection editor={editor} className={b('pm-selection')} />
+                    </div>
+                </StrictMode>
+
+                <hr />
+
+                <div className={b('preview')}>
+                    {editor.currentMode === 'wysiwyg' && (
+                        <pre className={b('markup')}>{mdMarkup}</pre>
+                    )}
                 </div>
-            </StrictMode>
-
-            <hr />
-
-            <div className={b('preview')}>
-                {editor.currentMode === 'wysiwyg' && <pre className={b('markup')}>{mdMarkup}</pre>}
             </div>
         </div>
     );

demo/stories/presets/Preset.tsx

@@ -129,25 +129,27 @@ export const Preset = memo<PresetDemoProps>((props) => {
                 <span className={b('version')}>{VERSION}</span>
             </div>
             <hr />
-            <StrictMode>
-                <div className={b('editor')} style={{height: height ?? 'initial'}}>
-                    <MarkdownEditorView
-                        autofocus
-                        toolbarsPreset={toolbarsPreset}
-                        className={b('editor-view')}
-                        stickyToolbar={Boolean(stickyToolbar)}
-                        settingsVisible={settingsVisible}
-                        editor={mdEditor}
-                    />
-                    <WysiwygDevTools editor={mdEditor} />
-                    <WysiwygSelection editor={mdEditor} className={b('pm-selection')} />
+            <div className={b('editor-markup')}>
+                <StrictMode>
+                    <div className={b('editor')} style={{height: height ?? 'initial'}}>
+                        <MarkdownEditorView
+                            autofocus
+                            toolbarsPreset={toolbarsPreset}
+                            className={b('editor-view')}
+                            stickyToolbar={Boolean(stickyToolbar)}
+                            settingsVisible={settingsVisible}
+                            editor={mdEditor}
+                        />
+                        <WysiwygDevTools editor={mdEditor} />
+                        <WysiwygSelection editor={mdEditor} className={b('pm-selection')} />
+                    </div>
+                </StrictMode>
+
+                <hr />
+
+                <div className={b('preview')}>
+                    {editorMode === 'wysiwyg' && <pre className={b('markup')}>{mdRaw}</pre>}
                 </div>
-            </StrictMode>
-
-            <hr />
-
-            <div className={b('preview')}>
-                {editorMode === 'wysiwyg' && <pre className={b('markup')}>{mdRaw}</pre>}
             </div>
         </div>
     );

demo/stories/presets/Presets.stories.tsx

@@ -1,24 +1,9 @@
 import type {StoryObj} from '@storybook/react';
 
-import {ActionName as Action} from 'src/bundle/config/action-names';
-import {ToolbarName as Toolbar} from 'src/modules/toolbars/constants';
-import {
-    boldItemView,
-    boldItemWysiwyg,
-    colorifyItemMarkup,
-    colorifyItemView,
-    colorifyItemWysiwyg,
-    italicItemMarkup,
-    italicItemView,
-    redoItemMarkup,
-    redoItemView,
-    redoItemWysiwyg,
-    undoItemMarkup,
-    undoItemView,
-    undoItemWysiwyg,
-} from 'src/modules/toolbars/items';
-
 import {Preset as component} from './Preset';
+import {toolbarPresets} from './presets';
+
+const {custom} = toolbarPresets;
 
 export const Zero: StoryObj<typeof component> = {
     args: {preset: 'zero'},
@@ -42,45 +27,7 @@ export const Full: StoryObj<typeof component> = {
 
 export const Custom: StoryObj<typeof component> = {
     args: {
-        toolbarsPreset: {
-            items: {
-                [Action.undo]: {
-                    view: undoItemView,
-                    wysiwyg: undoItemWysiwyg,
-                    markup: undoItemMarkup,
-                },
-                [Action.redo]: {
-                    view: redoItemView,
-                    wysiwyg: redoItemWysiwyg,
-                    markup: redoItemMarkup,
-                },
-                [Action.bold]: {
-                    view: boldItemView,
-                    wysiwyg: boldItemWysiwyg,
-                },
-                [Action.italic]: {
-                    view: italicItemView,
-                    markup: italicItemMarkup,
-                },
-                [Action.colorify]: {
-                    view: colorifyItemView,
-                    wysiwyg: colorifyItemWysiwyg,
-                    markup: colorifyItemMarkup,
-                },
-            },
-            orders: {
-                [Toolbar.wysiwygMain]: [
-                    [Action.colorify],
-                    [Action.bold],
-                    [Action.undo, Action.redo],
-                ],
-                [Toolbar.markupMain]: [
-                    [Action.colorify],
-                    [Action.italic],
-                    [Action.undo, Action.redo],
-                ],
-            },
-        },
+        toolbarsPreset: custom,
     },
 };
 

demo/stories/presets/presets.ts

@@ -0,0 +1,52 @@
+import {ActionName as Action} from 'src/bundle/config/action-names';
+import {ToolbarName as Toolbar} from 'src/modules/toolbars/constants';
+import {
+    boldItemView,
+    boldItemWysiwyg,
+    colorifyItemMarkup,
+    colorifyItemView,
+    colorifyItemWysiwyg,
+    italicItemMarkup,
+    italicItemView,
+    redoItemMarkup,
+    redoItemView,
+    redoItemWysiwyg,
+    undoItemMarkup,
+    undoItemView,
+    undoItemWysiwyg,
+} from 'src/modules/toolbars/items';
+import type {ToolbarsPreset} from 'src/modules/toolbars/types';
+
+export const toolbarPresets: Record<string, ToolbarsPreset> = {
+    custom: {
+        items: {
+            [Action.undo]: {
+                view: undoItemView,
+                wysiwyg: undoItemWysiwyg,
+                markup: undoItemMarkup,
+            },
+            [Action.redo]: {
+                view: redoItemView,
+                wysiwyg: redoItemWysiwyg,
+                markup: redoItemMarkup,
+            },
+            [Action.bold]: {
+                view: boldItemView,
+                wysiwyg: boldItemWysiwyg,
+            },
+            [Action.italic]: {
+                view: italicItemView,
+                markup: italicItemMarkup,
+            },
+            [Action.colorify]: {
+                view: colorifyItemView,
+                wysiwyg: colorifyItemWysiwyg,
+                markup: colorifyItemMarkup,
+            },
+        },
+        orders: {
+            [Toolbar.wysiwygMain]: [[Action.colorify], [Action.bold], [Action.undo, Action.redo]],
+            [Toolbar.markupMain]: [[Action.colorify], [Action.italic], [Action.undo, Action.redo]],
+        },
+    },
+};