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

test: added tests for Tabs (#27765)

Browse Source 
added tests for tabs
This commit is contained in:
NandanAnantharamu 2023-10-05 09:34:41 +05:30 committed by GitHub
parent f550aa7927
commit 888b0fdd26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 498 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts Normal file
View File

@ -0,0 +1,230 @@
import {
agHelper,
locators,
deployMode,
entityExplorer,
propPane,
table,
tabs,
} from "../../../../../support/Objects/ObjectsCore";
describe("Tabs widget Tests", function () {
before(() => {
agHelper.AddDsl("tabsDsl");
});
it("1. Verify property visibility", function () {
const dataProperties = ["tabs", "defaulttab"];
const generalProperties = [
"visible",
"animateloading",
"showtabs",
"height",
];
const eventsProperties = ["ontabselected"];
const colorsBorderShadows = [
"accentcolor",
"backgroundcolor",
"bordercolor",
"borderwidth",
"borderradius",
"boxshadow",
];
entityExplorer.SelectEntityByName("Tabs1", "Widgets");
// Data section
dataProperties.forEach((dataSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl("data", `${dataSectionProperty}`),
);
});
// General section
generalProperties.forEach((generalSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"general",
`${generalSectionProperty}`,
),
);
});
// Events section
eventsProperties.forEach((eventsSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"events",
`${eventsSectionProperty}`,
),
);
});
propPane.MoveToTab("Style");
// Style section
colorsBorderShadows.forEach((styleSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
`colors\\,bordersandshadows`,
`${styleSectionProperty}`,
),
);
});
});
it("2. Verify Renaming, duplication and deletion", () => {
// Rename and verify
entityExplorer.RenameEntityFromExplorer("Tabs1", "NewTabs", true);
agHelper.AssertElementVisibility(locators._widgetName("NewTabs"));
// Copy and paste widget using cmd+c and cmd+v
entityExplorer.SelectEntityByName("NewTabs", "Widgets");
agHelper.GetElement("body").type(`{${agHelper._modifierKey}}{c}`);
agHelper.Sleep(500);
agHelper.GetElement("body").type(`{${agHelper._modifierKey}}{v}`);
agHelper.Sleep(1000);
entityExplorer.ExpandCollapseEntity("Tab 1");
entityExplorer.AssertEntityPresenceInExplorer("NewTabsCopy");
entityExplorer.DeleteWidgetFromEntityExplorer("NewTabsCopy");
// Copy paste from property pane and delete from property pane
propPane.CopyPasteWidgetFromPropertyPane("NewTabs");
propPane.DeleteWidgetFromPropertyPane("NewTabsCopy");
entityExplorer.SelectEntityByName("NewTabs", "Widgets");
propPane.MoveToTab("Content");
});
it("3. Verify Binding with text widget", () => {
entityExplorer.SelectEntityByName("Text1", "Widgets");
propPane.UpdatePropertyFieldValue("Text", "{{NewTabs.selectedTab}}");
agHelper.GetNClick(propPane._tabId1);
agHelper.AssertText(locators._textInside, "text", "Tab 1");
agHelper.GetNClick(propPane._tabId2);
agHelper.AssertText(locators._textInside, "text", "Tab 2");
entityExplorer.SelectEntityByName("Text1", "Widgets");
propPane.UpdatePropertyFieldValue("Text", "{{NewTabs.isVisible}}");
entityExplorer.SelectEntityByName("NewTabs", "Widgets");
propPane.TogglePropertyState("visible", "Off");
agHelper.AssertText(locators._textInside, "text", "false");
propPane.TogglePropertyState("visible", "On");
agHelper.AssertText(locators._textInside, "text", "true");
});
it("4. Validate when 'Show Tabs' is set to False, all the Tabs get hidden", () => {
propPane.TogglePropertyState("showtabs", "Off");
agHelper.AssertElementAbsence(propPane._tabId1);
agHelper.AssertElementAbsence(propPane._tabId2);
propPane.TogglePropertyState("showtabs", "On");
agHelper.AssertElementVisibility(propPane._tabId1);
agHelper.AssertElementVisibility(propPane._tabId2);
});
it("5. Verify settings, delete and add button associated with tabs", () => {
agHelper.AssertElementLength(propPane._tableEditColumnButton, 2);
agHelper.AssertElementLength(table._deleteColumn, 2);
propPane.OpenTableColumnSettings("tab1");
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl("general", "visible"),
);
propPane.TogglePropertyState("visible", "Off");
agHelper.AssertElementAbsence(propPane._tabId1);
agHelper.AssertClassExists(`${propPane._tabId2} span`, "is-selected");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertElementAbsence(propPane._tabId1);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertElementAbsence(propPane._tabId1);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewTabs", "Widgets");
propPane.OpenTableColumnSettings("tab1");
propPane.TogglePropertyState("visible", "On");
agHelper.AssertElementVisibility(propPane._tabId1);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertElementVisibility(propPane._tabId1);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertElementVisibility(propPane._tabId1);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewTabs", "Widgets");
// Delete tab
agHelper.GetNClick(table._deleteColumn, 1);
agHelper.AssertElementAbsence(propPane._tabId2);
// Add tab
agHelper.GetNClick(tabs._addTab);
agHelper.AssertText(tabs._placeholderTabTitle, "val", "Tab 2", 1);
});
it("6. Validate auto height with limits", function () {
propPane.SelectPropertiesDropDown("height", "Auto Height with limits");
agHelper.HoverElement(propPane._autoHeightLimitMin);
agHelper.AssertContains("Min-Height: 15 rows");
agHelper.HoverElement(propPane._autoHeightLimitMax);
agHelper.AssertContains("Max-Height: 21 rows");
propPane.SelectPropertiesDropDown("height", "Auto Height");
});
it("7. Verify colors, borders and shadows", () => {
// Verify font color picker opens up
propPane.MoveToTab("Style");
agHelper.GetNClick(propPane._propertyControlColorPicker("accentcolor"));
agHelper.AssertElementVisibility(propPane._colorPickerV2Color);
// Verify full color picker
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "text", 0);
propPane.TogglePropertyState("accentcolor", "On", "");
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "color", 0);
// Background color
agHelper.GetNClick(propPane._propertyControlColorPicker("backgroundcolor"));
agHelper.AssertElementVisibility(propPane._colorPickerV2Color);
propPane.ToggleJSMode("backgroundcolor", true);
propPane.UpdatePropertyFieldValue("Background color", "#eab308");
agHelper.AssertCSS(
tabs._tabsWidgetStyle,
"background-color",
"rgb(234, 179, 8)",
);
propPane.ToggleJSMode("backgroundcolor", false);
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "text", 1);
propPane.TogglePropertyState("backgroundcolor", "On", "");
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "color", 1);
// Border Color
propPane.SelectColorFromColorPicker("bordercolor", 13);
agHelper.AssertCSS(
tabs._tabsWidgetStyle,
"border-color",
"rgb(185, 28, 28)",
);
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "text", 2);
propPane.TogglePropertyState("bordercolor", "On", "");
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "color", 2);
// Verify border
agHelper.GetNClick(propPane._segmentedControl("0px"));
agHelper.AssertCSS(tabs._tabsWidgetStyle, "border-radius", "0px");
// Verify Box Shadow
agHelper.GetNClick(`${propPane._segmentedControl("0")}:contains('Large')`);
agHelper.AssertCSS(
tabs._tabsWidgetStyle,
"box-shadow",
"rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
);
});
});

