diff --git a/cypress/constants/selectors/button.js b/cypress/constants/selectors/button.js index 4bf81994bb..b8b7106c39 100644 --- a/cypress/constants/selectors/button.js +++ b/cypress/constants/selectors/button.js @@ -1,117 +1,118 @@ export const buttonSelector={ - buttonWidget: "[data-cy=button-widget]", - buttonProperties: "[data-rb-event-key=properties]", - buttonStyles: "[data-rb-event-key=styles]", - buttonName: "[data-cy=edit-widget-name]", - propertiesElements:{ - propertiesAccordion: "[data-cy=widget-accordion]:eq(0)", - buttonTextLabel:"[data-cy=accordion-components]:eq(0)", - buttonTextInput:"[data-cy=accordion-input] :nth-child(5)", - loadingState: "[data-cy=accordion-components]:eq(1)", - eventsAccordion: "[data-cy=widget-accordion]:eq(1)", - addEventListner:"[data-cy=add-event-handler]", - noEventHandler:"[data-cy=no-event-handler-message]", - layoutAccordion: "[data-cy=widget-accordion]:eq(2)", - showOnDesktopLabel: "[data-cy=accordion-components]:eq(2)", - showOnMobileLabel: "[data-cy=accordion-components]:eq(3)", - documentationLink: "[data-cy=widget-documentation-link]", - }, - loadingStateFx: "[data-cy=fx-button]:eq(2)", - loadingStateToggle: "[data-cy=toggle-button]:eq(0)", - desktopFx:"[data-cy=fx-button]:eq(4)", - desktopToggle:"[data-cy=toggle-button]:eq(1)", - mobileFx: "[data-cy=fx-button]:eq(6)", - mobileToggle: "[data-cy=toggle-button]:eq(2)", - buttonInputField: "[data-cy=accordion-input] > .CodeMirror > .CodeMirror-scroll > .CodeMirror-sizer", - fxLoadingState:".cm-atom:eq(0)", - loadingStateInputFx: "[data-cy=fx-button]:eq(1)", - eventHandler: "[data-cy=event-handler]", - popoverCard: "[data-cy=popover-card]", - eventLabel: "[data-cy=event-label]", - eventSelection: "[data-cy=event-selection] > .select-search > .select-search__value > .select-search__input", - actionLabel: "[data-cy=action-label]", - actionSelection: "[data-cy=action-selection] ", - actionOption: "[data-cy=action-option]", - messageLabel: "[data-cy=message-label]", - messageText: "[data-cy=accordion-input] > .CodeMirror > .CodeMirror-scroll > .CodeMirror-sizer >:eq(10)", - alertTypeLabel: "[data-cy=alert-type-label]", - alertMessageType: "[data-cy=alert-message-type]", - fxDesktop:".cm-atom:eq(2)", - desktopInputFx: "[data-cy=fx-button]:eq(3)", - mobileInputFx: "[data-cy=fx-button]:eq(5)", - fxMobile: ".cm-atom:eq(4)", - stylesElements: { - backgroundColorLabel: "[data-cy=accordion-components]:eq(4)", - textColorLabel: "[data-cy=accordion-components]:eq(5)", - loaderColorLabel: "[data-cy=accordion-components]:eq(6)", - visibilityLabel: "[data-cy=accordion-components]:eq(7)", - disableLabel: "[data-cy=accordion-components]:eq(8)", - borderRadiusLabel: "[data-cy=accordion-components]:eq(9)", - }, - stylesInput: { - backgroundColorInputField: "[data-cy=color-picker-input]:eq(0)", - textColorInputField: "[data-cy=color-picker-input]:eq(1)", - loaderColorInputField: "[data-cy=color-picker-input]:eq(2)", - borderRadiusInputField: "[data-cy=border-radius-input]", - }, - stylesFx:{ - backgroundColor: "[data-cy=fx-button]:eq(8)", - textColor: "[data-cy=fx-button]:eq(10)", - loaderColor: "[data-cy=fx-button]:eq(12)", - visibility: "[data-cy=fx-button]:eq(14)", - disable: "[data-cy=fx-button]:eq(16)", - borderRadius: "[data-cy=fx-button]:eq(18)", - }, - backgroundColorSelector:"[data-cy=color-picker-input] > .col-auto:eq(0)", - colorPickCard: ".sketch-picker", - hexLabel:'[style="-webkit-box-flex: 2; flex: 2 1 0%;"] > div > label', - backgroundColorInput: "[data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer .CodeMirror-lines >> .CodeMirror-code >> span:eq(1)", - backgroundColorCloseFx:"[data-cy=fx-button]:eq(7)", - backgroundColor:{ - inputHex: "#rc-editable-input-1", - inputR: "#rc-editable-input-2", - labelR: ":nth-child(2) > div > label", - inputG: "#rc-editable-input-3", - labelG:":nth-child(3) > div > label", - inputB: "#rc-editable-input-4", - labelB: ":nth-child(4) > div > label", - inputA: "#rc-editable-input-5", - labelA: ":nth-child(5) > div > label", - }, - textColorSelector: "[data-cy=color-picker-input] > .col-auto:eq(1)", - textColorInput: "[data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer .CodeMirror-lines >> .CodeMirror-code >> span:eq(2)", - textColorCloseFx: "[data-cy=fx-button]:eq(9)", - textColor:{ - inputHex: "#rc-editable-input-6", - inputR: "#rc-editable-input-7", - labelR: ":nth-child(2) > div > label", - inputG: "#rc-editable-input-8", - labelG:":nth-child(3) > div > label", - inputB: "#rc-editable-input-9", - labelB: ":nth-child(4) > div > label", - inputA: "#rc-editable-input-10", - labelA: ":nth-child(5) > div > label", - }, - loaderColorSelector: "[data-cy=color-picker-input] > .col-auto:eq(2)", - loaderColorInput: "[data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer .CodeMirror-lines >> .CodeMirror-code >> span:eq(3)", - loaderColorCloseFx: "[data-cy=fx-button]:eq(11)", - loaderColor: { - inputHex: "#rc-editable-input-11", - inputR: "#rc-editable-input-12", - labelR: ":nth-child(2) > div > label", - inputG: "#rc-editable-input-13", - labelG:":nth-child(3) > div > label", - inputB: "#rc-editable-input-14", - labelB: ":nth-child(4) > div > label", - inputA: "#rc-editable-input-15", - labelA: ":nth-child(5) > div > label", - }, - fxVisibility: ".cm-atom:eq(0)", - fxDisable: ".cm-atom:eq(2)", - visibilityToggle: "[data-cy=toggle-button]:eq(3)", - disableToggle: "[data-cy=toggle-button]:eq(4)", - visibilityCloseFx: "[data-cy=fx-button]:eq(13)", - disableCloseFx: "[data-cy=fx-button]:eq(15)", - borderRadiusCloseFx: "[data-cy=fx-button]:eq(15)", - fxBorderRadius: ".CodeMirror-code > .CodeMirror-line >> .cm-number" + buttonWidget: "[data-cy=button-widget]", + buttonProperties: "[data-rb-event-key=properties]", + buttonStyles: "[data-rb-event-key=styles]", + buttonName: "[data-cy=edit-widget-name]", + propertiesElements:{ + propertiesAccordion: "[data-cy=widget-accordion]:eq(0)", + buttonTextLabel:"[data-cy=accordion-components]:eq(0)", + buttonTextInput: '#collapse-0 > .accordion-body > :nth-child(1) > :nth-child(1) > .row > .col > .code-hinter-wrapper > [data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer >>.CodeMirror-lines >> .CodeMirror-code >> span', + loadingState: "[data-cy=accordion-components]:eq(1)", + eventsAccordion: "[data-cy=widget-accordion]:eq(1)", + addEventListner: "[data-cy=add-event-handler]", + noEventHandler: "[data-cy=no-event-handler-message]", + generalAccordion: "[data-cy=widget-accordion]:eq(2)", + layoutAccordion: "[data-cy=widget-accordion]:eq(3)", + showOnDesktopLabel: "[data-cy=accordion-components]:eq(3)", + showOnMobileLabel: "[data-cy=accordion-components]:eq(4)", + documentationLink: "[data-cy=widget-documentation-link]", + }, + loadingStateFx: "[data-cy=fx-button]:eq(3)", + loadingStateToggle: "[data-cy=toggle-button]:eq(0)", + desktopFx:"[data-cy=fx-button]:eq(6)", + desktopToggle:"[data-cy=toggle-button]:eq(1)", + mobileFx: "[data-cy=fx-button]:eq(8)", + mobileToggle: "[data-cy=toggle-button]:eq(2)", + buttonInputField: "[data-cy=accordion-input] > .CodeMirror > .CodeMirror-scroll > .CodeMirror-sizer", + fxLoadingState:".cm-atom:eq(0)", + loadingStateInputFx: "[data-cy=fx-button]:eq(2)", + eventHandler: "[data-cy=event-handler]", + popoverCard: "[data-cy=popover-card]", + eventLabel: "[data-cy=event-label]", + eventSelection: "[data-cy=event-selection] > .select-search > .select-search__value > .select-search__input", + actionLabel: "[data-cy=action-label]", + actionSelection: "[data-cy=action-selection] ", + actionOption: "[data-cy=action-option]", + messageLabel: "[data-cy=message-label]", + messageText: "[data-cy=accordion-input] > .CodeMirror > .CodeMirror-scroll > .CodeMirror-sizer >:eq(11)", + alertTypeLabel: "[data-cy=alert-type-label]", + alertMessageType: "[data-cy=alert-message-type]", + fxDesktop:".cm-atom:eq(2)", + desktopInputFx: "[data-cy=fx-button]:eq(5)", + mobileInputFx: "[data-cy=fx-button]:eq(7)", + fxMobile: ".cm-atom:eq(4)", + stylesElements: { + backgroundColorLabel: "[data-cy=accordion-components]:eq(5)", + textColorLabel: "[data-cy=accordion-components]:eq(6)", + loaderColorLabel: "[data-cy=accordion-components]:eq(7)", + visibilityLabel: "[data-cy=accordion-components]:eq(8)", + disableLabel: "[data-cy=accordion-components]:eq(9)", + borderRadiusLabel: "[data-cy=accordion-components]:eq(10)", + }, + stylesInput: { + backgroundColorInputField: "[data-cy=color-picker-input]:eq(0)", + textColorInputField: "[data-cy=color-picker-input]:eq(1)", + loaderColorInputField: "[data-cy=color-picker-input]:eq(2)", + borderRadiusInputField: "[data-cy=border-radius-input]", + }, + stylesFx:{ + backgroundColor: "[data-cy=fx-button]:eq(10)", + textColor: "[data-cy=fx-button]:eq(12)", + loaderColor: "[data-cy=fx-button]:eq(14)", + visibility: "[data-cy=fx-button]:eq(16)", + disable: "[data-cy=fx-button]:eq(18)", + borderRadius: "[data-cy=fx-button]:eq(20)", + }, + backgroundColorSelector:"[data-cy=color-picker-input] > .col-auto:eq(0)", + colorPickCard: ".sketch-picker", + hexLabel:'[style="-webkit-box-flex: 2; flex: 2 1 0%;"] > div > label', + backgroundColorInput: "[data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer .CodeMirror-lines >> .CodeMirror-code >> span:eq(1)", + backgroundColorCloseFx:"[data-cy=fx-button]:eq(9)", + backgroundColor:{ + inputHex: "#rc-editable-input-1", + inputR: "#rc-editable-input-2", + labelR: ":nth-child(2) > div > label", + inputG: "#rc-editable-input-3", + labelG:":nth-child(3) > div > label", + inputB: "#rc-editable-input-4", + labelB: ":nth-child(4) > div > label", + inputA: "#rc-editable-input-5", + labelA: ":nth-child(5) > div > label", + }, + textColorSelector: "[data-cy=color-picker-input] > .col-auto:eq(1)", + textColorInput: "[data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer .CodeMirror-lines >> .CodeMirror-code >> span:eq(2)", + textColorCloseFx: "[data-cy=fx-button]:eq(11)", + textColor:{ + inputHex: "#rc-editable-input-6", + inputR: "#rc-editable-input-7", + labelR: ":nth-child(2) > div > label", + inputG: "#rc-editable-input-8", + labelG:":nth-child(3) > div > label", + inputB: "#rc-editable-input-9", + labelB: ":nth-child(4) > div > label", + inputA: "#rc-editable-input-10", + labelA: ":nth-child(5) > div > label", + }, + loaderColorSelector: "[data-cy=color-picker-input] > .col-auto:eq(2)", + loaderColorInput: "[data-cy=accordion-input] > .CodeMirror >> .CodeMirror-sizer .CodeMirror-lines >> .CodeMirror-code >> span:eq(3)", + loaderColorCloseFx: "[data-cy=fx-button]:eq(13)", + loaderColor: { + inputHex: "#rc-editable-input-11", + inputR: "#rc-editable-input-12", + labelR: ":nth-child(2) > div > label", + inputG: "#rc-editable-input-13", + labelG:":nth-child(3) > div > label", + inputB: "#rc-editable-input-14", + labelB: ":nth-child(4) > div > label", + inputA: "#rc-editable-input-15", + labelA: ":nth-child(5) > div > label", + }, + fxVisibility: ".cm-atom:eq(0)", + fxDisable: ".cm-atom:eq(2)", + visibilityToggle: "[data-cy=toggle-button]:eq(3)", + disableToggle: "[data-cy=toggle-button]:eq(4)", + visibilityCloseFx: "[data-cy=fx-button]:eq(15)", + disableCloseFx: "[data-cy=fx-button]:eq(17)", + borderRadiusCloseFx: "[data-cy=fx-button]:eq(15)", + fxBorderRadius: ".CodeMirror-code > .CodeMirror-line >> .cm-number" }; \ No newline at end of file diff --git a/cypress/constants/selectors/common.js b/cypress/constants/selectors/common.js index d878a51d9c..ecf2466f4c 100644 --- a/cypress/constants/selectors/common.js +++ b/cypress/constants/selectors/common.js @@ -15,4 +15,9 @@ export const commonSelectors={ emailField: "[data-cy=email-text-field]", passwordField: "[data-cy=password-text-field]", signInButton: "[data-cy=login-button]", + backButton: "[data-cy=back-button]", + emptyAppCreateButton: "[data-cy=create-new-application]", + appCreateButton: "[data-cy=create-new-app-button]", + createButton: "[data-cy=create-button]", + appNameInput: "[data-cy=app-name-input]", } \ No newline at end of file diff --git a/cypress/constants/texts/button.js b/cypress/constants/texts/button.js index 008ecd2075..3069895e45 100644 --- a/cypress/constants/texts/button.js +++ b/cypress/constants/texts/button.js @@ -1,46 +1,47 @@ export const buttonText={ - widgetName: "Button", - buttonProperties: "Properties", - buttonStyles: "Styles", - buttonName: "button1", - propertiesElements:{ - propertiesAccordion: "Properties", - buttonTextLabel: "Button Text", - buttonTextInput: "Button", - loadingState: "Loading State", - eventsAccordion: "Events", - addEventListner: "+ Add event handler", - noEventHandler: "This button doesn't have any event handlers", - layoutAccordion: "Layout", - showOnDesktopLabel: "Show on desktop", - showOnMobileLabel: "Show on mobile", - documentationLink: "Button documentation", - }, - fxButton:"Fx", - savedToast: "Saved!", - invalidButtonName: "New Button", - buttonNameErrToast: "Invalid widget name. Should be unique and only include letters, numbers and underscore.", - validButtonName: "button", - buttonText:"Send", - trueText: "true", - falseText:"false", - eventLabel: "Event", - actionLabel: "Action", - actionOption: "Action options", - messageLabel: "Message", - alertTypeLabel: "Alert Type", - newMessage: " new toast", - newToast: "Hello world new toast", - stylesElements:{ - backgroundColorLabel: "Background color", - textColorLabel: "Text color", - loaderColorLabel: "Loader color", - visibilityLabel: "Visibility", - disableLabel: "Disable", - borderRadiusLabel: "Border radius", - }, - backgroundColorInput: "#375FCF", - textColorInput: "#fff", - loaderColorInput: "#fff", - borderRadiusInput: "15", + widgetName: "Button", + buttonProperties: "Properties", + buttonStyles: "Styles", + buttonName: "button1", + propertiesElements:{ + propertiesAccordion: "Properties", + buttonTextLabel: "Button Text", + buttonTextInput: "Button", + loadingState: "Loading State", + eventsAccordion: "Events", + addEventListner: "+ Add event handler", + noEventHandler: "This button doesn't have any event handlers", + generalAccordion: "General", + layoutAccordion: "Layout", + showOnDesktopLabel: "Show on desktop", + showOnMobileLabel: "Show on mobile", + documentationLink: "Button documentation", + }, + fxButton:"Fx", + savedToast: "Saved!", + invalidButtonName: "New Button", + buttonNameErrToast: "Invalid widget name. Should be unique and only include letters, numbers and underscore.", + validButtonName: "button", + buttonText:"Send", + trueText: "true", + falseText:"false", + eventLabel: "Event", + actionLabel: "Action", + actionOption: "Action options", + messageLabel: "Message", + alertTypeLabel: "Alert Type", + newMessage: " new toast", + newToast: "Hello world new toast", + stylesElements:{ + backgroundColorLabel: "Background color", + textColorLabel: "Text color", + loaderColorLabel: "Loader color", + visibilityLabel: "Visibility", + disableLabel: "Disable", + borderRadiusLabel: "Border radius", + }, + backgroundColorInput: "#375FCF", + textColorInput: "#fff", + loaderColorInput: "#fff", + borderRadiusInput: "15", }; \ No newline at end of file diff --git a/cypress/integration/editor/widget/button.spec.js b/cypress/integration/editor/widget/button.spec.js index 5b5cd7adf0..8efda1780c 100644 --- a/cypress/integration/editor/widget/button.spec.js +++ b/cypress/integration/editor/widget/button.spec.js @@ -2,98 +2,99 @@ import { buttonSelector } from "Selectors/button"; import {commonSelectors} from "Selectors/common"; import { buttonText } from "Texts/button"; import * as button from "Support/utils/button"; - +import { fake } from "Fixtures/fake"; describe("Editor- Test Button widget",()=>{ - beforeEach(()=>{ - cy.appLogin(); - cy.createAppIfEmptyDashboard(); - button.navigateToEditor(); - cy.dragAndDropWidget(buttonText.widgetName); - }); + const appName = (`${fake.companyName} App`); + beforeEach(()=>{ + cy.appUILogin(); + cy.createApp(appName); + button.navigateToEditor(appName); + cy.dragAndDropWidget(buttonText.widgetName); + }); - it("should verify the properties of the button widget",()=>{ - button.propertiesElements(); + it("should verify the properties of the button widget",()=>{ + button.propertiesElements(); - cy.get(buttonSelector.buttonInputField).first().click().type(`{selectall}${buttonText.buttonText}`); - cy.get(buttonSelector.buttonProperties).click(); - cy.get(buttonSelector.buttonWidget).should("have.text",buttonText.buttonText); - - cy.get(buttonSelector.buttonName).should("be.visible"); - cy.get(buttonSelector.buttonProperties).click(); - cy.get(buttonSelector.buttonName).clear().type(` ${buttonText.invalidButtonName}{enter}`); - cy.verifyToastMessage(commonSelectors.toastMessage,buttonText.buttonNameErrToast); - cy.get(buttonSelector.buttonName).clear().type(`{selectall}${buttonText.validButtonName}{enter}`); + cy.get(buttonSelector.buttonInputField).first().click().type(`{selectall}${buttonText.buttonText}`); + cy.get(buttonSelector.buttonProperties).click(); + cy.get(buttonSelector.buttonWidget).should("have.text",buttonText.buttonText); + + cy.get(buttonSelector.buttonName).should("be.visible"); + cy.get(buttonSelector.buttonProperties).click(); + cy.get(buttonSelector.buttonName).clear().type(` ${buttonText.invalidButtonName}{enter}`); + cy.verifyToastMessage(commonSelectors.toastMessage,buttonText.buttonNameErrToast); + cy.get(buttonSelector.buttonName).clear().type(`{selectall}${buttonText.validButtonName}{enter}`); - cy.get(buttonSelector.loadingStateFx).click(); - cy.get(buttonSelector.fxLoadingState).should("have.text", buttonText.falseText); - cy.get(buttonSelector.loadingStateInputFx).click(); - cy.get(buttonSelector.loadingStateToggle).check(); - cy.get(buttonSelector.loadingStateFx).click(); - cy.get(buttonSelector.fxLoadingState).should("have.text", buttonText.trueText); - cy.get(buttonSelector.loadingStateInputFx).click(); - cy.get(buttonSelector.loadingStateToggle).uncheck(); - cy.get(buttonSelector.propertiesElements.propertiesAccordion).click(); + cy.get(buttonSelector.loadingStateFx).click(); + cy.get(buttonSelector.fxLoadingState).should("have.text", buttonText.falseText); + cy.get(buttonSelector.loadingStateInputFx).click(); + cy.get(buttonSelector.loadingStateToggle).check(); + cy.get(buttonSelector.loadingStateFx).click(); + cy.get(buttonSelector.fxLoadingState).should("have.text", buttonText.trueText); + cy.get(buttonSelector.loadingStateInputFx).click(); + cy.get(buttonSelector.loadingStateToggle).uncheck(); + cy.get(buttonSelector.propertiesElements.propertiesAccordion).click(); - cy.get(buttonSelector.propertiesElements.addEventListner).click(); - cy.get(buttonSelector.eventHandler).click(); - cy.get(buttonSelector.popoverCard).should("be.visible"); - button.eventListnerCard(); - cy.get(buttonSelector.messageText).click().type(buttonText.newMessage); - cy.get(buttonSelector.buttonWidget).click({force:true}); + cy.get(buttonSelector.propertiesElements.addEventListner).click(); + cy.get(buttonSelector.eventHandler).click(); + cy.get(buttonSelector.popoverCard).should("be.visible"); + button.eventListnerCard(); + cy.get(buttonSelector.messageText).click().type(buttonText.newMessage); + cy.get(buttonSelector.buttonWidget).click({force:true}); - cy.get(buttonSelector.desktopFx).click(); - cy.get(buttonSelector.fxDesktop).should("have.text", buttonText.trueText); - cy.get(buttonSelector.desktopInputFx).click(); - cy.get(buttonSelector.desktopToggle).uncheck(); - cy.get(buttonSelector.desktopFx).click(); - cy.get(buttonSelector.fxDesktop).should("have.text", buttonText.falseText); - cy.get(buttonSelector.desktopInputFx).click(); - cy.get(buttonSelector.desktopToggle).check(); + cy.get(buttonSelector.desktopFx).click(); + cy.get(buttonSelector.fxDesktop).should("have.text", buttonText.trueText); + cy.get(buttonSelector.desktopInputFx).click(); + cy.get(buttonSelector.desktopToggle).uncheck(); + cy.get(buttonSelector.desktopFx).click(); + cy.get(buttonSelector.fxDesktop).should("have.text", buttonText.falseText); + cy.get(buttonSelector.desktopInputFx).click(); + cy.get(buttonSelector.desktopToggle).check(); - cy.get(buttonSelector.mobileFx).click(); - cy.get(buttonSelector.fxMobile).should("have.text", buttonText.falseText); - cy.get(buttonSelector.mobileInputFx).click(); - cy.get(buttonSelector.mobileToggle).check(); - cy.get(buttonSelector.mobileFx).click(); - cy.get(buttonSelector.fxMobile).should("have.text", buttonText.trueText); - cy.get(buttonSelector.mobileInputFx).click(); - cy.get(buttonSelector.mobileToggle).uncheck(); + cy.get(buttonSelector.mobileFx).click(); + cy.get(buttonSelector.fxMobile).should("have.text", buttonText.falseText); + cy.get(buttonSelector.mobileInputFx).click(); + cy.get(buttonSelector.mobileToggle).check(); + cy.get(buttonSelector.mobileFx).click(); + cy.get(buttonSelector.fxMobile).should("have.text", buttonText.trueText); + cy.get(buttonSelector.mobileInputFx).click(); + cy.get(buttonSelector.mobileToggle).uncheck(); - button.deleteApp(); + button.deleteApp(); - }); + }); - it("should verify the styles of the button widget",()=>{ - button.stylesElements(); - button.colorPickerCard(); - cy.get(buttonSelector.stylesFx.visibility).click(); - cy.get(buttonSelector.fxVisibility).should("have.text",buttonText.trueText); - cy.get(buttonSelector.visibilityCloseFx).click(); - cy.get(buttonSelector.visibilityToggle).uncheck(); - cy.get(buttonSelector.stylesFx.visibility).click(); - cy.get(buttonSelector.fxVisibility).should("have.text",buttonText.falseText); - cy.get(buttonSelector.visibilityCloseFx).click(); - cy.get(buttonSelector.buttonWidget).should("not.be.visible"); - cy.get(buttonSelector.visibilityToggle).check(); + it("should verify the styles of the button widget",()=>{ + button.stylesElements(); + button.colorPickerCard(); + cy.get(buttonSelector.stylesFx.visibility).click(); + cy.get(buttonSelector.fxVisibility).should("have.text",buttonText.trueText); + cy.get(buttonSelector.visibilityCloseFx).click(); + cy.get(buttonSelector.visibilityToggle).uncheck(); + cy.get(buttonSelector.stylesFx.visibility).click(); + cy.get(buttonSelector.fxVisibility).should("have.text",buttonText.falseText); + cy.get(buttonSelector.visibilityCloseFx).click(); + cy.get(buttonSelector.buttonWidget).should("not.be.visible"); + cy.get(buttonSelector.visibilityToggle).check(); - cy.get(buttonSelector.stylesFx.disable).click(); - cy.get(buttonSelector.fxDisable).should("have.text",buttonText.falseText); - cy.get(buttonSelector.disableCloseFx).click(); - cy.get(buttonSelector.disableToggle).check(); - cy.get(buttonSelector.stylesFx.disable).click(); - cy.get(buttonSelector.fxDisable).should("have.text",buttonText.trueText); - cy.get(buttonSelector.disableCloseFx).click(); - cy.get(buttonSelector.buttonWidget).should("be.disabled"); - cy.get(buttonSelector.disableToggle).uncheck(); - cy.get(buttonSelector.buttonWidget).should("be.enabled"); + cy.get(buttonSelector.stylesFx.disable).click(); + cy.get(buttonSelector.fxDisable).should("have.text",buttonText.falseText); + cy.get(buttonSelector.disableCloseFx).click(); + cy.get(buttonSelector.disableToggle).check(); + cy.get(buttonSelector.stylesFx.disable).click(); + cy.get(buttonSelector.fxDisable).should("have.text",buttonText.trueText); + cy.get(buttonSelector.disableCloseFx).click(); + cy.get(buttonSelector.buttonWidget).should("be.disabled"); + cy.get(buttonSelector.disableToggle).uncheck(); + cy.get(buttonSelector.buttonWidget).should("be.enabled"); - cy.get(buttonSelector.stylesInput.borderRadiusInputField).clear().type("15"); - cy.get(buttonSelector.stylesFx.borderRadius).click(); - cy.get(buttonSelector.fxBorderRadius).should("have.text", buttonText.borderRadiusInput) + cy.get(buttonSelector.stylesInput.borderRadiusInputField).clear().type("15"); + cy.get(buttonSelector.stylesFx.borderRadius).click(); + cy.get(buttonSelector.fxBorderRadius).should("have.text", buttonText.borderRadiusInput) - button.deleteApp(); - - }); + button.deleteApp(); + }); + }); \ No newline at end of file diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 1e75412739..265ad396f8 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -34,21 +34,37 @@ Cypress.Commands.add("appLogin",()=>{ cy.visit('/'); }) -Cypress.Commands.add('createAppIfEmptyDashboard', fn => { - cy.get('.empty-title').then(($title => { +Cypress.Commands.add('createApp',(appName) => { + cy.get('body').then(($title => { if ($title.text().includes('You can get started by creating a new application or by creating an application using a template in ToolJet Library.')) { - cy.get(".empty-action > :nth-child(1)").click(); - cy.get(".modal-footer > .btn").click() + cy.get(commonSelectors.emptyAppCreateButton).click(); + cy.get(commonSelectors.createButton).click(); cy.wait(1000); cy.get('body').then($el =>{ if($el.text().includes('Skip')){ cy.get(commonSelectors.skipButton).click(); } else{ - cy.log("instructions modal is skipped ") + cy.log("instructions modal is skipped "); } }); - cy.go('back') + cy.clearAndType(commonSelectors.appNameInput, appName); + cy.get(commonSelectors.backButton).click(); + } + else{ + cy.get(commonSelectors.appCreateButton).click(); + cy.get(commonSelectors.createButton).click(); + cy.wait(1000); + cy.get('body').then($el =>{ + if($el.text().includes('Skip')){ + cy.get(commonSelectors.skipButton).click(); + } + else{ + cy.log("instructions modal is skipped "); + } + }); + cy.clearAndType(commonSelectors.appNameInput, appName); + cy.get(commonSelectors.backButton).click(); } })) }); diff --git a/cypress/support/utils/button.js b/cypress/support/utils/button.js index be916ac771..07f7a5fd15 100644 --- a/cypress/support/utils/button.js +++ b/cypress/support/utils/button.js @@ -1,97 +1,103 @@ import { buttonSelector } from "Selectors/button"; import { buttonText } from "Texts/button"; import {commonSelectors} from "Selectors/common"; +import { commonText } from "Texts/common"; + export const propertiesElements = () => { - cy.get(buttonSelector.buttonWidget).dblclick(); + cy.get(buttonSelector.buttonWidget).dblclick(); - cy.get(buttonSelector.buttonProperties).should("be.visible").and("have.text",buttonText.buttonProperties); - cy.get(buttonSelector.buttonName).should("be.visible"); + cy.get(buttonSelector.buttonProperties).should("be.visible").and("have.text",buttonText.buttonProperties); + cy.get(buttonSelector.buttonName).should("be.visible"); - cy.get(buttonSelector.propertiesElements.eventsAccordion).click(); - cy.get(buttonSelector.propertiesElements.layoutAccordion).click(); - for(const elements in buttonSelector.propertiesElements){ - cy.get(buttonSelector.propertiesElements[elements]).should("be.visible").and("have.text",buttonText.propertiesElements[elements]); - } + cy.get(buttonSelector.propertiesElements.eventsAccordion).click(); + cy.get(buttonSelector.propertiesElements.layoutAccordion).click(); + for(const elements in buttonSelector.propertiesElements){ + cy.get(buttonSelector.propertiesElements[elements]).should("be.visible").and("have.text",buttonText.propertiesElements[elements]); + } - cy.get(buttonSelector.loadingStateToggle).should("be.visible"); - cy.get(buttonSelector.loadingStateFx).should("be.visible").and("have.text",buttonText.fxButton); - cy.get(buttonSelector.desktopToggle).should("be.visible"); - cy.get(buttonSelector.desktopFx).should("be.visible").and("have.text",buttonText.fxButton); - cy.get(buttonSelector.mobileToggle).should("be.visible"); - cy.get(buttonSelector.mobileFx).should("be.visible").and("have.text",buttonText.fxButton); + cy.get(buttonSelector.loadingStateToggle).should("be.visible"); + cy.get(buttonSelector.loadingStateFx).should("be.visible").and("have.text",buttonText.fxButton); + cy.get(buttonSelector.desktopToggle).should("be.visible"); + cy.get(buttonSelector.desktopFx).should("be.visible").and("have.text",buttonText.fxButton); + cy.get(buttonSelector.mobileToggle).should("be.visible"); + cy.get(buttonSelector.mobileFx).should("be.visible").and("have.text",buttonText.fxButton); }; export const stylesElements = () => { - cy.get(buttonSelector.buttonWidget).dblclick(); - cy.get(buttonSelector.buttonStyles).should("be.visible").and("have.text",buttonText.buttonStyles); - cy.get(buttonSelector.buttonStyles).click(); - for(const elements in buttonSelector.stylesElements){ - cy.get(buttonSelector.stylesElements[elements]).should("be.visible").and("have.text",buttonText.stylesElements[elements]); - } - for(const inputs in buttonSelector.stylesInput){ - cy.get(buttonSelector.stylesInput[inputs]).should("be.visible"); - } - for(const fx in buttonSelector.stylesFx){ - cy.get(buttonSelector.stylesFx[fx]).should("be.visible").and("have.text",buttonText.fxButton); - } - cy.get(buttonSelector.visibilityToggle).should("be.visible"); - cy.get(buttonSelector.disableToggle).should("be.visible"); + cy.get(buttonSelector.buttonWidget).dblclick(); + cy.get(buttonSelector.buttonStyles).should("be.visible").and("have.text",buttonText.buttonStyles); + cy.get(buttonSelector.buttonStyles).click(); + for(const elements in buttonSelector.stylesElements){ + cy.get(buttonSelector.stylesElements[elements]).should("be.visible").and("have.text",buttonText.stylesElements[elements]); + } + for(const inputs in buttonSelector.stylesInput){ + cy.get(buttonSelector.stylesInput[inputs]).should("be.visible"); + } + for(const fx in buttonSelector.stylesFx){ + cy.get(buttonSelector.stylesFx[fx]).should("be.visible").and("have.text",buttonText.fxButton); + } + cy.get(buttonSelector.visibilityToggle).should("be.visible"); + cy.get(buttonSelector.disableToggle).should("be.visible"); }; export const deleteApp = () => { - cy.go('back'); - cy.get(commonSelectors.appCardOptions).click(); - cy.get(commonSelectors.deleteApp).click(); - cy.get(commonSelectors.confirmButton).click(); + cy.get(commonSelectors.autoSave, { timeout: 9000 }).should("have.text", commonText.autoSave); + + cy.get(commonSelectors.backButton).click(); + cy.get(commonSelectors.appCardOptions).first().click(); + cy.get(commonSelectors.deleteApp).click(); + cy.get(commonSelectors.confirmButton).click(); }; -export const navigateToEditor = () => { - cy.get(commonSelectors.appCard).click(); - cy.get(commonSelectors.editButton).click(); +export const navigateToEditor = (appName) => { + cy.contains('div', appName).parent().within(() => { + cy.get('div, button').click(); + }); + cy.get(commonSelectors.editButton).first().click(); }; export const eventListnerCard = () => { - cy.get(buttonSelector.eventLabel).should("be.visible").and("have.text", buttonText.eventLabel); - cy.get(buttonSelector.eventSelection).should("be.visible"); - cy.get(buttonSelector.actionLabel).should("be.visible").and("have.text", buttonText.actionLabel); - cy.get(buttonSelector.actionSelection).should("be.visible"); - cy.get(buttonSelector.actionOption).should("be.visible").and("have.text", buttonText.actionOption); - cy.get(buttonSelector.messageLabel).should("be.visible").and("have.text", buttonText.messageLabel); - cy.get(buttonSelector.messageText).should("be.visible"); - cy.get(buttonSelector.alertTypeLabel).should("be.visible").and("have.text", buttonText.alertTypeLabel); - cy.get(buttonSelector.alertMessageType).should("be.visible"); + cy.get(buttonSelector.eventLabel).should("be.visible").and("have.text", buttonText.eventLabel); + cy.get(buttonSelector.eventSelection).should("be.visible"); + cy.get(buttonSelector.actionLabel).should("be.visible").and("have.text", buttonText.actionLabel); + cy.get(buttonSelector.actionSelection).should("be.visible"); + cy.get(buttonSelector.actionOption).should("be.visible").and("have.text", buttonText.actionOption); + cy.get(buttonSelector.messageLabel).should("be.visible").and("have.text", buttonText.messageLabel); + cy.get(buttonSelector.messageText).should("be.visible"); + cy.get(buttonSelector.alertTypeLabel).should("be.visible").and("have.text", buttonText.alertTypeLabel); + cy.get(buttonSelector.alertMessageType).should("be.visible"); }; export const colorPickerCard = () => { - cy.get(buttonSelector.backgroundColorSelector).should("be.visible").click(); - cy.get(buttonSelector.colorPickCard).should("be.visible"); - for(const elements in buttonSelector.backgroundColor){ - cy.get(buttonSelector.backgroundColor[elements]).should("be.visible"); - } - cy.get(buttonSelector.stylesFx.backgroundColor).click(); - cy.get(buttonSelector.backgroundColorInput).should("have.text", buttonText.backgroundColorInput); - cy.get(buttonSelector.backgroundColorCloseFx).click(); + cy.get(buttonSelector.backgroundColorSelector).should("be.visible").click(); + cy.get(buttonSelector.colorPickCard).should("be.visible"); + for(const elements in buttonSelector.backgroundColor){ + cy.get(buttonSelector.backgroundColor[elements]).should("be.visible"); + } + cy.get(buttonSelector.stylesFx.backgroundColor).click(); + cy.get(buttonSelector.backgroundColorInput).should("have.text", buttonText.backgroundColorInput); + cy.get(buttonSelector.backgroundColorCloseFx).click(); - cy.get(buttonSelector.textColorSelector).should("be.visible").click(); - cy.get(buttonSelector.colorPickCard).should("be.visible"); - for(const elements in buttonSelector.textColor){ - cy.get(buttonSelector.textColor[elements]).should("be.visible"); - } - cy.get(buttonSelector.stylesFx.textColor).click(); - cy.get(buttonSelector.textColorInput).should("have.text", buttonText.textColorInput); - cy.get(buttonSelector.textColorCloseFx).click(); + cy.get(buttonSelector.textColorSelector).should("be.visible").click(); + cy.get(buttonSelector.colorPickCard).should("be.visible"); + for(const elements in buttonSelector.textColor){ + cy.get(buttonSelector.textColor[elements]).should("be.visible"); + } + cy.get(buttonSelector.stylesFx.textColor).click(); + cy.get(buttonSelector.textColorInput).should("have.text", buttonText.textColorInput); + cy.get(buttonSelector.textColorCloseFx).click(); - cy.get(buttonSelector.loaderColorSelector).should("be.visible").click(); - cy.get(buttonSelector.colorPickCard).should("be.visible"); - for(const elements in buttonSelector.loaderColor){ - cy.get(buttonSelector.loaderColor[elements]).should("be.visible"); - } - cy.get(buttonSelector.stylesFx.loaderColor).click(); - cy.get(buttonSelector.loaderColorInput).should("have.text", buttonText.loaderColorInput); - cy.get(buttonSelector.loaderColorCloseFx).click(); + cy.get(buttonSelector.loaderColorSelector).should("be.visible").click(); + cy.get(buttonSelector.colorPickCard).should("be.visible"); + for(const elements in buttonSelector.loaderColor){ + cy.get(buttonSelector.loaderColor[elements]).should("be.visible"); + } + cy.get(buttonSelector.stylesFx.loaderColor).click(); + cy.get(buttonSelector.loaderColorInput).should("have.text", buttonText.loaderColorInput); + cy.get(buttonSelector.loaderColorCloseFx).click(); }; \ No newline at end of file diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index e9a5be1acf..abae8bed7c 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -1149,6 +1149,7 @@ class Editor extends React.Component { onBlur={(e) => this.saveAppName(this.state.app.id, e.target.value)} className="form-control-plaintext form-control-plaintext-sm" value={this.state.app.name} + data-cy="app-name-input" /> diff --git a/frontend/src/Editor/InitVersionCreateModal.jsx b/frontend/src/Editor/InitVersionCreateModal.jsx index 8d149a3a24..96cbeae571 100644 --- a/frontend/src/Editor/InitVersionCreateModal.jsx +++ b/frontend/src/Editor/InitVersionCreateModal.jsx @@ -70,7 +70,11 @@ const InitVersionCreateModal = ({ appId, showModal, hideModal, fetchApp, darkMod - diff --git a/frontend/src/Editor/LeftSidebar/index.js b/frontend/src/Editor/LeftSidebar/index.js index a75e81653f..48239d23ae 100644 --- a/frontend/src/Editor/LeftSidebar/index.js +++ b/frontend/src/Editor/LeftSidebar/index.js @@ -79,6 +79,7 @@ export const LeftSidebar = ({ icon="back" className="left-sidebar-item no-border left-sidebar-layout" text={'Back'} + data-cy="back-button" /> {isImportingApp && } Create new application