mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-24 09:28:31 +00:00
fix: failing button widget cypress test (#3238)
* Updated cypress test for button widget * Updated the custom command for create app * Added data-cy attributes for elements * Updated common selectors file
This commit is contained in:
Ajith KV
GitHub
parent
21ce5b5ea4
commit
a71c7b8a7f
10 changed files with 350 additions and 313 deletions
|
|
@ -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"
|
||||
};
|
||||
|
|
@ -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]",
|
||||
}
|
||||
|
|
@ -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",
|
||||
};
|
||||
|
|
@ -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();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -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();
|
||||
}
|
||||
}))
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
|
@ -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"
|
||||
/>
|
||||
<span className="input-icon-addon">
|
||||
<EditIcon />
|
||||
|
|
|
|||
|
|
@ -70,7 +70,11 @@ const InitVersionCreateModal = ({ appId, showModal, hideModal, fetchApp, darkMod
|
|||
</div>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button className={cx({ 'btn-loading': isCreatingInitVersion })} onClick={() => createInitVersion()}>
|
||||
<Button
|
||||
className={cx({ 'btn-loading': isCreatingInitVersion })}
|
||||
onClick={() => createInitVersion()}
|
||||
data-cy="create-button"
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ export const LeftSidebar = ({
|
|||
icon="back"
|
||||
className="left-sidebar-item no-border left-sidebar-layout"
|
||||
text={'Back'}
|
||||
data-cy="back-button"
|
||||
/>
|
||||
<ConfirmDialog
|
||||
show={showLeaveDialog}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ export default function Header({
|
|||
<Button
|
||||
className={`btn btn-primary d-none d-lg-inline mb-3 ms-2 ${creatingApp ? 'btn-loading' : ''}`}
|
||||
onClick={createApp}
|
||||
data-cy="create-new-app-button"
|
||||
>
|
||||
{isImportingApp && <span className="spinner-border spinner-border-sm mx-2" role="status"></span>}
|
||||
Create new application
|
||||
|
|
|
|||
Loading…
Reference in a new issue