jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: update ReactFlow to v12 (#5317)

Browse source 
* Added xyflow and updated imports

* Fix changing node.width to node.measured.width

* Updated NodeType to follow new API

* Fixed note node data type

* Created AllNodeType to contain note node type

* Changed flow types to follow new type from reactflow 12

* Updated flowStore to work with new types

* Updated flowStore and reactFlowUtils to work with custom edge type

* Updated updateAllNodes to use new type

* Updated PageComponent to follow new names for node dragging and edge reconnect

* Made selected prop be optional

* Changed reactFlowInstance to have nodes and edges type

* Updated updateAllComponent to follow new types

* Updated ReactFlowUtils with new types

* Updated reactFlowUtils type

* Updated all reactFlowUtils to be generic

* Updated handleRenderComponent with Connection type

* Updated node description and name with null checks for names

* Added check if node is genericNode on nodeOutputField

* Updated note node type

* Updated nodestatus with selected null check

* Updated notenode with new node type

* Update NodeType imports to be AllNodeType

* Fix more lint issues

* Fixed react flow button css

* ✨ (freeze.spec.ts): add zoomOut utility function to handle zooming out in tests for better code reusability and readability
📝 (decisionFlow.spec.ts): import zoomOut utility function to handle zooming out in tests for better code reusability and readability
📝 (zoom-out.ts): create zoomOut utility function to handle zooming out in tests for better code reusability and readability

* 🐛 (generalBugs-shard-10.spec.ts): fix test to wait for the element with class "border-ring-frozen" to be visible before asserting its count

* 📝 (generalBugs-shard-10.spec.ts): remove unnecessary locator click on element with id 'react-flow-id' to improve test reliability and maintainability

* 📝 (SelectionMenuComponent): add data-testid attribute to differentiate error-group-node and group-node components
📝 (similarity.spec.ts): refactor dragTo calls to use targetPosition for better accuracy, replace zoom_out clicks with zoomOut function, updateOldComponents function to handle outdated components
📝 (generalBugs-shard-5.spec.ts): replace zoom_out clicks with zoomOut function, add waitForSelector for group-node before clicking, remove unnecessary mouse interactions
📝 (intComponent.spec.ts): replace zoom_out clicks with zoomOut function, click on div-generic-node component
📝 (keyPairListComponent.spec.ts): click on div-generic-node component, adjustScreenView function call
📝 (nestedComponent.spec.ts): remove unnecessary click on react-flow-id element
📝 (generalBugs-shard-7.spec.ts): replace zoom_out clicks with zoomOut function

* ✨ (stop-building.spec.ts): Add new utility functions to improve code modularity and readability
🔧 (stop-building.spec.ts): Refactor drag and drop operations to use utility functions for better maintainability
🔧 (stop-building.spec.ts): Refactor zoom out operations to use utility function for consistency
🔧 (stop-building.spec.ts): Refactor component positioning operations to use utility functions for clarity
🔧 (stop-building.spec.ts): Refactor outdated components and filled API keys handling to use utility functions for reusability
🔧 (stop-building.spec.ts): Refactor fit view operation to use utility function for consistency

* ✨ (generalBugs-shard-9.spec.ts): refactor test to use initialGPTsetup function for GPT setup instead of manual steps to improve code readability and maintainability

* ✨ (store-shard-2.spec.ts): Increase timeout for clicking "api-key-button-store" to 200000ms for better test stability
✨ (deleteComponents.spec.ts, deleteFlows.spec.ts, store-shard-1.spec.ts, store-shard-3.spec.ts): Increase timeout for clicking "api-key-button-store" to 200000ms for better test stability
✨ (store-shard-1.spec.ts, store-shard-3.spec.ts): Remove unnecessary waitForSelector and add timeout of 200000ms for clicking "api-key-button-store" for better test stability

* ✨ (fileUploadComponent.spec.ts): update dragTo method calls with targetPosition option to specify the position of the drag action

* ✨ (decisionFlow.spec.ts): add explicit wait for an element to be attached before interacting with it to improve test reliability
🐛 (sticky-notes.spec.ts): fix test by adding keyboard press to simulate pressing the Escape key to close a modal before checking text length

* ✅ (sticky-notes.spec.ts): update assertion to use 'toHaveCount' matcher for improved test readability and reliability

* Added function to make controls horizontal

* ✨ (sticky-notes.spec.ts): update selector for textMarkdown to improve test reliability and readability

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
This commit is contained in:
Lucas Oliveira 2024-12-18 16:40:13 -03:00 • committed by GitHub
commit 7d6d41aa87
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
74 changed files with 686 additions and 760 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/frontend/tests/core/features/freeze.spec.ts
View file

@ -1,5 +1,6 @@
import { expect, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { zoomOut } from "../../utils/zoom-out";
test(
"user must be able to freeze a component",
@ -18,23 +19,14 @@ test(
timeout: 1000,
});
await zoomOut(page, 3);
await page
.getByTestId("inputsText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});
await page.mouse.up();
//second component
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("url");
await page.waitForSelector('[data-testid="dataURL"]', {
@ -43,19 +35,10 @@ test(
await page
.getByTestId("dataURL")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 300, y: 300 },
});
await page.mouse.up();
//third component
await page.getByTestId("sidebar-search-input").click();
@ -66,19 +49,10 @@ test(
await page
.getByTestId("processingSplit Text")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 350, y: 100 },
});
await page.mouse.up();
//fourth component
await page.getByTestId("sidebar-search-input").click();
@ -89,18 +63,11 @@ test(
await page
.getByTestId("processingParse Data")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 50, y: 300 },
});
await page.mouse.up();
await page.getByTestId("zoom_out").click();
//fifth component
@ -112,18 +79,11 @@ test(
await page
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 600, y: 200 },
});
await page.mouse.up();
await page.getByTestId("fit_view").click();
let outdatedComponents = await page
.getByTestId("icon-AlertTriangle")
@ -144,6 +104,7 @@ test(
}
await page.getByTestId("fit_view").click();
await zoomOut(page, 2);
//connection 1
const urlOutput = await page
@ -169,8 +130,6 @@ test(
await splitTextInput.hover();
await page.mouse.up();
await page.getByTestId("fit_view").click();
//connection 3
const splitTextOutput = await page
.getByTestId("handle-splittext-shownode-chunks-right")
@ -195,8 +154,6 @@ test(
await chatOutputInput.hover();
await page.mouse.up();
await page.getByTestId("fit_view").click();
await page
.getByTestId("textarea_str_input_value")
.first()

90
src/frontend/tests/core/features/stop-building.spec.ts
View file

@ -1,6 +1,8 @@
import { test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { removeOldApiKeys } from "../../utils/remove-old-api-keys";
import { updateOldComponents } from "../../utils/update-old-components";
import { zoomOut } from "../../utils/zoom-out";
// TODO: fix this test
test(
"user must be able to stop a building",
@ -16,18 +18,11 @@ test(
await page
.getByTestId("inputsText Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 0, y: 0 },
});
await page.mouse.up();
await zoomOut(page, 3);
//second component
@ -36,19 +31,10 @@ test(
await page
.getByTestId("dataURL")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 200 },
});
await page.mouse.up();
//third component
await page.getByTestId("sidebar-search-input").click();
@ -56,19 +42,10 @@ test(
await page
.getByTestId("processingSplit Text")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 300, y: 300 },
});
await page.mouse.up();
//fourth component
await page.getByTestId("sidebar-search-input").click();
@ -76,19 +53,10 @@ test(
await page
.getByTestId("processingParse Data")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 400 },
});
await page.mouse.up();
//fifth component
await page.getByTestId("sidebar-search-input").click();
@ -96,37 +64,17 @@ test(
await page
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.getByTestId("zoom_out").click();
await page
.locator('//*[@id="react-flow-id"]')
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 300);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 600, y: 300 },
});
await page.mouse.up();
let outdatedComponents = await page
.getByTestId("icon-AlertTriangle")
.count();
while (outdatedComponents > 0) {
await page.getByTestId("icon-AlertTriangle").first().click();
outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
}
let filledApiKey = await page.getByTestId("remove-icon-badge").count();
while (filledApiKey > 0) {
await page.getByTestId("remove-icon-badge").first().click();
await page.waitForTimeout(1000);
filledApiKey = await page.getByTestId("remove-icon-badge").count();
}
await updateOldComponents(page);
await removeOldApiKeys(page);
await page.getByTestId("fit_view").click();
await zoomOut(page, 2);
//connection 1
const urlOutput = await page
.getByTestId("handle-url-shownode-data-right")
@ -151,8 +99,6 @@ test(
await splitTextInput.hover();
await page.mouse.up();
await page.getByTestId("fit_view").click();
//connection 3
const splitTextOutput = await page
.getByTestId("handle-splittext-shownode-chunks-right")

8
src/frontend/tests/core/features/store-shard-2.spec.ts
View file

@ -22,7 +22,9 @@ test(
await page.getByTestId("button-store").click();
await page.waitForTimeout(1000);
await page.getByTestId("api-key-button-store").click();
await page.getByTestId("api-key-button-store").click({
timeout: 200000,
});
await page
.getByPlaceholder("Insert your API Key")
@ -83,7 +85,9 @@ test("should share component with share button", async ({ page }) => {
await page.getByTestId("button-store").click();
await page.waitForTimeout(1000);
await page.getByTestId("api-key-button-store").click();
await page.getByTestId("api-key-button-store").click({
timeout: 200000,
});
await page
.getByPlaceholder("Insert your API Key")