264
app/client/cypress/fixtures/tabsDsl.json Normal file
View File

@ -0,0 +1,264 @@
{
"dsl": {
"widgetName": "MainContainer",
"backgroundColor": "none",
"rightColumn": 4896,
"snapColumns": 64,
"detachFromLayout": true,
"widgetId": "0",
"topRow": 0,
"bottomRow": 380,
"containerStyle": "none",
"snapRows": 124,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"version": 86,
"minHeight": 1292,
"dynamicTriggerPathList": [],
"parentColumnSpace": 1,
"dynamicBindingPathList": [],
"leftColumn": 0,
"children": [
{
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"mobileBottomRow": 25,
"widgetName": "Tabs1",
"borderColor": "#E0DEDE",
"isCanvas": true,
"displayName": "Tabs",
"iconSVG": "/static/media/icon.9e3d67c0af9c0bd092dc56240314e18a.svg",
"topRow": 10,
"bottomRow": 29,
"parentRowSpace": 10,
"type": "TABS_WIDGET",
"hideCard": false,
"shouldScrollContents": true,
"mobileRightColumn": 45,
"animateLoading": true,
"parentColumnSpace": 5.453125,
"leftColumn": 21,
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
},
{
"key": "boxShadow"
}
],
"children": [
{
"tabId": "tab1",
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"mobileBottomRow": 150,
"widgetName": "Canvas1",
"displayName": "Canvas",
"bottomRow": 150,
"topRow": 0,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"hideCard": true,
"shouldScrollContents": false,
"minHeight": 150,
"mobileRightColumn": 130.875,
"parentColumnSpace": 1,
"leftColumn": 0,
"dynamicBindingPathList": [
{
"key": "borderRadius"
},
{
"key": "boxShadow"
}
],
"children": [],
"isDisabled": false,
"key": "0g64f23mqn",
"isDeprecated": false,
"tabName": "Tab 1",
"rightColumn": 130.875,
"detachFromLayout": true,
"dynamicHeight": "AUTO_HEIGHT",
"widgetId": "wmb0y3145q",
"minWidth": 450,
"isVisible": true,
"version": 1,
"parentId": "bcyu5pg160",
"renderMode": "CANVAS",
"isLoading": false,
"mobileTopRow": 0,
"responsiveBehavior": "fill",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileLeftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"flexLayers": []
},
{
"tabId": "tab2",
"boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
"mobileBottomRow": 150,
"widgetName": "Canvas2",
"displayName": "Canvas",
"bottomRow": 150,
"topRow": 0,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"hideCard": true,
"shouldScrollContents": false,
"minHeight": 150,
"mobileRightColumn": 130.875,
"parentColumnSpace": 1,
"leftColumn": 0,
"dynamicBindingPathList": [
{
"key": "borderRadius"
},
{
"key": "boxShadow"
}
],
"children": [],
"isDisabled": false,
"key": "0g64f23mqn",
"isDeprecated": false,
"tabName": "Tab 2",
"rightColumn": 130.875,
"detachFromLayout": true,
"dynamicHeight": "AUTO_HEIGHT",
"widgetId": "k2wjfz9vu7",
"minWidth": 450,
"isVisible": true,
"version": 1,
"parentId": "bcyu5pg160",
"renderMode": "CANVAS",
"isLoading": false,
"mobileTopRow": 0,
"responsiveBehavior": "fill",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileLeftColumn": 0,
"maxDynamicHeight": 9000,
"minDynamicHeight": 4,
"flexLayers": []
}
],
"borderWidth": 1,
"key": "ptp44kovku",
"backgroundColor": "#FFFFFF",
"isDeprecated": false,
"rightColumn": 45,
"dynamicHeight": "AUTO_HEIGHT",
"widgetId": "bcyu5pg160",
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"defaultTab": "Tab 1",
"shouldShowTabs": true,
"minWidth": 450,
"tabsObj": {
"tab1": {
"label": "Tab 1",
"id": "tab1",
"widgetId": "wmb0y3145q",
"isVisible": true,
"index": 0,
"positioning": "vertical"
},
"tab2": {
"label": "Tab 2",
"id": "tab2",
"widgetId": "k2wjfz9vu7",
"isVisible": true,
"index": 1,
"positioning": "vertical"
}
},
"isVisible": true,
"version": 3,
"parentId": "0",
"tags": [
"Layout"
],
"renderMode": "CANVAS",
"isLoading": false,
"mobileTopRow": 10,
"responsiveBehavior": "fill",
"originalTopRow": 10,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileLeftColumn": 21,
"maxDynamicHeight": 9000,
"originalBottomRow": 29,
"minDynamicHeight": 15
},
{
"mobileBottomRow": 38,
"widgetName": "Text1",
"displayName": "Text",
"iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg",
"searchTags": [
"typography",
"paragraph",
"label"
],
"topRow": 32,
"bottomRow": 36,
"parentRowSpace": 10,
"type": "TEXT_WIDGET",
"hideCard": false,
"mobileRightColumn": 40,
"animateLoading": true,
"overflow": "NONE",
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
"parentColumnSpace": 5.453125,
"leftColumn": 25,
"dynamicBindingPathList": [
{
"key": "truncateButtonColor"
},
{
"key": "fontFamily"
},
{
"key": "borderRadius"
},
{
"key": "text"
}
],
"shouldTruncate": false,
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
"text": "Hello {{appsmith.user.name || appsmith.user.email}}",
"key": "5ejbjgp4n5",
"isDeprecated": false,
"rightColumn": 41,
"textAlign": "LEFT",
"dynamicHeight": "AUTO_HEIGHT",
"widgetId": "wawch01apl",
"minWidth": 450,
"isVisible": true,
"fontStyle": "BOLD",
"textColor": "#231F20",
"version": 1,
"parentId": "0",
"tags": [
"Suggested",
"Content"
],
"renderMode": "CANVAS",
"isLoading": false,
"mobileTopRow": 34,
"responsiveBehavior": "fill",
"originalTopRow": 32,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileLeftColumn": 24,
"maxDynamicHeight": 9000,
"originalBottomRow": 36,
"fontSize": "1rem",
"minDynamicHeight": 4
}
]
}
}

4
app/client/cypress/support/Pages/Tabs.ts
View File

@ -8,6 +8,10 @@ export class Tabs {
private _tabsWidgetNameSelector = (widgetName: string): string =>
`.t--widget-${widgetName?.toLowerCase()}`;
private _showTabsProperty = "showtabs";
public _addTab = ".t--add-tab-btn";
public _placeholderTabTitle = "[placeholder='Tab title']";
public _tabsWidgetStyle =
"(//div[contains(@class,'t--draggable-tabswidget')]//div)[6]";
public toggleShowTabHeader(showTabs = true, selector: string) {
this.agHelper.GetNClick(selector).then(() => {