Skip to content

Commit b61431c

Browse files
bocembocembocembocem
authored
test: add qa attrs (#36)
1 parent 2e3823b commit b61431c

File tree

33 files changed

+132
-40
lines changed

33 files changed

+132
-40
lines changed

Diff for: ‎src/lib/kit/components/AccordeonCard/AccordeonCard.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const b = block('accordeon-card');
1212

1313
export interface AccordeonCardProps {
1414
children: React.ReactNode;
15+
name: string;
1516
header: React.ReactNode;
1617
description?: string;
1718
className?: string;
@@ -24,6 +25,7 @@ export interface AccordeonCardProps {
2425
}
2526
export const AccordeonCard: React.FC<AccordeonCardProps> = ({
2627
className,
28+
name,
2729
header,
2830
description,
2931
open: propsOpen,
@@ -98,7 +100,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
98100
{headerActionsTemplate ? (
99101
<div className={b('interal-actions')}>{headerActionsTemplate}</div>
100102
) : null}
101-
<Button view="flat" onClick={handleToggle}>
103+
<Button view="flat" onClick={handleToggle} qa={`${name}-accordeon-toggler`}>
102104
<Icon
103105
className={b('toggle-icon', {open})}
104106
data={ChevronDown}

Diff for: ‎src/lib/kit/components/Card/Card.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const b = block('card');
1212

1313
export interface CardProps {
1414
children: React.ReactNode;
15+
name: string;
1516
title?: string | React.ReactNode;
1617
description?: string;
1718
actions?: React.ReactNode;
@@ -23,6 +24,7 @@ export interface CardProps {
2324
}
2425

2526
export const Card: React.FC<CardProps> = ({
27+
name,
2628
title: propsTitle,
2729
description,
2830
actions,
@@ -114,7 +116,11 @@ export const Card: React.FC<CardProps> = ({
114116
{actions ? <div className={b('actions')}>{actions}</div> : null}
115117
{alwaysOpen ? null : (
116118
<div className={b('toggler')}>
117-
<Button view="flat" onClick={handleToggle}>
119+
<Button
120+
view="flat"
121+
onClick={handleToggle}
122+
qa={`${name}-accordeon-toggler`}
123+
>
118124
<Icon
119125
className={b('toggler-icon', {open})}
120126
data={ChevronDown}

Diff for: ‎src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -129,12 +129,17 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => {
129129
)
130130
}
131131
disabled={spec.viewSpec.disabled}
132+
qa={`${name}-init-arr`}
132133
>
133134
<Icon data={Plus} size={14} />
134135
{spec.viewSpec.layoutTitle || null}
135136
</Button>
136137
) : (
137-
<Button onClick={onItemAdd} disabled={spec.viewSpec.disabled}>
138+
<Button
139+
onClick={onItemAdd}
140+
disabled={spec.viewSpec.disabled}
141+
qa={`${name}-add-item`}
142+
>
138143
<Icon data={Plus} size={14} />
139144
{spec.viewSpec.itemLabel || null}
140145
</Button>

Diff for: ‎src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const CardOneOf: ObjectIndependentInput = (props) => {
3838

3939
const actions = React.useMemo(() => {
4040
if (isArrayItem(name)) {
41-
return <RemoveButton onDrop={input.onDrop} />;
41+
return <RemoveButton onDrop={input.onDrop} name={name} />;
4242
}
4343

4444
return;
@@ -66,6 +66,7 @@ export const CardOneOf: ObjectIndependentInput = (props) => {
6666

6767
return (
6868
<Card
69+
name={name}
6970
title={toggler}
7071
description={spec.viewSpec.layoutDescription}
7172
actions={actions}

Diff for: ‎src/lib/kit/components/Inputs/Checkbox/Checkbox.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import './Checkbox.scss';
99

1010
const b = block('checkbox');
1111

12-
export const Checkbox: BooleanInput = ({input, spec}) => {
12+
export const Checkbox: BooleanInput = ({name, input, spec}) => {
1313
const {value, onBlur, onChange, onFocus} = input;
1414

1515
const handleChange = React.useCallback(
@@ -25,6 +25,7 @@ export const Checkbox: BooleanInput = ({input, spec}) => {
2525
onBlur={onBlur}
2626
onFocus={onFocus}
2727
disabled={spec.viewSpec.disabled}
28+
qa={name}
2829
/>
2930
</div>
3031
);

Diff for: ‎src/lib/kit/components/Inputs/FileInput/FileInput.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import './FileInput.scss';
1313

1414
const b = block('file-input');
1515

16-
export const FileInput: React.FC<StringInputProps> = ({input, spec}) => {
16+
export const FileInput: React.FC<StringInputProps> = ({name, input, spec}) => {
1717
const {value, onChange} = input;
1818

1919
const inputRef = React.useRef<HTMLInputElement>(null);
@@ -65,7 +65,11 @@ export const FileInput: React.FC<StringInputProps> = ({input, spec}) => {
6565

6666
return (
6767
<div className={b()}>
68-
<Button disabled={spec.viewSpec.disabled} onClick={handleClick}>
68+
<Button
69+
disabled={spec.viewSpec.disabled}
70+
onClick={handleClick}
71+
qa={`${name}-file-upload`}
72+
>
6973
{i18n('button-upload_file')}
7074
</Button>
7175
<input
@@ -80,7 +84,12 @@ export const FileInput: React.FC<StringInputProps> = ({input, spec}) => {
8084
/>
8185
<span className={b('file-name')}>{fileNameContent}</span>
8286
{value ? (
83-
<Button view="flat" onClick={handleReset} disabled={spec.viewSpec.disabled}>
87+
<Button
88+
view="flat"
89+
onClick={handleReset}
90+
disabled={spec.viewSpec.disabled}
91+
qa={`${name}-file-remove`}
92+
>
8493
<Icon data={Xmark} size={16} />
8594
</Button>
8695
) : null}

Diff for: ‎src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface MonacoInputBaseProps extends StringInputProps {
2323
}
2424

2525
export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
26+
name,
2627
input,
2728
spec,
2829
card,
@@ -46,14 +47,14 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
4647
const dialogButton = React.useMemo(() => {
4748
if (!withoutDialog) {
4849
return (
49-
<Button onClick={() => setMonacoEditorDialog(true)}>
50+
<Button onClick={() => setMonacoEditorDialog(true)} qa={`${name}-open-dialog`}>
5051
<Icon data={ChevronsExpandUpRight} size={16} />
5152
</Button>
5253
);
5354
}
5455

5556
return;
56-
}, [withoutDialog, setMonacoEditorDialog]);
57+
}, [withoutDialog, setMonacoEditorDialog, name]);
5758

5859
React.useEffect(() => onChange(monacoValue), [monacoValue]);
5960

@@ -65,7 +66,7 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
6566

6667
return (
6768
<div className={b({card})}>
68-
<div className={b('container')}>
69+
<div className={b('container')} data-qa={name}>
6970
<MonacoHeader language={language} card={card} editButton={dialogButton} />
7071
<MonacoEditor
7172
language={language}
@@ -76,6 +77,7 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
7677
/>
7778
</div>
7879
<MonacoInputDialog
80+
name={name}
7981
title={layoutTitle}
8082
fontSize={fontSize}
8183
value={monacoValue}

Diff for: ‎src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import './MonacoInputDialog.scss';
1515
const b = block('monaco-input-dialog');
1616

1717
interface MonacoInputDialogProps {
18+
name: string;
1819
visible: boolean;
1920
value: string;
2021
language?: string;
@@ -28,6 +29,7 @@ interface MonacoInputDialogProps {
2829
}
2930

3031
export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
32+
name,
3133
value,
3234
title,
3335
visible,
@@ -56,7 +58,7 @@ export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
5658
<Dialog open={visible} onClose={handleClose} className={b()}>
5759
<Dialog.Header caption={title} className={b('dialog-header')} />
5860
<Dialog.Body>
59-
<div className={b('container')}>
61+
<div className={b('container')} data-qa={`${name}-dialog`}>
6062
<MonacoHeader language={language} card={card} />
6163
<MonacoEditor
6264
language={language}

Diff for: ‎src/lib/kit/components/Inputs/MultiSelect/MultiSelect.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import './MultiSelect.scss';
99

1010
const b = block('multi-select');
1111

12-
export const MultiSelect: ArrayInput = ({input, spec}) => {
12+
export const MultiSelect: ArrayInput = ({name, input, spec}) => {
1313
const {value, onBlur, onChange, onFocus} = input;
1414

1515
const filterable = React.useMemo(() => (spec.enum?.length || 0) > 9, [spec.enum?.length]);
@@ -55,6 +55,7 @@ export const MultiSelect: ArrayInput = ({input, spec}) => {
5555
placeholder={spec.viewSpec.placeholder}
5656
filterable={filterable}
5757
multiple
58+
qa={name}
5859
/>
5960
);
6061
};

Diff for: ‎src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import './NumberWithScale.scss';
1111

1212
const b = block('number-with-scale');
1313

14-
const NumberWithScaleBase: React.FC<StringInputProps> = ({input, spec}) => {
14+
const NumberWithScaleBase: React.FC<StringInputProps> = ({name, input, spec}) => {
1515
const {value = '', onBlur, onFocus, onChange} = input;
1616
const {sizeParams, disabled, placeholder} = spec.viewSpec;
1717
const {defaultType, scale} = sizeParams!;
@@ -97,6 +97,7 @@ const NumberWithScaleBase: React.FC<StringInputProps> = ({input, spec}) => {
9797
onUpdate={handleChange}
9898
placeholder={placeholder}
9999
disabled={disabled}
100+
qa={name}
100101
/>
101102
<Select
102103
width="max"
@@ -105,6 +106,7 @@ const NumberWithScaleBase: React.FC<StringInputProps> = ({input, spec}) => {
105106
options={scaleOptions}
106107
onUpdate={handleScaleChange}
107108
disabled={disabled || incorrectStringNumber}
109+
qa={`${name}-scale`}
108110
/>
109111
</div>
110112
);

Diff for: ‎src/lib/kit/components/Inputs/ObjectBase/ObjectBase.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export const ObjectBase: ObjectIndependentInput = ({spec, name, Layout, ...restP
2525
)
2626
}
2727
disabled={spec.viewSpec?.disabled}
28+
qa={`${name}-init-obj`}
2829
>
2930
<Icon data={Plus} size={14} />
3031
{spec.viewSpec.layoutTitle || null}

Diff for: ‎src/lib/kit/components/Inputs/OneOfCard/OneOfCard.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ export const OneOfCard: ObjectIndependentInput = (props) => {
5555

5656
const headerActionsTemplate = React.useMemo(() => {
5757
if (arrayItem) {
58-
return <RemoveButton onDrop={input.onDrop} />;
58+
return <RemoveButton onDrop={input.onDrop} name={name} />;
5959
}
6060

6161
return null;
62-
}, [arrayItem, input.onDrop]);
62+
}, [arrayItem, input.onDrop, name]);
6363

6464
const parentOnChange = React.useCallback(
6565
(
@@ -84,6 +84,7 @@ export const OneOfCard: ObjectIndependentInput = (props) => {
8484
return (
8585
<AccordeonCard
8686
className={b()}
87+
name={name}
8788
header={toggler}
8889
description={spec.viewSpec.layoutDescription || ''}
8990
open={open}

Diff for: ‎src/lib/kit/components/Inputs/Select/Select.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import './Select.scss';
99

1010
const b = block('select');
1111

12-
export const Select: StringInput = ({input, spec}) => {
12+
export const Select: StringInput = ({name, input, spec}) => {
1313
const {value, onBlur, onChange, onFocus} = input;
1414

1515
const filterable = React.useMemo(() => (spec.enum?.length || 0) > 9, [spec.enum?.length]);
@@ -49,6 +49,7 @@ export const Select: StringInput = ({input, spec}) => {
4949
disabled={spec.viewSpec.disabled}
5050
placeholder={spec.viewSpec.placeholder}
5151
filterable={filterable}
52+
qa={name}
5253
/>
5354
);
5455
};

Diff for: ‎src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,12 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
103103
name: '',
104104
sticky: 'right',
105105
template: ({key}: {key: string}) => (
106-
<Button view="flat" onClick={() => onItemRemove(key)} key={`remove-${key}`}>
106+
<Button
107+
view="flat"
108+
onClick={() => onItemRemove(key)}
109+
key={`remove-${key}`}
110+
qa={`${name}-item-remove-${key}`}
111+
>
107112
<Icon data={Xmark} size={16} />
108113
</Button>
109114
),
@@ -196,12 +201,17 @@ export const TableArrayInput: ArrayInput = ({spec, name, arrayInput, input}) =>
196201
)
197202
}
198203
disabled={spec.viewSpec.disabled}
204+
qa={`${name}-init-arr`}
199205
>
200206
<Icon data={Plus} size={14} />
201207
{spec.viewSpec.layoutTitle || null}
202208
</Button>
203209
) : (
204-
<Button onClick={onItemAdd} disabled={spec.viewSpec.disabled}>
210+
<Button
211+
onClick={onItemAdd}
212+
disabled={spec.viewSpec.disabled}
213+
qa={`${name}-add-item`}
214+
>
205215
<Icon data={Plus} size={14} />
206216
{spec.viewSpec.itemLabel || null}
207217
</Button>

Diff for: ‎src/lib/kit/components/Inputs/Text/Text.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import _ from 'lodash';
55

66
import {FieldRenderProps, NumberInputProps, StringInputProps} from '../../../../core';
77

8-
export const Text = <T extends NumberInputProps | StringInputProps>({input, spec}: T) => {
8+
export const Text = <T extends NumberInputProps | StringInputProps>({name, input, spec}: T) => {
99
const {value, onBlur, onChange, onFocus} = input;
1010

1111
const handleChange = React.useCallback(
@@ -34,6 +34,7 @@ export const Text = <T extends NumberInputProps | StringInputProps>({input, spec
3434
disabled={spec.viewSpec.disabled}
3535
placeholder={spec.viewSpec.placeholder}
3636
autoComplete={type === 'password' ? 'new-password' : undefined}
37+
qa={name}
3738
/>
3839
);
3940
};

Diff for: ‎src/lib/kit/components/Inputs/TextArea/TextArea.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {TextInput as TextInputBase} from '@gravity-ui/uikit';
44

55
import {StringInput} from '../../../../core';
66

7-
export const TextArea: StringInput = ({input, spec}) => {
7+
export const TextArea: StringInput = ({name, input, spec}) => {
88
const {value, onBlur, onChange, onFocus} = input;
99

1010
return (
@@ -19,6 +19,7 @@ export const TextArea: StringInput = ({input, spec}) => {
1919
disabled={spec.viewSpec.disabled}
2020
multiline
2121
placeholder={spec.viewSpec.placeholder}
22+
qa={name}
2223
/>
2324
);
2425
};

Diff for: ‎src/lib/kit/components/Layouts/Accordeon/Accordeon.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
2626
return null;
2727
}
2828

29-
return <RemoveButton onDrop={onDrop} />;
30-
}, [spec.required, input.value, onDrop]);
29+
return <RemoveButton name={name} onDrop={onDrop} />;
30+
}, [spec.required, input.value, onDrop, name]);
3131

3232
useErrorChecker({name, meta, open, setOpen});
3333

3434
return (
3535
<SimpleVerticalAccordeon
36+
name={name}
3637
title={spec.viewSpec.layoutTitle || ''}
3738
note={spec.viewSpec.layoutDescription || ''}
3839
open={open}

0 commit comments

Comments
 (0)