diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.js deleted file mode 100644 index e73534dee1..0000000000 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.js +++ /dev/null @@ -1,207 +0,0 @@ -const commonlocators = require("../../../../../locators/commonlocators.json"); -import { - agHelper, - propPane, - table, -} from "../../../../../support/Objects/ObjectsCore"; - -describe("Table widget date column inline editing functionality", () => { - before(() => { - agHelper.AddDsl("Table/DateCellEditingDSL"); - }); - - it("1. should check that edit check box is enabled for date type column in the columns list", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.get( - `[data-rbd-draggable-id="release_date"] .t--card-checkbox input`, - ).should("not.be.disabled"); - }); - - it("2. should check that date cell edit mode can be turned on", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get( - ".t--property-pane-section-general .t--property-control-editable", - ).should("exist"); - cy.get( - ".t--property-pane-section-general .t--property-control-editable input[type=checkbox]", - ).click(); - cy.get( - `${commonlocators.TableV2Head} [data-header="release_date"] svg`, - ).should("exist"); - }); - - it("3. should check that user can edit date in table cell", () => { - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick(); - cy.get(".bp3-dateinput-popover").should("exist"); - cy.get(".t--inlined-cell-editor").should("exist"); - cy.get(".bp3-dateinput-popover [aria-label='Mon May 17 2021']").click(); - cy.get(".bp3-dateinput-popover").should("not.exist"); - cy.get(".t--inlined-cell-editor").should("not.exist"); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).should("contain", "2021-05-17T00:00:00"); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get(".bp3-dateinput-popover").should("exist"); - cy.get(".t--inlined-cell-editor").should("exist"); - cy.get(`${commonlocators.textWidget}`).first().click(); - cy.get(".bp3-dateinput-popover").should("not.exist"); - cy.get(".t--inlined-cell-editor").should("not.exist"); - cy.get( - `[type='CANVAS_WIDGET'] .t--widget-textwidget ${commonlocators.textWidget} span`, - ).should( - "contain", - `{"revenue":42600000,"imdb_id":"tt3228774","release_date":"2021-05-17"}`, - ); - cy.get( - `[type='CANVAS_WIDGET'] .t--widget-textwidget+.t--widget-textwidget ${commonlocators.textWidget} span`, - ).should( - "contain", - `[{"index":0,"updatedFields":{"release_date":"2021-05-17"},"allFields":{"revenue":42600000,"imdb_id":"tt3228774","release_date":"2021-05-17"}}]`, - ); - cy.get( - `[type='CANVAS_WIDGET'] .t--widget-textwidget+.t--widget-textwidget+.t--widget-textwidget ${commonlocators.textWidget} span`, - ).should("contain", "[0]"); - }); - - it("4. should check that changing property pane display format for date column changes date display format", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-displayformat .rc-select-show-arrow").click(); - cy.get(".t--dropdown-option").children().contains("Do MMM YYYY").click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).should("contain", "17th May 2021"); - - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-displayformat .rc-select-show-arrow").click(); - cy.get(".t--dropdown-option").children().contains("DD/MM/YYYY").click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).should("contain", "17/05/2021"); - }); - - it("5. should check that changing property pane first day of week changes the date picker starting day", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-firstdayofweek .t--code-editor-wrapper") - .last() - .click() - .type("{backspace}1"); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get( - ".bp3-datepicker .DayPicker .DayPicker-Months .DayPicker-WeekdaysRow div:first-child abbr", - ).should("contain", "Mo"); - - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-firstdayofweek .t--code-editor-wrapper") - .last() - .click() - .type("{backspace}5"); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get( - ".bp3-datepicker .DayPicker .DayPicker-Months .DayPicker-WeekdaysRow div:first-child abbr", - ).should("contain", "Fr"); - }); - - it("6. should check Show Shortcuts property control functionality", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get( - ".t--property-pane-section-datesettings .t--property-control-showshortcuts", - ).should("exist"); - cy.get( - ".t--property-pane-section-datesettings .t--property-control-showshortcuts input[type=checkbox]", - ).click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get(`.bp3-dateinput-popover .bp3-daterangepicker-shortcuts`).should( - "not.exist", - ); - - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get( - ".t--property-pane-section-datesettings .t--property-control-showshortcuts", - ).should("exist"); - cy.get( - ".t--property-pane-section-datesettings .t--property-control-showshortcuts input[type=checkbox]", - ).click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get(`.bp3-dateinput-popover .bp3-daterangepicker-shortcuts`).should( - "exist", - ); - }); - - it("7. should check property pane Required toggle functionality", () => { - cy.openPropertyPane("tablewidgetv2"); - propPane.TogglePropertyState("Required", "On"); - table.ClickOnEditIcon(0, 2); - cy.get(".bp3-dateinput-popover [aria-label='Wed May 26 2021']").click(); - table.ClickOnEditIcon(0, 2); - cy.get(".bp3-dateinput-popover [aria-label='Wed May 26 2021']").click(); - cy.get( - ".bp3-transition-container .bp3-popover .bp3-popover-content", - ).should("exist"); - cy.get( - ".bp3-transition-container .bp3-popover .bp3-popover-content", - ).should("contain", "This field is required"); - cy.get(".bp3-dateinput-popover [aria-label='Wed May 26 2021']").click(); - cy.get( - ".bp3-transition-container .bp3-popover .bp3-popover-content", - ).should("not.exist"); - }); - - it("8. should check date cells behave as expected when adding a new row to table", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.get("[data-testid='t--property-pane-back-btn']").click(); - cy.get( - ".t--property-pane-section-addingarow .t--property-control-allowaddingarow input[type=checkbox]", - ).click(); - cy.get(".t--add-new-row").click(); - cy.get(".bp3-datepicker").should("not.exist"); - cy.get(".t--inlined-cell-editor") - .should("have.css", "border") - .and("eq", "1px solid rgb(255, 255, 255)"); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3) input`, - ).should("have.value", ""); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3) input`, - ).click(); - cy.get(".bp3-datepicker").should("exist"); - cy.get(".t--inlined-cell-editor") - .should("have.css", "border") - .and("not.eq", "none") - .and("not.eq", "1px solid rgb(255, 255, 255)"); - cy.get( - ".bp3-datepicker .DayPicker .DayPicker-Body .DayPicker-Week:nth-child(2) .DayPicker-Day:first-child", - ).click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3) input`, - ).should("not.have.value", ""); - }); -}); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.ts new file mode 100644 index 0000000000..42391d313d --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_1_spec.ts @@ -0,0 +1,189 @@ +import { + table, + entityExplorer, + agHelper, + locators, + propPane, + draggableWidgets, +} from "../../../../../support/Objects/ObjectsCore"; + +describe("Table widget date column inline editing functionality", () => { + before(() => { + agHelper.AddDsl("Table/DateCellEditingDSL"); + }); + + it( + "1. should check that edit check box is enabled for date type column in the columns list" + + "and check that date cell edit mode can be turned on", + () => { + entityExplorer.SelectEntityByName("Table1"); + agHelper.AssertElementEnabledDisabled( + table._columnCheckbox("release_date"), + 0, + false, + ); + table.EditColumn("release_date", "v2"); + propPane.TogglePropertyState("Editable", "On"); + agHelper.Sleep(1000); + agHelper.AssertElementVisible( + `${table._tableV2Head} ${table._columnHeaderDiv("release_date")} ${ + locators._svg + }`, + ); + }, + ); + + it("2. should check that user can edit date in table cell", () => { + agHelper.GetElement(`${table._tableRow1Child3}`).dblclick(); + agHelper.GetNClick( + `${table._dateInputPopover} [aria-label='Mon May 17 2021']`, + ); + agHelper.AssertElementAbsence(table._dateInputPopover); + agHelper.AssertElementAbsence(table._editCellEditor); + agHelper + .GetText(`${table._tableRow1Child3}`) + .then(($textData) => expect($textData).to.eq(`2021-05-17T00:00:00`)); + agHelper.GetElement(`${table._tableRow1Child3}`).dblclick({ + force: true, + }); + agHelper.AssertElementVisible(table._dateInputPopover); + agHelper.AssertElementVisible(table._editCellEditor); + agHelper.GetNClick(`${locators._widgetInCanvas(draggableWidgets.TEXT)}`, 0); + agHelper.AssertElementAbsence(table._dateInputPopover); + agHelper.AssertElementAbsence(table._editCellEditor); + agHelper + .GetText(locators._textWidget, "text", 0) + .then(($textData) => + expect($textData).to.eq( + `{"revenue":42600000,"imdb_id":"tt3228774","release_date":"2021-05-17"}`, + ), + ); + agHelper + .GetText(locators._textWidget, "text", 1) + .then(($textData) => + expect($textData).to.eq( + `[{"index":0,"updatedFields":{"release_date":"2021-05-17"},"allFields":{"revenue":42600000,"imdb_id":"tt3228774","release_date":"2021-05-17"}}]`, + ), + ); + agHelper + .GetText(locators._textWidget, "text", 2) + .then(($textData) => expect($textData).to.eq("[0]")); + }); + + it("3. should check that changing property pane display format for date column changes date display format", () => { + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.SelectPropertiesDropDown("Display format", "Do MMM YYYY"); + agHelper + .GetText(`${table._tableRow1Child3}`) + .then(($textData) => expect($textData).to.eq("17th May 2021")); + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.SelectPropertiesDropDown("Display format", "DD/MM/YYYY"); + agHelper + .GetText(`${table._tableRow1Child3}`) + .then(($textData) => expect($textData).to.eq("17/05/2021")); + }); + + it("4. should check that changing property pane first day of week changes the date picker starting day", () => { + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.UpdatePropertyFieldValue("First Day Of Week", "1", true); + agHelper.GetElement(`${table._tableRow1Child3}`).dblclick({ + force: true, + }); + agHelper + .GetText(`${table._weekdayRowDayPicker} ${table._divFirstChild}`) + .then(($textData) => expect($textData).to.eq("Mo")); + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.UpdatePropertyFieldValue("First Day Of Week", "5", true); + agHelper.GetElement(`${table._tableRow1Child3}`).dblclick({ + force: true, + }); + agHelper + .GetText(`${table._weekdayRowDayPicker} ${table._divFirstChild}`) + .then(($textData) => expect($textData).to.eq("Fr")); + }); + + it("5. should check Show Shortcuts property control functionality", () => { + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.TogglePropertyState("Show Shortcuts", "Off"); + agHelper.Sleep(2000); + agHelper.GetElement(`${table._tableRow1Child3}`).dblclick({ + force: true, + }); + agHelper.AssertElementAbsence(`${table._dateRangePickerShortcuts}`); + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.TogglePropertyState("Show Shortcuts", "On"); + agHelper.Sleep(2000); + agHelper.GetElement(`${table._tableRow1Child3}`).dblclick({ + force: true, + }); + agHelper.AssertElementVisible(`${table._dateRangePickerShortcuts}`); + }); + + it("6. should check property pane Required toggle functionality", () => { + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.TogglePropertyState("Required", "On"); + agHelper.Sleep(2000); + //Edits the date by selecting from the popup + table.ClickOnEditIcon(0, 2); + agHelper.GetNClick( + `${table._dateInputPopover} [aria-label='Wed May 26 2021']`, + ); + //Clears the date selected in previous step + table.ClickOnEditIcon(0, 2); + agHelper.GetNClick( + `${table._dateInputPopover} [aria-label='Wed May 26 2021']`, + ); + agHelper + .GetText(table._popoverErrorMsg("This field is required")) + .then(($textData) => expect($textData).to.eq("This field is required")); + agHelper.GetNClick( + `${table._dateInputPopover} [aria-label='Wed May 26 2021']`, + ); + agHelper.AssertElementAbsence( + table._popoverErrorMsg("This field is required"), + ); + }); + + it("7. should check date cells behave as expected when adding a new row to table", () => { + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + propPane.TogglePropertyState("Allow adding a row", "On"); + table.AddNewRow(); + agHelper.AssertElementAbsence(table._datePicker); + agHelper.AssertCSS( + table._editCellEditor, + "border", + "1px solid rgb(255, 255, 255)", + ); + agHelper + .GetText(`${table._tableRow1Child3} ${locators._inputField}`) + .then(($textData) => expect($textData).to.eq("")); + agHelper.GetNClick(`${table._tableRow1Child3} ${locators._inputField}`); + agHelper.AssertElementVisible(table._datePicker); + agHelper + .GetElement(table._editCellEditor) + .should("have.css", "border") + .and("not.eq", "none") + .and("not.eq", "1px solid rgb(255, 255, 255)"); + agHelper.GetNClick( + `${table._dayPickerWeek}:nth-child(2) ${table._dayPickerFirstChild}`, + ); + agHelper + .GetText(`${table._tableRow1Child3} ${locators._inputField}`, "val") + .then(($textData) => expect($textData).to.eq("07/07/2023")); + }); +}); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_2_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_2_spec.js deleted file mode 100644 index cb25a9c693..0000000000 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_2_spec.js +++ /dev/null @@ -1,162 +0,0 @@ -const commonlocators = require("../../../../../locators/commonlocators.json"); -import * as _ from "../../../../../support/Objects/ObjectsCore"; - -describe("Table widget date column inline editing functionality", () => { - before(() => { - _.agHelper.AddDsl("Table/DateCellEditingDSL"); - }); - - it.skip("1. should check that changing property pane time precision changes the date picker time precision", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-timeprecision .bp3-popover-target") - .last() - .click(); - cy.get(".t--dropdown-option").children().contains("Minute").click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get(".bp3-timepicker-input-row .bp3-timepicker-hour").should("exist"); - cy.get(".bp3-timepicker-input-row .bp3-timepicker-minute").should("exist"); - cy.get(".bp3-timepicker-input-row .bp3-timepicker-second").should( - "not.exist", - ); - - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-timeprecision .bp3-popover-target") - .last() - .click(); - cy.get(".t--dropdown-option").children().contains("None").click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get(".bp3-timepicker-input-row").should("not.exist"); - - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get(".t--property-control-timeprecision .bp3-popover-target") - .last() - .click(); - cy.get(".t--dropdown-option").children().contains("Second").click(); - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) div:nth-child(3)`, - ).dblclick({ - force: true, - }); - cy.get(".bp3-timepicker-input-row .bp3-timepicker-hour").should("exist"); - cy.get(".bp3-timepicker-input-row .bp3-timepicker-minute").should("exist"); - cy.get(".bp3-timepicker-input-row .bp3-timepicker-second").should("exist"); - }); - - it("2. should check visible property control functionality", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get( - ".t--property-pane-section-general .t--property-control-visible", - ).should("exist"); - cy.get( - ".t--property-pane-section-general .t--property-control-visible input[type=checkbox]", - ).click(); - cy.get( - `${commonlocators.TableV2Head} [data-header="release_date"] .hidden-header`, - ).should("exist"); - - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get( - ".t--property-pane-section-general .t--property-control-visible input[type=checkbox]", - ).click(); - cy.get( - `${commonlocators.TableV2Head} [data-header="release_date"] .draggable-header`, - ).should("exist"); - }); - - // ADS changes to date input property causes this test to fail - // skipping it temporarily. - it.skip("3. should check min date and max date property control functionality", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.editColumn("release_date"); - cy.get( - ".t--property-pane-section-validation .t--property-control-mindate", - ).should("exist"); - cy.get( - ".t--property-pane-section-validation .t--property-control-maxdate", - ).should("exist"); - - cy.get( - ".t--property-pane-section-validation .t--property-control-mindate div:last-child .react-datepicker-wrapper", - ) - .click() - .clear() - .type("2022-05-05T00:00:10.1010+05:30{enter}"); - cy.get( - ".t--property-pane-section-validation .t--property-control-maxdate div:last-child .react-datepicker-wrapper", - ) - .click() - .clear() - .type("2022-05-30T00:00:10.1010+05:30{enter}"); - - cy.get( - `${commonlocators.TableV2Row} .tr:nth-child(1) .td:nth-child(3)`, - ).realHover(); - cy.get(`.t--editable-cell-icon`).first().click({ - force: true, - }); - cy.get( - ".bp3-transition-container .bp3-popover .bp3-popover-content", - ).should("contain", "Date out of range"); - cy.get( - ".t--property-pane-section-validation .t--property-control-mindate div:last-child .react-datepicker-wrapper", - ) - .click() - .clear() - .type("{enter}"); - cy.get( - ".t--property-pane-section-validation .t--property-control-maxdate div:last-child .react-datepicker-wrapper", - ) - .click() - .clear() - .type("{enter}"); - }); - - it("4. should allow ISO 8601 format date and not throw a disallowed validation error", () => { - cy.openPropertyPane("tablewidgetv2"); - cy.get(commonlocators.editPropBackButton).click(); - cy.get(".t--property-control-tabledata").then(($el) => { - cy.updateCodeInput( - $el, - '[{ "dateValue": "2023-02-02T13:39:38.367857Z" }]', - ); - }); - cy.wait(500); - - cy.editColumn("dateValue"); - //change format of column to date - cy.changeColumnType("Date"); - - cy.get(".t--property-control-dateformat").click(); - cy.contains("ISO 8601").click(); - // we should not see an error after selecting the ISO 8061 format - cy.get(".t--property-control-dateformat .t--codemirror-has-error").should( - "not.exist", - ); - cy.get(".t--property-control-dateformat").find(".t--js-toggle").click(); - //check the selected format value - cy.get(".t--property-control-dateformat").contains( - "YYYY-MM-DDTHH:mm:ss.SSSZ", - ); - cy.get(".t--property-control-dateformat").then(($el) => { - //give a corrupted date format - cy.updateCodeInput($el, "YYYY-MM-DDTHH:mm:ss.SSSsZ"); - }); - //we should now see an error when an incorrect date format - cy.get(".t--property-control-dateformat .t--codemirror-has-error").should( - "exist", - ); - }); -}); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_2_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_2_spec.ts new file mode 100644 index 0000000000..5acebd1579 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_editing_2_spec.ts @@ -0,0 +1,149 @@ +import { + table, + entityExplorer, + agHelper, + locators, + propPane, + assertHelper, +} from "../../../../../support/Objects/ObjectsCore"; + +describe("Table widget date column inline editing functionality", () => { + before(() => { + agHelper.AddDsl("Table/DateCellEditingDSL"); + }); + + it.skip("1. should check that changing property pane time precision changes the date picker time precision", () => { + entityExplorer.SelectEntityByName("Table1"); + table.EditColumn("release_date", "v2"); + agHelper.GetNClick(table._timeprecisionPopover, 0); + agHelper + .GetElement(locators._dropdownText) + .children() + .contains("Minute") + .click(); + agHelper.GetElement(table._tableRow1Child3).dblclick({ + force: true, + }); + agHelper.AssertElementExist(table._timePickerHour); + agHelper.AssertElementExist(table._timePickerMinute); + agHelper.AssertElementAbsence(table._timePickerSecond); + + entityExplorer.SelectEntityByName("Table1"); + table.EditColumn("release_date", "v2"); + agHelper.GetNClick(table._timeprecisionPopover, 0); + agHelper + .GetElement(locators._dropdownText) + .children() + .contains("None") + .click(); + agHelper.GetElement(table._tableRow1Child3).dblclick({ + force: true, + }); + agHelper.AssertElementAbsence(table._timePickerRow); + + entityExplorer.SelectEntityByName("Table1"); + table.EditColumn("release_date", "v2"); + agHelper.GetNClick(table._timeprecisionPopover, 1); + agHelper + .GetElement(locators._dropdownText) + .children() + .contains("Second") + .click(); + agHelper.GetElement(table._tableRow1Child3).dblclick({ + force: true, + }); + agHelper.AssertElementExist(table._timePickerHour); + agHelper.AssertElementExist(table._timePickerMinute); + agHelper.AssertElementExist(table._timePickerSecond); + }); + + it("2. should check visible property control functionality", () => { + entityExplorer.SelectEntityByName("Table1"); + table.EditColumn("release_date", "v2"); + propPane.TogglePropertyState("Visible", "Off"); + agHelper.Sleep(1000); + table.AssertHiddenColumns(["release_date"]); + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + table.EditColumn("release_date", "v2"); + propPane.TogglePropertyState("Visible", "On"); + agHelper.Sleep(1000); + table.AssertVisibleColumns(["release_date"]); + }); + + // ADS changes to date input property causes this test to fail + // skipping it temporarily. + it.skip("3. should check min date and max date property control functionality", () => { + entityExplorer.SelectEntityByName("Table1"); + table.EditColumn("release_date", "v2"); + agHelper.AssertElementExist( + propPane._propertyPanePropertyControl("validation", "mindate"), + ); + agHelper.AssertElementExist( + propPane._propertyPanePropertyControl("validation", "maxdate"), + ); + agHelper.RemoveCharsNType( + `${propPane._propertyPanePropertyControl("validation", "mindate")} ${ + table._lastChildDatePicker + }`, + -1, + "2022-05-05T00:00:10.1010+05:30{enter}", + ); + agHelper.RemoveCharsNType( + `${propPane._propertyPanePropertyControl("validation", "mindate")} ${ + table._lastChildDatePicker + }`, + -1, + "2022-05-30T00:00:10.1010+05:30{enter}", + ); + table.ClickOnEditIcon(0, 2); + agHelper + .GetText(table._popoverErrorMsg("Date out of range")) + .then(($textData) => expect($textData).to.eq("Date out of range")); + agHelper.RemoveCharsNType( + `${propPane._propertyPanePropertyControl("validation", "mindate")} ${ + table._lastChildDatePicker + }`, + -1, + "{enter}", + ); + agHelper.RemoveCharsNType( + `${propPane._propertyPanePropertyControl("validation", "maxdate")} ${ + table._lastChildDatePicker + }`, + -1, + "{enter}", + ); + }); + + it("4. should allow ISO 8601 format date and not throw a disallowed validation error", () => { + entityExplorer.SelectEntityByName("Table1"); + propPane.NavigateBackToPropertyPane(); + propPane.UpdatePropertyFieldValue( + "Table data", + '[{ "dateValue": "2023-02-02T13:39:38.367857Z" }]', + ); + agHelper.Sleep(3000); + table.ChangeColumnType("dateValue", "Date", "v2"); + table.EditColumn("dateValue", "v2"); + propPane.SelectPropertiesDropDown("Date format", "ISO 8601"); + // we should not see an error after selecting the ISO 8061 format + agHelper.AssertElementAbsence( + `${propPane._propertyDateFormat} ${table._codeMirrorError}`, + ); + propPane.ToggleJSMode("Date format", true); + agHelper + .GetText(locators._existingFieldTextByName("Date format")) + .then(($textData) => + expect($textData).to.include("YYYY-MM-DDTHH:mm:ss.SSSZ"), + ); + propPane.UpdatePropertyFieldValue( + "Date format", + "YYYY-MM-DDTHH:mm:ss.SSSsZ", + ); + //we should now see an error when an incorrect date format + agHelper.AssertElementVisible( + `${propPane._propertyDateFormat} ${table._codeMirrorError}`, + ); + }); +}); diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index c955b8c58b..baaf490ce5 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -253,11 +253,10 @@ export class CommonLocators { _appThemeCard = ".t--theme-card"; _appNavigationSettings = "#t--navigation-settings-header"; _appNavigationSettingsShowTitle = "#t--navigation-settings-application-title"; - _switchGroupControl = - ".t--draggable-switchgroupwidget .bp3-control-indicator"; _fontSelect = "fontsize .rc-select"; _fontInput = "fontsize input"; _pagination = ".rc-pagination"; _controlOption = ".t--property-control-options"; _canvasBody = "[data-testid='div-selection-0']"; + _svg = "svg"; } diff --git a/app/client/cypress/support/Pages/PropertyPane.ts b/app/client/cypress/support/Pages/PropertyPane.ts index 7894de15ff..150ef0a7f6 100644 --- a/app/client/cypress/support/Pages/PropertyPane.ts +++ b/app/client/cypress/support/Pages/PropertyPane.ts @@ -46,8 +46,7 @@ export class PropertyPane { `.t--property-pane-section-collapse-${section}`; private _sectionCollapseWithTag = (section: string, tab: string) => `.t--property-pane-section-collapse-${section} .t--property-section-tag-${tab}`; - private _propertyControl = (property: string) => - `.t--property-control-${property}`; + _propertyControl = (property: string) => `.t--property-control-${property}`; private _addAction = (property: string) => `.t--add-action-${property}`; _propertyPaneSearchInputWrapper = ".t--property-pane-search-input-wrapper"; _propertyPaneSearchInput = `${this._propertyPaneSearchInputWrapper} input`; @@ -107,6 +106,9 @@ export class PropertyPane { }`; private _propPaneSelectedItem = (option: string) => `.t--property-control-${option} span.rc-select-selection-item span`; + _propertyDateFormat = ".t--property-control-dateformat"; + _propertyPanePropertyControl = (propPane: string, propControl: string) => + `.t--property-pane-section-${propPane} .t--property-control-${propControl}`; _autoHeightLimitMin = "[data-testid='t--auto-height-overlay-handles-min']"; _autoHeightLimitMin_div = "[data-testid='t--auto-height-overlay-handles-min'] div"; diff --git a/app/client/cypress/support/Pages/Table.ts b/app/client/cypress/support/Pages/Table.ts index 522f6a3897..c4051fab4e 100644 --- a/app/client/cypress/support/Pages/Table.ts +++ b/app/client/cypress/support/Pages/Table.ts @@ -45,8 +45,7 @@ export class Table { "//div[contains(@class,'thead')]//div[contains(@class,'tr')][1]//div[@role='columnheader']//div[contains(text(),'" + columnName + "')]/parent::div/parent::div"; - private _columnHeaderDiv = (columnName: string) => - `[data-header=${columnName}]`; + _columnHeaderDiv = (columnName: string) => `[data-header=${columnName}]`; private _tableWidgetVersion = (version: "v1" | "v2") => `.t--widget-tablewidget${version == "v1" ? "" : version}`; private _nextPage = (version: "v1" | "v2") => @@ -158,6 +157,35 @@ export class Table { `${this._columnHeaderDiv(columnName)} .header-menu .bp3-popover2-target`; _columnHeaderMenu = ".bp3-menu"; _selectMenuItem = ".menu-item-text"; + _columnCheckbox = (columnName: string) => + "[data-rbd-draggable-id='" + columnName + "']" + " .t--card-checkbox input"; + _dateInputPopover = ".bp3-dateinput-popover"; + _tableV2Row = ".t--draggable-tablewidgetv2 .tbody"; + _weekdayRowDayPicker = + ".bp3-datepicker .DayPicker .DayPicker-Months .DayPicker-WeekdaysRow"; + _popoverErrorMsg = (msg: string) => + "//div[@class='bp3-popover-content' and contains(text(),'" + msg + "')]"; + _datePicker = ".bp3-datepicker"; + _dayPickerWeek = ".bp3-datepicker .DayPicker .DayPicker-Body .DayPicker-Week"; + _timePickerHour = ".bp3-timepicker-input-row .bp3-timepicker-hour"; + _timePickerMinute = ".bp3-timepicker-input-row .bp3-timepicker-minute"; + _timePickerSecond = ".bp3-timepicker-input-row .bp3-timepicker-second"; + _timePickerRow = ".bp3-timepicker-input-row"; + _tableV2Head = ".t--draggable-tablewidgetv2 .thead"; + _timeprecisionPopover = + ".t--property-control-timeprecision .bp3-popover-target"; + _tableRow1Child3 = + ".t--draggable-tablewidgetv2 .tbody .tr:nth-child(1) div:nth-child(3)"; + _draggableHeader = " .draggable-header"; + _lastChildDatePicker = "div:last-child .react-datepicker-wrapper"; + _codeMirrorError = ".t--codemirror-has-error"; + _canvasWidgetType = "[type='CANVAS_WIDGET']"; + _showArrow = ".rc-select-show-arrow"; + _codeEditorWrapper = ".t--code-editor-wrapper"; + _dateRangePickerShortcuts = + ".bp3-dateinput-popover .bp3-daterangepicker-shortcuts"; + _dayPickerFirstChild = ".DayPicker-Day:first-child"; + _divFirstChild = "div:first-child abbr"; public GetNumberOfRows() { return this.agHelper.GetElement(this._tr).its("length"); @@ -694,4 +722,14 @@ export class Table { ); this.agHelper.Sleep(500); } + + public AssertVisibleColumns(columnNames: string[]) { + columnNames.forEach(($header) => { + cy.xpath(this._columnHeader($header)) + .invoke("attr", "class") + .then((classes) => { + expect(classes).includes("draggable-header"); + }); + }); + } }