ULMS-2633 Added data-testid attributes

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": {

packages/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulms/ui-button",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "keywords": [
     "lerna"

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}

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"

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>

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}

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}

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}

packages/drawing-toolbar/src/components/line-settings.jsx

@@ -37,37 +37,45 @@ 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],
     },
   ]
 
   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],
     },

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())}

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())}

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())}

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'