From 8f86e10fd4c48f5becab31af3ddd3363b07124d3 Mon Sep 17 00:00:00 2001
From: Aleksey Konstantinov <a.konstantinov@foxford.ru>
Date: Thu, 7 Dec 2023 18:18:00 +0300
Subject: [PATCH] ULMS-2633 Added data-testid attributes

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 packages/button/package-lock.json             |  4 +-
 packages/button/package.json                  |  2 +-
 packages/button/src/button.jsx                |  3 +-
 packages/drawing-toolbar/package-lock.json    |  4 +-
 packages/drawing-toolbar/package.json         |  2 +-
 .../src/components/color-settings.jsx         | 38 +++++++++++--------
 .../src/components/font-settings.jsx          | 11 +++++-
 .../src/components/icon-group-settings.jsx    |  3 +-
 .../src/components/line-group.jsx             |  4 ++
 .../src/components/line-settings.jsx          |  8 ++++
 .../src/components/pen-group.jsx              |  4 ++
 .../src/components/shape-group.jsx            |  9 +++++
 .../src/components/text-group.jsx             |  1 +
 .../src/components/toolbar-button.jsx         | 12 +++---
 .../drawing-toolbar/src/drawing-toolbar.jsx   |  7 ++++
 .../action-button-group.jsx                   |  1 +
 18 files changed, 85 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 29650516..163848b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ulms/components",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ulms/components",
