test: added tests for Tabs (#27765)

added tests for tabs

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",
+ );
+ });
+});