From 888b0fdd2692b885d055ee8b61be7d6c311b0e9b Mon Sep 17 00:00:00 2001 From: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com> Date: Thu, 5 Oct 2023 09:34:41 +0530 Subject: [PATCH] test: added tests for Tabs (#27765) added tests for tabs --- .../ClientSide/Widgets/Tab/Tabs_2_spec.ts | 230 +++++++++++++++ app/client/cypress/fixtures/tabsDsl.json | 264 ++++++++++++++++++ app/client/cypress/support/Pages/Tabs.ts | 4 + 3 files changed, 498 insertions(+) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts create mode 100644 app/client/cypress/fixtures/tabsDsl.json diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts new file mode 100644 index 0000000000..e6f7360f30 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts @@ -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", + ); + }); +}); diff --git a/app/client/cypress/fixtures/tabsDsl.json b/app/client/cypress/fixtures/tabsDsl.json new file mode 100644 index 0000000000..6a5bdad8bc --- /dev/null +++ b/app/client/cypress/fixtures/tabsDsl.json @@ -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 + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/support/Pages/Tabs.ts b/app/client/cypress/support/Pages/Tabs.ts index 6bbce340a7..913431d182 100644 --- a/app/client/cypress/support/Pages/Tabs.ts +++ b/app/client/cypress/support/Pages/Tabs.ts @@ -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(() => {