Skip to content

Commit b25158f

Browse files
arsen-afaunovarsen-afaunov
committed
Add i18n and line width settings scopes test
1 parent db7fa75 commit b25158f

File tree

8 files changed

+106
-31
lines changed

8 files changed

+106
-31
lines changed

‎src/i18n-keysets/wizard/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,12 @@
117117
"label_default-period": "Default period",
118118
"label_delete-all-filters-action": "Delete all filters in section",
119119
"label_dialog-column-info-text": "The total width of the table always occupies 100% of the available space, regardless of the specified widths of the individual columns.",
120+
"label_dialog-line-width": "Line width",
120121
"label_dialog-radius": "Point size",
121122
"label_dialog-radius-max": "Maximal point size",
122123
"label_dialog-radius-min": "Minimal point size",
124+
"label_dialog-shapes-chart-settings-tab": "General settings",
125+
"label_dialog-shapes-line-settings-tab": "Lines",
123126
"label_direction": "Direction",
124127
"label_disabled": "Disabled",
125128
"label_discrete": "Discrete",
@@ -188,6 +191,7 @@
188191
"label_limit": "Limit",
189192
"label_limit-input-error": "Enter a value from {{min}} to {{max}}",
190193
"label_limit-message": "Only first 1000 values shown",
194+
"label_line-width-auto-value": "Automatically",
191195
"label_linear": "Linear",
192196
"label_link-failed": "This dimension is not part of dataset links",
193197
"label_links": "Links",

‎src/i18n-keysets/wizard/ru.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,12 @@
117117
"label_default-period": "Период по умолчанию",
118118
"label_delete-all-filters-action": "Удалить все фильтры в секции",
119119
"label_dialog-column-info-text": "Общая ширина таблицы всегда занимает 100% доступного пространства вне зависимости от указанной ширины отдельных столбцов.",
120+
"label_dialog-line-width": "Толщина линии",
120121
"label_dialog-radius": "Размер точек",
121122
"label_dialog-radius-max": "Максимальный размер точек",
122123
"label_dialog-radius-min": "Минимальный размер точек",
124+
"label_dialog-shapes-chart-settings-tab": "Общие настройки",
125+
"label_dialog-shapes-line-settings-tab": "Линии",
123126
"label_direction": "Направление",
124127
"label_disabled": "Выключена",
125128
"label_discrete": "Дискретный",
@@ -188,6 +191,7 @@
188191
"label_limit": "Лимит",
189192
"label_limit-input-error": "Введите значение от {{min}} до {{max}}",
190193
"label_limit-message": "Выводится только первая тысяча значений",
194+
"label_line-width-auto-value": "Автоматически",
191195
"label_linear": "Линейная",
192196
"label_link-failed": "Измерение не участвует в связи датасетов",
193197
"label_links": "Связи",

‎src/shared/constants/qa/wizard.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,10 @@ export const enum ChartSettingsDialogQA {
197197
}
198198

199199
export const enum DialogShapeSettings {
200-
LineSettingsScopeTab = 'line-settings-scope-tab',
200+
LineSettingsGraphScopeTabPanel = 'line-settings-graph-scope-tab-panel',
201+
LineSettingsChartScopeTabPanel = 'line-settings-chart-scope-tab-panel',
202+
LineSettingsGraphScopeTab = 'line-settings-graph-scope-tab',
203+
LineSettingsChartScopeTab = 'line-settings-chart-scope-tab',
201204
LineWidthSelectControl = 'line-width-select-control',
202205
LineWidthSelectOption = 'line-width-select-option',
203206
}

