diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Filepicker/FilePicker3_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Filepicker/FilePicker3_spec.ts new file mode 100644 index 0000000000..95dd2280df --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Filepicker/FilePicker3_spec.ts @@ -0,0 +1,218 @@ +import { + agHelper, + locators, + entityExplorer, + deployMode, + propPane, +} from "../../../../../support/Objects/ObjectsCore"; + +describe("Verify file picker widget", () => { + before(() => { + agHelper.AddDsl("filepickerDsl"); + }); + it("1. Verify property visibility", () => { + const basicProperties = [ + "allowedfiletypes", + "dataformat", + `maxno\\.offiles`, + ]; + + const labelProperties = ["text"]; + + const validationProperties = ["required", "maxfilesize\\(mb\\)"]; + + const generalProperties = ["visible", "disable", "animateloading"]; + + const eventsProperties = ["onfilesselected"]; + + const styleColorProperties = ["buttoncolor"]; + + const styleBorderProperties = ["borderradius", "boxshadow"]; + + entityExplorer.SelectEntityByName("FilePicker1", "Widgets"); + + propPane.AssertPropertyVisibility(basicProperties, "basic"); + propPane.AssertPropertyVisibility(labelProperties, "label"); + propPane.AssertPropertyVisibility(validationProperties, "validation"); + propPane.AssertPropertyVisibility(generalProperties, "general"); + propPane.AssertPropertyVisibility(eventsProperties, "events"); + propPane.MoveToTab("Style"); + propPane.AssertPropertyVisibility(styleColorProperties, "color"); + propPane.AssertPropertyVisibility(styleBorderProperties, "borderandshadow"); + }); + + it("2. Verify Renaming, duplication and deletion", () => { + // Rename and verify + entityExplorer.RenameEntityFromExplorer( + "FilePicker1", + "NewFilePicker", + true, + ); + agHelper.AssertElementVisibility(locators._widgetName("NewFilePicker")); + + // Copy and paste widget using cmd+c and cmd+v + entityExplorer.CopyPasteWidget("NewFilePicker"); + entityExplorer.AssertEntityPresenceInExplorer("NewFilePickerCopy"); + entityExplorer.DeleteWidgetFromEntityExplorer("NewFilePickerCopy"); + + // Copy paste from property pane and delete from property pane + propPane.CopyPasteWidgetFromPropertyPane("NewFilePicker"); + propPane.DeleteWidgetFromPropertyPane("NewFilePickerCopy"); + entityExplorer.SelectEntityByName("NewFilePicker", "Widgets"); + propPane.MoveToTab("Content"); + }); + + it("3. Verify max number of files", () => { + agHelper.AssertText(locators._buttonText, "text", "Select Files"); + propPane.UpdatePropertyFieldValue("Max no. of files", "2"); + agHelper.ClickButton("Select Files"); + agHelper.UploadFile("AAAFlowerVase.jpeg"); + // Verify Add more is visible + agHelper.GetNClick(locators._buttonInDeployedMode, 0, true); + agHelper.AssertElementVisibility(locators._fileUploadAddMore); + agHelper.GetNClick(locators._fileUploadAddMore); + + // Verify Add more does not exist when max no. files are added + agHelper.UploadFile("appsmithlogo.png"); + agHelper.GetNClick(locators._buttonInDeployedMode, 0, true); + agHelper.AssertElementAbsence(locators._fileUploadAddMore); + agHelper.GetNClick(locators._fileUploadDashboardClose); + + agHelper.AssertText(locators._buttonText, "text", "2 files selected"); + }); + + it("4. Verify Validation max file size supported", () => { + propPane.UpdatePropertyFieldValue("Max file size(Mb)", "1"); + agHelper.GetNClick(locators._buttonInDeployedMode, 0, true); + agHelper.GetNClick('[title="Remove file"]'); + agHelper.GetNClick(locators._fileUploadAddMore); + agHelper + .GetElement(locators._uploadFiles) + .eq(0) + .selectFile("cypress/fixtures/Appsmith.gif", { force: true }) + .wait(3000); + agHelper.AssertElementVisibility( + locators._fileUploadErrorContains( + "This file exceeds maximum allowed size of 1 MB ", + ), + ); + agHelper.GetNClick(locators._fileUploadDashboardClose); + }); + + it("5. Validate visible and disabled toggle", () => { + propPane.TogglePropertyState("visible", "Off"); + + // Preview mode + agHelper.GetNClick(locators._enterPreviewMode); + agHelper.AssertElementAbsence( + locators._widgetInDeployed("filepickerwidgetv2"), + ); + agHelper.GetNClick(locators._exitPreviewMode); + + // Deploy mode + deployMode.DeployApp(); + agHelper.AssertElementAbsence( + locators._widgetInDeployed("filepickerwidgetv2"), + ); + deployMode.NavigateBacktoEditor(); + + entityExplorer.SelectEntityByName("NewFilePicker", "Widgets"); + propPane.TogglePropertyState("visible", "On"); + + // Preview mode + agHelper.GetNClick(locators._enterPreviewMode); + agHelper.AssertElementVisibility( + locators._widgetInDeployed("filepickerwidgetv2"), + ); + agHelper.GetNClick(locators._exitPreviewMode); + + // Deploy mode + deployMode.DeployApp(); + agHelper.AssertElementVisibility( + locators._widgetInDeployed("filepickerwidgetv2"), + ); + deployMode.NavigateBacktoEditor(); + + // Visible JS mode + entityExplorer.SelectEntityByName("NewFilePicker", "Widgets"); + propPane.ToggleJSMode("Visible", true); + propPane.UpdatePropertyFieldValue("Visible", "false"); + + deployMode.DeployApp(); + agHelper.AssertElementAbsence( + locators._widgetInDeployed("filepickerwidgetv2"), + ); + deployMode.NavigateBacktoEditor(); + + entityExplorer.SelectEntityByName("NewFilePicker", "Widgets"); + propPane.ToggleJSMode("Visible", true); + propPane.UpdatePropertyFieldValue("Visible", "true"); + propPane.ToggleJSMode("Visible", false); + + // Disabled + propPane.TogglePropertyState("disable", "On"); + agHelper.AssertAttribute( + locators._widgetInDeployed("filepickerwidgetv2"), + "disabled", + "disabled", + ); + + // Preview mode + agHelper.GetNClick(locators._enterPreviewMode); + agHelper.AssertAttribute( + locators._widgetInDeployed("filepickerwidgetv2"), + "disabled", + "disabled", + ); + agHelper.GetNClick(locators._exitPreviewMode); + + // Deploy mode + deployMode.DeployApp(); + agHelper.AssertAttribute( + locators._widgetInDeployed("filepickerwidgetv2"), + "disabled", + "disabled", + ); + deployMode.NavigateBacktoEditor(); + + entityExplorer.SelectEntityByName("NewFilePicker", "Widgets"); + propPane.TogglePropertyState("disable", "Off"); + }); + + it("6. Verify onFilesSelected", () => { + propPane.ToggleJSMode("onFilesSelected", true); + propPane.UpdatePropertyFieldValue( + "onFilesSelected", + "{{showAlert('File Selected', '');}}", + ); + deployMode.DeployApp(); + agHelper.ClickButton("Select Files"); + agHelper.UploadFile("appsmithlogo.png"); + agHelper.ValidateToastMessage("File Selected"); + deployMode.NavigateBacktoEditor(); + }); + + it("7. Verify button color and border and shadows", () => { + entityExplorer.SelectEntityByName("NewFilePicker", "Widgets"); + // Verify button color picker opens up + propPane.MoveToTab("Style"); + agHelper.GetNClick(propPane._propertyControlColorPicker("buttoncolor")); + agHelper.AssertElementVisibility(propPane._colorPickerV2Color); + // Verify full color picker + agHelper.AssertAttribute(propPane._colorPickerInput, "type", "text", 0); + propPane.TogglePropertyState("buttoncolor", "On", ""); + agHelper.AssertAttribute(propPane._colorPickerInput, "type", "color", 0); + + // Verify border + agHelper.GetNClick(propPane._segmentedControl("0px")); + agHelper.AssertCSS(locators._buttonInDeployedMode, "border-radius", "0px"); + + // Verify Box Shadow + agHelper.GetNClick(`${propPane._segmentedControl("0")}:contains('Large')`); + agHelper.AssertCSS( + locators._buttonInDeployedMode, + "box-shadow", + "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px", + ); + }); +}); diff --git a/app/client/cypress/fixtures/Appsmith.gif b/app/client/cypress/fixtures/Appsmith.gif new file mode 100644 index 0000000000..53c281cd21 Binary files /dev/null and b/app/client/cypress/fixtures/Appsmith.gif differ diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index 8f939196e0..8879ba216c 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -302,4 +302,9 @@ export class CommonLocators { _callbackAddBtn = ".action-callback-add .ads-v2-button"; _checkboxInDeployedMode = "//label[contains(@class, 'bp3-checkbox')]//input"; _listText = "//span[text()='Blue']/../.."; + _fileUploadDashboardClose = ".uppy-Dashboard-close"; + _fileUploadErrorContains = (msg: string) => + `.uppy-Informer p:contains('${msg}')`; + _fileUploadAddMore = ".uppy-DashboardContent-addMore"; + _buttonText = ".bp3-button-text"; }