TESTING EXTERNAL SCRIPT: external merge request from Contributor

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

@@ -1,5 +1,5 @@
 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";
@@ -10,9 +10,36 @@ import { EditorViewMode } from "ee/entities/IDE/constants";
 import "@testing-library/jest-dom/extend-expect";
 import QueryDebuggerTabs from "./QueryDebuggerTabs";
 import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils";
+import type { 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: {
@@ -54,9 +81,7 @@ 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;
+  let store = mockStore(storeState);
 
   beforeEach(() => {
     store = mockStore(storeState);
@@ -88,4 +113,59 @@ 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"
+              actionResponse={mockSuccessResponse}
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              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"
+              actionResponse={mockFailedResponse}
+              actionSource={{
+                id: "ID1",
+                name: "Query1",
+                type: ENTITY_TYPE.ACTION,
+              }}
+              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

@@ -44,6 +44,10 @@ const ResultsCount = styled.div`
   color: var(--ads-v2-color-fg);
 `;
 
+const ErrorText = styled(Text)`
+  color: var(--ads-v2-colors-action-error-label-default-fg);
+`;
+
 interface QueryDebuggerTabsProps {
   actionSource: SourceEntity;
   currentActionConfig?: Action;
@@ -274,11 +278,15 @@ function QueryDebuggerTabs({
     >
       {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>
+            ) : (
+              <ErrorText type={TextType.H5}>{" Error"}</ErrorText>
+            )}
           </Text>
         </ResultsCount>
       )}