mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-21 13:37:28 +00:00
478 lines
15 KiB
JavaScript
478 lines
15 KiB
JavaScript
import { commonSelectors, commonWidgetSelector } from "Selectors/common";
|
|
import { buttonText } from "Texts/button";
|
|
import { fake } from "Fixtures/fake";
|
|
import { commonWidgetText } from "Texts/common";
|
|
|
|
import { verifyControlComponentAction } from "Support/utils/button";
|
|
import { resizeQueryPanel } from "Support/utils/dataSource";
|
|
|
|
import {
|
|
openAccordion,
|
|
verifyAndModifyParameter,
|
|
openEditorSidebar,
|
|
verifyAndModifyToggleFx,
|
|
addDefaultEventHandler,
|
|
addAndVerifyTooltip,
|
|
verifyComponentFromInspector,
|
|
verifyAndModifyStylePickerFx,
|
|
verifyWidgetColorCss,
|
|
selectColourFromColourPicker,
|
|
verifyLoaderColor,
|
|
fillBoxShadowParams,
|
|
verifyBoxShadowCss,
|
|
verifyLayout,
|
|
verifyTooltip,
|
|
editAndVerifyWidgetName,
|
|
verifyPropertiesGeneralAccordion,
|
|
verifyStylesGeneralAccordion,
|
|
} from "Support/utils/commonWidget";
|
|
import {
|
|
selectCSA,
|
|
selectEvent,
|
|
addSupportCSAData,
|
|
} from "Support/utils/events";
|
|
|
|
describe("Editor- Test Button widget ", () => {
|
|
beforeEach(() => {
|
|
cy.apiLogin();
|
|
cy.apiCreateApp(`${fake.companyName}-button-App`);
|
|
cy.openApp();
|
|
cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 500);
|
|
});
|
|
|
|
it("should verify position of component after dragging", () => {
|
|
const data = {};
|
|
data.widgetName = buttonText.defaultWidgetName;
|
|
resizeQueryPanel(0);
|
|
|
|
cy.getPosition(data.widgetName).then((position) => {
|
|
const [clientX, clientY] = position;
|
|
expect(clientX).not.to.be.closeTo(100, 10);
|
|
expect(clientY).not.to.be.closeTo(100, 10);
|
|
});
|
|
|
|
cy.moveComponent(data.widgetName, 100, 100);
|
|
cy.waitForAutoSave();
|
|
cy.getPosition(data.widgetName).then((position) => {
|
|
const [clientX, clientY] = position;
|
|
expect(clientX).to.be.closeTo(100, 20);
|
|
expect(clientY).to.be.closeTo(100, 10);
|
|
});
|
|
cy.reload();
|
|
resizeQueryPanel(0);
|
|
cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).should(
|
|
"be.visible"
|
|
);
|
|
cy.getPosition(data.widgetName).then((position) => {
|
|
const [clientX, clientY] = position;
|
|
expect(clientX).to.be.closeTo(100, 20);
|
|
expect(clientY).to.be.closeTo(100, 10);
|
|
});
|
|
|
|
cy.moveComponent(data.widgetName, 750, 750);
|
|
cy.getPosition(data.widgetName).then((position) => {
|
|
const [clientX, clientY] = position;
|
|
expect(clientX).to.be.closeTo(750, 20);
|
|
expect(clientY).to.be.closeTo(750, 10);
|
|
});
|
|
|
|
cy.apiDeleteApp(data.appName);
|
|
});
|
|
it("should verify the properties of the button widget", () => {
|
|
const data = {};
|
|
data.appName = `${fake.companyName}-App`;
|
|
data.alertMessage = fake.randomSentence;
|
|
data.widgetName = fake.widgetName;
|
|
data.customMessage = fake.randomSentence;
|
|
data.tooltipText = fake.randomSentence;
|
|
|
|
cy.renameApp(data.appName);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
editAndVerifyWidgetName(data.widgetName);
|
|
|
|
openAccordion(commonWidgetText.accordionProperties);
|
|
verifyAndModifyParameter(buttonText.buttonTextLabel, data.widgetName);
|
|
verifyComponentFromInspector(data.widgetName);
|
|
|
|
verifyAndModifyToggleFx(
|
|
buttonText.loadingState,
|
|
commonWidgetText.codeMirrorLabelFalse
|
|
);
|
|
cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).should(
|
|
"have.class",
|
|
"btn-loading"
|
|
);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.parameterTogglebutton(buttonText.loadingState)
|
|
).click();
|
|
cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).should(
|
|
"not.have.class",
|
|
"btn-loading"
|
|
);
|
|
|
|
openEditorSidebar(data.widgetName);
|
|
openAccordion(commonWidgetText.accordionEvents);
|
|
addDefaultEventHandler(data.alertMessage);
|
|
cy.forceClickOnCanvas();
|
|
cy.waitForAutoSave();
|
|
cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).click();
|
|
cy.verifyToastMessage(commonSelectors.toastMessage, data.alertMessage);
|
|
|
|
verifyPropertiesGeneralAccordion(data.widgetName, data.tooltipText);
|
|
|
|
verifyLayout(data.widgetName);
|
|
|
|
cy.get(commonWidgetSelector.changeLayoutToDesktopButton).click();
|
|
cy.get(
|
|
commonWidgetSelector.parameterTogglebutton(
|
|
commonWidgetText.parameterShowOnDesktop
|
|
)
|
|
).click();
|
|
|
|
cy.get(commonWidgetSelector.widgetDocumentationLink).should(
|
|
"have.text",
|
|
buttonText.buttonDocumentationLink
|
|
);
|
|
|
|
verifyControlComponentAction(data.widgetName, data.customMessage);
|
|
cy.apiDeleteApp(data.appName);
|
|
});
|
|
|
|
it("should verify the styles of the button component", () => {
|
|
const data = {};
|
|
data.appName = `${fake.companyName}-App`;
|
|
data.backgroundColor = fake.randomRgba;
|
|
data.textColor = fake.randomRgba;
|
|
data.loaderColor = fake.randomRgba;
|
|
data.boxShadowColor = fake.randomRgba;
|
|
data.colourHex = fake.randomRgbaHex;
|
|
data.boxShadowParam = fake.boxShadowParam;
|
|
|
|
cy.renameApp(data.appName);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
|
|
verifyAndModifyStylePickerFx(
|
|
buttonText.backgroundColor,
|
|
buttonText.defaultBackgroundColor,
|
|
data.colourHex
|
|
);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.parameterFxButton(buttonText.backgroundColor)
|
|
).click();
|
|
|
|
selectColourFromColourPicker(
|
|
buttonText.backgroundColor,
|
|
data.backgroundColor
|
|
);
|
|
|
|
verifyWidgetColorCss(
|
|
buttonText.defaultWidgetName,
|
|
"background-color",
|
|
data.backgroundColor
|
|
);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
|
|
data.colourHex = fake.randomRgbaHex;
|
|
verifyAndModifyStylePickerFx(
|
|
buttonText.textColor,
|
|
buttonText.defaultTextColor,
|
|
data.colourHex
|
|
);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.parameterFxButton(buttonText.textColor)
|
|
).click();
|
|
|
|
selectColourFromColourPicker(buttonText.textColor, data.textColor, 1);
|
|
|
|
verifyWidgetColorCss(buttonText.defaultWidgetName, "color", data.textColor);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
|
|
data.colourHex = fake.randomRgbaHex;
|
|
verifyAndModifyStylePickerFx(
|
|
buttonText.loaderColor,
|
|
buttonText.defaultLoaderColor,
|
|
data.colourHex
|
|
);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.parameterFxButton(buttonText.loaderColor)
|
|
).click();
|
|
|
|
selectColourFromColourPicker(buttonText.loaderColor, data.loaderColor, 2);
|
|
|
|
verifyLoaderColor(buttonText.defaultWidgetName, data.loaderColor);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
|
|
verifyAndModifyToggleFx(
|
|
commonWidgetText.parameterVisibility,
|
|
commonWidgetText.codeMirrorLabelTrue
|
|
);
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("not.be.visible");
|
|
cy.get(commonWidgetSelector.parameterTogglebutton("Visibility")).click();
|
|
|
|
verifyAndModifyToggleFx(
|
|
commonWidgetText.parameterDisable,
|
|
commonWidgetText.codeMirrorLabelFalse
|
|
);
|
|
cy.waitForAutoSave();
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("have.attr", "disabled");
|
|
|
|
cy.get(commonWidgetSelector.parameterTogglebutton("Disable")).click();
|
|
cy.get('[data-cy="border-radius-input-field"]').realHover();
|
|
cy.get(
|
|
commonWidgetSelector.parameterFxButton(
|
|
commonWidgetText.parameterBorderRadius
|
|
)
|
|
)
|
|
.last()
|
|
.click();
|
|
|
|
verifyAndModifyParameter(
|
|
commonWidgetText.parameterBorderRadius,
|
|
buttonText.borderRadiusInput
|
|
);
|
|
|
|
cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click({
|
|
force: true,
|
|
});
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("have.css", "border-radius", "20px");
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
|
|
data.colourHex = fake.randomRgbaHex;
|
|
verifyStylesGeneralAccordion(
|
|
buttonText.defaultWidgetName,
|
|
data.boxShadowParam,
|
|
data.colourHex,
|
|
data.boxShadowColor,
|
|
4
|
|
);
|
|
cy.apiDeleteApp(data.appName);
|
|
});
|
|
|
|
it("should verify the app preview", () => {
|
|
const data = {};
|
|
data.appName = `${fake.companyName}-App`;
|
|
data.alertMessage = fake.randomSentence;
|
|
data.widgetName = fake.widgetName;
|
|
data.customMessage = fake.randomSentence;
|
|
data.backgroundColor = fake.randomRgba;
|
|
data.textColor = fake.randomRgba;
|
|
data.loaderColor = fake.randomRgba;
|
|
data.boxShadowColor = fake.randomRgba;
|
|
data.boxShadowParam = fake.boxShadowParam;
|
|
data.tooltipText = fake.randomSentence;
|
|
|
|
cy.renameApp(data.appName);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
verifyAndModifyParameter(buttonText.buttonTextLabel, data.widgetName);
|
|
|
|
openAccordion(commonWidgetText.accordionEvents);
|
|
addDefaultEventHandler(data.alertMessage);
|
|
|
|
verifyPropertiesGeneralAccordion(
|
|
buttonText.defaultWidgetName,
|
|
data.tooltipText
|
|
);
|
|
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
selectColourFromColourPicker(
|
|
buttonText.backgroundColor,
|
|
data.backgroundColor
|
|
);
|
|
|
|
cy.forceClickOnCanvas();
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
selectColourFromColourPicker(buttonText.textColor, data.textColor, 1);
|
|
|
|
cy.forceClickOnCanvas();
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
selectColourFromColourPicker(buttonText.loaderColor, data.loaderColor, 2);
|
|
|
|
cy.forceClickOnCanvas();
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
|
|
|
|
cy.get(
|
|
commonWidgetSelector.parameterInputField(
|
|
commonWidgetText.parameterBorderRadius
|
|
)
|
|
)
|
|
.first()
|
|
.clear()
|
|
.type(buttonText.borderRadiusInput);
|
|
|
|
verifyStylesGeneralAccordion(
|
|
buttonText.defaultWidgetName,
|
|
data.boxShadowParam,
|
|
data.colourHex,
|
|
data.boxShadowColor,
|
|
4
|
|
);
|
|
|
|
verifyControlComponentAction(
|
|
buttonText.defaultWidgetName,
|
|
data.customMessage
|
|
);
|
|
|
|
cy.waitForAutoSave();
|
|
cy.openInCurrentTab(commonWidgetSelector.previewButton);
|
|
cy.wait(4000);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).verifyVisibleElement("have.text", data.widgetName);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).click();
|
|
cy.wait(500);
|
|
|
|
cy.verifyToastMessage(commonSelectors.toastMessage, data.alertMessage);
|
|
cy.get(commonWidgetSelector.draggableWidget('textinput1')).should(
|
|
"have.value",
|
|
data.customMessage
|
|
);
|
|
|
|
verifyTooltip(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName),
|
|
data.tooltipText
|
|
);
|
|
|
|
verifyWidgetColorCss(
|
|
buttonText.defaultWidgetName,
|
|
"background-color",
|
|
data.backgroundColor
|
|
);
|
|
verifyWidgetColorCss(buttonText.defaultWidgetName, "color", data.textColor);
|
|
verifyLoaderColor(buttonText.defaultWidgetName, data.loaderColor);
|
|
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("have.css", "border-radius", "20px");
|
|
|
|
verifyBoxShadowCss(
|
|
buttonText.defaultWidgetName,
|
|
data.boxShadowColor,
|
|
data.boxShadowParam
|
|
);
|
|
|
|
cy.apiDeleteApp(data.appName);
|
|
});
|
|
|
|
it("Should verify csa", () => {
|
|
cy.get('[data-tooltip-content="Hide query panel"]').click();
|
|
// cy.dragAndDropWidget(buttonText.defaultWidgetText);
|
|
selectEvent("On click", "Show alert");
|
|
|
|
cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
|
|
cy.dragAndDropWidget("Text input", 500, 50);
|
|
selectEvent("On change", "Control Component");
|
|
selectCSA("button1", "Set text", "500");
|
|
addSupportCSAData("Text", "{{components.textinput1.value");
|
|
|
|
cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
|
|
cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 100);
|
|
selectEvent("On click", "Control Component");
|
|
selectCSA("button1", "Click");
|
|
|
|
cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
|
|
cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 150);
|
|
selectEvent("On click", "Control Component");
|
|
cy.wait("@events");
|
|
selectCSA("button1", "Disable");
|
|
cy.wait("@events");
|
|
cy.get('[data-cy="event-Value-fx-button"]').realClick();
|
|
cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
|
|
`{{true`
|
|
);
|
|
|
|
cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
|
|
cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 200);
|
|
selectEvent("On click", "Control Component");
|
|
selectCSA("button1", "Visibility");
|
|
|
|
cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
|
|
cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 250);
|
|
selectEvent("On click", "Control Component");
|
|
selectCSA("button1", "Loading");
|
|
cy.wait(500);
|
|
cy.get('[data-cy="event-Value-fx-button"]').realClick();
|
|
cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
|
|
`{{true`
|
|
);
|
|
|
|
cy.get(commonWidgetSelector.draggableWidget("textinput1")).type("testBtn");
|
|
cy.wait(500);
|
|
cy.get(commonWidgetSelector.draggableWidget("button1")).should(
|
|
"have.text",
|
|
"testBtn"
|
|
);
|
|
|
|
cy.get(commonWidgetSelector.draggableWidget("button2")).click();
|
|
cy.verifyToastMessage(commonSelectors.toastMessage, "Hello world!");
|
|
|
|
cy.get(commonWidgetSelector.draggableWidget("button5")).click();
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("have.class", "btn-loading");
|
|
|
|
cy.get(commonWidgetSelector.draggableWidget("button3")).click();
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("have.attr", "disabled");
|
|
|
|
cy.get(commonWidgetSelector.draggableWidget("button4")).click();
|
|
cy.get(
|
|
commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
|
|
).should("not.be.visible");
|
|
cy.apiDeleteApp();
|
|
});
|
|
it("Should verify deletion of button component from right side panel", () => {
|
|
openEditorSidebar(buttonText.defaultWidgetName);
|
|
cy.get('[data-cy="component-inspector-options"]').click();
|
|
cy.get('[data-cy="component-inspector-delete-button"]').click();
|
|
cy.get('[data-cy="yes-button"]').click();
|
|
cy.verifyToastMessage(
|
|
`[class=go3958317564]`,
|
|
"Component deleted! (⌘ + Z to undo)"
|
|
);
|
|
cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
|
|
cy.reload();
|
|
cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
|
|
});
|
|
it("Should delete button via keyboard action", () => {
|
|
cy.realPress("Backspace");
|
|
cy.get('[data-cy="yes-button"]').click();
|
|
cy.verifyToastMessage(
|
|
`[class=go3958317564]`,
|
|
"Component deleted! (⌘ + Z to undo)"
|
|
);
|
|
cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
|
|
cy.reload();
|
|
cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
|
|
});
|
|
});
|