From f1d14bf4b834c47285f4c47a65745bf431543fcf Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 8 Jan 2025 14:19:40 -0300 Subject: [PATCH] fix: node minimize/expand functionality and regression tests (#5579) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ♻️ (nodeToolbarComponent/index.tsx): refactor handleSelectChange function to improve readability and maintainability by extracting switch cases into separate functions and adding dependencies to useCallback for better performance. * ✨ (GenericNode/index.tsx): Add data-testid attribute to improve testing capabilities for showing/hiding node content ✨ (general-bugs-minimize-state-error.spec.ts): Add test case to ensure user can minimize and expand a node multiple times without errors * 📝 (nodeToolbarComponent/index.tsx): Remove unnecessary dataTestId prop from SelectItem component 📝 (types/components/index.ts): Change dataTestId prop in toolbarSelectItemProps to be optional by adding a question mark (?) * 📝 (general-bugs-minimize-state-error.spec.ts): refactor test case to use a reusable function for toggling node state between minimize and expand actions. This improves code readability and reduces duplication in the test script. --- .../src/CustomNodes/GenericNode/index.tsx | 2 +- .../components/nodeToolbarComponent/index.tsx | 172 ++++++++++-------- src/frontend/src/types/components/index.ts | 2 +- .../general-bugs-minimize-state-error.spec.ts | 46 +++++ 4 files changed, 144 insertions(+), 78 deletions(-) create mode 100644 src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 4015ca102..eccef0d53 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -412,7 +412,7 @@ function GenericNode({ {renderNodeIcon()}
{renderNodeName()}
-
+
{!showNode && ( <> {renderInputParameters()} diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 84cbc4298..4b7af3c23 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -341,83 +341,104 @@ const NodeToolbarComponent = memo( const [selectedValue, setSelectedValue] = useState(null); - const handleSelectChange = useCallback((event) => { - setSelectedValue(event); + const handleSelectChange = useCallback( + (event) => { + setSelectedValue(event); - switch (event) { - case "save": - saveComponent(); - break; - case "freeze": - freezeFunction(); - break; - case "freezeAll": - FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id }); - break; - case "code": - setOpenModal(!openModal); - break; - case "advanced": - setShowModalAdvanced(true); - break; - case "show": - takeSnapshot(); - handleMinimize(); - break; - case "Share": - shareComponent(); - break; - case "Download": - downloadNode(flowComponent!); - break; - case "SaveAll": - addFlow({ - flow: flowComponent, - override: false, - }); - break; - case "documentation": - openDocs(); - break; - case "disabled": - break; - case "ungroup": - handleungroup(); - break; - case "override": - setShowOverrideModal(true); - break; - case "delete": - deleteNode(data.id); - break; - case "update": - updateNode(); - break; - case "copy": - const node = nodes.filter((node) => node.id === data.id); - setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] }); - break; - case "duplicate": - paste( - { - nodes: [nodes.find((node) => node.id === data.id)!], - edges: [], - }, - { - x: 50, - y: 10, - paneX: nodes.find((node) => node.id === data.id)?.position.x, - paneY: nodes.find((node) => node.id === data.id)?.position.y, - }, - ); - break; - case "toolMode": - handleActivateToolMode(); - break; - } + switch (event) { + case "save": + saveComponent(); + break; + case "freeze": + freezeFunction(); + break; + case "freezeAll": + FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id }); + break; + case "code": + setOpenModal(!openModal); + break; + case "advanced": + setShowModalAdvanced(true); + break; + case "show": + takeSnapshot(); + handleMinimize(); + break; + case "Share": + shareComponent(); + break; + case "Download": + downloadNode(flowComponent!); + break; + case "SaveAll": + addFlow({ + flow: flowComponent, + override: false, + }); + break; + case "documentation": + openDocs(); + break; + case "disabled": + break; + case "ungroup": + handleungroup(); + break; + case "override": + setShowOverrideModal(true); + break; + case "delete": + deleteNode(data.id); + break; + case "update": + updateNode(); + break; + case "copy": + const node = nodes.filter((node) => node.id === data.id); + setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] }); + break; + case "duplicate": + paste( + { + nodes: [nodes.find((node) => node.id === data.id)!], + edges: [], + }, + { + x: 50, + y: 10, + paneX: nodes.find((node) => node.id === data.id)?.position.x, + paneY: nodes.find((node) => node.id === data.id)?.position.y, + }, + ); + break; + case "toolMode": + handleActivateToolMode(); + break; + } - setSelectedValue(null); - }, []); + setSelectedValue(null); + }, + [ + saveComponent, + freezeFunction, + FreezeAllVertices, + setOpenModal, + setShowModalAdvanced, + handleMinimize, + shareComponent, + downloadNode, + addFlow, + openDocs, + handleungroup, + setShowOverrideModal, + deleteNode, + updateNode, + setLastCopiedSelection, + paste, + handleActivateToolMode, + ], + ); const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue({ node: data.node!, @@ -692,7 +713,6 @@ const NodeToolbarComponent = memo( } value={showNode ? "Minimize" : "Expand"} icon={showNode ? "Minimize2" : "Maximize2"} - dataTestId="minimize-button-modal" /> )} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 9da2cf7c1..d32bd1af9 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -784,7 +784,7 @@ export type toolbarSelectItemProps = { value: string; icon: string; style?: string; - dataTestId: string; + dataTestId?: string; ping?: boolean; shortcut: string; }; diff --git a/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts b/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts new file mode 100644 index 000000000..970595a8d --- /dev/null +++ b/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts @@ -0,0 +1,46 @@ +import { expect, Page, test } from "@playwright/test"; +import { awaitBootstrapTest } from "../../utils/await-bootstrap-test"; + +async function toggleNodeState(page: Page, action: "minimize" | "expand") { + const expectedCount = action === "minimize" ? 0 : 1; + await page.getByTestId("more-options-modal").click(); + await page.getByTestId(`${action}-button-modal`).click(); + expect(await page.getByTestId("show-node-content").count()).toBe( + expectedCount, + ); +} + +test( + "user must be able to minimize and expand a node how many times as they want", + { tag: ["@release", "@components"] }, + async ({ page }) => { + await awaitBootstrapTest(page); + await page.getByTestId("blank-flow").click(); + + await page.waitForSelector('[data-testid="fit_view"]', { + timeout: 100000, + }); + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("text output"); + + await page + .getByTestId("outputsText Output") + .hover() + .then(async () => { + await page.getByTestId("add-component-button-text-output").click(); + }); + + await page.waitForSelector('[data-testid="title-Text Output"]', { + timeout: 3000, + }); + + expect(await page.getByText("Toolset", { exact: true }).count()).toBe(0); + await page.getByTestId("title-Text Output").click(); + expect(await page.getByTestId("show-node-content").count()).toBe(1); + + for (let i = 0; i < 5; i++) { + await toggleNodeState(page, "minimize"); + await toggleNodeState(page, "expand"); + } + }, +);