chore: Add pending tests for side by side (appsmithorg#38881)

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: [],

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

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}`;
 }

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,

cypress/support/index.d.ts

@@ -307,5 +307,7 @@ declare namespace Cypress {
       name: string,
       options?: Partial<Cypress.ScreenshotOptions>,
     );
+
+    updateCodeInput(selector: string, value: string);
   }
 }

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", () => {

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(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -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(
         <Route path={BUILDER_PATH}>
           <IDE />
         </Route>,
@@ -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 () => {

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", () => {