Test/add data cy for table column options (#4828)

* Add data-cy for Colum edit options

* minor data-cy changes.

* Modify the data-cy of custom rule

frontend/src/Editor/Components/Table/Table.jsx

@@ -550,6 +550,7 @@ export function Table({
   }
   return (
     <div
+      data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
       data-disabled={parsedDisabledState}
       className="card jet-table"
       style={{

frontend/src/Editor/Inspector/Components/Table.jsx

@@ -171,8 +171,10 @@ class TableComponent extends React.Component {
     return (
       <Popover id="popover-basic-2" className={`${this.props.darkMode && 'popover-dark-themed theme-dark'} shadow`}>
         <Popover.Content>
-          <div className="field mb-2">
-            <label className="form-label">{this.props.t('widget.Table.columnType', 'Column type')}</label>
+          <div className="field mb-2" data-cy={`dropdown-column-type`}>
+            <label data-cy={`label-column-type`} className="form-label">
+              {this.props.t('widget.Table.columnType', 'Column type')}
+            </label>
             <SelectSearch
               className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
               options={[
@@ -201,8 +203,11 @@ class TableComponent extends React.Component {
             />
           </div>
           <div className="field mb-2">
-            <label className="form-label">{this.props.t('widget.Table.columnName', 'Column name')}</label>
+            <label data-cy={`label-column-name`} className="form-label">
+              {this.props.t('widget.Table.columnName', 'Column name')}
+            </label>
             <input
+              data-cy={`input-column-name`}
               type="text"
               className="form-control text-field"
               onBlur={(e) => {
@@ -213,8 +218,10 @@ class TableComponent extends React.Component {
             />
           </div>
           {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
-            <div className="field mb-2">
-              <label className="form-label">{this.props.t('widget.Table.overflow', 'Overflow')}</label>
+            <div data-cy={`input-overflow`} className="field mb-2">
+              <label data-cy={`label-overflow`} className="form-label">
+                {this.props.t('widget.Table.overflow', 'Overflow')}
+              </label>
               <SelectSearch
                 className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
                 options={[
@@ -233,7 +240,7 @@ class TableComponent extends React.Component {
               />
             </div>
           )}
-          <div className="field mb-2">
+          <div data-cy={`label-and-input-key`} className="field mb-2">
             <label className="form-label">{this.props.t('widget.Table.key', 'key')}</label>
             <CodeHinter
               currentState={this.props.currentState}
@@ -252,7 +259,7 @@ class TableComponent extends React.Component {
 
           {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
             <div>
-              <div className="field mb-2">
+              <div data-cy={`label-and-input-text-color`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.textColor', 'Text color')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -272,8 +279,10 @@ class TableComponent extends React.Component {
               </div>
               {column.isEditable && (
                 <div>
-                  <div className="hr-text">{this.props.t('widget.Table.validation', 'Validation')}</div>
-                  <div className="field mb-2">
+                  <div data-cy={`header-validation`} className="hr-text">
+                    {this.props.t('widget.Table.validation', 'Validation')}
+                  </div>
+                  <div data-cy={`input-and-label-regex`} className="field mb-2">
                     <label className="form-label">{this.props.t('widget.Table.regex', 'Regex')}</label>
                     <CodeHinter
                       currentState={this.props.currentState}
@@ -289,7 +298,7 @@ class TableComponent extends React.Component {
                       }}
                     />
                   </div>
-                  <div className="field mb-2">
+                  <div data-cy={`input-and-label-min-length`} className="field mb-2">
                     <label className="form-label">{this.props.t('widget.Table.minLength', 'Min length')}</label>
                     <CodeHinter
                       currentState={this.props.currentState}
@@ -305,7 +314,7 @@ class TableComponent extends React.Component {
                       }}
                     />
                   </div>
-                  <div className="field mb-2">
+                  <div data-cy={`input-and-label-max-length`} className="field mb-2">
                     <label className="form-label">{this.props.t('widget.Table.maxLength', 'Max length')}</label>
                     <CodeHinter
                       currentState={this.props.currentState}
@@ -321,7 +330,7 @@ class TableComponent extends React.Component {
                       }}
                     />
                   </div>
-                  <div className="field mb-2">
+                  <div data-cy={`input-and-label-customo-role`} className="field mb-2">
                     <label className="form-label">{this.props.t('widget.Table.customRule', 'Custom rule')}</label>
                     <CodeHinter
                       currentState={this.props.currentState}
@@ -345,7 +354,7 @@ class TableComponent extends React.Component {
           {column.columnType === 'number' && column.isEditable && (
             <div>
               <div className="hr-text">{this.props.t('widget.Table.validation', 'Validation')}</div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-min-value`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.minValue', 'Min value')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -361,7 +370,7 @@ class TableComponent extends React.Component {
                   }}
                 />
               </div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-max-value`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.maxValue', 'Max value')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -418,7 +427,7 @@ class TableComponent extends React.Component {
             column.columnType === 'badges' ||
             column.columnType === 'radio') && (
             <div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-values`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.values', 'Values')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -434,7 +443,7 @@ class TableComponent extends React.Component {
                   }}
                 />
               </div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-labels`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.labels', 'Labels')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -457,8 +466,10 @@ class TableComponent extends React.Component {
             <>
               {column.isEditable && (
                 <div>
-                  <div className="hr-text">{this.props.t('widget.Table.validation', 'Validation')}</div>
-                  <div className="field mb-2">
+                  <div data-cy={`header-validations`} className="hr-text">
+                    {this.props.t('widget.Table.validation', 'Validation')}
+                  </div>
+                  <div data-cy={`input-and-label-custom-rule`} className="field mb-2">
                     <label className="form-label">{this.props.t('widget.Table.customRule', 'Custom Rule')}</label>
                     <CodeHinter
                       currentState={this.props.currentState}
@@ -479,7 +490,7 @@ class TableComponent extends React.Component {
             </>
           )}
 
-          <div className="field mb-2">
+          <div data-cy={`input-and-label-cell-bg-color`} className="field mb-2">
             <label className="form-label">{this.props.t('widget.Table.cellBgColor', 'Cell Background Color')}</label>
             <CodeHinter
               currentState={this.props.currentState}
@@ -498,10 +509,10 @@ class TableComponent extends React.Component {
 
           {column.columnType === 'datepicker' && (
             <div>
-              <label className="form-label">
+              <label data-cy={`label-date-display-format`} className="form-label">
                 {this.props.t('widget.Table.dateDisplayformat', 'Date Display Format')}
               </label>
-              <div className="field mb-2">
+              <div data-cy={`input-date-display-format`} className="field mb-2">
                 <CodeHinter
                   currentState={this.props.currentState}
                   initialValue={column.dateFormat}
@@ -516,9 +527,12 @@ class TableComponent extends React.Component {
                   }}
                 />
               </div>
-              <label className="form-label">{this.props.t('widget.Table.dateParseformat', 'Date Parse Format')}</label>
+              <label data-cy={`label-date-parse-format`} className="form-label">
+                {this.props.t('widget.Table.dateParseformat', 'Date Parse Format')}
+              </label>
               <div className="field mb-2">
                 <input
+                  data-cy={`input-date-parse-format`}
                   type="text"
                   className="form-control text-field"
                   onChange={(e) => {
@@ -529,8 +543,10 @@ class TableComponent extends React.Component {
                   placeholder={'DD-MM-YYYY'}
                 />
               </div>
-              <label className="form-label">Parse in timezone</label>
-              <div className="field mb-2">
+              <label data-cy={`label-parse-timezone`} className="form-label">
+                Parse in timezone
+              </label>
+              <div data-cy={`input-parse-timezone`} className="field mb-2">
                 <SelectSearch
                   className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
                   options={timeZoneOptions}
@@ -544,8 +560,10 @@ class TableComponent extends React.Component {
                   placeholder="Select.."
                 />
               </div>
-              <label className="form-label">Display in timezone</label>
-              <div className="field mb-2">
+              <label data-cy={`label-display-time-zone`} className="form-label">
+                Display in timezone
+              </label>
+              <div ata-cy={`input-display-time-zone`} className="field mb-2">
                 <SelectSearch
                   className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
                   options={timeZoneOptions}
@@ -562,6 +580,7 @@ class TableComponent extends React.Component {
               <div className="field mb-2">
                 <div className="form-check form-switch my-2">
                   <input
+                    data-cy={`toggle-show-time`}
                     className="form-check-input"
                     type="checkbox"
                     onClick={() => {
@@ -569,14 +588,16 @@ class TableComponent extends React.Component {
                     }}
                     checked={column.isTimeChecked}
                   />
-                  <span className="form-check-label">{this.props.t('widget.Table.showTime', 'show time')}</span>
+                  <span data-cy={`label-show-time`} className="form-check-label">
+                    {this.props.t('widget.Table.showTime', 'show time')}
+                  </span>
                 </div>
               </div>
             </div>
           )}
           {column.columnType === 'image' && (
             <>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-border-radius`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.borderRadius', 'Border radius')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -589,7 +610,7 @@ class TableComponent extends React.Component {
                   componentName={this.getPopoverFieldSource(column.columnType, 'borderRadius')}
                 />
               </div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-width`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.width', 'Width')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -602,7 +623,7 @@ class TableComponent extends React.Component {
                   componentName={this.getPopoverFieldSource(column.columnType, 'width')}
                 />
               </div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-height`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.height', 'Height')}</label>
                 <CodeHinter
                   currentState={this.props.currentState}
@@ -615,7 +636,7 @@ class TableComponent extends React.Component {
                   componentName={this.getPopoverFieldSource(column.columnType, 'height')}
                 />
               </div>
-              <div className="field mb-2">
+              <div data-cy={`input-and-label-object-fit`} className="field mb-2">
                 <label className="form-label">{this.props.t('widget.Table.objectFit', 'Object fit')}</label>
                 <SelectSearch
                   className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
@@ -640,12 +661,15 @@ class TableComponent extends React.Component {
           {column.columnType !== 'image' && (
             <div className="form-check form-switch my-4">
               <input
+                data-cy={`toggle-make-editable`}
                 className="form-check-input"
                 type="checkbox"
                 onClick={() => this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
                 checked={column.isEditable}
               />
-              <span className="form-check-label">{this.props.t('widget.Table.makeEditable', 'make editable')}</span>
+              <span data-cy={`label-make-editable`} className="form-check-label">
+                {this.props.t('widget.Table.makeEditable', 'make editable')}
+              </span>
             </div>
           )}
         </Popover.Content>
@@ -887,6 +911,7 @@ class TableComponent extends React.Component {
         <div>
           <div className="col-auto text-right mb-3">
             <button
+              data-cy={`button-add-column`}
               onClick={this.addNewColumn}
               className="btn btn-sm border-0 font-weight-normal padding-2 col-auto color-primary inspector-add-button"
             >
@@ -905,7 +930,14 @@ class TableComponent extends React.Component {
                   <div className={`row ${this.props.darkMode ? '' : 'bg-light'}`} role="button">
                     <div className="col-auto">
                       <SortableItem key={item.name}>
-                        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          data-cy={`draggable-handle-column-${item.name}`}
+                          width="8"
+                          height="14"
+                          viewBox="0 0 8 14"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M0.666667 1.66667C0.666667 2.03486 0.965143 2.33333 1.33333 2.33333C1.70152 2.33333 2 2.03486 2 1.66667C2 1.29848 1.70152 1 1.33333 1C0.965143 1 0.666667 1.29848 0.666667 1.66667Z"
                             stroke="#8092AC"
@@ -940,10 +972,13 @@ class TableComponent extends React.Component {
                       </SortableItem>
                     </div>
                     <div className="col">
-                      <div className="text">{item.name}</div>
+                      <div data-cy={`column-${item.name}`} className="text">
+                        {item.name}
+                      </div>
                     </div>
                     <div className="col-auto">
                       <svg
+                        data-cy={`button-delete-${item.name}`}
                         onClick={() => this.removeColumn(index)}
                         width="10"
                         height="16"