Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

test: cypress - switch group cases - 1 (#26208)

Browse Source 
Switch Group widget test cases:

1. Check for empty, duplicate values and other error texts in options
2. Check default selected value function and error texts
3. Setting selectedValues to undefined does not crash the app // old
case -> moved to ts
4. Set Label, Tooltip, Inline and check switch group
5. Check visible, disabled, Height
6. Check events - on selection change
This commit is contained in:
sharanya-appsmith 2023-08-16 11:29:22 +05:30 committed by GitHub
parent ec922d1366
commit ceb117d171
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 281 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts Normal file
View File

@ -0,0 +1,265 @@
import {
agHelper,
draggableWidgets,
entityExplorer,
deployMode,
propPane,
locators,
} from "../../../../../support/Objects/ObjectsCore";
import {
switchlocators,
checkboxlocators,
} from "../../../../../locators/WidgetLocators";
import widgetsLoc from "../../../../../locators/Widgets.json";
import widgets from "../../../../../locators/publishWidgetspage.json";
import commonlocators from "../../../../../locators/commonlocators.json";
describe("Switchgroup Widget Functionality", function () {
/**
* Adding switch group, checkbox group and text widgets
*/
before(() => {
entityExplorer.DragNDropWidget(draggableWidgets.SWITCHGROUP, 300, 300);
entityExplorer.DragNDropWidget(draggableWidgets.CHECKBOXGROUP, 300, 500);
entityExplorer.DragNDropWidget(draggableWidgets.TEXT, 300, 700);
propPane.UpdatePropertyFieldValue(
"Text",
"{{SwitchGroup1.selectedValues[0]}}",
);
});
it("1. Check for empty, duplicate values and other error texts in options", () => {
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.UpdatePropertyFieldValue(
"Options",
`[
{
"label": "Blue",
"value": ""
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
]`,
);
agHelper.AssertElementAbsence(locators._evaluatedErrorMessage);
propPane.UpdatePropertyFieldValue(
"Options",
`[
{
"label": "Blue",
"value": ""
},
{
"label": "Green",
"value": ""
},
{
"label": "Red",
"value": "RED"
}
]`,
);
agHelper.VerifyEvaluatedErrorMessage(
"Duplicate values found for the following properties," +
" in the array entries, that must be unique -- label,value.",
);
propPane.UpdatePropertyFieldValue(
"Options",
`[
{
"value": "Blue"
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
]`,
);
agHelper.VerifyEvaluatedErrorMessage(
"Invalid entry at index: 0. Missing required key: label",
);
propPane.UpdatePropertyFieldValue("Options", "hello");
agHelper.VerifyEvaluatedErrorMessage(
'This value does not evaluate to type Array<{ "label": "string", "value": "string" }>',
);
// asserts if new option added is not checked
const newOption = `[
{
"label": "Blue",
"value": "BLUE"
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
},
{
"label": "Yellow",
"value": "YELLOW"
}
]`;
propPane.UpdatePropertyFieldValue("Options", newOption);
agHelper
.GetElement(switchlocators.switchGroupToggleChecked("Yellow"))
.should("not.be.checked");
});
it("2. test default selected value func and error texts", () => {
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.UpdatePropertyFieldValue(
"Options",
`[
{
"label": "Blue",
"value": "BLUE"
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
]`,
);
propPane.UpdatePropertyFieldValue("Default selected values", "1");
agHelper.VerifyEvaluatedErrorMessage(
"This value does not evaluate to type Array<string>",
);
propPane.UpdatePropertyFieldValue("Default selected values", "[]");
agHelper.AssertElementAbsence(locators._evaluatedErrorMessage);
propPane.UpdatePropertyFieldValue(
"Default selected values",
'["RED", "GREEN"]',
);
agHelper
.GetElement(switchlocators.switchGroupToggleChecked("Red"))
.should("be.checked");
agHelper
.GetElement(switchlocators.switchGroupToggleChecked("Green"))
.should("be.checked");
propPane.UpdatePropertyFieldValue(
"Default selected values",
"{{CheckboxGroup1.selectedValues}}",
);
entityExplorer.SelectEntityByName("CheckboxGroup1");
agHelper.GetNClick(checkboxlocators.checkBoxLabel("Blue"));
agHelper.GetNClick(checkboxlocators.checkBoxLabel("Red"));
agHelper.GetNClick(checkboxlocators.checkBoxLabel("Green"));
agHelper
.GetElement(switchlocators.switchGroupToggleChecked("Blue"))
.should("not.be.checked");
agHelper
.GetElement(switchlocators.switchGroupToggleChecked("Red"))
.should("be.checked");
agHelper
.GetElement(switchlocators.switchGroupToggleChecked("Green"))
.should("be.checked");
});
//Note: Old case, rewrittwen to using ts methods
it("3. Setting selectedValues to undefined does not crash the app", () => {
// Reset options for switch group
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.UpdatePropertyFieldValue(
"Options",
`[
{
"label": "Blue",
"value": "BLUE"
},
{
"label": "Green1",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
]`,
);
// throw a cyclic dependency error from checkbox group
entityExplorer.SelectEntityByName("CheckboxGroup1");
agHelper.TypeText(widgetsLoc.RadioInput, "{{BLUE}}", 1);
propPane.ToggleJSMode("Options", true);
agHelper.AssertElementAbsence(locators._toastMsg);
agHelper.GetNAssertElementText(widgets.textWidget, "RED");
});
it("4. Set Label, Tooltip, Inline and check switch group", () => {
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.UpdatePropertyFieldValue("Text", "SG Widget");
propPane.UpdatePropertyFieldValue("Tooltip", "Select any color");
// assert label and tooltip
deployMode.DeployApp();
agHelper.AssertText(switchlocators.switchGroupLabel, "text", "SG Widget");
agHelper.GetNClick(switchlocators.switchTooltip, 1);
agHelper.AssertPopoverTooltip("Select any color");
deployMode.NavigateBacktoEditor();
// assert height of the container based on inline property value
entityExplorer.SelectEntityByName("SwitchGroup1");
agHelper.AssertElementExist(switchlocators.switchWidgetHeight("60"));
propPane.TogglePropertyState("Inline", "Off");
agHelper.AssertElementExist(switchlocators.switchWidgetHeight("110"));
});
it("5. Check visible, disabled, Height", () => {
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.SelectPropertiesDropDown("Height", "Auto Height with limits");
agHelper.HoverElement(propPane._autoHeightLimitMin);
agHelper.AssertElementExist(propPane._autoHeightLimitMin);
agHelper.AssertElementExist(propPane._autoHeightLimitMax);
propPane.TogglePropertyState("Visible", "Off");
deployMode.DeployApp();
agHelper.AssertElementAbsence(switchlocators.switchGroupLabel);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.TogglePropertyState("Visible", "On");
propPane.TogglePropertyState("Disabled", "On");
deployMode.DeployApp();
agHelper.AssertElementExist(commonlocators.disabledField);
deployMode.NavigateBacktoEditor();
});
it("6. Check events - on selection change", () => {
entityExplorer.SelectEntityByName("SwitchGroup1");
propPane.SelectPropertiesDropDown("Height", "Auto Height");
propPane.TogglePropertyState("Inline", "On");
propPane.TogglePropertyState("Disabled", "Off");
propPane.ToggleJSMode("onSelectionChange", true);
// reset text widget on selecting default color in switch group
propPane.UpdatePropertyFieldValue(
"onSelectionChange",
"{{resetWidget('Text1', true);}}",
);
agHelper.GetNClick(
switchlocators.switchGroupToggleChecked("Blue"),
0,
true,
);
agHelper.GetNClick(switchlocators.switchGroupToggleChecked("Red"), 0, true);
agHelper.AssertElementVisibility(locators._visibleTextSpan("RED"));
});
});

92
app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup2_spec.js
View File

@ -5,100 +5,10 @@ import * as _ from "../../../../../support/Objects/ObjectsCore";
describe("Switch Group Widget Functionality", function () {
before(() => {
_.agHelper.AddDsl("SwitchGroupWidgetDsl");
});
/*
afterEach(() => {
_.deployMode.NavigateBacktoEditor();
});
*/
it("1. Widget name changes", function () {
/**
* @param{Text} Random Text
* @param{RadioWidget}Mouseover
* @param{RadioPre Css} Assertion
*/
_.propPane.RenameWidget("SwitchGroup1", "SwitchGroupTest");
});
it("2. Property: options", function () {
// Add a new option
_.entityExplorer.SelectEntityByName("SwitchGroupTest");
const optionToAdd = `[
{
"label": "Blue",
"value": "BLUE"
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
},
{
"label": "Yellow",
"value": "YELLOW"
}
]`;
_.propPane.UpdatePropertyFieldValue("Options", optionToAdd);
// Assert
cy.get(formWidgetsPage.labelSwitchGroup)
.should("have.length", 4)
.eq(3)
.contains("Yellow");
});
it("3. Property: defaultSelectedValues", function () {
// Add a new option
const valueToAdd = `[
"BLUE", "GREEN"
]`;
_.propPane.UpdatePropertyFieldValue("Default selected values", valueToAdd);
// Assert
cy.get(`${formWidgetsPage.labelSwitchGroup} input:checked`)
.should("have.length", 2)
.eq(1)
.parent()
.contains("Green");
});
it("4. Property: isVisible === FALSE", function () {
cy.togglebarDisable(commonlocators.visibleCheckbox);
/*
_.deployMode.DeployApp();
cy.get(publish.switchGroupWidget + " " + "input").should("not.exist");
*/
});
it("5. Property: isVisible === TRUE", function () {
cy.togglebar(commonlocators.visibleCheckbox);
/*
_.deployMode.DeployApp();
cy.get(publish.switchGroupWidget + " " + "input")
.eq(0)
.should("exist");
*/
});
it("6. Property: onSelectionChange", function () {
// create an alert modal and verify its name
cy.createModal(this.dataSet.ModalName, "onSelectionChange");
/*
_.deployMode.DeployApp();
cy.get(publish.switchGroupWidget + " " + "label.bp3-switch")
.children()
.first()
.click({ force: true });
cy.get(modalWidgetPage.modelTextField).should(
"have.text",
this.dataSet.ModalName,
);
*/
});
it("7. Check isDirty meta property", function () {
it("1. Check isDirty meta property", function () {
cy.openPropertyPane("textwidget");
cy.updateCodeInput(
".t--property-control-text",

112
app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/Switchgroup1_spec.js
View File

@ -1,112 +0,0 @@
import * as _ from "../../../../../support/Objects/ObjectsCore";
const explorer = require("../../../../../locators/explorerlocators.json");
describe("Switchgroup Widget Functionality", function () {
before(() => {
_.agHelper.AddDsl("emptyDSL");
});
it("1. Add a new switch group widget with others", () => {
cy.get(explorer.addWidget).click();
cy.dragAndDropToCanvas("switchgroupwidget", { x: 300, y: 300 });
cy.get(".t--widget-switchgroupwidget").should("exist");
cy.dragAndDropToCanvas("checkboxgroupwidget", { x: 300, y: 500 });
cy.get(".t--widget-checkboxgroupwidget").should("exist");
cy.dragAndDropToCanvas("textwidget", { x: 300, y: 700 });
cy.get(".t--widget-textwidget").should("exist");
cy.updateCodeInput(
".t--property-control-text",
`{{SwitchGroup1.selectedValues[0]}}`,
);
});
it("2. Should check that empty value is allowed in options", () => {
cy.openPropertyPane("switchgroupwidget");
cy.updateCodeInput(
".t--property-control-options",
`[
{
"label": "Blue",
"value": ""
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
]`,
);
cy.get(".t--property-control-options .t--codemirror-has-error").should(
"not.exist",
);
});
it("3. Should check that more thatn empty value is not allowed in options", () => {
cy.openPropertyPane("switchgroupwidget");
cy.updateCodeInput(
".t--property-control-options",
`[
{
"label": "Blue",
"value": ""
},
{
"label": "Green",
"value": ""
},
{
"label": "Red",
"value": "RED"
}
]`,
);
cy.get(".t--property-control-options .t--codemirror-has-error").should(
"exist",
);
});
it("4. Setting selectedValues to undefined does not crash the app", () => {
// Reset options for switch group
cy.openPropertyPane("switchgroupwidget");
cy.updateCodeInput(
".t--property-control-options",
`[
{
"label": "Blue",
"value": "BLUE"
},
{
"label": "Green",
"value": "GREEN"
},
{
"label": "Red",
"value": "RED"
}
]`,
);
// throw a cyclic dependency error from checkbox group
cy.openPropertyPane("checkboxgroupwidget");
cy.get(".t--property-control-options input")
.eq(1)
.click({ force: true })
.type("{{BLUE}}", { parseSpecialCharSequences: false });
cy.wait(2000);
cy.get(".t--property-control-options")
.find(".t--js-toggle")
.trigger("click")
.wait(3000);
// verify absence of cyclic dependency error
cy.VerifyErrorMsgAbsence("Cyclic dependency found while evaluating");
// check if a crash messsge is appeared
cy.get(".t--widget-switchgroupwidget")
.contains("Oops, Something went wrong.")
.should("not.exist");
cy.wait(1000);
// Assert that evaluation is not disabled
cy.get(".t--widget-textwidget").should("contain", `BLUE`);
});
});

15
app/client/cypress/locators/WidgetLocators.ts
View File

@ -71,4 +71,19 @@ export const modalWidgetSelector = ".t--modal-widget";
// export data-testid with user input
export const progressWidgetProgress = (input: any) => `[data-testid='${input}']`
//switch widget locators
export const switchlocators = {
switchGroupLabel: ".switchgroup-label",
switchTooltip: "//*[@data-testid='switchgroup-container']//*[@class='bp3-popover-target']",
switchWidget:"//*[@data-testid='switchgroup-container']",
switchWidgetHeight: (height: string) => `//*[@data-testid='switchgroup-container']//div[@height="${height}"]`,
switchGroupToggleChecked : (value: string) =>
`//*[text()='${value}']//input[@type="checkbox"]`,
}
export const checkboxlocators = {
// read Blue here
checkBoxLabel: (value: string) => `//*[contains(@class,'t--checkbox-widget-label') and text()='${value}']`,
}