Skip to content

Commit 0182567

Browse files
makhnatkinmakhnatkin
authored
ci: integrated visual tests via playwright (#670)
1 parent e476365 commit 0182567

File tree

141 files changed

+3396
-1212
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+3396
-1212
lines changed

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: PR Visual Tests Report
2+
3+
on:
4+
workflow_run:
5+
workflows: ['PR Visual Tests']
6+
types:
7+
- completed
8+
9+
jobs:
10+
comment:
11+
name: Create GitHub Comment
12+
if: github.event.workflow_run.event == 'pull_request'
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Download Artifacts
16+
uses: actions/download-artifact@v4
17+
with:
18+
github-token: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
19+
run-id: ${{ github.event.workflow_run.id }}
20+
- name: Extract PR Number
21+
id: pr
22+
run: echo "::set-output name=id::$(<pr/pr-id.txt)"
23+
shell: bash
24+
- name: Install AWS CLI
25+
uses: unfor19/install-aws-cli-action@v1
26+
with:
27+
version: 2.22.35
28+
arch: amd64
29+
- name: Upload to S3
30+
env:
31+
AWS_ACCESS_KEY_ID: ${{ secrets.STORYBOOK_S3_KEY_ID }}
32+
AWS_SECRET_ACCESS_KEY: ${{ secrets.STORYBOOK_S3_SECRET_KEY }}
33+
AWS_DEFAULT_REGION: ru-central1
34+
AWS_EC2_METADATA_DISABLED: true
35+
run: aws s3 cp playwright-report s3://playwright-reports/markdown-editor/pulls/${{ steps.pr.outputs.id}}/ --endpoint-url=https://storage.yandexcloud.net --recursive
36+
shell: bash
37+
- name: Create Comment
38+
uses: marocchino/sticky-pull-request-comment@v2
39+
with:
40+
GITHUB_TOKEN: ${{ secrets.GRAVITY_UI_BOT_GITHUB_TOKEN }}
41+
number: ${{ steps.pr.outputs.id }}
42+
header: visual tests report
43+
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

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: PR Visual Tests
2+
3+
on:
4+
pull_request:
5+
6+
jobs:
7+
visual_tests:
8+
name: Visual Tests
9+
runs-on: ubuntu-latest
10+
container:
11+
image: mcr.microsoft.com/playwright:v1.49.0-jammy
12+
steps:
13+
- uses: actions/checkout@v4
14+
- uses: actions/setup-node@v4
15+
with:
16+
node-version: 20
17+
cache: npm
18+
- name: Install Packages
19+
run: npm ci
20+
- name: Run Visual Tests
21+
run: npm run playwright
22+
env:
23+
CI: 'true'
24+
- name: Upload Playwright Report
25+
if: always()
26+
uses: actions/upload-artifact@v4
27+
with:
28+
name: playwright-report
29+
path: ./playwright-report
30+
retention-days: 1
31+
- name: Save PR ID
32+
if: always()
33+
run: |
34+
pr="${{ github.event.pull_request.number }}"
35+
echo $pr > ./pr-id.txt
36+
shell: bash
37+
- name: Create PR Artifact
38+
if: always()
39+
uses: actions/upload-artifact@v4
40+
with:
41+
name: pr
42+
path: ./pr-id.txt

‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,14 @@ temp/
1717

1818
# build
1919
.cache
20+
.cache*
2021
build/
2122
coverage/
2223
storybook-static/
2324
.eslintcache
2425
demo/docs
26+
27+
# tests
28+
playwright-report*
29+
test-results/
30+

‎.storybook/manager.ts

-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,4 @@ import {themes} from './theme';
33

44
addons.setConfig({
55
theme: themes.light,
6-
sidebar: {
7-
collapsedRoots: ['docs'],
8-
},
96
});

‎demo/components/Playground.scss

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
margin: 0;
3030
padding: 5px 10px;
3131

32+
font-family: var(--g-font-family-monospace);
33+
3234
background-color: var(--g-color-base-generic);
3335
}
3436