-      "version": "2.2.1",
+      "version": "2.2.2",
       "license": "BSD-4-Clause",
       "dependencies": {
         "classnames-es": "^2.2.6",
diff --git a/package.json b/package.json
index 5287483a..0b98dfbf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/components",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "UI components library",
   "homepage": "https://github.com/netology-group/ulms-media-ui",
   "bugs": {
diff --git a/packages/button/package-lock.json b/packages/button/package-lock.json
index 9666665b..8f9d77e2 100644
--- a/packages/button/package-lock.json
+++ b/packages/button/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ulms/ui-button",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ulms/ui-button",
-      "version": "1.0.1",
+      "version": "1.0.2",
       "license": "MIT",
       "dependencies": {
         "classnames-es": "^2.2.6"
diff --git a/packages/button/package.json b/packages/button/package.json
index a3787e4b..4a2e5a41 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-button",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "keywords": [
     "lerna"
diff --git a/packages/button/src/button.jsx b/packages/button/src/button.jsx
index a8804dcf..af110ca4 100644
--- a/packages/button/src/button.jsx
+++ b/packages/button/src/button.jsx
@@ -6,12 +6,13 @@ import css from './button.module.css'
 
 function Button (props) {
   const {
-    active, children, className, disabled, onClick, title,
+    active, children, className, dataTestId, disabled, onClick, title,
   } = props
 
   return (
     <button
       className={cx(css.root, className, { [css.active]: active })}
+      data-testid={dataTestId}
       disabled={disabled}
       onClick={onClick}
       title={title}
diff --git a/packages/drawing-toolbar/package-lock.json b/packages/drawing-toolbar/package-lock.json
index 0cbc33a3..159e28ef 100644
--- a/packages/drawing-toolbar/package-lock.json
+++ b/packages/drawing-toolbar/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ulms/ui-drawing-toolbar",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ulms/ui-drawing-toolbar",
-      "version": "2.3.5",
+      "version": "2.3.6",
       "license": "MIT",
       "dependencies": {
         "classnames-es": "^2.2.6",
diff --git a/packages/drawing-toolbar/package.json b/packages/drawing-toolbar/package.json
index bafe5fbb..67ff7c8c 100644
--- a/packages/drawing-toolbar/package.json
+++ b/packages/drawing-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-drawing-toolbar",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "",
   "keywords": [
     "lerna"
diff --git a/packages/drawing-toolbar/src/components/color-settings.jsx b/packages/drawing-toolbar/src/components/color-settings.jsx
index b2989aca..fdfcde89 100644
--- a/packages/drawing-toolbar/src/components/color-settings.jsx
+++ b/packages/drawing-toolbar/src/components/color-settings.jsx
@@ -6,25 +6,30 @@ import { ToolbarButton } from './toolbar-button'
 import css from './settings.module.css'
 
 const colors = [
-  '#000000',
-  '#ABB8C3',
-  '#FFFFFF',
-  '#A45C3D',
-  '#FFCE03',
-  '#F94B28',
-  '#7FC92E',
-  '#1A96F6',
-  '#FF9900',
-  '#FFADDA',
-  '#A30BF8',
-  '#9DF1F7',
+  { dataTestId: 'board-panel-popup-color-black-button', value: '#000000' },
+  { dataTestId: 'board-panel-popup-color-gray-button', value: '#ABB8C3' },
+  { dataTestId: 'board-panel-popup-color-white-button', value: '#FFFFFF' },
+  { dataTestId: 'board-panel-popup-color-brown-button', value: '#A45C3D' },
+  { dataTestId: 'board-panel-popup-color-yellow-button', value: '#FFCE03' },
+  { dataTestId: 'board-panel-popup-color-red-button', value: '#F94B28' },
+  { dataTestId: 'board-panel-popup-color-green-button', value: '#7FC92E' },
+  { dataTestId: 'board-panel-popup-color-blue-button', value: '#1A96F6' },
+  { dataTestId: 'board-panel-popup-color-orange-button', value: '#FF9900' },
+  { dataTestId: 'board-panel-popup-color-pink-button', value: '#FFADDA' },
+  { dataTestId: 'board-panel-popup-color-violet-button', value: '#A30BF8' },
+  { dataTestId: 'board-panel-popup-color-aquamarine-button', value: '#9DF1F7' },
 ]
 
 export const ColorItem = ({
-  color, active = false, handleClick, innerRef,
+  active = false,
+  color,
+  dataTestId,
+  handleClick,
+  innerRef,
 }) => (
   <ToolbarButton
     active={active}
+    dataTestId={dataTestId}
     innerRef={innerRef}
     onClick={() => handleClick(color)}
   >
@@ -55,10 +60,11 @@ export const ColorSettings = ({
         <div className={cn(css.row, css.colorRow)} key={i}>
           {colorsRow.map(color => (
             <ColorItem
-              active={currentColor.toLowerCase() === color.toLowerCase()}
-              color={color}
+              active={currentColor.toLowerCase() === color.value.toLowerCase()}
+              color={color.value}
+              dataTestId={color.dataTestId}
               handleClick={handleClick}
-              key={color}
+              key={color.value}
             />
           ))}
         </div>
diff --git a/packages/drawing-toolbar/src/components/font-settings.jsx b/packages/drawing-toolbar/src/components/font-settings.jsx
index a836fcc2..fc66f0e3 100644
--- a/packages/drawing-toolbar/src/components/font-settings.jsx
+++ b/packages/drawing-toolbar/src/components/font-settings.jsx
@@ -5,12 +5,18 @@ import { ToolbarButton } from './toolbar-button'
 import css from './settings.module.css'
 
 const fontSizes = [32, 48, 64]
+const testAttributes = ['board-panel-popup-font-size-s', 'board-panel-popup-font-size-m', 'board-panel-popup-font-size-l']
 
 export const FontItem = ({
-  fontSize, active = false, handleClick, innerRef,
+  active = false,
+  dataTestId,
+  fontSize,
+  handleClick,
+  innerRef,
 }) => (
   <ToolbarButton
     active={active}
+    dataTestId={dataTestId}
     innerRef={innerRef}
     onClick={() => handleClick(fontSize)}
   >
@@ -26,9 +32,10 @@ export const FontItem = ({
 export const FontSettings = ({ currentFontSize, handleClick }) => (
   <div className={css.wrapper}>
     <div className={css.row}>
-      {fontSizes.map(itemFontSize => (
+      {fontSizes.map((itemFontSize, index) => (
         <FontItem
           active={currentFontSize === itemFontSize}
+          dataTestId={testAttributes[index]}
           fontSize={itemFontSize}
           handleClick={handleClick}
           key={itemFontSize}
diff --git a/packages/drawing-toolbar/src/components/icon-group-settings.jsx b/packages/drawing-toolbar/src/components/icon-group-settings.jsx
index c5996004..edba0d9a 100644
--- a/packages/drawing-toolbar/src/components/icon-group-settings.jsx
+++ b/packages/drawing-toolbar/src/components/icon-group-settings.jsx
@@ -10,10 +10,11 @@ export const IconGroupSettings = ({
   <div className={css.wrapper}>
     <div className={css.row}>
       {iconsSet.map(({
-        key, icon, title = '',
+        dataTestId, key, icon, title = '',
       }) => (
         <ToolbarButton
           active={currentSelection === key}
+          dataTestId={dataTestId}
           onClick={() => handleClick(key)}
           title={title}
           fillWidth={fillWidth}
diff --git a/packages/drawing-toolbar/src/components/line-group.jsx b/packages/drawing-toolbar/src/components/line-group.jsx
index 0de3701a..b42cbaa3 100644
--- a/packages/drawing-toolbar/src/components/line-group.jsx
+++ b/packages/drawing-toolbar/src/components/line-group.jsx
@@ -40,16 +40,19 @@ export class LineGroup extends React.Component {
 
     this.iconsSet = [
       {
+        dataTestId: 'board-panel-line-button',
         key: lineToolModeEnum.LINE,
         icon: this.iconsMap[lineToolModeEnum.LINE],
         title: intl.formatMessage({ id: intlID.LINE }),
       },
       {
+        dataTestId: 'board-panel-dotted-line-button',
         key: lineToolModeEnum.DASHED_LINE,
         icon: this.iconsMap[lineToolModeEnum.DASHED_LINE],
         title: intl.formatMessage({ id: intlID.DASHED_LINE }),
       },
       {
+        dataTestId: 'board-panel-arrow-button',
         key: lineToolModeEnum.ARROW,
         icon: this.iconsMap[lineToolModeEnum.ARROW],
         title: intl.formatMessage({ id: intlID.ARROW }),
@@ -147,6 +150,7 @@ export class LineGroup extends React.Component {
       >
         <ToolbarButton
           active={tool === toolEnum.LINE}
+          dataTestId='board-panel-group-line-button'
           group
           onClick={() => handleOpen(this.getOptions())}
           innerRef={this.buttonRef}
diff --git a/packages/drawing-toolbar/src/components/line-settings.jsx b/packages/drawing-toolbar/src/components/line-settings.jsx
index 876fab3f..38550204 100644
--- a/packages/drawing-toolbar/src/components/line-settings.jsx
+++ b/packages/drawing-toolbar/src/components/line-settings.jsx
@@ -37,18 +37,22 @@ export const LineSettings = ({
 
   const iconsSet = [
     {
+      dataTestId: 'board-panel-popup-thickness1-button',
       key: lineSizes.ONE,
       icon: iconsMap[lineSizes.ONE],
     },
     {
+      dataTestId: 'board-panel-popup-thickness2-button',
       key: lineSizes.TWO,
       icon: iconsMap[lineSizes.TWO],
     },
     {
+      dataTestId: 'board-panel-popup-thickness3-button',
       key: lineSizes.FOUR,
       icon: iconsMap[lineSizes.FOUR],
     },
     {
+      dataTestId: 'board-panel-popup-thickness4-button',
       key: lineSizes.EIGHT,
       icon: iconsMap[lineSizes.EIGHT],
     },
@@ -56,18 +60,22 @@ export const LineSettings = ({
 
   const dashedIconsSet = [
     {
+      dataTestId: 'board-panel-popup-thickness1-button',
       key: lineSizes.ONE,
       icon: dashedIconsMap[lineSizes.ONE],
     },
     {
+      dataTestId: 'board-panel-popup-thickness2-button',
       key: lineSizes.TWO,
       icon: dashedIconsMap[lineSizes.TWO],
     },
     {
+      dataTestId: 'board-panel-popup-thickness3-button',
       key: lineSizes.FOUR,
       icon: dashedIconsMap[lineSizes.FOUR],
     },
     {
+      dataTestId: 'board-panel-popup-thickness4-button',
       key: lineSizes.EIGHT,
       icon: dashedIconsMap[lineSizes.EIGHT],
     },
diff --git a/packages/drawing-toolbar/src/components/pen-group.jsx b/packages/drawing-toolbar/src/components/pen-group.jsx
index b14f83a4..57a4aa70 100644
--- a/packages/drawing-toolbar/src/components/pen-group.jsx
+++ b/packages/drawing-toolbar/src/components/pen-group.jsx
@@ -49,16 +49,19 @@ export class PenGroup extends React.Component {
 
     this.iconsSet = [
       {
+        dataTestId: 'board-panel-paintbrush-button',
         key: penToolModeEnum.PENCIL,
         icon: this.iconsMap[penToolModeEnum.PENCIL],
         title: intl.formatMessage({ id: intlID.PENCIL }),
       },
       {
+        dataTestId: 'board-panel-dotted-pencil-button',
         key: penToolModeEnum.DASHED_PENCIL,
         icon: this.iconsMap[penToolModeEnum.DASHED_PENCIL],
         title: intl.formatMessage({ id: intlID.DASHED_PENCIL }),
       },
       {
+        dataTestId: 'board-panel-highlighter-button',
         key: penToolModeEnum.MARKER,
         icon: this.iconsMap[penToolModeEnum.MARKER],
         title: intl.formatMessage({ id: intlID.HIGHLIGHTER }),
@@ -176,6 +179,7 @@ export class PenGroup extends React.Component {
       >
         <ToolbarButton
           active={tool === toolEnum.PEN}
+          dataTestId='board-panel-group-pen-button'
           group
           title={this._getTitle(brushMode)}
           onClick={() => handleOpen(this.getOptions())}
diff --git a/packages/drawing-toolbar/src/components/shape-group.jsx b/packages/drawing-toolbar/src/components/shape-group.jsx
index d0f8468f..d2c35f0d 100644
--- a/packages/drawing-toolbar/src/components/shape-group.jsx
+++ b/packages/drawing-toolbar/src/components/shape-group.jsx
@@ -51,21 +51,25 @@ export class ShapeGroup extends React.Component {
 
     this.iconsSet = [
       {
+        dataTestId: 'board-panel-popup-empty-square',
         key: shapeToolModeEnum.RECT,
         icon: this.iconsMap[shapeToolModeEnum.RECT],
         // title: intl.formatMessage({ id: intlID.RECT }),
       },
       {
+        dataTestId: 'board-panel-popup-empty-circle',
         key: shapeToolModeEnum.CIRCLE,
         icon: this.iconsMap[shapeToolModeEnum.CIRCLE],
         // title: intl.formatMessage({ id: intlID.CIRCLE }),
       },
       {
+        dataTestId: 'board-panel-popup-empty-triangle',
         key: shapeToolModeEnum.TRIANGLE,
         icon: this.iconsMap[shapeToolModeEnum.TRIANGLE],
         // title: intl.formatMessage({ id: intlID.TRIANGLE }),
       },
       {
+        dataTestId: 'board-panel-popup-empty-right-triangle',
         key: shapeToolModeEnum.RIGHT_TRIANGLE,
         icon: this.iconsMap[shapeToolModeEnum.RIGHT_TRIANGLE],
         // title: intl.formatMessage({ id: intlID.RIGHT_TRIANGLE }),
@@ -74,21 +78,25 @@ export class ShapeGroup extends React.Component {
 
     this.solidIconsSet = [
       {
+        dataTestId: 'board-panel-popup-square',
         key: shapeToolModeEnum.RECT_SOLID,
         icon: this.iconsSolidMap[shapeToolModeEnum.RECT_SOLID],
         // title: intl.formatMessage({ id: intlID.RECT_SOLID }),
       },
       {
+        dataTestId: 'board-panel-popup-circle',
         key: shapeToolModeEnum.CIRCLE_SOLID,
         icon: this.iconsSolidMap[shapeToolModeEnum.CIRCLE_SOLID],
         // title: intl.formatMessage({ id: intlID.CIRCLE_SOLID }),
       },
       {
+        dataTestId: 'board-panel-popup-triangle',
         key: shapeToolModeEnum.TRIANGLE_SOLID,
         icon: this.iconsSolidMap[shapeToolModeEnum.TRIANGLE_SOLID],
         // title: intl.formatMessage({ id: intlID.TRIANGLE_SOLID }),
       },
       {
+        dataTestId: 'board-panel-popup-right-triangle',
         key: shapeToolModeEnum.RIGHT_TRIANGLE_SOLID,
         icon: this.iconsSolidMap[shapeToolModeEnum.RIGHT_TRIANGLE_SOLID],
         // title: intl.formatMessage({ id: intlID.RIGHT_TRIANGLE_SOLID }),
@@ -179,6 +187,7 @@ export class ShapeGroup extends React.Component {
       >
         <ToolbarButton
           active={tool === toolEnum.SHAPE}
+          dataTestId='board-panel-group-shape-button'
           group
           title={intl.formatMessage({ id: intlID.SHAPE })}
           onClick={() => handleOpen(this.getOptions())}
diff --git a/packages/drawing-toolbar/src/components/text-group.jsx b/packages/drawing-toolbar/src/components/text-group.jsx
index 1dc7979b..8d3e20b0 100644
--- a/packages/drawing-toolbar/src/components/text-group.jsx
+++ b/packages/drawing-toolbar/src/components/text-group.jsx
@@ -90,6 +90,7 @@ export class TextGroup extends React.Component {
       >
         <ToolbarButton
           active={tool === toolEnum.TEXT}
+          dataTestId='board-panel-text-button'
           title={intl.formatMessage({ id: intlID.TEXT })}
           group
           onClick={() => handleOpen(this.getOptions())}
diff --git a/packages/drawing-toolbar/src/components/toolbar-button.jsx b/packages/drawing-toolbar/src/components/toolbar-button.jsx
index bffb5320..bac9bc25 100644
--- a/packages/drawing-toolbar/src/components/toolbar-button.jsx
+++ b/packages/drawing-toolbar/src/components/toolbar-button.jsx
@@ -4,14 +4,15 @@ import cn from 'classnames-es'
 import css from './toolbar-button.module.css'
 
 export const ToolbarButton = ({
-  onClick,
-  innerRef,
+  active = false,
   children,
-  title = '',
+  dataTestId,
   fillWidth = false,
-  padded = false,
-  active = false,
   group = false,
+  innerRef,
+  onClick,
+  padded = false,
+  title = '',
 }) => (
   <div className={css.wrapper}>
     {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
@@ -24,6 +25,7 @@ export const ToolbarButton = ({
         padded && css.button_padded,
         group && css.group,
       )}
+      data-testid={dataTestId}
       onClick={onClick}
       role='button'
       tabIndex='0'
diff --git a/packages/drawing-toolbar/src/drawing-toolbar.jsx b/packages/drawing-toolbar/src/drawing-toolbar.jsx
index 6b17ed70..2a962ddf 100644
--- a/packages/drawing-toolbar/src/drawing-toolbar.jsx
+++ b/packages/drawing-toolbar/src/drawing-toolbar.jsx
@@ -194,6 +194,7 @@ class _DrawingToolbarComponent extends React.Component {
           { isSelectEnabled && (
             <ToolbarButton
               active={tool === toolEnum.SELECT}
+              dataTestId='board-panel-choose-button'
               onClick={() => this.handleOpen(toolEnum.SELECT)}
               title={intl.formatMessage({ id: 'SELECT' })}
             >
@@ -204,6 +205,7 @@ class _DrawingToolbarComponent extends React.Component {
           { isPanEnabled && (
             <ToolbarButton
               active={tool === toolEnum.PAN}
+              dataTestId='board-panel-move-button'
               onClick={() => this.handleOpen(toolEnum.PAN)}
               title={intl.formatMessage({ id: 'HAND' })}
             >
@@ -230,6 +232,7 @@ class _DrawingToolbarComponent extends React.Component {
 
           { isShapeEnabled && (
             <ShapeGroup
+              dataTestId='board-panel-group-shape-button'
               opened={opened === toolEnum.SHAPE}
               className={css.floater}
               intl={intl}
@@ -272,6 +275,7 @@ class _DrawingToolbarComponent extends React.Component {
           { isEraserEnabled && (
             <ToolbarButton
               active={tool === toolEnum.ERASER}
+              dataTestId='board-panel-eraser-button'
               onClick={() => this.handleOpen(toolEnum.ERASER)}
               title={intl.formatMessage({ id: 'ERASER' })}
             >
@@ -284,6 +288,7 @@ class _DrawingToolbarComponent extends React.Component {
           { isImageEnabled && (
             <ToolbarButton
               active={tool === toolEnum.IMAGE}
+              dataTestId='board-panel-image-button'
               onClick={this.handleImageClick}
               title={intl.formatMessage({ id: 'UPLOAD_IMAGE' })}
             >
@@ -294,6 +299,7 @@ class _DrawingToolbarComponent extends React.Component {
           { isStampEnabled && (
             <ToolbarButton
               active={tool === toolEnum.STAMP}
+              dataTestId='board-panel-stamps-button'
               group
               onClick={this.handleStampClick}
               title={intl.formatMessage({ id: 'STAMP' })}
@@ -305,6 +311,7 @@ class _DrawingToolbarComponent extends React.Component {
           { isLibEnabled && (
             <ToolbarButton
               active={tool === toolEnum.LIB}
+              dataTestId='board-panel-library-button'
               group
               onClick={this.handleLibClick}
               title={intl.formatMessage({ id: 'LIB' })}
diff --git a/src/packages/action-button-group/action-button-group.jsx b/src/packages/action-button-group/action-button-group.jsx
index 0a91e84d..fa7f58a8 100644
--- a/src/packages/action-button-group/action-button-group.jsx
+++ b/src/packages/action-button-group/action-button-group.jsx
@@ -25,6 +25,7 @@ function ActionButtonGroup (props) {
       >
         <Button
           active={item.active}
+          dataTestId={item.dataTestId}
           disabled={item.disabled}
           className={cx({ [css.button]: true, [css.active]: item.active })}
           onClick={item.onClick}