‎src/ui/units/wizard/components/Dialogs/DialogShapes/DialogLineWidth/DialogLineWidth.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
import {Flex, Text} from '@gravity-ui/uikit';
4+
import {i18n} from 'i18n';
45
import NumberInput from 'ui/components/NumberFormatSettings/NumberInput/NumberInput';
56
import {
67
LINE_WIDTH_AUTO_VALUE,
@@ -17,11 +18,6 @@ interface DialogLineWidthProps {
1718
allowDefault?: boolean;
1819
}
1920

20-
// TODO: Fix in a separate branch
21-
const I18N_STUB = {
22-
'dialog-line-width-title': 'Толщина линии',
23-
};
24-
2521
export const DialogLineWidth = React.memo(
2622
({value, onChange, allowDefault, style}: DialogLineWidthProps) => {
2723
const handleNumberInputChange = React.useCallback(
@@ -59,7 +55,7 @@ export const DialogLineWidth = React.memo(
5955
return (
6056
<Flex direction="column" gap={2} style={style}>
6157
<Flex direction="row" alignItems="center" justifyContent="space-between">
62-
<Text variant="body-1">{I18N_STUB['dialog-line-width-title']}</Text>
58+
<Text variant="body-1">{i18n('wizard', 'label_dialog-line-width')}</Text>
6359
<LineWidthSelect
6460
allowDefault={allowDefault}
6561
value={value}

‎src/ui/units/wizard/components/Dialogs/DialogShapes/DialogShapes.tsx‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -56,20 +56,22 @@ export type ShapesState = {
5656
selectedValue: string | null;
5757
};
5858

59-
// TODO: Fix in a separate branch
60-
const I18N_STUB = {
61-
'dialog-shapes-line-settings-tab-title': 'Линии',
62-
'dialog-shapes-chart-settings-tab-title': 'Общие настройки',
63-
};
64-
6559
const SETTINGS_SCOPE = {
66-
LINE: 'line-shapes-settings',
60+
GRAPH: 'graph-shapes-settings',
6761
CHART: 'chart-shapes-settings',
6862
} as const;
6963

7064
const SETTINGS_SCOPE_TABS = [
71-
{title: I18N_STUB['dialog-shapes-line-settings-tab-title'], value: SETTINGS_SCOPE.LINE},
72-
{title: I18N_STUB['dialog-shapes-chart-settings-tab-title'], value: SETTINGS_SCOPE.CHART},
65+
{
66+
title: i18n('wizard', 'label_dialog-shapes-line-settings-tab'),
67+
value: SETTINGS_SCOPE.GRAPH,
68+
qa: DialogShapeSettings.LineSettingsGraphScopeTab,
69+
},
70+
{
71+
title: i18n('wizard', 'label_dialog-shapes-chart-settings-tab'),
72+
value: SETTINGS_SCOPE.CHART,
73+
qa: DialogShapeSettings.LineSettingsChartScopeTab,
74+
},
7375
];
7476

7577
type GetInitialShapesStateArgs = {
@@ -139,7 +141,7 @@ const DialogShapes: React.FC<Props> = ({
139141
paletteType,
140142
}: Props) => {
141143
const [activeTab, setActiveTab] = React.useState<ValueOf<typeof SETTINGS_SCOPE>>(
142-
SETTINGS_SCOPE.LINE,
144+
SETTINGS_SCOPE.GRAPH,
143145
);
144146
const [shapesState, setShapesState] = React.useState<ShapesState>(() =>
145147
getInitialShapesState({shapesConfig, paletteType, items}),
@@ -263,17 +265,17 @@ const DialogShapes: React.FC<Props> = ({
263265
>
264266
<Flex direction="column" style={{width: '100%', height: '100%'}}>
265267
<TabList style={{padding: '0 32px', flexShrink: 0}}>
266-
{SETTINGS_SCOPE_TABS.map(({title, value}) => (
267-
<Tab key={value} value={value}>
268+
{SETTINGS_SCOPE_TABS.map(({title, value, qa}) => (
269+
<Tab key={value} value={value} qa={qa}>
268270
{title}
269271
</Tab>
270272
))}
271273
</TabList>
272274
<React.Fragment>
273275
<TabPanel
274-
value={SETTINGS_SCOPE.LINE}
276+
value={SETTINGS_SCOPE.GRAPH}
275277
style={{height: '100%'}}
276-
qa={DialogShapeSettings.LineSettingsScopeTab}
278+
qa={DialogShapeSettings.LineSettingsGraphScopeTabPanel}
277279
>
278280
<DialogShapesGraphSettingsTab
279281
item={item}
@@ -297,7 +299,11 @@ const DialogShapes: React.FC<Props> = ({
297299
onLineWidthChange={onLineWidthChange}
298300
/>
299301
</TabPanel>
300-
<TabPanel value={SETTINGS_SCOPE.CHART}>
302+
<TabPanel
303+
value={SETTINGS_SCOPE.CHART}
304+
style={{height: '100%'}}
305+
qa={DialogShapeSettings.LineSettingsChartScopeTabPanel}
306+
>
301307
<DialogShapesChartSettingsTab
302308
shapesState={shapesState}
303309
onChartLineWidthChange={onChartLineWidthChange}

‎src/ui/units/wizard/components/LineWidthSelect/LineWidthSelect.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import {ChevronDown} from '@gravity-ui/icons';
44
import {Flex, Icon, Select, type SelectProps} from '@gravity-ui/uikit';
55
import block from 'bem-cn-lite';
6+
import {i18n} from 'i18n';
67
import {DialogShapeSettings} from 'shared';
78

89
import {
@@ -25,10 +26,6 @@ interface LineWidthSelectProps {
2526
const EMPTY_VALUE: string[] = [];
2627
const SELECT_WIDTH = 136;
2728

28-
const I18N_STUB = {
29-
'line-width-auto-value-label': 'Автоматически',
30-
};
31-
3229
export const LineWidthSelect = React.memo(
3330
({value, onChange, allowDefault}: LineWidthSelectProps) => {
3431
const handleUpdate = React.useCallback(
@@ -51,7 +48,7 @@ export const LineWidthSelect = React.memo(
5148
qa={DialogShapeSettings.LineWidthSelectOption}
5249
>
5350
<Flex style={{height: '100%'}} direction="column" justifyContent="center">
54-
{I18N_STUB['line-width-auto-value-label']}
51+
{i18n('wizard', 'label_line-width-auto-value')}
5552
</Flex>
5653
</Select.Option>,
5754
);
@@ -106,7 +103,7 @@ export const LineWidthSelect = React.memo(
106103
qa={DialogShapeSettings.LineWidthSelectControl}
107104
>
108105
{isAutoValue ? (
109-
<span>{I18N_STUB['line-width-auto-value-label']}</span>
106+
<span>{i18n('wizard', 'label_line-width-auto-value')}</span>
110107
) : (
111108
<span className={b('option-line')} style={{height: `${value}px`}} />
112109
)}

‎tests/opensource-suites/wizard/visualizations/line/shapes.test.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,5 +135,42 @@ datalensTest.describe('Wizard', () => {
135135
await expect(optionElement.locator(`[data-qa="${optionValue}"]`)).toBeVisible();
136136
}
137137
});
138+
139+
datalensTest('User can set auto line width', async ({page}) => {
140+
const wizardPage = new WizardPage({page});
141+
142+
await wizardPage.sectionVisualization.addFieldByClick(PlaceholderName.X, 'Category');
143+
await wizardPage.sectionVisualization.addFieldByClick(PlaceholderName.Y, 'Sales');
144+
145+
const chartLineWidth = '7';
146+
147+
// 1. Open shape dialog
148+
await wizardPage.shapeDialog.open();
149+
150+
// 2. Switch to chart-wide settings tab
151+
await wizardPage.shapeDialog.switchToChartSettingsTab();
152+
153+
// 3. Set chart-wide line width
154+
await wizardPage.shapeDialog.changeChartLineWidth(chartLineWidth);
155+
156+
// 4. Switch back to individual line settings tab
157+
await wizardPage.shapeDialog.switchToGraphSettingsTab();
158+
159+
// 5. Select auto (default) line width for the line
160+
await wizardPage.shapeDialog.selectDefaultLineWidth();
161+
162+
// 6. Apply settings
163+
await wizardPage.shapeDialog.apply();
164+
165+
await wizardPage.chartkit.waitUntilLoaderExists();
166+
167+
// 7. Verify that line width equals the chart-wide setting
168+
const updatedLineWidths = await wizardPage.chartkit.getAttributeFromLines(
169+
DOMNamedAttributes.StrokeWidth,
170+
);
171+
172+
expect(updatedLineWidths.length).toEqual(1);
173+
expect(updatedLineWidths[0]).toEqual(chartLineWidth);
174+
});
138175
});
139176
});

‎tests/page-objects/wizard/ShapeDialog.ts‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,24 @@ export default class ShapeDialog {
4141
await this.page.click(slct(lineShape));
4242
}
4343

44+
async switchToChartSettingsTab() {
45+
await this.page.click(slct(DialogShapeSettings.LineSettingsChartScopeTab));
46+
}
47+
48+
async switchToGraphSettingsTab() {
49+
await this.page.click(slct(DialogShapeSettings.LineSettingsGraphScopeTab));
50+
}
51+
4452
async clickLineWidthSelectControl() {
4553
await this.page
46-
.locator(slct(DialogShapeSettings.LineSettingsScopeTab))
54+
.locator(slct(DialogShapeSettings.LineSettingsGraphScopeTabPanel))
55+
.locator(slct(DialogShapeSettings.LineWidthSelectControl))
56+
.click();
57+
}
58+
59+
async clickChartLineWidthSelectControl() {
60+
await this.page
61+
.locator(slct(DialogShapeSettings.LineSettingsChartScopeTabPanel))
4762
.locator(slct(DialogShapeSettings.LineWidthSelectControl))
4863
.click();
4964
}
@@ -56,20 +71,33 @@ export default class ShapeDialog {
5671
.click();
5772
}
5873

74+
async changeChartLineWidth(width: string) {
75+
await this.clickChartLineWidthSelectControl();
76+
await this.page
77+
.locator(slct(DialogShapeSettings.LineWidthSelectOption))
78+
.locator(`[data-qa="${width}"]`)
79+
.click();
80+
}
81+
82+
async selectDefaultLineWidth() {
83+
await this.clickLineWidthSelectControl();
84+
await this.page.locator(slct(DialogShapeSettings.LineWidthSelectOption)).first().click();
85+
}
86+
5987
async getLineWidthSelectOptions() {
6088
return this.page.locator(slct(DialogShapeSettings.LineWidthSelectOption));
6189
}
6290

6391
async getLineWidthSelectControlText() {
6492
const control = this.page
65-
.locator(slct(DialogShapeSettings.LineSettingsScopeTab))
93+
.locator(slct(DialogShapeSettings.LineSettingsGraphScopeTabPanel))
6694
.locator(slct(DialogShapeSettings.LineWidthSelectControl));
6795
return control.textContent();
6896
}
6997

7098
getLineWidthSelectControlLine() {
7199
return this.page
72-
.locator(slct(DialogShapeSettings.LineSettingsScopeTab))
100+
.locator(slct(DialogShapeSettings.LineSettingsGraphScopeTabPanel))
73101
.locator(slct(DialogShapeSettings.LineWidthSelectControl))
74102
.locator('.dl-line-width-select__option-line');
75103
}

0 commit comments

Comments
 (0)