TESTING EXTERNAL SCRIPT: external merge request from Contributor

app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx

@@ -1,18 +1,45 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import { ThemeProvider } from "styled-components";
 import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
 import { lightTheme } from "selectors/themeSelectors";
 import { BrowserRouter as Router } from "react-router-dom";
-import { EditorViewMode } from "ee/entities/IDE/constants";
+import { EditorViewMode } from "@appsmith/entities/IDE/constants";
 import "@testing-library/jest-dom/extend-expect";
 import QueryDebuggerTabs from "./QueryDebuggerTabs";
-import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
+import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils";
+import { ActionResponse } from "api/ActionAPI";
 
 const mockStore = configureStore([]);
 
+const mockSuccessResponse: ActionResponse = {
+  body: ["Record 1", "Record 2"],
+  statusCode: "200",
+  dataTypes: [],
+  duration: "3000",
+  size: "200",
+  isExecutionSuccess: true,
+  headers: {
+    "Content-Type": ["application/json"],
+    "Cache-Control": ["no-cache"],
+  },
+};
+
+const mockFailedResponse: ActionResponse = {
+  body: [{ response: "Failed" }],
+  statusCode: "200",
+  dataTypes: [],
+  duration: "3000",
+  size: "200",
+  isExecutionSuccess: false,
+  headers: {
+    "Content-Type": ["application/json"],
+    "Cache-Control": ["no-cache"],
+  },
+};
+
 const storeState = {
   ...unitTestBaseMockStore,
   evaluations: {
@@ -53,8 +80,6 @@ const storeState = {
 };
 
 describe("ApiResponseView", () => {
-  // TODO: Fix this the next time the file is edited
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let store: any;
 
   beforeEach(() => {
@@ -87,4 +112,60 @@ describe("ApiResponseView", () => {
         ?.classList.contains("select-text"),
     ).toBe(true);
   });
+
+  it("should show record count as result if the query response returns records", () => {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              actionResponse={mockSuccessResponse}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    const expectedResultText = "Result: 2 Records";
+    const resultTextElement = screen.getByTestId("result-text");
+
+    expect(resultTextElement).toBeInTheDocument();
+    expect(resultTextElement?.textContent).toContain(expectedResultText);
+  });
+
+  it("should show error as result if the query response returns the error", () => {
+    render(
+      <Provider store={store}>
+        <ThemeProvider theme={lightTheme}>
+          <Router>
+            <QueryDebuggerTabs
+              actionName="Query1"
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              actionResponse={mockFailedResponse}
+              isRunning={false}
+              onRunClick={() => {}}
+            />
+          </Router>
+        </ThemeProvider>
+      </Provider>,
+    );
+
+    const expectedResultText = "Result: Error";
+    const resultTextElement = screen.getByTestId("result-text");
+
+    expect(resultTextElement).toBeInTheDocument();
+    expect(resultTextElement?.textContent).toContain(expectedResultText);
+  });
 });

app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx

@@ -242,13 +242,19 @@ function QueryDebuggerTabs({
       onHideClick={onToggle}
       setHeight={setQueryResponsePaneHeight}
     >
-      {output && !!output.length && (
+       {output && !!output.length && (
         <ResultsCount>
-          <Text type={TextType.P3}>
+          <Text data-testid="result-text" type={TextType.P3}>
             Result:
-            <Text type={TextType.H5}>{` ${output.length} Record${
-              output.length > 1 ? "s" : ""
-            }`}</Text>
+            {actionResponse?.isExecutionSuccess ? (
+              <Text type={TextType.H5}>{` ${output.length} Record${
+                output.length > 1 ? "s" : ""
+              }`}</Text>
+            ) : (
+              <Text type={TextType.H5} color="red">
+                {" Error"}
+              </Text>
+            )}
           </Text>
         </ResultsCount>
       )}