diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Scrolling_Spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Scrolling_Spec.ts index c9febe0956..48c0a0943c 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Scrolling_Spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Scrolling_Spec.ts @@ -1,11 +1,10 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"; -let ee = ObjectsRegistry.EntityExplorer, +const ee = ObjectsRegistry.EntityExplorer, dataSources = ObjectsRegistry.DataSources, agHelper = ObjectsRegistry.AggregateHelper, - locator = ObjectsRegistry.CommonLocators, - mockDBNameUsers: any, - mockDBNameMovies: any; + locator = ObjectsRegistry.CommonLocators; +let mockDBNameUsers: any, mockDBNameMovies: any; describe("Entity explorer context menu should hide on scrolling", function() { it("1. Bug #15474 - Entity explorer menu must close on scroll", function() { diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Linting/ErrorReporting_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Linting/ErrorReporting_spec.ts index 6b6846994a..81f53dea54 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Linting/ErrorReporting_spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Linting/ErrorReporting_spec.ts @@ -6,7 +6,8 @@ const jsEditor = ObjectsRegistry.JSEditor, agHelper = ObjectsRegistry.AggregateHelper, table = ObjectsRegistry.Table, apiPage = ObjectsRegistry.ApiPage, - propPane = ObjectsRegistry.PropertyPane; + propPane = ObjectsRegistry.PropertyPane, + debuggerHelper = ObjectsRegistry.DebuggerHelper; describe("Lint error reporting", () => { before(() => { @@ -37,18 +38,14 @@ describe("Lint error reporting", () => { MouseHoverNVerify("name", "'name' is defined but never used.", false); agHelper.PressEscape(); agHelper.GetNClick(locator._errorTab); - agHelper.AssertContains( + debuggerHelper.DebuggerListDoesnotContain( "'name' is defined but never used.", - "not.exist", - locator._debuggerList, ); agHelper.RefreshPage(); agHelper.GetNClick(locator._errorTab); - agHelper.AssertContains( + debuggerHelper.DebuggerListDoesnotContain( "'name' is defined but never used.", - "not.exist", - locator._debuggerList, ); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/EntityBottomBar_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/EntityBottomBar_spec.ts new file mode 100644 index 0000000000..69201ea924 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/EntityBottomBar_spec.ts @@ -0,0 +1,57 @@ +import { ObjectsRegistry } from "../../../../support/Objects/Registry"; +import { PageType } from "../../../../support/Pages/DebuggerHelper"; + +const { + ApiPage: apiPage, + DataSources: dataSources, + DebuggerHelper: debuggerHelper, + JSEditor: jsEditor, +} = ObjectsRegistry; + +describe("Entity bottom bar", () => { + it("1. debugger should be closable", () => { + debuggerHelper.ClickDebuggerIcon(); + debuggerHelper.AssertOpen(PageType.Canvas); + debuggerHelper.Close(PageType.Canvas); + debuggerHelper.AssertClosed(PageType.Canvas); + }); + + it("2. api bottom pane should be collapsable", () => { + apiPage.CreateApi(); + debuggerHelper.AssertOpen(PageType.API); + + debuggerHelper.Close(PageType.API); + debuggerHelper.AssertClosed(PageType.API); + + debuggerHelper.ClickResponseTab(); + debuggerHelper.AssertOpen(PageType.API); + }); + + it("3. jseditor bottom bar should be collapsable", () => { + jsEditor.NavigateToNewJSEditor(); + debuggerHelper.AssertOpen(PageType.JsEditor); + + debuggerHelper.Close(PageType.JsEditor); + debuggerHelper.AssertClosed(PageType.JsEditor); + + debuggerHelper.ClickResponseTab(); + debuggerHelper.AssertOpen(PageType.JsEditor); + }); + + it("4. query bottom bar should be collapsable", () => { + dataSources.CreateMockDB("Users").then((dbName) => { + dataSources.CreateQuery(dbName); + debuggerHelper.AssertOpen(PageType.Query); + + debuggerHelper.Close(PageType.Query); + debuggerHelper.AssertClosed(PageType.Query); + + debuggerHelper.ClickResponseTab(); + debuggerHelper.AssertOpen(PageType.Query); + + // clean up + dataSources.DeleteQuery("Query1"); + dataSources.DeleteDatasouceFromActiveTab(dbName); + }); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts similarity index 77% rename from app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.js rename to app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts index cc384a4cd2..54335b648c 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts @@ -1,18 +1,17 @@ const commonlocators = require("../../../../locators/commonlocators.json"); -const debuggerLocators = require("../../../../locators/Debugger.json"); import { ObjectsRegistry } from "../../../../support/Objects/Registry"; const { AggregateHelper: agHelper, ApiPage: apiPage, - CommonLocators: locator, + DebuggerHelper: debuggerHelper, EntityExplorer: ee, JSEditor: jsEditor, PropertyPane: propPane, } = ObjectsRegistry; -let logString; -let dataSet; +let logString: string; +let dataSet: unknown; const generateTestLogString = () => { const randString = Cypress._.random(0, 1e4); @@ -33,9 +32,9 @@ describe("Debugger logs", function() { it("1. Modifying widget properties should log the same", function() { ee.DragDropWidgetNVerify("buttonwidget", 200, 200); propPane.UpdatePropertyFieldValue("Label", "Test"); - agHelper.GetNClick(locator._debuggerIcon, 0, true, 0); + debuggerHelper.ClickDebuggerIcon(0, true, 0); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains(locator._debuggerLogState, "Test"); + debuggerHelper.LogStateContains("Test"); }); it("2. Reset debugger state", function() { @@ -46,7 +45,7 @@ describe("Debugger logs", function() { cy.get(commonlocators.homeIcon).click({ force: true }); cy.generateUUID().then((id) => { cy.CreateAppInFirstListedWorkspace(id); - cy.get(debuggerLocators.errorCount).should("not.exist"); + debuggerHelper.AssertErrorCount(0); }); }); @@ -56,12 +55,12 @@ describe("Debugger logs", function() { propPane.EnterJSContext("onClick", `{{console.log("${logString}")}}`); agHelper.Sleep(2000); agHelper.ClickButton("Submit"); - agHelper.GetNClick(locator._debuggerIcon); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.ClickDebuggerIcon(); + debuggerHelper.DoesConsoleLogExist(logString); }); it("4. Console log on button click with arrow function IIFE", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); ee.SelectEntityByName("Button1"); // Testing with normal log in iifee propPane.EnterJSContext( @@ -71,11 +70,11 @@ describe("Debugger logs", function() { }) () }}`, ); agHelper.ClickButton("Submit"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.DoesConsoleLogExist(logString); }); it("5. Console log on button click with function keyword IIFE", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); ee.SelectEntityByName("Button1"); // Testing with normal log in iifee propPane.EnterJSContext( @@ -85,11 +84,11 @@ describe("Debugger logs", function() { } () }}`, ); agHelper.ClickButton("Submit"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.DoesConsoleLogExist(logString); }); it("6. Console log on button click with async function IIFE", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); // Testing with normal log in iifee ee.SelectEntityByName("Button1"); propPane.EnterJSContext( @@ -99,11 +98,11 @@ describe("Debugger logs", function() { }) () }}`, ); agHelper.ClickButton("Submit"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.DoesConsoleLogExist(logString); }); it("7. Console log on button click with mixed function IIFE", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); // Testing with normal log in iifee ee.SelectEntityByName("Button1"); const logStringChild = generateTestLogString(); @@ -115,12 +114,12 @@ describe("Debugger logs", function() { } () }}`, ); agHelper.ClickButton("Submit"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logStringChild); + debuggerHelper.DoesConsoleLogExist(logString); + debuggerHelper.DoesConsoleLogExist(logStringChild); }); it("8. Console log grouping on button click", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); // Testing with normal log in iifee ee.SelectEntityByName("Button1"); propPane.EnterJSContext( @@ -134,12 +133,12 @@ describe("Debugger logs", function() { } () }}`, ); agHelper.ClickButton("Submit"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); - agHelper.GetNAssertContains(locator._debuggerLogMessageOccurence, "5"); + debuggerHelper.DoesConsoleLogExist(logString); + debuggerHelper.Assert_Consecutive_Console_Log_Count(5); }); it("9. Console log grouping on button click with different log in between", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); // Testing with normal log in iifee ee.SelectEntityByName("Button1"); propPane.EnterJSContext( @@ -152,16 +151,13 @@ describe("Debugger logs", function() { } () }}`, ); agHelper.ClickButton("Submit"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `Different ${logString}`, - ); - agHelper.GetNAssertContains(locator._debuggerLogMessageOccurence, "2"); + debuggerHelper.DoesConsoleLogExist(logString); + debuggerHelper.DoesConsoleLogExist(`Different ${logString}`); + debuggerHelper.Assert_Consecutive_Console_Log_Count(2); }); it("10. Console log grouping on button click from different source", function() { - agHelper.GetNClick(locator._debuggerClearLogs); + debuggerHelper.ClearLogs(); // Testing with normal log in iifee ee.SelectEntityByName("Button1"); propPane.EnterJSContext("onClick", `{{console.log("${logString}")}}`); @@ -172,8 +168,8 @@ describe("Debugger logs", function() { agHelper.Sleep(2000); agHelper.ClickButton("Submit"); agHelper.ClickButton("Submit2"); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); - agHelper.AssertElementAbsence(locator._debuggerLogMessageOccurence); + debuggerHelper.DoesConsoleLogExist(logString); + debuggerHelper.Assert_Consecutive_Console_Log_Count(0); }); it("11. Console log on text widget with normal moustache binding", function() { @@ -190,9 +186,9 @@ describe("Debugger logs", function() { agHelper.RefreshPage(); // Wait for the debugger icon to be visible agHelper.AssertElementVisible(".t--debugger"); - agHelper.GetNClick(locator._debuggerIcon); + debuggerHelper.ClickDebuggerIcon(); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.DoesConsoleLogExist(logString); }); it("12. Console log in sync function", function() { @@ -216,7 +212,7 @@ describe("Debugger logs", function() { }, ); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.DoesConsoleLogExist(logString); }); it("13. Console log in async function", function() { @@ -241,7 +237,7 @@ describe("Debugger logs", function() { ); agHelper.WaitUntilAllToastsDisappear(); agHelper.GetNClick(jsEditor._runButton); - agHelper.GetNAssertContains(locator._debuggerLogMessage, logString); + debuggerHelper.DoesConsoleLogExist(logString); }); it("14. Console log after API succedes", function() { @@ -278,14 +274,8 @@ describe("Debugger logs", function() { cy.get("@jsObjName").then((jsObjName) => { agHelper.GetNClick(jsEditor._runButton); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `${logString} Started`, - ); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `${logString} Success`, - ); + debuggerHelper.DoesConsoleLogExist(`${logString} Started`); + debuggerHelper.DoesConsoleLogExist(`${logString} Success`); ee.DragDropWidgetNVerify("textwidget", 200, 600); propPane.UpdatePropertyFieldValue("Text", `{{${jsObjName}.myFun1.data}}`); agHelper.GetNAssertElementText( @@ -326,14 +316,8 @@ describe("Debugger logs", function() { agHelper.WaitUntilAllToastsDisappear(); agHelper.GetNClick(jsEditor._runButton); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `${logString} Started`, - ); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `${logString} Failed`, - ); + debuggerHelper.DoesConsoleLogExist(`${logString} Started`); + debuggerHelper.DoesConsoleLogExist(`${logString} Failed`); }); it("16. Console log source inside nested function", function() { @@ -357,14 +341,8 @@ describe("Debugger logs", function() { agHelper.WaitUntilAllToastsDisappear(); agHelper.GetNClick(jsEditor._runButton); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `Parent ${logString}`, - ); - agHelper.GetNAssertContains( - locator._debuggerLogMessage, - `Child ${logString}`, - ); + debuggerHelper.DoesConsoleLogExist(`Parent ${logString}`); + debuggerHelper.DoesConsoleLogExist(`Child ${logString}`); }); it("17. Console log grouping", function() { @@ -391,8 +369,8 @@ describe("Debugger logs", function() { agHelper.WaitUntilAllToastsDisappear(); agHelper.GetNClick(jsEditor._runButton); agHelper.GetNClick(jsEditor._logsTab); - agHelper.GetNAssertContains(locator._debuggerLogMessage, `${logString}`); - agHelper.GetNAssertContains(locator._debuggerLogMessageOccurence, "5"); + debuggerHelper.DoesConsoleLogExist(`${logString}`); + debuggerHelper.Assert_Consecutive_Console_Log_Count(5); }); // it("Api headers need to be shown as headers in logs", function() { diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/PageOnLoad_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/PageOnLoad_spec.ts similarity index 80% rename from app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/PageOnLoad_spec.js rename to app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/PageOnLoad_spec.ts index e6d1043c6e..4d3720bcab 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/PageOnLoad_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/PageOnLoad_spec.ts @@ -1,7 +1,9 @@ const dsl = require("../../../../fixtures/debuggerTableDsl.json"); const explorer = require("../../../../locators/explorerlocators.json"); -const debuggerLocators = require("../../../../locators/Debugger.json"); const testdata = require("../../../../fixtures/testdata.json"); +import { ObjectsRegistry } from "../../../../support/Objects/Registry"; + +const debuggerHelper = ObjectsRegistry.DebuggerHelper; describe("Check debugger logs state when there are onPageLoad actions", function() { before(() => { @@ -18,8 +20,8 @@ describe("Check debugger logs state when there are onPageLoad actions", function cy.reload(); // Wait for the debugger icon to be visible cy.get(".t--debugger").should("be.visible"); - //cy.get(debuggerLocators.errorCount).should("not.exist"); + // debuggerHelper.isErrorCount(0); cy.wait("@postExecute"); - cy.contains(debuggerLocators.errorCount, 1); + debuggerHelper.AssertErrorCount(1); }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/TriggerErrors_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/TriggerErrors_spec.ts similarity index 78% rename from app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/TriggerErrors_spec.js rename to app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/TriggerErrors_spec.ts index 36715c63dc..5cad84cebc 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/TriggerErrors_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/TriggerErrors_spec.ts @@ -1,5 +1,6 @@ +import { ObjectsRegistry } from "../../../../support/Objects/Registry"; const dsl = require("../../../../fixtures/debuggerTableDsl.json"); -const debuggerLocators = require("../../../../locators/Debugger.json"); +const debuggerHelper = ObjectsRegistry.DebuggerHelper; describe("Trigger errors in the debugger", function() { before(() => { @@ -17,10 +18,10 @@ describe("Trigger errors in the debugger", function() { // Click on a row of the table widget cy.isSelectRow(1); cy.wait(5000); - cy.contains(debuggerLocators.errorCount, 2); + debuggerHelper.AssertErrorCount(2); // Fix code cy.testJsontext("onrowselected", "{{console.log('test')}}"); cy.isSelectRow(1); - cy.contains(debuggerLocators.errorCount, 1); + debuggerHelper.AssertErrorCount(1); }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Widget_Error_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Widget_Error_spec.ts similarity index 68% rename from app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Widget_Error_spec.js rename to app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Widget_Error_spec.ts index 30f5195cd0..166eadba59 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Widget_Error_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/Widget_Error_spec.ts @@ -1,8 +1,10 @@ +import { ObjectsRegistry } from "../../../../support/Objects/Registry"; + const dsl = require("../../../../fixtures/buttondsl.json"); -const debuggerLocators = require("../../../../locators/Debugger.json"); -const commonlocators = require("../../../../locators/commonlocators.json"); const widgetLocators = require("../../../../locators/Widgets.json"); +const { DebuggerHelper: debuggerHelper } = ObjectsRegistry; + describe("Widget error state", function() { const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; @@ -23,10 +25,10 @@ describe("Widget error state", function() { }); it("Check if the current value is shown in the debugger", function() { - cy.get(debuggerLocators.debuggerIcon).click(); + debuggerHelper.ClickDebuggerIcon(); cy.contains(".react-tabs__tab", "Errors").click(); - cy.get(debuggerLocators.debuggerLogState).contains("Test"); + debuggerHelper.LogStateContains("Test"); }); it("Switch to error tab when clicked on the debug button", function() { @@ -43,31 +45,23 @@ describe("Widget error state", function() { }); it("All errors should be expanded by default", function() { - cy.get(debuggerLocators.errorMessage) - .should("be.visible") - .should("have.length", 2); + debuggerHelper.AssertVisibleErrorMessagesCount(2); }); it("Recent errors are shown at the top of the list", function() { cy.testJsontext("label", "{{[]}}"); - cy.get(debuggerLocators.debuggerLogState) - .first() - .contains("text"); + debuggerHelper.LogStateContains("text", 0); }); it("Clicking on a message should open the search menu", function() { - cy.get(debuggerLocators.errorMessage) - .first() - .click(); - cy.get(debuggerLocators.menuItem).should("be.visible"); + debuggerHelper.ClickErrorMessage(0); + debuggerHelper.AssertContextMenuItemVisible(); }); it("Undoing widget deletion should show errors if present", function() { cy.deleteWidget(); - cy.get(debuggerLocators.errorMessage).should("not.exist"); + debuggerHelper.AssertVisibleErrorMessagesCount(0); cy.get("body").type(`{${modifierKey}}z`); - cy.get(debuggerLocators.errorMessage) - .should("be.visible") - .should("have.length", 2); + debuggerHelper.AssertVisibleErrorMessagesCount(2); }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_MultiPart_Spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_MultiPart_Spec.ts index 1a15d1f10a..cfc0c8840f 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_MultiPart_Spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_MultiPart_Spec.ts @@ -1,14 +1,15 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"; -let agHelper = ObjectsRegistry.AggregateHelper, + +const agHelper = ObjectsRegistry.AggregateHelper, ee = ObjectsRegistry.EntityExplorer, jsEditor = ObjectsRegistry.JSEditor, apiPage = ObjectsRegistry.ApiPage, locator = ObjectsRegistry.CommonLocators, deployMode = ObjectsRegistry.DeployMode, - propPane = ObjectsRegistry.PropertyPane; + propPane = ObjectsRegistry.PropertyPane, + debuggerHelper = ObjectsRegistry.DebuggerHelper; describe("Validate API request body panel", () => { - beforeEach(() => { agHelper.RestoreLocalStorageCache(); }); @@ -93,7 +94,7 @@ describe("Validate API request body panel", () => { }); it("7. Checks MultiPart form data for a File Type upload + Bug 12476", () => { - let imageNameToUpload = "ConcreteHouse.jpg"; + const imageNameToUpload = "ConcreteHouse.jpg"; cy.fixture("multiPartFormDataDsl").then((val: any) => { agHelper.AddDsl(val); }); @@ -101,7 +102,8 @@ describe("Validate API request body panel", () => { apiPage.CreateAndFillApi( "https://api.cloudinary.com/v1_1/appsmithautomationcloud/image/upload?upload_preset=fbbhg4xu", "CloudinaryUploadApi", - 30000, "POST" + 30000, + "POST", ); apiPage.EnterBodyFormData( "MULTIPART_FORM_DATA", @@ -128,10 +130,7 @@ describe("Validate API request body panel", () => { ); ee.SelectEntityByName("FilePicker1", "Widgets"); - propPane.EnterJSContext( - "onFilesSelected", - `{{JSObject1.upload()}}` - ); + propPane.EnterJSContext("onFilesSelected", `{{JSObject1.upload()}}`); ee.SelectEntityByName("Image1"); propPane.UpdatePropertyFieldValue( @@ -160,7 +159,7 @@ describe("Validate API request body panel", () => { }); it("8. Checks MultiPart form data for a Array Type upload results in API error", () => { - let imageNameToUpload = "AAAFlowerVase.jpeg"; + const imageNameToUpload = "AAAFlowerVase.jpeg"; ee.SelectEntityByName("CloudinaryUploadApi", "Queries/JS"); apiPage.EnterBodyFormData( "MULTIPART_FORM_DATA", @@ -173,7 +172,7 @@ describe("Validate API request body panel", () => { agHelper.ClickButton("Select Files"); agHelper.UploadFile(imageNameToUpload); agHelper.ValidateNetworkExecutionSuccess("@postExecute", false); - agHelper.AssertDebugError( + debuggerHelper.AssertDebugError( "Execution failed with status 400 BAD_REQUEST", '{"error":{"message":"Unsupported source URL: {\\"type\\":\\"image/jpeg\\"', ); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MockDBs_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MockDBs_spec.ts index 78e35dc8bc..c2d72ec474 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MockDBs_spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/MockDBs_spec.ts @@ -1,17 +1,12 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"; -let agHelper = ObjectsRegistry.AggregateHelper, +const agHelper = ObjectsRegistry.AggregateHelper, ee = ObjectsRegistry.EntityExplorer, dataSources = ObjectsRegistry.DataSources; -let mockDBName: any; describe("Validate Mock Query Active Ds querying & count", () => { it("1. Create Query from Mock Mongo DB & verify active queries count", () => { - dataSources.NavigateToDSCreateNew(); - agHelper.GetNClick(dataSources._mockDB("Movies")); - cy.wait("@getMockDb").then(($createdMock) => { - mockDBName = $createdMock.response?.body.data.name; - + dataSources.CreateMockDB("Movies").then((mockDBName) => { dataSources.CreateQuery(mockDBName); dataSources.ValidateNSelectDropdown("Commands", "Find Document(s)"); agHelper.EnterValue("movies", { @@ -58,11 +53,7 @@ describe("Validate Mock Query Active Ds querying & count", () => { }); it("2. Create Query from Mock Postgres DB & verify active queries count", () => { - dataSources.NavigateToDSCreateNew(); - agHelper.GetNClick(dataSources._mockDB("Users")); - - cy.wait("@getMockDb").then(($createdMock) => { - mockDBName = $createdMock.response?.body.data.name; + dataSources.CreateMockDB("Users").then((mockDBName) => { dataSources.CreateQuery(mockDBName); agHelper.GetNClick(dataSources._templateMenuOption("Select")); dataSources.RunQueryNVerifyResponseViews(10); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/SetTimeout_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/SetTimeout_spec.ts index 002a4a22d8..710e168796 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/SetTimeout_spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/SetTimeout_spec.ts @@ -1,9 +1,9 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"; const jsEditor = ObjectsRegistry.JSEditor; const agHelper = ObjectsRegistry.AggregateHelper; -const locators = ObjectsRegistry.CommonLocators; const apiPage = ObjectsRegistry.ApiPage; const deployMode = ObjectsRegistry.DeployMode; +const debuggerHelper = ObjectsRegistry.DebuggerHelper; describe("Tests setTimeout API", function() { it("1. Executes showAlert after 3 seconds and uses default value", () => { @@ -108,19 +108,14 @@ describe("Tests setTimeout API", function() { }, ); agHelper.Sleep(2000); - agHelper.GetNClick(locators._debuggerIcon); + debuggerHelper.ClickDebuggerIcon(); agHelper.GetNClick(jsEditor._logsTab); jsEditor.RunJSObj(); - agHelper.GetNAssertContains(locators._debuggerLogMessage, "Hey there!"); - agHelper.GetNAssertContains(locators._debuggerLogMessage, "Bye!"); - agHelper.GetNAssertContains( - locators._debuggerLogMessage, - "Working!", - "not.exist", - 100, - ); + debuggerHelper.DoesConsoleLogExist("Hey there!"); + debuggerHelper.DoesConsoleLogExist("Bye!"); + debuggerHelper.DoesConsoleLogExist("Working!", false, undefined, 100); agHelper.Sleep(3000); - agHelper.GetNAssertContains(locators._debuggerLogMessage, "Working!"); + debuggerHelper.DoesConsoleLogExist("Working!"); }); it("4. Resolves promise after 3 seconds and shows alert", () => { diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js index 2af4670db7..900fae6df9 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js @@ -4,7 +4,8 @@ const datasource = require("../../../../locators/DatasourcesEditor.json"); const formControls = require("../../../../locators/FormControl.json"); import homePage from "../../../../locators/HomePage"; import { ObjectsRegistry } from "../../../../support/Objects/Registry"; -let ee = ObjectsRegistry.EntityExplorer; +const ee = ObjectsRegistry.EntityExplorer; +const dataSources = ObjectsRegistry.DataSources; let datasourceName; @@ -63,7 +64,7 @@ describe("Create a query with a mongo datasource, run, save and then delete the // cy.EvaluateCurrentValue(`{"find": "listingAndReviews","limit": 10}`); cy.runQuery(); - cy.xpath(queryLocators.countText).should("have.text", "10 Records"); + dataSources.CheckResponseRecordsCount(10); cy.deleteQueryUsingContext(); }); @@ -81,18 +82,18 @@ describe("Create a query with a mongo datasource, run, save and then delete the cy.typeValueNValidate("listingAndReviews", formControls.mongoCollection); cy.runQuery(); - cy.xpath(queryLocators.countText).should("have.text", "10 Records"); + dataSources.CheckResponseRecordsCount(10); cy.typeValueNValidate("{beds : {$lte: 2}}", formControls.mongoFindQuery); cy.runQuery(); - cy.xpath(queryLocators.countText).should("have.text", "10 Records"); + dataSources.CheckResponseRecordsCount(10); cy.typeValueNValidate( "{number_of_reviews: -1}", formControls.mongoFindSort, ); //sort descending cy.runQuery(); - cy.xpath(queryLocators.countText).should("have.text", "10 Records"); + dataSources.CheckResponseRecordsCount(10); cy.typeValueNValidate( "{house_rules: 1, description:1}", @@ -108,7 +109,7 @@ describe("Create a query with a mongo datasource, run, save and then delete the "Response is not as expected for Find commmand with multiple conditions", ); }); - cy.xpath(queryLocators.countText).should("have.text", "5 Records"); + dataSources.CheckResponseRecordsCount(5); cy.typeValueNValidate("2", formControls.mongoFindSkip); //Skip field cy.onlyQueryRun(); @@ -119,7 +120,7 @@ describe("Create a query with a mongo datasource, run, save and then delete the "Response is not as expected for Find commmand with multiple conditions", ); }); - cy.xpath(queryLocators.countText).should("have.text", "5 Records"); + dataSources.CheckResponseRecordsCount(5); cy.deleteQueryUsingContext(); }); @@ -418,7 +419,7 @@ describe("Create a query with a mongo datasource, run, save and then delete the ); cy.runQuery(); - cy.xpath(queryLocators.countText).should("have.text", "3 Records"); + dataSources.CheckResponseRecordsCount(3); cy.get("@dSName").then((dbName) => { //cy.CheckAndUnfoldEntityItem("Datasources"); diff --git a/app/client/cypress/locators/Debugger.json b/app/client/cypress/locators/Debugger.json deleted file mode 100644 index 28e7ba40fc..0000000000 --- a/app/client/cypress/locators/Debugger.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "debuggerIcon": ".t--debugger", - "debuggerLogState": ".t--debugger-log-state", - "debuggerLogMessage": ".t--debugger-log-message", - "debuggerClearLogs": ".t--debugger-clear-logs", - "errorCount": ".t--debugger-count", - "errorMessage": ".t--debugger-message", - "menuItem": ".t--debugger-contextual-menuitem" -} \ No newline at end of file diff --git a/app/client/cypress/locators/QueryEditor.json b/app/client/cypress/locators/QueryEditor.json index 43cd511a53..28b8af3a02 100644 --- a/app/client/cypress/locators/QueryEditor.json +++ b/app/client/cypress/locators/QueryEditor.json @@ -23,7 +23,6 @@ "queryDelete": "//div[contains(@class, 't--template-menu')]//div[text()='Delete']", "queryFromEmail":".CodeMirror-lines", "codeTextArea": "//div[@class='CodeMirror-code']//span/span", - "countText": "//span[contains(@class, 'cs-text')][text()='Result:']/span", "searchFilefield": "//input[@placeholder='Search File Prefix']", "copyURLicon": "//button/span[@icon='link']", "deleteFileicon": "//button/span[@icon='trash']/ancestor::div[contains(@class,'t--widget-iconbuttonwidget')]", diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index 9597ba5507..cc99d66dc2 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -51,15 +51,8 @@ export class CommonLocators { _createNew = ".t--entity-add-btn.group.files"; _uploadFiles = "div.uppy-Dashboard-AddFiles input"; _uploadBtn = "button.uppy-StatusBar-actionBtn--upload"; - _debuggerIcon = ".t--debugger svg"; _errorTab = "[data-cy=t--tab-ERROR]"; _responseTab = "[data-cy=t--tab-response]"; - _debugErrorMsg = ".t--debugger-message"; - _debuggerLogState = ".t--debugger-log-state"; - _debuggerLogMessage = ".t--debugger-log-message"; - _debuggerLogMessageOccurence = ".t--debugger-log-message-occurence"; - _debuggerClearLogs = ".t--debugger-clear-logs"; - _debuggerLabel = "span.debugger-label"; _modal = ".t--modal-widget"; _entityProperties = (entityNameinLeftSidebar: string) => "//div[text()='" + @@ -154,8 +147,10 @@ export class CommonLocators { _deployedPage = `.t--page-switch-tab`; _hints = "ul.CodeMirror-hints li"; _cancelActionExecution = ".t--cancel-action-button"; + _bottomPaneCollapseIcon = ".t--tabs-collapse-icon"; _dropDownMultiTreeValue = (dropdownOption: string) => - "//span[@class='rc-tree-select-tree-title']/parent::span[@title='" + dropdownOption + "']"; - _dropDownMultiTreeSelect = ".rc-tree-select-multiple" - _debuggerList = ".debugger-list"; + "//span[@class='rc-tree-select-tree-title']/parent::span[@title='" + + dropdownOption + + "']"; + _dropDownMultiTreeSelect = ".rc-tree-select-multiple"; } diff --git a/app/client/cypress/support/Objects/Registry.ts b/app/client/cypress/support/Objects/Registry.ts index a5a4089731..547f103654 100644 --- a/app/client/cypress/support/Objects/Registry.ts +++ b/app/client/cypress/support/Objects/Registry.ts @@ -11,7 +11,7 @@ import { PropertyPane } from "../Pages/PropertyPane"; import { DeployMode } from "../Pages/DeployModeHelper"; import { GitSync } from "../Pages/GitSync"; import { FakerHelper } from "../Pages/FakerHelper"; - +import { DebuggerHelper } from "../Pages/DebuggerHelper"; export class ObjectsRegistry { private static aggregateHelper__: AggregateHelper; @@ -109,7 +109,7 @@ export class ObjectsRegistry { } return ObjectsRegistry.gitSync__; } - + private static fakerHelper__: FakerHelper; static get FakerHelper(): FakerHelper { if (ObjectsRegistry.fakerHelper__ === undefined) { @@ -117,6 +117,14 @@ export class ObjectsRegistry { } return ObjectsRegistry.fakerHelper__; } + + private static DebuggerHelper__: DebuggerHelper; + static get DebuggerHelper(): DebuggerHelper { + if (ObjectsRegistry.DebuggerHelper__ === undefined) { + ObjectsRegistry.DebuggerHelper__ = new DebuggerHelper(); + } + return ObjectsRegistry.DebuggerHelper__; + } } export const initLocalstorageRegistry = () => { @@ -130,7 +138,7 @@ export const initLocalstorageRegistry = () => { declare namespace Cypress { namespace Cypress { interface Chainable { - TypeTab: (shiftKey: Boolean, ctrlKey: boolean) => void; + TypeTab: (shiftKey: boolean, ctrlKey: boolean) => void; } } } diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts index 5bd465c016..47c1b6ebf6 100644 --- a/app/client/cypress/support/Pages/AggregateHelper.ts +++ b/app/client/cypress/support/Pages/AggregateHelper.ts @@ -815,17 +815,6 @@ export class AggregateHelper { toClickUpload && this.GetNClick(this.locator._uploadBtn, 0, false); } - public AssertDebugError(label: string, messgae: string) { - this.GetNClick(this.locator._debuggerIcon, 0, true, 0); - this.GetNClick(this.locator._errorTab, 0, true, 0); - this.GetText(this.locator._debuggerLabel, "text", 0).then(($text) => { - expect($text).to.eq(label); - }); - this.GetText(this.locator._debugErrorMsg, "text", 0).then(($text) => { - expect($text).to.contains(messgae); - }); - } - public AssertElementAbsence(selector: ElementType, timeout = 0) { //Should not exists - cannot take indexes return this.GetElement(selector, timeout).should("not.exist"); @@ -841,6 +830,12 @@ export class AggregateHelper { .invoke(textOrValue); } + AssertHeight(selector: ElementType, height: number) { + return this.GetElement(selector) + .invoke("height") + .should("be.equal", height); + } + public AssertText( selector: ElementType, textOrValue: "text" | "val" = "text", @@ -895,13 +890,20 @@ export class AggregateHelper { public GetNAssertContains( selector: ElementType, - text: string | RegExp, + text: string | number | RegExp, exists: "exist" | "not.exist" = "exist", + index?: number, timeout?: number, ) { - return this.GetElement(selector, timeout) - .contains(text) - .should(exists); + if (index) + return this.GetElement(selector, timeout) + .eq(index) + .contains(text) + .should(exists); + else + return this.GetElement(selector, timeout) + .contains(text) + .should(exists); } public ScrollTo( diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts index b88901a548..71b43f437f 100644 --- a/app/client/cypress/support/Pages/DataSources.ts +++ b/app/client/cypress/support/Pages/DataSources.ts @@ -68,9 +68,7 @@ export class DataSources { _queryResponse = (responseType: string) => "li[data-cy='t--tab-" + responseType + "']"; _queryRecordResult = (recordCount: number) => - "//div/span[text()='Result:']/span[contains(text(),'" + - recordCount + - " Record')]"; + `//div/span[text()='Result:']/span[contains(text(),' ${recordCount} Record')]`; _noRecordFound = "span[data-testid='no-data-table-message']"; _usePreparedStatement = "input[name='actionConfiguration.pluginSpecifiedTemplates[0].value'][type='checkbox']"; @@ -222,6 +220,14 @@ export class DataSources { cy.get(this._newDatabases).should("be.visible"); } + CreateMockDB(dbName: "Users" | "Movies"): Cypress.Chainable { + this.NavigateToDSCreateNew(); + this.agHelper.GetNClick(this._mockDB(dbName)); + return cy + .wait("@getMockDb") + .then(($createdMock) => $createdMock.response?.body.data.name); + } + public FillPostgresDSForm( shouldAddTrailingSpaces = false, username = "", @@ -411,6 +417,11 @@ export class DataSources { this.agHelper.Sleep(2000); //for the CreateQuery } + DeleteQuery(queryName: string) { + this.ee.ExpandCollapseEntity("Queries/JS"); + this.ee.ActionContextMenuByEntityName(queryName, "Delete", "Are you sure?"); + } + public ValidateNSelectDropdown( ddTitle: string, currentValue = "", @@ -513,7 +524,7 @@ export class DataSources { } public RunQueryNVerifyResponseViews( - expectdRecordCount = 1, + expectedRecordsCount = 1, tableCheck = true, ) { this.RunQuery(); @@ -521,8 +532,12 @@ export class DataSources { this.agHelper.AssertElementVisible(this._queryResponse("TABLE")); this.agHelper.AssertElementVisible(this._queryResponse("JSON")); this.agHelper.AssertElementVisible(this._queryResponse("RAW")); + this.CheckResponseRecordsCount(expectedRecordsCount); + } + + public CheckResponseRecordsCount(expectedRecordCount: number) { this.agHelper.AssertElementVisible( - this._queryRecordResult(expectdRecordCount), + this._queryRecordResult(expectedRecordCount), ); } diff --git a/app/client/cypress/support/Pages/DebuggerHelper.ts b/app/client/cypress/support/Pages/DebuggerHelper.ts new file mode 100644 index 0000000000..c6e3e776af --- /dev/null +++ b/app/client/cypress/support/Pages/DebuggerHelper.ts @@ -0,0 +1,193 @@ +import { ObjectsRegistry } from "../Objects/Registry"; + +export enum PageType { + Canvas, + API, + Query, + JsEditor, +} + +export class DebuggerHelper { + private agHelper = ObjectsRegistry.AggregateHelper; + private commonLocators = ObjectsRegistry.CommonLocators; + + // ActionExecutionResizerHeight -> in repo + private readonly bottomPaneHeight = 307; + // from design system + private readonly TAB_MIN_HEIGHT = 36; + + public readonly locators = { + _debuggerIcon: ".t--debugger svg", + _tabsContainer: ".t--debugger-tabs-container", + _closeButton: ".t--close-debugger", + _logMessage: ".t--debugger-log-message", + _logState: ".t--debugger-log-state", + _errorCount: ".t--debugger-count", + _clearLogs: ".t--debugger-clear-logs", + _logMessageOccurence: ".t--debugger-log-message-occurence", + _debuggerMessage: ".t--debugger-message", + _contextMenuItem: ".t--debugger-contextual-menuitem", + _debuggerLabel: "span.debugger-label", + _bottomPaneContainer: { + [PageType.API]: ".t--api-bottom-pane-container", + [PageType.Query]: ".t--query-bottom-pane-container", + [PageType.JsEditor]: ".t--js-editor-bottom-pane-container", + }, + _debuggerList: ".debugger-list", + }; + + ClickDebuggerIcon( + index?: number, + force?: boolean, + waitTimeInterval?: number, + ) { + this.agHelper.GetNClick( + this.locators._debuggerIcon, + index, + force, + waitTimeInterval, + ); + } + + ClickResponseTab() { + this.agHelper.GetNClick(this.commonLocators._responseTab); + } + + Close(pageType: PageType) { + switch (pageType) { + case PageType.Canvas: + this.agHelper.GetNClick(this.locators._closeButton); + break; + case PageType.API: + case PageType.Query: + case PageType.JsEditor: + this.agHelper.GetNClick(this.commonLocators._bottomPaneCollapseIcon); + break; + } + } + + AssertOpen(pageType: PageType) { + switch (pageType) { + case PageType.Canvas: + this.agHelper.AssertElementExist(this.locators._tabsContainer); + break; + case PageType.API: + case PageType.JsEditor: + this.agHelper.AssertHeight( + this.locators._bottomPaneContainer[pageType], + this.bottomPaneHeight, + ); + break; + case PageType.Query: + this.agHelper.AssertHeight( + this.locators._bottomPaneContainer[pageType], + this.bottomPaneHeight - 1, // -1 to offset error + ); + break; + } + } + + AssertClosed(pageType: PageType) { + switch (pageType) { + case PageType.Canvas: + this.agHelper.AssertElementAbsence(this.locators._tabsContainer); + break; + case PageType.API: + case PageType.JsEditor: + this.agHelper.AssertHeight( + this.locators._bottomPaneContainer[pageType], + this.TAB_MIN_HEIGHT, + ); + break; + case PageType.Query: + this.agHelper.AssertHeight( + this.locators._bottomPaneContainer[pageType], + this.TAB_MIN_HEIGHT - 1, // -1 to offset error + ); + break; + } + } + + DoesConsoleLogExist( + text: string, + exists = true, + index?: number, + timeout?: number, + ) { + this.agHelper.GetNAssertContains( + this.locators._logMessage, + text, + exists ? "exist" : "not.exist", + index, + timeout, + ); + } + + LogStateContains(text: string, index?: number) { + this.agHelper.GetNAssertContains( + this.locators._logState, + text, + "exist", + index, + ); + } + + AssertErrorCount(count: number) { + count > 0 + ? this.agHelper.GetNAssertContains(this.locators._errorCount, count) + : this.agHelper.AssertElementAbsence(this.locators._errorCount); + } + + ClearLogs() { + this.agHelper.GetNClick(this.locators._clearLogs); + } + + Assert_Consecutive_Console_Log_Count(count: number) { + count > 0 + ? this.agHelper.GetNAssertContains( + this.locators._logMessageOccurence, + count, + ) + : this.agHelper.AssertElementAbsence(this.locators._logMessageOccurence); + } + + AssertVisibleErrorMessagesCount(count: number) { + if (count > 0) { + this.agHelper.AssertElementVisible(this.locators._debuggerMessage); + this.agHelper.AssertElementLength(this.locators._debuggerMessage, count); + } else { + this.agHelper.AssertElementAbsence(this.locators._debuggerMessage); + } + } + + ClickErrorMessage(index?: number) { + this.agHelper.GetNClick(this.locators._debuggerMessage, index); + } + + AssertContextMenuItemVisible() { + this.agHelper.AssertElementVisible(this.locators._contextMenuItem); + } + + AssertDebugError(label: string, message: string) { + this.ClickDebuggerIcon(); + this.agHelper.GetNClick(this.commonLocators._errorTab, 0, true, 0); + this.agHelper + .GetText(this.locators._debuggerLabel, "text", 0) + .then(($text) => { + expect($text).to.eq(label); + }); + this.agHelper + .GetText(this.locators._debuggerMessage, "text", 0) + .then(($text) => { + expect($text).to.contains(message); + }); + } + + DebuggerListDoesnotContain(text: string) { + this.agHelper.AssertContains( + text, + "not.exist", + this.locators._debuggerList, + ); + } +} diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index 3b6eaa754b..6080d11dde 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -36,6 +36,7 @@ import { Category, Icon, Size, + TAB_MIN_HEIGHT, Text, TextType, } from "design-system"; @@ -74,10 +75,6 @@ const ResponseContainer = styled.div` .react-tabs__tab-panel { overflow: hidden; } - - .react-tabs__tab-panel > * { - padding-bottom: 10px; - } `; const ResponseMetaInfo = styled.div` display: flex; @@ -91,8 +88,8 @@ const ResponseMetaWrapper = styled.div` align-items: center; display: flex; position: absolute; - right: ${(props) => props.theme.spaces[12]}px; - top: ${(props) => props.theme.spaces[4]}px; + right: ${(props) => props.theme.spaces[17] + 1}px; + top: ${(props) => props.theme.spaces[2] + 1}px; `; const ResponseTabWrapper = styled.div` @@ -108,12 +105,13 @@ const TabbedViewWrapper = styled.div` &&& { ul.react-tabs__tab-list { margin: 0px ${(props) => props.theme.spaces[11]}px; + height: ${TAB_MIN_HEIGHT}; } } & { .react-tabs__tab-panel { - height: calc(100% - 32px); + height: calc(100% - ${TAB_MIN_HEIGHT}); } } `; @@ -181,7 +179,6 @@ const HelpSection = styled.div` `; const ResponseBodyContainer = styled.div` - padding-top: 10px; overflow-y: auto; height: 100%; display: grid; @@ -555,7 +552,7 @@ function ApiResponseView(props: Props) { ]; return ( - + { @@ -633,6 +630,8 @@ function ApiResponseView(props: Props) { )} props.theme.colors.debugger.background}; border-top: 1px solid ${Colors.ALTO}; @@ -76,18 +77,23 @@ function DebuggerTabs() { const onClose = () => dispatch(showDebugger(false)); return ( - + ); diff --git a/app/client/src/components/editorComponents/JSResponseView.tsx b/app/client/src/components/editorComponents/JSResponseView.tsx index 13f1e0e7bb..e2decba896 100644 --- a/app/client/src/components/editorComponents/JSResponseView.tsx +++ b/app/client/src/components/editorComponents/JSResponseView.tsx @@ -39,7 +39,6 @@ import { DebugButton } from "./Debugger/DebugCTA"; import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; import EntityBottomTabs from "./EntityBottomTabs"; import { TAB_MIN_HEIGHT } from "design-system"; -import { theme } from "constants/DefaultTheme"; import { CodeEditorWithGutterStyles } from "pages/Editor/JSEditor/constants"; import { getIsSavingEntity } from "selectors/editorSelectors"; import { getJSResponseViewState } from "./utils"; @@ -51,6 +50,7 @@ import { setJsPaneResponsePaneHeight, setJsPaneResponseSelectedTab, } from "actions/jsPaneActions"; +import { ActionExecutionResizerHeight } from "pages/Editor/APIEditor/constants"; const ResponseContainer = styled.div` ${ResizerCSS} @@ -58,7 +58,7 @@ const ResponseContainer = styled.div` // Minimum height of bottom tabs as it can be resized min-height: ${TAB_MIN_HEIGHT}; background-color: ${(props) => props.theme.colors.apiPane.responseBody.bg}; - height: ${({ theme }) => theme.actionsBottomTabInitialHeight}; + height: ${ActionExecutionResizerHeight}px; .react-tabs__tab-panel { ${CodeEditorWithGutterStyles} @@ -329,7 +329,10 @@ function JSResponseView(props: Props) { }, []); return ( - + props.theme.actionsBottomTabInitialHeight}; + height: ${ActionExecutionResizerHeight}px; // Minimum height of bottom tabs as it can be resized min-height: 36px; width: 100%; @@ -188,8 +187,8 @@ const SettingsWrapper = styled.div` const ResultsCount = styled.div` position: absolute; - right: 13px; - top: 8px; + right: ${(props) => props.theme.spaces[17] + 1}px; + top: ${(props) => props.theme.spaces[2] + 1}px; color: #716e6e; `; @@ -774,7 +773,7 @@ export function EditorJSONtoForm(props: Props) { const responseTabs = [ { - key: "Response", + key: "response", title: "Response", panelComponent: ( @@ -1062,7 +1061,10 @@ export function EditorJSONtoForm(props: Props) { /> - + @@ -1072,7 +1074,6 @@ export function EditorJSONtoForm(props: Props) { panelRef={panelRef} snapToHeight={ActionExecutionResizerHeight} /> - {isRunning && ( <> @@ -1101,7 +1102,7 @@ export function EditorJSONtoForm(props: Props) { Result: - {`${output.length} Record${ + {` ${output.length} Record${ output.length > 1 ? "s" : "" }`} @@ -1109,6 +1110,8 @@ export function EditorJSONtoForm(props: Props) { )}