From 3d47dbcef4afac039f14a52cbd890f1978171d80 Mon Sep 17 00:00:00 2001 From: Raushan Kumar Gupta Date: Fri, 2 Aug 2024 15:21:33 +0530 Subject: [PATCH 1/5] fix:query response count on error in QueryDebuggerTabs --- .../QueryEditor/QueryDebuggerTabs.test.tsx | 83 +++++++++++++++++++ .../Editor/QueryEditor/QueryDebuggerTabs.tsx | 16 ++-- 2 files changed, 94 insertions(+), 5 deletions(-) diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index 3ee58ee28a21..f41ea06b4db8 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -10,9 +10,36 @@ import { EditorViewMode } from "@appsmith/entities/IDE/constants"; import "@testing-library/jest-dom/extend-expect"; import QueryDebuggerTabs from "./QueryDebuggerTabs"; import { ENTITY_TYPE } from "@appsmith/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: { @@ -87,4 +114,60 @@ describe("ApiResponseView", () => { ?.classList.contains("select-text"), ).toBe(true); }); + + it("should show record count as result if the query response returns records", () => { + const { container } = render( + + + + {}} + /> + + + , + ); + + const expectedResultText = "Result: 2 Records"; + const resultTextElement = container.querySelector(".result-text"); + + expect(resultTextElement).toBeInTheDocument(); + expect(resultTextElement?.textContent).toContain(expectedResultText); + }); + + it("should show error as result if the query response returns the error", () => { + const { container } = render( + + + + {}} + /> + + + , + ); + + const expectedResultText = "Result: Error"; + const resultTextElement = container.querySelector(".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 b3f7578d0c6f..8962be0770be 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -242,13 +242,19 @@ function QueryDebuggerTabs({ onHideClick={onToggle} setHeight={setQueryResponsePaneHeight} > - {output && !!output.length && ( + {output && !!output.length && ( - + Result: - {` ${output.length} Record${ - output.length > 1 ? "s" : "" - }`} + {actionResponse?.isExecutionSuccess ? ( + {` ${output.length} Record${ + output.length > 1 ? "s" : "" + }`} + ) : ( + + {" Error"} + + )} )} From 105b64d8e3caf7f704dc8f452bdeca90e8d47b06 Mon Sep 17 00:00:00 2001 From: Raushan Kumar Gupta Date: Wed, 25 Sep 2024 14:27:22 +0530 Subject: [PATCH 2/5] fix: change the result-text to data-testid from classname --- .../QueryEditor/QueryDebuggerTabs.test.tsx | 18 ++++++++---------- .../Editor/QueryEditor/QueryDebuggerTabs.tsx | 2 +- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index 9e42b26b7fa4..54103f8bd5d1 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -1,16 +1,16 @@ 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 type { ActionResponse } from "api/ActionAPI"; -import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils"; +import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils"; +import { ActionResponse } from "api/ActionAPI"; const mockStore = configureStore([]); @@ -80,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(() => { @@ -116,7 +114,7 @@ describe("ApiResponseView", () => { }); it("should show record count as result if the query response returns records", () => { - const { container } = render( + render( @@ -137,14 +135,14 @@ describe("ApiResponseView", () => { ); const expectedResultText = "Result: 2 Records"; - const resultTextElement = container.querySelector(".result-text"); + 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", () => { - const { container } = render( + render( @@ -165,7 +163,7 @@ describe("ApiResponseView", () => { ); const expectedResultText = "Result: Error"; - const resultTextElement = container.querySelector(".result-text"); + 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 e2df2cb41440..594cb3eb8c1a 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -244,7 +244,7 @@ function QueryDebuggerTabs({ > {output && !!output.length && ( - + Result: {actionResponse?.isExecutionSuccess ? ( {` ${output.length} Record${ From 51cee7d158528a4904835edd037134110178747d Mon Sep 17 00:00:00 2001 From: Raushan Kumar Gupta Date: Wed, 25 Sep 2024 15:01:08 +0530 Subject: [PATCH 3/5] Merged the release code and fixed the conflicts --- .../src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index 54103f8bd5d1..c0ca8262ab06 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -6,11 +6,11 @@ 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 "@appsmith/entities/IDE/constants"; import "@testing-library/jest-dom/extend-expect"; import QueryDebuggerTabs from "./QueryDebuggerTabs"; -import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils"; -import { ActionResponse } from "api/ActionAPI"; +import type { ActionResponse } from "api/ActionAPI"; +import { ENTITY_TYPE } from "ce/entities/AppsmithConsole/utils"; +import { EditorViewMode } from "ce/entities/IDE/constants"; const mockStore = configureStore([]); From e3215acd978899dd6cddcf4f6afb59c12a62e234 Mon Sep 17 00:00:00 2001 From: Raushan Kumar Gupta Date: Sun, 29 Sep 2024 23:27:58 +0530 Subject: [PATCH 4/5] fix: prettier issue --- .../Editor/QueryEditor/QueryDebuggerTabs.test.tsx | 11 ++++++----- .../pages/Editor/QueryEditor/QueryDebuggerTabs.tsx | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index c0ca8262ab06..5d4f70a1586c 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -2,6 +2,7 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import configureStore from "redux-mock-store"; import { Provider } from "react-redux"; +import type { AnyAction, Store } from "redux"; import { ThemeProvider } from "styled-components"; import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils"; import { lightTheme } from "selectors/themeSelectors"; @@ -9,8 +10,8 @@ import { BrowserRouter as Router } from "react-router-dom"; import "@testing-library/jest-dom/extend-expect"; import QueryDebuggerTabs from "./QueryDebuggerTabs"; import type { ActionResponse } from "api/ActionAPI"; -import { ENTITY_TYPE } from "ce/entities/AppsmithConsole/utils"; -import { EditorViewMode } from "ce/entities/IDE/constants"; +import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils"; +import { EditorViewMode } from "ee/entities/IDE/constants"; const mockStore = configureStore([]); @@ -80,7 +81,7 @@ const storeState = { }; describe("ApiResponseView", () => { - let store: any; + let store: Store; beforeEach(() => { store = mockStore(storeState); @@ -120,12 +121,12 @@ describe("ApiResponseView", () => { {}} /> @@ -148,12 +149,12 @@ describe("ApiResponseView", () => { {}} /> diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index 594cb3eb8c1a..4a2a5639877b 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -242,7 +242,7 @@ function QueryDebuggerTabs({ onHideClick={onToggle} setHeight={setQueryResponsePaneHeight} > - {output && !!output.length && ( + {output && !!output.length && ( Result: @@ -251,7 +251,7 @@ function QueryDebuggerTabs({ output.length > 1 ? "s" : "" }`} ) : ( - + {" Error"} )} From 9766ed4e0f86217f5b504f838d97655064160928 Mon Sep 17 00:00:00 2001 From: Raushan Kumar Gupta Date: Fri, 25 Oct 2024 15:47:38 +0530 Subject: [PATCH 5/5] fix: used color from design system & removed any from test --- .../pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx | 8 +++----- .../src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx index c7620701fe4e..16f713b5ca61 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -2,16 +2,15 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import configureStore from "redux-mock-store"; import { Provider } from "react-redux"; -import type { AnyAction, Store } from "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 "@testing-library/jest-dom/extend-expect"; import QueryDebuggerTabs from "./QueryDebuggerTabs"; -import type { ActionResponse } from "api/ActionAPI"; import { ENTITY_TYPE } from "ee/entities/AppsmithConsole/utils"; -import { EditorViewMode } from "ee/entities/IDE/constants"; +import type { ActionResponse } from "api/ActionAPI"; const mockStore = configureStore([]); @@ -81,7 +80,7 @@ const storeState = { }; describe("ApiResponseView", () => { - let store: Store; + let store = mockStore(storeState); beforeEach(() => { store = mockStore(storeState); @@ -113,7 +112,6 @@ describe("ApiResponseView", () => { ?.classList.contains("select-text"), ).toBe(true); }); - it("should show record count as result if the query response returns records", () => { render( diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index 36b4be09717c..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; @@ -276,9 +280,7 @@ function QueryDebuggerTabs({ output.length > 1 ? "s" : "" }`} ) : ( - - {" Error"} - + {" Error"} )}