Skip to content

Commit c16aa59

Browse files
d3m1d0vd3m1d0v
committed
fix(bundle): added qa-attributes
1 parent 6ab3b98 commit c16aa59

File tree

5 files changed

+79
-54
lines changed

5 files changed

+79
-54
lines changed

‎demo/components/Playground.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
307307
<MarkdownEditorView
308308
autofocus
309309
className={className}
310+
qa="playground-md-editor"
310311
stickyToolbar={Boolean(stickyToolbar)}
311312
toolbarsPreset={toolbarsPreset}
312313
wysiwygToolbarConfig={wysiwygToolbarConfig}

‎src/bundle/MarkdownEditorView.tsx‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
useState,
99
} from 'react';
1010

11-
import {useToaster} from '@gravity-ui/uikit';
11+
import {type QAProps, useToaster} from '@gravity-ui/uikit';
1212
import {ErrorBoundary} from 'react-error-boundary';
1313
import {useEnsuredForwardedRef, useKey, useUpdate} from 'react-use';
1414

@@ -37,32 +37,33 @@ import './MarkdownEditorView.scss'; // eslint-disable-line import/order
3737
export const cnEditorComponent = cn('editor-component');
3838
const b = cnEditorComponent;
3939

40-
export type MarkdownEditorViewProps = ClassNameProps & {
41-
editor?: Editor;
42-
autofocus?: boolean;
43-
toolbarsPreset?: ToolbarsPreset;
44-
/**
45-
* @deprecated use `toolbarsPreset` instead
46-
*/
47-
markupToolbarConfig?: MToolbarData;
48-
/**
49-
* @deprecated use `toolbarsPreset` instead
50-
*/
51-
wysiwygToolbarConfig?: WToolbarData;
52-
/**
53-
* @deprecated use `toolbarsPreset` instead
54-
*/
55-
markupHiddenActionsConfig?: MToolbarItemData[];
56-
/**
57-
* @deprecated use `toolbarsPreset` instead
58-
*/
59-
wysiwygHiddenActionsConfig?: WToolbarItemData[];
60-
/** @default true */
61-
settingsVisible?: boolean;
62-
stickyToolbar: boolean;
63-
enableSubmitInPreview?: boolean;
64-
hidePreviewAfterSubmit?: boolean;
65-
};
40+
export type MarkdownEditorViewProps = ClassNameProps &
41+
QAProps & {
42+
editor?: Editor;
43+
autofocus?: boolean;
44+
toolbarsPreset?: ToolbarsPreset;
45+
/**
46+
* @deprecated use `toolbarsPreset` instead
47+
*/
48+
markupToolbarConfig?: MToolbarData;
49+
/**
50+
* @deprecated use `toolbarsPreset` instead
51+
*/
52+
wysiwygToolbarConfig?: WToolbarData;
53+
/**
54+
* @deprecated use `toolbarsPreset` instead
55+
*/
56+
markupHiddenActionsConfig?: MToolbarItemData[];
57+
/**
58+
* @deprecated use `toolbarsPreset` instead
59+
*/
60+
wysiwygHiddenActionsConfig?: WToolbarItemData[];
61+
/** @default true */
62+
settingsVisible?: boolean;
63+
stickyToolbar: boolean;
64+
enableSubmitInPreview?: boolean;
65+
hidePreviewAfterSubmit?: boolean;
66+
};
6667

