datalens-tech · kuzmadom · May 29, 2024 · May 29, 2024
diff --git a/src/shared/constants/qa/index.ts b/src/shared/constants/qa/index.ts
@@ -11,3 +11,4 @@ export * from './ql';
 export * from './field-editor';
 export {VisualizationsQa} from './visualization';
 export * from './uikit';
+export * from './settings';
diff --git a/src/shared/constants/qa/settings.ts b/src/shared/constants/qa/settings.ts
@@ -0,0 +1,12 @@
+export const enum ServiceSettingsQA {
+    ColorPalettes = 'color-palettes',
+    AddPaletteButton = 'add-palette-btn',
+}
+
+export const enum PaletteEditorQA {
+    PaletteNameInput = 'palette-name',
+    RemoveColorButton = 'remove-color-btn',
+    AddColorButton = 'add-color-btn',
+    ColorTextInput = 'color-input',
+    ApplyButton = 'apply-btn',
+}
diff --git a/src/ui/components/ColorPaletteEditorContainer/ColorPaletteEditorContainer.tsx b/src/ui/components/ColorPaletteEditorContainer/ColorPaletteEditorContainer.tsx
@@ -3,7 +3,13 @@ import React from 'react';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import {ResolveThunks, connect} from 'react-redux';
-import {ColorPalette, DEFAULT_PALETTE, GradientType, selectAvailableGradientsColors} from 'shared';
+import {
+    ColorPalette,
+    DEFAULT_PALETTE,
+    GradientType,
+    ServiceSettingsQA,
+    selectAvailableGradientsColors,
+} from 'shared';
 import {
     deleteColorPalette,
     fetchColorPalettes,
@@ -74,6 +80,7 @@ class ColorPaletteEditorContainer extends React.Component<ColorPaletteEditorProp
                     className={b('color-palettes-card')}
                     colorPalettes={colorPalettes.filter((item) => !item.isGradient)}
                     condensed={condensed}
+                    qa={ServiceSettingsQA.ColorPalettes}
                 />
                 <ColorPaletteEditor isFavoritesEnabled={IS_FAVORITES_ENABLED} />
                 <GradientColorPaletteEditor isFavoritesEnabled={IS_FAVORITES_ENABLED} />

diff --git a/src/ui/components/ColorPaletteEditorContainer/ColorPalettesCard/ColorPalettesCard.tsx b/src/ui/components/ColorPaletteEditorContainer/ColorPalettesCard/ColorPalettesCard.tsx
@@ -5,7 +5,7 @@ import {Button, DropdownMenu, DropdownMenuItem, Icon, List} from '@gravity-ui/ui
 import block from 'bem-cn-lite';
 import AutogeneratedPaletteIcon from 'components/AutogeneratedPaletteIcon/AutogeneratedPaletteIcon';
 import {i18n} from 'i18n';
-import {ColorPalette} from 'shared';
+import {ColorPalette, ServiceSettingsQA} from 'shared';
 
 import trashIcon from '@gravity-ui/icons/svgs/trash-bin.svg';
 import iconPlus from 'ui/assets/icons/plus.svg';
@@ -24,16 +24,24 @@ type Props = {
     handleItemClick: (colorPalette: ColorPalette) => void;
     isFavoritesEnabled: boolean;
     condensed?: boolean;
+    qa?: string;
 };
 
 class ColorPalettesCard extends React.Component<Props> {
     render() {
-        const {colorPalettes, className, title, description, condensed, handleCreateColorPalette} =
-            this.props;
+        const {
+            colorPalettes,
+            className,
+            title,
+            description,
+            condensed,
+            handleCreateColorPalette,
+            qa,
+        } = this.props;
         const hasPalettes = colorPalettes.length > 0;
 
         return (
-            <div className={b(null, className)}>
+            <div className={b(null, className)} data-qa={qa}>
                 <div className={b('description-wrapper')}>
                     <div className={b('title')}>{title}</div>
                     <div className={b('description')}>{description}</div>
@@ -53,6 +61,7 @@ class ColorPalettesCard extends React.Component<Props> {
                 <Button
                     className={b('add-palette-button', {condensed})}
                     onClick={handleCreateColorPalette}
+                    qa={ServiceSettingsQA.AddPaletteButton}
                 >
                     <Icon data={iconPlus} />
                     {i18n('component.color-palette-editor', 'label_add-palette')}

diff --git a/src/ui/components/ColorPaletteEditorContainer/ColorTextInput/ColorTextInput.tsx b/src/ui/components/ColorPaletteEditorContainer/ColorTextInput/ColorTextInput.tsx
@@ -4,6 +4,8 @@ import {Button, Icon, TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {PaletteItem} from 'units/wizard/components/Palette/components/PaletteItem/PaletteItem';
 
+import {PaletteEditorQA} from '../../../../shared';
+
 import trashIcon from '@gravity-ui/icons/svgs/trash-bin.svg';
 
 import './ColorTextInput.scss';
@@ -33,9 +35,15 @@ const ColorTextInput = (props: ColorTextInputProps) => {
                 error={error}
                 controlProps={{size: 1}}
                 onUpdate={handleOnUpdate}
+                qa={PaletteEditorQA.ColorTextInput}
             />
             {showRemove ? (
-                <Button className={b('color-remove')} view="flat" onClick={onRemove}>
+                <Button
+                    className={b('color-remove')}
+                    view="flat"
+                    onClick={onRemove}
+                    qa={PaletteEditorQA.RemoveColorButton}
+                >
                     <Icon className={b('icon')} data={trashIcon} size={14} />
                 </Button>
             ) : null}

diff --git a/src/ui/components/ColorPaletteEditorContainer/PaletteEditor/PaletteEditor.tsx b/src/ui/components/ColorPaletteEditorContainer/PaletteEditor/PaletteEditor.tsx
@@ -25,6 +25,7 @@ import {DatalensGlobalState} from 'ui';
 import {DialogRow} from 'units/wizard/components/Dialogs/components/DialogRow/DialogRow';
 import {isStringWithHex} from 'utils/validation';
 
+import {PaletteEditorQA} from '../../../../shared';
 import ColorPaletteChartkitPreview from '../ColorPaletteCharkitPreview/ColorPaletteChartkitPreview';
 import ColorTextInput from '../ColorTextInput/ColorTextInput';
 
@@ -72,6 +73,7 @@ class PaletteEditor extends React.Component<PaletteEditorProps> {
                     textButtonApply={textButtonApply}
                     propsButtonApply={{
                         disabled: isApplyButtonDisabled,
+                        qa: PaletteEditorQA.ApplyButton,
                     }}
                     textButtonCancel={i18n('component.color-palette-editor', 'button_cancel')}
                 >
@@ -125,6 +127,7 @@ class PaletteEditor extends React.Component<PaletteEditorProps> {
                                 className={b('name-input')}
                                 value={currentColorPalette.displayName}
                                 onUpdate={this.handleDisplayNameUpdate}
+                                qa={PaletteEditorQA.PaletteNameInput}
                             />
                         </div>
                     }
@@ -184,6 +187,7 @@ class PaletteEditor extends React.Component<PaletteEditorProps> {
                                 view="flat"
                                 onClick={this.handleAddColorClick}
                                 disabled={isAddColorButtonDisabled}
+                                qa={PaletteEditorQA.AddColorButton}
                             >
                                 <Icon data={iconPlus} />{' '}
                                 {i18n('component.color-palette-editor', 'label_add-color')}

diff --git a/src/ui/units/wizard/components/Dialogs/DialogField/components/BarsSettings/BarsSettings.tsx b/src/ui/units/wizard/components/Dialogs/DialogField/components/BarsSettings/BarsSettings.tsx
@@ -110,7 +110,7 @@ export const BarsSettings: React.FC<BarsSettingsProps> = (props: BarsSettingsPro
 
             handleColorUpdate(updateParams);
         },
-        [handleColorUpdate, state.colorSettings.colorType],
+        [handleColorUpdate, state.colorSettings.colorType, colorPalettes],
     );
 
     return (

diff --git a/...t-table/coloring.test.ts/Wizard-Pivot-table-Custom-palette-bar-screenshot-1.png b/...t-table/coloring.test.ts/Wizard-Pivot-table-Custom-palette-bar-screenshot-1.png
diff --git a/tests/opensource-suites/utils.ts b/tests/opensource-suites/utils.ts
@@ -1,6 +1,12 @@
-import {expect, Page} from '@playwright/test';
-import {slct} from '../utils';
-import {DlNavigationQA, WorkbookNavigationMinimalQa} from '../../src/shared';
+import {Page, expect} from '@playwright/test';
+
+import {
+    DlNavigationQA,
+    PaletteEditorQA,
+    ServiceSettingsQA,
+    WorkbookNavigationMinimalQa,
+} from '../../src/shared';
+import {openTestPage, slct} from '../utils';
 
 export async function selectEntryFromNavigationMenu(page: Page, datasetName: string) {
     const searchInput = page
@@ -17,3 +23,32 @@ export async function selectEntryFromNavigationMenu(page: Page, datasetName: str
     await expect(resultsFound).toBeVisible();
     await resultsFound.click();
 }
+
+export async function addCustomPalette(page: Page, palette: {name: string; colors?: string[]}) {
+    const {name, colors = ['4fc4b7', '59abc9', '8ccce3', 'b9e4f3', 'e0f1fa']} = palette;
+
+    await openTestPage(page, '/settings');
+    await page
+        .locator(slct(ServiceSettingsQA.ColorPalettes))
+        .locator(slct(ServiceSettingsQA.AddPaletteButton))
+        .click();
+
+    await page.locator(slct(PaletteEditorQA.PaletteNameInput)).getByRole('textbox').fill(name);
+
+    const removeColorButton = page.locator(slct(PaletteEditorQA.RemoveColorButton)).first();
+    while (await removeColorButton.isVisible()) {
+        await removeColorButton.click();
+    }
+
+    const colorInput = page
+        .locator(slct(PaletteEditorQA.ColorTextInput))
+        .last()
+        .getByRole('textbox');
+    await colorInput.fill(colors[0]);
+    for (let i = 1; i < colors.length; i++) {
+        await page.locator(slct(PaletteEditorQA.AddColorButton)).click();
+        await colorInput.fill(colors[i]);
+    }
+
+    await page.locator(slct(PaletteEditorQA.ApplyButton)).click();
+}
diff --git a/tests/opensource-suites/wizard/utils.ts b/tests/opensource-suites/wizard/utils.ts
@@ -1,8 +1,8 @@
 import {expect} from '@playwright/test';
 import isArray from 'lodash/isArray';
 
-import WizardPage from '../../page-objects/wizard/WizardPage';
 import {PlaceholderName} from '../../page-objects/wizard/SectionVisualization';
+import WizardPage from '../../page-objects/wizard/WizardPage';
 import {slct} from '../../utils';
 
 /* Check that the field can be dragged to the placeholder */

diff --git a/tests/opensource-suites/wizard/visualizations/pivot-table/coloring.test.ts b/tests/opensource-suites/wizard/visualizations/pivot-table/coloring.test.ts
@@ -1,7 +1,5 @@
 import {expect} from '@playwright/test';
 
-import datalensTest from '../../../../utils/playwright/globalTestDefinition';
-import {openTestPage, slct} from '../../../../utils';
 import {
     ChartKitQa,
     DialogFieldBarsSettingsQa,
@@ -10,12 +8,18 @@ import {
     WizardPageQa,
     WizardVisualizationId,
 } from '../../../../../src/shared';
-import WizardPage from '../../../../page-objects/wizard/WizardPage';
 import {PlaceholderName} from '../../../../page-objects/wizard/SectionVisualization';
+import WizardPage from '../../../../page-objects/wizard/WizardPage';
+import {getUniqueTimestamp, openTestPage, slct} from '../../../../utils';
+import datalensTest from '../../../../utils/playwright/globalTestDefinition';
+import {addCustomPalette} from '../../../utils';
 
 datalensTest.describe('Wizard', () => {
     datalensTest.describe('Pivot table', () => {
+        let customPaletteName: string;
         datalensTest.beforeEach(async ({page, config}) => {
+            customPaletteName = getUniqueTimestamp();
+            await addCustomPalette(page, {name: customPaletteName});
             await openTestPage(page, config.wizard.urls.WizardBasicDataset);
             const wizardPage = new WizardPage({page});
 
@@ -24,24 +28,24 @@ datalensTest.describe('Wizard', () => {
             await wizardPage.createNewFieldWithFormula(measureField, 'count([order_id])');
 
             await wizardPage.setVisualization(WizardVisualizationId.PivotTable);
+            await wizardPage.sectionVisualization.addFieldByClick(PlaceholderName.Rows, 'Category');
+            await wizardPage.sectionVisualization.addFieldByClick(
+                PlaceholderName.Measures,
+                'OrdersCount',
+            );
         });
 
         datalensTest('Two colors bar @screenshot', async ({page}) => {
             const wizardPage = new WizardPage({page});
             const chartContainer = page.locator(slct(WizardPageQa.SectionPreview));
             const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader));
 
-            // Add rows with totals
-            await wizardPage.sectionVisualization.addFieldByClick(PlaceholderName.Rows, 'Category');
+            // Switch on totals
             await wizardPage.visualizationItemDialog.open(PlaceholderName.Rows, 'Category');
             await wizardPage.page.locator(slct(DialogFieldSubTotalsQa.SubTotalsSwitch)).click();
             await wizardPage.visualizationItemDialog.clickOnApplyButton();
 
-            // Add measure with bar
-            await wizardPage.sectionVisualization.addFieldByClick(
-                PlaceholderName.Measures,
-                'OrdersCount',
-            );
+            // Add bar to measure
             await wizardPage.visualizationItemDialog.open(PlaceholderName.Measures, 'OrdersCount');
             await wizardPage.page.locator(slct(DialogFieldBarsSettingsQa.EnableButton)).click();
             await wizardPage.visualizationItemDialog.clickOnApplyButton();
@@ -63,5 +67,24 @@ datalensTest.describe('Wizard', () => {
             await expect(previewLoader).not.toBeVisible();
             await expect(chartContainer).toHaveScreenshot();
         });
+
+        datalensTest('Custom palette bar @screenshot', async ({page}) => {
+            const wizardPage = new WizardPage({page});
+            const chartContainer = page.locator(slct(WizardPageQa.SectionPreview));
+            const previewLoader = chartContainer.locator(slct(ChartKitQa.Loader));
+
+            await wizardPage.visualizationItemDialog.open(PlaceholderName.Measures, 'OrdersCount');
+            await wizardPage.page.locator(slct(DialogFieldBarsSettingsQa.EnableButton)).click();
+            await wizardPage.page
+                .locator(slct(DialogFieldBarsSettingsQa.PositiveColorSelector))
+                .click();
+            await wizardPage.visualizationItemDialog.barsSettings.changePalette(customPaletteName);
+
+            await wizardPage.visualizationItemDialog.clickOnApplyButton();
+
+            await expect(previewLoader).toBeVisible();
+            await expect(previewLoader).not.toBeVisible();
+            await expect(chartContainer).toHaveScreenshot();
+        });
     });
 });