diff --git a/app/client/src/components/editorComponents/ApiResponseView.test.tsx b/app/client/src/components/editorComponents/ApiResponseView.test.tsx new file mode 100644 index 000000000000..43825bb60280 --- /dev/null +++ b/app/client/src/components/editorComponents/ApiResponseView.test.tsx @@ -0,0 +1,91 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import ApiResponseView from "./ApiResponseView"; +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 "@appsmith/entities/IDE/constants"; +import "@testing-library/jest-dom/extend-expect"; + +jest.mock("./EntityBottomTabs", () => ({ + __esModule: true, + default: () => <div />, +})); + +const mockStore = configureStore([]); + +const storeState = { + ...unitTestBaseMockStore, + evaluations: { + tree: {}, + }, + ui: { + ...unitTestBaseMockStore.ui, + gitSync: { + branches: [], + fetchingBranches: false, + isDeploying: false, + protectedBranchesLoading: false, + protectedBranches: [], + }, + editor: { + isPreviewMode: false, + }, + users: { + featureFlag: { + data: {}, + overriddenFlags: {}, + }, + }, + ide: { + view: EditorViewMode.FullScreen, + }, + debugger: { + context: { + errorCount: 0, + }, + }, + apiPane: { + debugger: { + open: true, + responseTabHeight: 200, + selectedTab: "response", + }, + }, + }, +}; + +describe("ApiResponseView", () => { + let store: any; + + beforeEach(() => { + store = mockStore(storeState); + }); + + it("the container should have class select-text to enable the selection of text for user", () => { + const { container } = render( + <Provider store={store}> + <ThemeProvider theme={lightTheme}> + <Router> + <ApiResponseView + apiName="Api1" + isRunning={false} + onRunClick={() => {}} + responseDataTypes={[]} + responseDisplayFormat={{ title: "JSON", value: "JSON" }} + /> + </Router> + </ThemeProvider> + </Provider>, + ); + + expect( + container + .querySelector(".t--api-bottom-pane-container") + ?.classList.contains("select-text"), + ).toBe(true); + }); +}); diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index 1f9fbbc9472a..94c6b36bbbd1 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -540,7 +540,10 @@ function ApiResponseView(props: Props) { if (!open) return null; return ( - <ResponseContainer className="t--api-bottom-pane-container" ref={panelRef}> + <ResponseContainer + className="t--api-bottom-pane-container select-text" + ref={panelRef} + > <Resizer initialHeight={responseTabHeight} onResizeComplete={(height: number) => { diff --git a/app/client/src/components/editorComponents/JSResponseView.test.tsx b/app/client/src/components/editorComponents/JSResponseView.test.tsx index 1c3973e28e1a..f1a3499e58fa 100644 --- a/app/client/src/components/editorComponents/JSResponseView.test.tsx +++ b/app/client/src/components/editorComponents/JSResponseView.test.tsx @@ -141,4 +141,36 @@ describe("JSResponseView", () => { // nothing should be rendered here since the implementation for component is in EE code expect(queryByText(document.body, EMPTY_RESPONSE_LAST_HALF())).toBeNull(); }); + + it("the container should have class select-text to enable the selection of text for user", () => { + // mock the return value of isBrowserExecutionAllowed + ( + actionExecutionUtils.isBrowserExecutionAllowed as jest.Mock + ).mockImplementation(() => false); + + const { container } = render( + <Provider store={store}> + <ThemeProvider theme={lightTheme}> + <Router> + <JSResponseView + currentFunction={null} + disabled={false} + errors={[]} + isLoading={false} + jsCollectionData={collectionData} + onButtonClick={function (): void { + throw new Error("Function not implemented."); + }} + /> + </Router> + </ThemeProvider> + </Provider>, + ); + + expect( + container + .querySelector(".t--js-editor-bottom-pane-container") + ?.classList.contains("select-text"), + ).toBe(true); + }); }); diff --git a/app/client/src/components/editorComponents/JSResponseView.tsx b/app/client/src/components/editorComponents/JSResponseView.tsx index 3659f2c471cc..2e8580edf879 100644 --- a/app/client/src/components/editorComponents/JSResponseView.tsx +++ b/app/client/src/components/editorComponents/JSResponseView.tsx @@ -336,7 +336,7 @@ function JSResponseView(props: Props) { // Do not render if header tab is selected in the bottom bar. return open && selectedTab ? ( <ResponseContainer - className="t--js-editor-bottom-pane-container" + className="t--js-editor-bottom-pane-container select-text" ref={panelRef} > <Resizer diff --git a/app/client/src/pages/Editor/DataSourceEditor/Debugger.test.tsx b/app/client/src/pages/Editor/DataSourceEditor/Debugger.test.tsx new file mode 100644 index 000000000000..5a6dc3b93abd --- /dev/null +++ b/app/client/src/pages/Editor/DataSourceEditor/Debugger.test.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import { render } 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 "@appsmith/entities/IDE/constants"; +import "@testing-library/jest-dom/extend-expect"; +import Debugger from "./Debugger"; + +jest.mock("components/editorComponents/Debugger/ErrorLogs/ErrorLog", () => ({ + __esModule: true, + default: () => <div />, +})); + +const mockStore = configureStore([]); + +const storeState = { + ...unitTestBaseMockStore, + evaluations: { + tree: {}, + }, + ui: { + ...unitTestBaseMockStore.ui, + users: { + featureFlag: { + data: {}, + overriddenFlags: {}, + }, + }, + ide: { + view: EditorViewMode.FullScreen, + }, + debugger: { + isOpen: true, + errors: {}, + expandId: "", + hideErrors: false, + context: { + scrollPosition: 0, + selectedDebuggerTab: "ERROR", + responseTabHeight: 252.1953125, + errorCount: 0, + selectedDebuggerFilter: "error", + }, + logs: [], + }, + }, +}; + +describe("ApiResponseView", () => { + let store: any; + + beforeEach(() => { + store = mockStore(storeState); + }); + + it("the container should have class select-text to enable the selection of text for user", () => { + const { container } = render( + <Provider store={store}> + <ThemeProvider theme={lightTheme}> + <Router> + <Debugger /> + </Router> + </ThemeProvider> + </Provider>, + ); + + expect( + container + .querySelector(".t--datasource-bottom-pane-container") + ?.classList.contains("select-text"), + ).toBe(true); + }); +}); diff --git a/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx b/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx index f19ef75391d8..b4e9ef1bbd47 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx @@ -156,7 +156,7 @@ export default function Debugger() { return shouldRender ? ( <TabbedViewContainer - className="t--datasource-bottom-pane-container" + className="t--datasource-bottom-pane-container select-text" ref={panelRef} > <Resizable diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx new file mode 100644 index 000000000000..f0589e3f8252 --- /dev/null +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.test.tsx @@ -0,0 +1,88 @@ +import React from "react"; +import { render } 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 "@appsmith/entities/IDE/constants"; +import "@testing-library/jest-dom/extend-expect"; +import QueryDebuggerTabs from "./QueryDebuggerTabs"; +import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils"; + +const mockStore = configureStore([]); + +const storeState = { + ...unitTestBaseMockStore, + evaluations: { + tree: {}, + }, + entities: { + plugins: { + list: [], + }, + datasources: { + structure: {}, + }, + }, + ui: { + ...unitTestBaseMockStore.ui, + users: { + featureFlag: { + data: {}, + overriddenFlags: {}, + }, + }, + ide: { + view: EditorViewMode.FullScreen, + }, + debugger: { + context: { + errorCount: 0, + }, + }, + queryPane: { + debugger: { + open: true, + responseTabHeight: 200, + selectedTab: "response", + }, + }, + }, +}; + +describe("ApiResponseView", () => { + let store: any; + + beforeEach(() => { + store = mockStore(storeState); + }); + + it("the container should have class select-text to enable the selection of text for user", () => { + const { container } = render( + <Provider store={store}> + <ThemeProvider theme={lightTheme}> + <Router> + <QueryDebuggerTabs + actionName="Query1" + actionSource={{ + id: "ID1", + name: "Query1", + type: ENTITY_TYPE.ACTION, + }} + isRunning={false} + onRunClick={() => {}} + /> + </Router> + </ThemeProvider> + </Provider>, + ); + + expect( + container + .querySelector(".t--query-bottom-pane-container") + ?.classList.contains("select-text"), + ).toBe(true); + }); +}); diff --git a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx index 701584f8b414..26149a7d76bd 100644 --- a/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx +++ b/app/client/src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx @@ -247,7 +247,7 @@ function QueryDebuggerTabs({ return ( <TabbedViewContainer - className="t--query-bottom-pane-container" + className="t--query-bottom-pane-container select-text" ref={panelRef} > <Resizable