‎demo/components/PlaygroundLayout.tsx

+16-13
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,23 @@ export const PlaygroundLayout: React.FC<PlaygroundLayoutProps> = function Playgr
4949
<div className={b('actions')}>{props.actions?.({})}</div>
5050

5151
<hr />
52-
53-
<StrictMode>
54-
<div className={b('editor')} style={{height: props.viewHeight ?? 'initial'}}>
55-
{props.view({className: b('editor-view')})}
56-
57-
<WysiwygDevTools editor={editor} />
58-
<WysiwygSelection editor={editor} className={b('pm-selection')} />
52+
<div className={b('editor-markup')}>
53+
<StrictMode>
54+
<div className={b('editor')} style={{height: props.viewHeight ?? 'initial'}}>
55+
{props.view({className: b('editor-view')})}
56+
57+
<WysiwygDevTools editor={editor} />
58+
<WysiwygSelection editor={editor} className={b('pm-selection')} />
59+
</div>
60+
</StrictMode>
61+
62+
<hr />
63+
64+
<div className={b('preview')}>
65+
{editor.currentMode === 'wysiwyg' && (
66+
<pre className={b('markup')}>{mdMarkup}</pre>
67+
)}
5968
</div>
60-
</StrictMode>
61-
62-
<hr />
63-
64-
<div className={b('preview')}>
65-
{editor.currentMode === 'wysiwyg' && <pre className={b('markup')}>{mdMarkup}</pre>}
6669
</div>
6770
</div>
6871
);

‎demo/stories/presets/Preset.tsx

