diff --git a/app/client/cypress/e2e/Regression/ClientSide/Debugger/JSObjects_navigation_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Debugger/JSObjects_navigation_spec.ts index 6b1ac77ef0aa..5cf382e79b65 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Debugger/JSObjects_navigation_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Debugger/JSObjects_navigation_spec.ts @@ -1,11 +1,15 @@ import { - jsEditor, agHelper, - entityExplorer, debuggerHelper, + entityExplorer, entityItems, + jsEditor, } from "../../../../support/Objects/ObjectsCore"; -import EditorNavigation from "../../../../support/Pages/EditorNavigation"; +import EditorNavigation, { + EditorViewMode, + PageLeftPane, + PagePaneSegment, +} from "../../../../support/Pages/EditorNavigation"; describe("JSObjects", { tags: ["@tag.JS"] }, () => { it("1. Focus and position cursor on the ch,line having an error", () => { @@ -40,6 +44,37 @@ describe("JSObjects", { tags: ["@tag.JS"] }, () => { }); }); + it("2. Focus and position cursor on the ch,line having an error in split mode", () => { + const JS_OBJECT_BODY = `export default { + myVar1: [], + myVar2: {}, + myFun1 () { + // write code here + // this.myVar1 = [1,2,3] + let testing = test + "test"; + }, + async myFun2 () { + return [] + // use async-await or promises + // await storeValue('varName', 'hello world') + } + }`; + jsEditor.CreateJSObject(JS_OBJECT_BODY, { + paste: true, + completeReplace: true, + toRun: false, + shouldCreateNewJSObj: true, + }); + + EditorNavigation.SwitchScreenMode(EditorViewMode.SplitScreen); + + debuggerHelper.OpenDebugger(); + debuggerHelper.ClicklogEntityLink(); + agHelper.AssertCursorInput(jsEditor._editor, { ch: 20, line: 6 }); + + jsEditor.DeleteJSObjectFromContextMenu(); + }); + it("2. Bug 24990 Clears logs filter using backspace", function () { const JS_OBJECT_BODY = `export default { myVar1: [], diff --git a/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_View_mode.ts b/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_View_mode.ts index 1a6ab053757b..39b555fbe177 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_View_mode.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/IDE/Canvas_View_mode.ts @@ -7,19 +7,29 @@ import { import Canvas from "../../../../support/Pages/Canvas"; import EditorNavigation, { EditorViewMode, + EntityType, PageLeftPane, PagePaneSegment, } from "../../../../support/Pages/EditorNavigation"; describe("Canvas view mode", { tags: ["@tag.IDE"] }, () => { const JS_OBJECT_BODY = `export default { + inputValue: 0, testFunction: () => { console.log("hi"); }, }`; + + const JS_OBJECT_BODY_V2 = `export default { + inputValue: "Hello", + testFunction: () => { + console.log("hi"); + }, + }`; + const shortKey = Cypress.platform === "darwin" ? "\u2318" : "Ctrl +"; - it("1. Canvas view mode functionalities", () => { + it("1. Canvas view mode interactions", () => { cy.dragAndDropToCanvas("inputwidgetv2", { x: 300, y: 200 }); jsEditor.CreateJSObject(JS_OBJECT_BODY, { @@ -57,4 +67,19 @@ describe("Canvas view mode", { tags: ["@tag.IDE"] }, () => { // check for property pane visibility cy.get(".t--property-pane-sidebar").should("be.visible"); }); + + it("2. Canvas view mode updates", () => { + EditorNavigation.SelectEntityByName("Input1", EntityType.Widget); + cy.updateCodeInput( + locators._propertyControl + "defaultvalue", + `{{ JSObject1.inputValue }}`, + ); + PageLeftPane.switchSegment(PagePaneSegment.JS); + cy.get(`${locators._widget("input1")} input`).should("contain.value", "0"); + jsEditor.EditJSObj(JS_OBJECT_BODY_V2); + cy.get(`${locators._widget("input1")} input`).should( + "contain.value", + "Hello", + ); + }); }); diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index f5a1d8d2551d..2c2d7c6da437 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -354,4 +354,5 @@ export class CommonLocators { _dropdownOption = ".rc-select-item-option-content"; _dropdownActiveOption = ".rc-select-dropdown .rc-select-item-option-active"; _homeIcon = "[data-testid='t--default-home-icon']"; + _widget = (widgetName: string) => `.t--widget-${widgetName}`; } diff --git a/app/client/cypress/support/Pages/JSEditor.ts b/app/client/cypress/support/Pages/JSEditor.ts index 2a5e073913b4..d66172fe03fb 100644 --- a/app/client/cypress/support/Pages/JSEditor.ts +++ b/app/client/cypress/support/Pages/JSEditor.ts @@ -78,6 +78,7 @@ export class JSEditor { _getJSFunctionSettingsId = (JSFunctionName: string) => `${JSFunctionName}-settings`; _asyncJSFunctionSettings = `.t--async-js-function-settings`; + _editor = ".js-editor"; _debugCTA = `button.js-editor-debug-cta`; _lineinJsEditor = (lineNumber: number) => ":nth-child(" + lineNumber + ") > .CodeMirror-line"; @@ -241,6 +242,12 @@ export class JSEditor { PageLeftPane.assertPresence(renameVal); } + public DeleteJSObjectFromContextMenu() { + cy.get(this.contextMenuTriggerLocator).click(); + cy.contains("Delete").should("be.visible").click(); + cy.contains("Are you sure?").should("be.visible").click(); + } + public RenameJSObjFromExplorer(entityName: string, renameVal: string) { this.ee.ActionContextMenuByEntityName({ entityNameinLeftSidebar: entityName, diff --git a/app/client/cypress/support/index.d.ts b/app/client/cypress/support/index.d.ts index 8b99e6368d71..334899818c80 100644 --- a/app/client/cypress/support/index.d.ts +++ b/app/client/cypress/support/index.d.ts @@ -307,5 +307,7 @@ declare namespace Cypress { name: string, options?: Partial, ); + + updateCodeInput(selector: string, value: string); } } diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx index d42f0fcdd2b0..5e1b2cf1d6e7 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx @@ -159,6 +159,11 @@ describe("IDE Render: JS", () => { // Check if the Add new button is shown getByTestId("t--add-item"); + + // check bottom tabs + getByRole("tab", { name: /response/i }); + getByRole("tab", { name: /logs/i }); + getByRole("tab", { name: /linter/i }); }); it("Renders JS routes in Split Screen", async () => { @@ -206,6 +211,10 @@ describe("IDE Render: JS", () => { // Check if the Add new button is shown getByTestId("t--ide-tabs-add-button"); + + // check bottom tabs + getByRole("tab", { name: /response/i }); + getByRole("tab", { name: /logs/i }); }); it("Renders JS add routes in Full Screen", () => { diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx index cf10c6cb9af3..97ac93702354 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx @@ -10,7 +10,7 @@ import { PostgresFactory } from "test/factories/Actions/Postgres"; import { sagasToRunForTests } from "test/sagas"; import { getIDETestState } from "test/factories/AppIDEFactoryUtils"; import { PageFactory } from "test/factories/PageFactory"; -import { screen, waitFor } from "@testing-library/react"; +import { waitFor } from "@testing-library/react"; import { GoogleSheetFactory } from "test/factories/Actions/GoogleSheetFactory"; const basePageId = "0123456789abcdef00000000"; @@ -170,6 +170,14 @@ describe("IDE URL rendering of Queries", () => { expect(getAllByRole("button", { name: /run/i })).toHaveLength(2); // Check if the Add new button is shown getByTestId("t--add-item"); + + // Check if the bottom view is rendered + + getByRole("tab", { name: /response/i, selected: true }); + + expect(getAllByRole("tab", { name: /headers/i })).toHaveLength(2); + getByRole("tab", { name: /logs/i }); + getByRole("tab", { name: /linter/i }); }); it("Renders Api routes in Split Screen", async () => { @@ -189,7 +197,7 @@ describe("IDE URL rendering of Queries", () => { ideView: EditorViewMode.SplitScreen, }); - const { getAllByRole, getAllByText, getByTestId } = render( + const { getAllByRole, getAllByText, getByRole, getByTestId } = render( , @@ -215,6 +223,15 @@ describe("IDE URL rendering of Queries", () => { expect(getAllByRole("button", { name: /run/i }).length).toBe(2); // Check if the Add new button is shown getByTestId("t--ide-tabs-add-button"); + + // Check if the bottom view is rendered + + getByRole("tab", { + name: /response/i, + selected: true, + }); + + expect(getAllByRole("tab", { name: /headers/i })).toHaveLength(2); }); it("Renders Api add routes in Full Screen", () => { @@ -362,6 +379,14 @@ describe("IDE URL rendering of Queries", () => { getByRole("button", { name: /run/i }); // Check if the Add new button is shown getByTestId("t--add-item"); + + // Check if the bottom view is rendered + + getByRole("tab", { name: /datasource/i, selected: true }); + + getByRole("tab", { name: /response/i }); + getByRole("tab", { name: /logs/i }); + getByRole("tab", { name: /linter/i }); }); it("Renders Postgres routes in Split screen", async () => { @@ -409,6 +434,12 @@ describe("IDE URL rendering of Queries", () => { getByRole("button", { name: /run/i }); // Check if the Add new button is shown getByTestId("t--ide-tabs-add-button"); + + // Check if the bottom view is rendered + + getByRole("tab", { name: /datasource/i, selected: true }); + + getByRole("tab", { name: /response/i }); }); it("Renders Postgres add routes in Full Screen", async () => { @@ -553,6 +584,14 @@ describe("IDE URL rendering of Queries", () => { getByRole("button", { name: /run/i }); // Check if the Add new button is shown getByTestId("t--add-item"); + + // Check if the bottom view is rendered + + getByRole("tab", { name: /datasource/i, selected: true }); + + getByRole("tab", { name: /response/i }); + getByRole("tab", { name: /logs/i }); + getByRole("tab", { name: /linter/i }); }); it("Renders Google Sheets routes in Split screen", async () => { @@ -573,7 +612,7 @@ describe("IDE URL rendering of Queries", () => { ideView: EditorViewMode.SplitScreen, }); - const { container, getAllByText, getByRole, getByTestId } = render( + const { getAllByText, getByRole, getByTestId } = render( , @@ -595,14 +634,18 @@ describe("IDE URL rendering of Queries", () => { getByTestId("t--ide-tab-sheets2").classList.contains("active"), ).toBe(true); - screen.logTestingPlaygroundURL(container); - // Check if the form is rendered getByTestId("t--uqi-editor-form"); // Check if run button is visible getByRole("button", { name: /run/i }); // Check if the Add new button is shown getByTestId("t--ide-tabs-add-button"); + + // Check if the bottom view is rendered + + getByRole("tab", { name: /datasource/i, selected: true }); + + getByRole("tab", { name: /response/i }); }); it("Renders Google Sheets add routes in Full Screen", async () => { diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx index 183b76c0a226..df7623c7948b 100644 --- a/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx +++ b/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx @@ -9,6 +9,7 @@ import "@testing-library/jest-dom"; import { PageFactory } from "test/factories/PageFactory"; import { APIFactory } from "test/factories/Actions/API"; import type { AppState } from "ee/reducers"; +import { act, within } from "@testing-library/react"; describe("EditorTabs render checks", () => { const page = PageFactory.build(); @@ -161,20 +162,27 @@ describe("EditorTabs render checks", () => { it("Render list view onclick of toggle in split view", () => { const anApi = APIFactory.build({ + name: "Api1", id: "api_id", baseId: "api_base_id", pageId: page.pageId, }); + const anApi2 = APIFactory.build({ + name: "Api2", + id: "api_id2", + baseId: "api_base_id2", + pageId: page.pageId, + }); const state = getIDETestState({ pages: [page], - actions: [anApi], + actions: [anApi, anApi2], ideView: EditorViewMode.SplitScreen, tabs: { [EditorEntityTab.QUERIES]: [anApi.baseId], [EditorEntityTab.JS]: [], }, }); - const { getByTestId } = renderComponent( + const { getByRole, getByTestId } = renderComponent( `/app/applicationSlug/pageSlug-${page.basePageId}/edit/queries/${anApi.baseId}`, state, ); @@ -183,6 +191,19 @@ describe("EditorTabs render checks", () => { // check list view expect(getByTestId("t--editorpane-list-view")).not.toBeNull(); + + act(() => { + fireEvent.change( + getByRole("textbox", { + name: /search/i, + }), + { target: { value: "Api2" } }, + ); + }); + const view = getByTestId("t--editorpane-list-view"); + + within(view).getByText("Api2"); + expect(within(view).queryByText("Api1")).toBeNull(); }); it("Render Add tab in split view", () => {