diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ButtonCell_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ButtonCell_spec.ts new file mode 100644 index 0000000000..9abac91c8c --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ButtonCell_spec.ts @@ -0,0 +1,61 @@ +import { + agHelper, + entityExplorer, + propPane, + table, +} from "../../../../../../support/Objects/ObjectsCore"; + +describe( + "Table Widget V2 Button cell tests", + { tags: ["@tag.Widget", "@tag.Table", "@tag.Binding"] }, + () => { + const tableDataSelector = (row: number, col: number) => + table.GetTableDataSelector(row, col) + " div"; + + before(() => { + entityExplorer.DragDropWidgetNVerify("tablewidgetv2", 650, 250); + propPane.EnterJSContext("Table data", JSON.stringify([{ button: true }])); + }); + + const validateAlignment = ( + alignment: string, + expectedValue: string, + isHorizontal: boolean, + ) => { + const property = isHorizontal + ? "Horizontal Alignment" + : "Vertical alignment"; + propPane.ToggleJSMode(property, true); + propPane.UpdatePropertyFieldValue(property, alignment); + const cssProperty = isHorizontal ? "justify-content" : "align-items"; + agHelper + .GetElement(tableDataSelector(0, 0)) + .should("have.css", cssProperty, expectedValue); + }; + + it("1. Test to validate horizontal and vertical alignments", function () { + table.ChangeColumnType("button", "Button"); + propPane.MoveToTab("Style"); + + // Horizontal alignments + const horizontalAlignments = [ + { alignment: "CENTER", expected: "center" }, + { alignment: "RIGHT", expected: "flex-end" }, + { alignment: "LEFT", expected: "flex-start" }, + ]; + horizontalAlignments.forEach(({ alignment, expected }) => { + validateAlignment(alignment, expected, true); + }); + + // Vertical alignments + const verticalAlignments = [ + { alignment: "TOP", expected: "flex-start" }, + { alignment: "BOTTOM", expected: "flex-end" }, + { alignment: "CENTER", expected: "center" }, + ]; + verticalAlignments.forEach(({ alignment, expected }) => { + validateAlignment(alignment, expected, false); + }); + }); + }, +); diff --git a/app/client/cypress/support/Pages/Table.ts b/app/client/cypress/support/Pages/Table.ts index 9a11bfbc3f..6aa08cb989 100644 --- a/app/client/cypress/support/Pages/Table.ts +++ b/app/client/cypress/support/Pages/Table.ts @@ -855,4 +855,8 @@ export class Table { this.agHelper.GetHoverNClick(selector, 1, true); verify && cy.get(selector).eq(1).should("be.disabled"); } + + public GetTableDataSelector(rowNum: number, colNum: number): string { + return `.t--widget-tablewidgetv2 .tbody .td[data-rowindex=${rowNum}][data-colindex=${colNum}]`; + } } diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Alignment.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Alignment.ts index bb696192f9..9594bb60f8 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Alignment.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Alignment.ts @@ -9,7 +9,7 @@ export default { return hideByColumnType( props, propertyPath, - [ColumnTypes.CHECKBOX, ColumnTypes.SWITCH], + [ColumnTypes.CHECKBOX, ColumnTypes.SWITCH, ColumnTypes.BUTTON], true, ); }, @@ -57,6 +57,7 @@ export default { ColumnTypes.URL, ColumnTypes.CHECKBOX, ColumnTypes.SWITCH, + ColumnTypes.BUTTON, ]); }, }, @@ -103,6 +104,7 @@ export default { ColumnTypes.URL, ColumnTypes.CHECKBOX, ColumnTypes.SWITCH, + ColumnTypes.BUTTON, ]); }, },