diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index 23de0834cd0d..16f713b5ca61 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/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: { @@ -53,9 +80,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); @@ -87,4 +112,59 @@ describe("ApiResponseView", () => { ?.classList.contains("select-text"), ).toBe(true); }); + it("should show record count as result if the query response returns records", () => { + render( + + + + {}} + /> + + + , + ); + + 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( + + + + {}} + /> + + + , + ); + + const expectedResultText = "Result: Error"; + const resultTextElement = screen.getByTestId("result-text"); + + expect(resultTextElement).toBeInTheDocument(); + expect(resultTextElement?.textContent).toContain(expectedResultText); + }); }); diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index 7d283d140f59..b7c29e5351c5 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -43,6 +43,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; @@ -269,11 +273,15 @@ function QueryDebuggerTabs({ > {output && !!output.length && ( - + Result: - {` ${output.length} Record${ - output.length > 1 ? "s" : "" - }`} + {actionResponse?.isExecutionSuccess ? ( + {` ${output.length} Record${ + output.length > 1 ? "s" : "" + }`} + ) : ( + {" Error"} + )} )}