+20-18
Original file line numberDiff line numberDiff line change
@@ -129,25 +129,27 @@ export const Preset = memo<PresetDemoProps>((props) => {
129129
<span className={b('version')}>{VERSION}</span>
130130
</div>
131131
<hr />
132-
<StrictMode>
133-
<div className={b('editor')} style={{height: height ?? 'initial'}}>
134-
<MarkdownEditorView
135-
autofocus
136-
toolbarsPreset={toolbarsPreset}
137-
className={b('editor-view')}
138-
stickyToolbar={Boolean(stickyToolbar)}
139-
settingsVisible={settingsVisible}
140-
editor={mdEditor}
141-
/>
142-
<WysiwygDevTools editor={mdEditor} />
143-
<WysiwygSelection editor={mdEditor} className={b('pm-selection')} />
132+
<div className={b('editor-markup')}>
133+
<StrictMode>
134+
<div className={b('editor')} style={{height: height ?? 'initial'}}>
135+
<MarkdownEditorView
136+
autofocus
137+
toolbarsPreset={toolbarsPreset}
138+
className={b('editor-view')}
139+
stickyToolbar={Boolean(stickyToolbar)}
140+
settingsVisible={settingsVisible}
141+
editor={mdEditor}
142+
/>
143+
<WysiwygDevTools editor={mdEditor} />
144+
<WysiwygSelection editor={mdEditor} className={b('pm-selection')} />
145+
</div>
146+
</StrictMode>
147+
148+
<hr />
149+
150+
<div className={b('preview')}>
151+
{editorMode === 'wysiwyg' && <pre className={b('markup')}>{mdRaw}</pre>}
144152
</div>
145-
</StrictMode>
146-
147-
<hr />
148-
149-
<div className={b('preview')}>
150-
{editorMode === 'wysiwyg' && <pre className={b('markup')}>{mdRaw}</pre>}
151153
</div>
152154
</div>
153155
);

‎demo/stories/presets/Presets.stories.tsx

+4-57
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,9 @@
11
import type {StoryObj} from '@storybook/react';
22

3-
import {ActionName as Action} from 'src/bundle/config/action-names';
4-
import {ToolbarName as Toolbar} from 'src/modules/toolbars/constants';
5-
import {
6-
boldItemView,
7-
boldItemWysiwyg,
8-
colorifyItemMarkup,
9-
colorifyItemView,
10-
colorifyItemWysiwyg,
11-
italicItemMarkup,
12-
italicItemView,
13-
redoItemMarkup,
14-
redoItemView,
15-
redoItemWysiwyg,
16-
undoItemMarkup,
17-
undoItemView,
18-
undoItemWysiwyg,
19-
} from 'src/modules/toolbars/items';
20-
213
import {Preset as component} from './Preset';
4+
import {toolbarPresets} from './presets';
5+
6+
const {custom} = toolbarPresets;
227

238
export const Zero: StoryObj<typeof component> = {
249
args: {preset: 'zero'},
@@ -42,45 +27,7 @@ export const Full: StoryObj<typeof component> = {
4227

4328
export const Custom: StoryObj<typeof component> = {
4429
args: {
45-
toolbarsPreset: {
46-
items: {
47-
[Action.undo]: {
48-
view: undoItemView,
49-
wysiwyg: undoItemWysiwyg,
50-
markup: undoItemMarkup,
51-
},
52-
[Action.redo]: {
53-
view: redoItemView,
54-
wysiwyg: redoItemWysiwyg,
55-
markup: redoItemMarkup,
56-
},
57-
[Action.bold]: {
58-
view: boldItemView,
59-
wysiwyg: boldItemWysiwyg,
60-
},
61-
[Action.italic]: {
62-
view: italicItemView,
63-
markup: italicItemMarkup,
64-
},
65-
[Action.colorify]: {
66-
view: colorifyItemView,
67-
wysiwyg: colorifyItemWysiwyg,
68-
markup: colorifyItemMarkup,
69-
},
70-
},
71-
orders: {
72-
[Toolbar.wysiwygMain]: [
73-
[Action.colorify],
74-
[Action.bold],
75-
[Action.undo, Action.redo],
76-
],
77-
[Toolbar.markupMain]: [
78-
[Action.colorify],
79-
[Action.italic],
80-
[Action.undo, Action.redo],
81-
],
82-
},
83-
},
30+
toolbarsPreset: custom,
8431
},
8532
};
8633

‎demo/stories/presets/presets.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {ActionName as Action} from 'src/bundle/config/action-names';
2+
import {ToolbarName as Toolbar} from 'src/modules/toolbars/constants';
3+
import {
4+
boldItemView,
5+
boldItemWysiwyg,
6+
colorifyItemMarkup,
7+
colorifyItemView,
8+
colorifyItemWysiwyg,
9+
italicItemMarkup,
10+
italicItemView,
11+
redoItemMarkup,
12+
redoItemView,
13+
redoItemWysiwyg,
14+
undoItemMarkup,
15+
undoItemView,
16+
undoItemWysiwyg,
17+
} from 'src/modules/toolbars/items';
18+
import type {ToolbarsPreset} from 'src/modules/toolbars/types';
19+
20+
export const toolbarPresets: Record<string, ToolbarsPreset> = {
21+
custom: {
22+
items: {
23+
[Action.undo]: {
24+
view: undoItemView,
25+
wysiwyg: undoItemWysiwyg,
26+
markup: undoItemMarkup,
27+
},
28+
[Action.redo]: {
29+
view: redoItemView,
30+
wysiwyg: redoItemWysiwyg,
31+
markup: redoItemMarkup,
32+
},
33+
[Action.bold]: {
34+
view: boldItemView,
35+
wysiwyg: boldItemWysiwyg,
36+
},
37+
[Action.italic]: {
38+
view: italicItemView,
39+
markup: italicItemMarkup,
40+
},
41+
[Action.colorify]: {
42+
view: colorifyItemView,
43+
wysiwyg: colorifyItemWysiwyg,
44+
markup: colorifyItemMarkup,
45+
},
46+
},
47+
orders: {
48+
[Toolbar.wysiwygMain]: [[Action.colorify], [Action.bold], [Action.undo, Action.redo]],
49+
[Toolbar.markupMain]: [[Action.colorify], [Action.italic], [Action.undo, Action.redo]],
50+
},
51+
},
52+
};

0 commit comments

Comments
 (0)