6768
export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewProps>(
6869
(props, ref) => {
@@ -83,6 +84,7 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
8384
);
8485

8586
const {
87+
qa,
8688
autofocus,
8789
className,
8890
settingsVisible = true,
@@ -264,6 +266,7 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
264266
>
265267
<div
266268
ref={divRef}
269+
data-qa={qa}
267270
className={b(
268271
{
269272
settings: settingsVisible,
@@ -297,6 +300,7 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
297300
toolbarConfig={wysiwygToolbarConfig}
298301
toolbarVisible={editor.toolbarVisible}
299302
hiddenActionsConfig={wysiwygHiddenActionsConfig}
303+
qa="g-md-editor-mode"
300304
className={b('editor', {mode: editorMode})}
301305
toolbarClassName={b('toolbar')}
302306
stickyToolbar={stickyToolbar}
@@ -314,6 +318,7 @@ export const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewP
314318
splitMode={editor.splitMode}
315319
splitModeEnabled={editor.splitModeEnabled}
316320
hiddenActionsConfig={markupHiddenActionsConfig}
321+
qa="g-md-editor-mode"
317322
className={b('editor', {mode: editorMode})}
318323
toolbarClassName={b('toolbar')}
319324
stickyToolbar={stickyToolbar}

‎src/bundle/MarkupEditorView.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {memo} from 'react';
22

3+
import type {QAProps} from '@gravity-ui/uikit';
4+
35
import {type ClassNameProps, cn} from '../classname';
46
import {ReactRendererComponent} from '../extensions';
57
import {globalLogger} from '../logger';
@@ -16,19 +18,20 @@ import './MarkupEditorView.scss';
1618

1719
const b = cn('markup-editor');
1820

19-
export type MarkupEditorViewProps = ClassNameProps & {
20-
editor: EditorInt;
21-
autofocus?: boolean;
22-
toolbarConfig: MToolbarData;
23-
settingsVisible?: boolean;
24-
toolbarVisible?: boolean;
25-
stickyToolbar?: boolean;
26-
toolbarClassName?: string;
27-
splitMode?: MarkdownEditorSplitMode;
28-
splitModeEnabled: boolean;
29-
hiddenActionsConfig?: MToolbarItemData[];
30-
children?: React.ReactNode;
31-
};
21+
export type MarkupEditorViewProps = ClassNameProps &
22+
QAProps & {
23+
editor: EditorInt;
24+
autofocus?: boolean;
25+
toolbarConfig: MToolbarData;
26+
settingsVisible?: boolean;
27+
toolbarVisible?: boolean;
28+
stickyToolbar?: boolean;
29+
toolbarClassName?: string;
30+
splitMode?: MarkdownEditorSplitMode;
31+
splitModeEnabled: boolean;
32+
hiddenActionsConfig?: MToolbarItemData[];
33+
children?: React.ReactNode;
34+
};
3235

3336
export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
3437
const {
@@ -38,6 +41,7 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
3841
toolbarVisible,
3942
toolbarConfig,
4043
hiddenActionsConfig,
44+
qa,
4145
className,
4246
toolbarClassName,
4347
children,
@@ -57,7 +61,11 @@ export const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {
5761
});
5862

5963
return (
60-
<div className={b({toolbar: toolbarVisible}, [className])}>
64+
<div
65+
className={b({toolbar: toolbarVisible}, [className])}
66+
data-mode={editor.currentMode}
67+
data-qa={qa}
68+
>
6169
{toolbarVisible ? (
6270
<MarkupToolbarContextProvider
6371
value={{

‎src/bundle/WysiwygEditorView.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {memo} from 'react';
22

3+
import type {QAProps} from '@gravity-ui/uikit';
4+
35
import {type ClassNameProps, cn} from '../classname';
46
import {ReactRendererComponent} from '../extensions';
57
import {globalLogger} from '../logger';
@@ -14,17 +16,18 @@ import './WysiwygEditorView.scss';
1416

1517
const b = cn('wysiwyg-editor');
1618

17-
export type WysiwygEditorViewProps = ClassNameProps & {
18-
editor: EditorInt;
19-
autofocus?: boolean;
20-
settingsVisible?: boolean;
21-
toolbarConfig: WToolbarData;
22-
toolbarVisible?: boolean;
23-
stickyToolbar?: boolean;
24-
toolbarClassName?: string;
25-
hiddenActionsConfig?: WToolbarItemData[];
26-
children?: React.ReactNode;
27-
};
19+
export type WysiwygEditorViewProps = ClassNameProps &
20+
QAProps & {
21+
editor: EditorInt;
22+
autofocus?: boolean;
23+
settingsVisible?: boolean;
24+
toolbarConfig: WToolbarData;
25+
toolbarVisible?: boolean;
26+
stickyToolbar?: boolean;
27+
toolbarClassName?: string;
28+
hiddenActionsConfig?: WToolbarItemData[];
29+
children?: React.ReactNode;
30+
};
2831

2932
export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
3033
const {
@@ -34,6 +37,7 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
3437
toolbarVisible,
3538
toolbarConfig,
3639
hiddenActionsConfig,
40+
qa,
3741
className,
3842
toolbarClassName,
3943
children,
@@ -52,7 +56,11 @@ export const WysiwygEditorView = memo<WysiwygEditorViewProps>((props) => {
5256
});
5357
});
5458
return (
55-
<div className={b({toolbar: toolbarVisible}, [className])}>
59+
<div
60+
className={b({toolbar: toolbarVisible}, [className])}
61+
data-mode={editor.currentMode}
62+
data-qa={qa}
63+
>
5664
{toolbarVisible ? (
5765
<ToolbarView
5866
editor={editor}

‎src/bundle/settings/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
7575
pin="round-round"
7676
onClick={togglePopup}
7777
ref={setChevronElement}
78+
qa="g-md-settings-button"
7879
className={bSettings('dropdown-button')}
7980
>
8081
<Icon data={Gear} />
@@ -125,9 +126,10 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
125126
showPreview,
126127
}) {
127128
return (
128-
<div className={bContent(null, [className])}>
129+
<div className={bContent(null, [className])} data-qa="g-md-settings-content">
129130
<Menu size="l" className={bContent('mode')}>
130131
<Menu.Item
132+
qa="md-settings-mode-wysiwyg"
131133
active={mode === 'wysiwyg'}
132134
onClick={() => {
133135
onModeChange('wysiwyg');
@@ -138,6 +140,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
138140
{i18n('settings_wysiwyg')}
139141
</Menu.Item>
140142
<Menu.Item
143+
qa="md-settings-mode-markup"
141144
active={mode === 'markup'}
142145
onClick={() => {
143146
onModeChange('markup');

0 commit comments

Comments
 (0)