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

refactor: handle rendering and filtering functionality (#3512)

Browse source
This commit is contained in:
Lucas Oliveira 2024-09-13 17:27:30 -03:00 • committed by GitHub
commit 2f1f1808b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 755 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/frontend/tests/core/features/filterEdge-shard-0.spec.ts
View file

@ -54,28 +54,21 @@ test("user must see on handle hover a tooltip with possibility connections", asy
}
await visibleElementHandle.hover().then(async () => {
const testIds = [
"available-output-inputs",
"available-output-chains",
"available-output-textsplitters",
"available-output-retrievers",
"available-output-prototypes",
"available-output-embeddings",
"available-output-data",
"available-output-vectorstores",
"available-output-memories",
"available-output-models",
"available-output-outputs",
"available-output-agents",
"available-output-helpers",
];
await expect(
page.getByText("Drag to connect compatible inputs").first(),
).toBeVisible();
await Promise.all(
testIds.map((id) => expect(page.getByTestId(id).first()).toBeVisible()),
);
await expect(
page
.getByText("Select to filter compatible inputs and components")
.first(),
).toBeVisible();
await page.getByTestId("icon-X").click();
await page.waitForTimeout(500);
await expect(page.getByText("Output:").first()).toBeVisible();
await expect(
page.getByTestId("output-tooltip-message").first(),
).toBeVisible();
});
await page.getByTitle("fit view").click();
@ -96,13 +89,20 @@ test("user must see on handle hover a tooltip with possibility connections", asy
await visibleElementHandle.hover().then(async () => {
await expect(
page.getByTestId("available-input-models").first(),
page.getByText("Drag to connect compatible outputs").first(),
).toBeVisible();
await page.waitForTimeout(1000);
await page.getByTestId("icon-Search").click();
await expect(
page
.getByText("Select to filter compatible outputs and components")
.first(),
).toBeVisible();
await page.waitForTimeout(500);
await expect(page.getByText("Input:").first()).toBeVisible();
await expect(
page.getByTestId("input-tooltip-languagemodel").first(),
).toBeVisible();
});
await page.getByTitle("fit view").click();
await page.getByTitle("zoom out").click();
@ -121,16 +121,21 @@ test("user must see on handle hover a tooltip with possibility connections", asy
}
await visibleElementHandle.hover().then(async () => {
await page.waitForTimeout(2500);
await expect(
page.getByTestId("available-input-retrievers").first(),
).toBeVisible();
await expect(
page.getByTestId("available-input-vectorstores").first(),
page.getByText("Drag to connect compatible outputs").first(),
).toBeVisible();
await page.waitForTimeout(500);
await expect(
page
.getByText("Select to filter compatible outputs and components")
.first(),
).toBeVisible();
await expect(page.getByText("Input:").first()).toBeVisible();
await expect(
page.getByTestId("input-tooltip-retriever").first(),
).toBeVisible();
});
await page.getByTitle("fit view").click();
@ -151,7 +156,19 @@ test("user must see on handle hover a tooltip with possibility connections", asy
await visibleElementHandle.hover().then(async () => {
await expect(
page.getByTestId("available-input-helpers").first(),
page.getByText("Drag to connect compatible outputs").first(),
).toBeVisible();
await expect(
page
.getByText("Select to filter compatible outputs and components")
.first(),
).toBeVisible();
await expect(page.getByText("Input:").first()).toBeVisible();
await expect(
page.getByTestId("input-tooltip-basechatmemory").first(),
).toBeVisible();
});
});

153
src/frontend/tests/core/features/filterSidebar.spec.ts
View file

@ -54,99 +54,86 @@ test("user must see on handle click the possibility connections - LLMChain", asy
await page.getByTestId("handle-apirequest-shownode-urls-left").click();
let disclosureTestIds = [
"disclosure-inputs",
"disclosure-outputs",
"disclosure-prompts",
"disclosure-models",
"disclosure-helpers",
"disclosure-agents",
"disclosure-chains",
"disclosure-prototypes",
];
await page.waitForTimeout(500);
let specificTestIds = [
"inputsChat Input",
"outputsChat Output",
"promptsPrompt",
"modelsAmazon Bedrock",
"helpersChat Memory",
"agentsCSVAgent",
"chainsConversationChain",
"prototypesConditional Router",
];
expect(await page.getByTestId("icon-ListFilter")).toBeVisible();
await Promise.all(
disclosureTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
);
await page
.getByTestId("icon-X")
.first()
.hover()
.then(async () => {
await page
.getByText("Remove filter", {
exact: false,
})
.first()
.isVisible();
});
await Promise.all(
specificTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
);
await expect(page.getByTestId("disclosure-inputs")).toBeVisible();
await expect(page.getByTestId("disclosure-outputs")).toBeVisible();
await expect(page.getByTestId("disclosure-prompts")).toBeVisible();
await expect(page.getByTestId("disclosure-models")).toBeVisible();
await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
await expect(page.getByTestId("disclosure-agents")).toBeVisible();
await expect(page.getByTestId("disclosure-chains")).toBeVisible();
await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
await expect(page.getByTestId("inputsChat Input")).toBeVisible();
await expect(page.getByTestId("outputsChat Output")).toBeVisible();
await expect(page.getByTestId("promptsPrompt")).toBeVisible();
await expect(page.getByTestId("modelsAmazon Bedrock")).toBeVisible();
await expect(page.getByTestId("helpersChat Memory")).toBeVisible();
await expect(page.getByTestId("agentsCSVAgent")).toBeVisible();
await expect(page.getByTestId("chainsConversationChain")).toBeVisible();
await expect(page.getByTestId("prototypesConditional Router")).toBeVisible();
await page.getByPlaceholder("Search").click();
let notVisibleTestIds = [
"inputsChat Input",
"outputsChat Output",
"promptsPrompt",
"modelsAmazon Bedrock",
"helpersChat Memory",
"agentsTool Calling Agent",
"chainsConversationChain",
"prototypesConditional Router",
];
await Promise.all(
notVisibleTestIds.map((id) =>
expect(page.getByTestId(id)).not.toBeVisible(),
),
);
await expect(page.getByTestId("inputsChat Input")).not.toBeVisible();
await expect(page.getByTestId("outputsChat Output")).not.toBeVisible();
await expect(page.getByTestId("promptsPrompt")).not.toBeVisible();
await expect(page.getByTestId("modelsAmazon Bedrock")).not.toBeVisible();
await expect(page.getByTestId("helpersChat Memory")).not.toBeVisible();
await expect(page.getByTestId("agentsTool Calling Agent")).not.toBeVisible();
await expect(page.getByTestId("chainsConversationChain")).not.toBeVisible();
await expect(
page.getByTestId("prototypesConditional Router"),
).not.toBeVisible();
await page.getByTestId("handle-apirequest-shownode-headers-left").click();
disclosureTestIds = [
"disclosure-data",
"disclosure-helpers",
"disclosure-vector stores",
"disclosure-utilities",
"disclosure-prototypes",
"disclosure-retrievers",
"disclosure-tools",
];
await expect(page.getByTestId("disclosure-data")).toBeVisible();
await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
await expect(page.getByTestId("disclosure-vector stores")).toBeVisible();
await expect(page.getByTestId("disclosure-utilities")).toBeVisible();
await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
await expect(page.getByTestId("disclosure-retrievers")).toBeVisible();
await expect(page.getByTestId("disclosure-embeddings")).toBeVisible();
await expect(page.getByTestId("disclosure-tools")).toBeVisible();
specificTestIds = [
"dataAPI Request",
"helpersChat Memory",
"vectorstoresAstra DB",
"toolsSearch API",
"prototypesSub Flow",
"retrieversSelf Query Retriever",
];
await expect(page.getByTestId("dataAPI Request")).toBeVisible();
await expect(page.getByTestId("helpersChat Memory")).toBeVisible();
await expect(page.getByTestId("vectorstoresAstra DB")).toBeVisible();
await expect(page.getByTestId("toolsSearch API")).toBeVisible();
await expect(page.getByTestId("prototypesSub Flow")).toBeVisible();
await expect(
page.getByTestId("retrieversSelf Query Retriever"),
).toBeVisible();
await expect(page.getByTestId("helpersSplit Text")).toBeVisible();
await expect(page.getByTestId("toolsSearch API")).toBeVisible();
await Promise.all(
disclosureTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
);
await page.getByTestId("icon-X").first().click();
await Promise.all(
specificTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
);
await page.getByPlaceholder("Search").click();
notVisibleTestIds = [
"dataAPI Request",
"helpersChat Memory",
"vectorstoresAstra DB",
"toolsSearch API",
"prototypesSub Flow",
"retrieversSelf Query Retriever",
"textsplittersCharacterTextSplitter",
];
await Promise.all(
notVisibleTestIds.map((id) =>
expect(page.getByTestId(id)).not.toBeVisible(),
),
);
await expect(page.getByTestId("dataAPI Request")).not.toBeVisible();
await expect(page.getByTestId("helpersChat Memory")).not.toBeVisible();
await expect(page.getByTestId("vectorstoresAstra DB")).not.toBeVisible();
await expect(page.getByTestId("toolsSearch API")).not.toBeVisible();
await expect(page.getByTestId("prototypesSub Flow")).not.toBeVisible();
await expect(
page.getByTestId("retrieversSelf Query Retriever"),
).not.toBeVisible();
await expect(page.getByTestId("helpersSplit Text")).not.toBeVisible();
await expect(page.getByTestId("toolsSearch API")).not.toBeVisible();
});

2
src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
View file

@ -1,6 +1,4 @@
import { expect, test } from "@playwright/test";
import * as dotenv from "dotenv";
import path from "path";
test("should be able to move flow from folder, rename it and be displayed on correct folder", async ({
page,

159
src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
View file

@ -1,6 +1,6 @@
import { expect, test } from "@playwright/test";
test("should be able to see output preview from grouped components", async ({
test("should be able to see output preview from grouped components and connect components with a single click", async ({
page,
}) => {
await page.goto("/");
@ -51,7 +51,7 @@ test("should be able to see output preview from grouped components", async ({
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-1000, 500);
await page.mouse.move(-600, 300);
await page.waitForTimeout(400);
});
@ -71,7 +71,7 @@ test("should be able to see output preview from grouped components", async ({
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-1000, 800);
await page.mouse.move(-600, 300);
await page.waitForTimeout(400);
});
@ -86,7 +86,7 @@ test("should be able to see output preview from grouped components", async ({
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-800, 800);
await page.mouse.move(-600, 300);
await page.waitForTimeout(400);
});
@ -101,7 +101,7 @@ test("should be able to see output preview from grouped components", async ({
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-200, 800);
await page.mouse.move(-600, 300);
await page.waitForTimeout(200);
});
@ -117,7 +117,7 @@ test("should be able to see output preview from grouped components", async ({
.hover()
.then(async () => {
await page.mouse.down();
await page.mouse.move(-200, 500);
await page.mouse.move(-600, 300);
});
await page.mouse.up();
@ -134,13 +134,118 @@ test("should be able to see output preview from grouped components", async ({
const elementCombineTextOutput0 = await page
.getByTestId("handle-combinetext-shownode-combined text-right")
.nth(0);
await elementCombineTextOutput0.hover();
await page.mouse.down();
await elementCombineTextOutput0.click();
const blockedHandle = await page
.getByTestId("gradient-handle-textinput-shownode-text-right")
.nth(2);
const secondBlockedHandle = await page
.getByTestId("gradient-handle-combinetext-shownode-combined text-right")
.nth(2);
const thirdBlockedHandle = await page
.getByTestId("gradient-handle-textoutput-shownode-text-right")
.nth(0);
const hasGradient = await blockedHandle?.evaluate((el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(203, 213, 225)")
);
});
await page.waitForTimeout(500);
const secondHasGradient = await secondBlockedHandle?.evaluate((el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(203, 213, 225)")
);
});
await page.waitForTimeout(500);
const thirdHasGradient = await thirdBlockedHandle?.evaluate((el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(203, 213, 225)")
);
});
await page.waitForTimeout(500);
expect(hasGradient).toBe(true);
expect(secondHasGradient).toBe(true);
expect(thirdHasGradient).toBe(true);
const unlockedHandle = await page
.getByTestId("gradient-handle-textinput-shownode-text-left")
.last();
const secondUnlockedHandle = await page
.getByTestId("gradient-handle-combinetext-shownode-second text-left")
.last();
const thirdUnlockedHandle = await page
.getByTestId("gradient-handle-combinetext-shownode-second text-left")
.first();
const fourthUnlockedHandle = await page
.getByTestId("gradient-handle-textoutput-shownode-text-left")
.first();
const hasGradientUnlocked = await unlockedHandle?.evaluate((el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(79, 70, 229)")
);
});
await page.waitForTimeout(500);
const secondHasGradientUnlocked = await secondUnlockedHandle?.evaluate(
(el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(79, 70, 229)")
);
},
);
await page.waitForTimeout(500);
const thirdHasGradientLocked = await thirdUnlockedHandle?.evaluate((el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(203, 213, 225)")
);
});
await page.waitForTimeout(500);
const fourthHasGradientUnlocked = await fourthUnlockedHandle?.evaluate(
(el) => {
const style = window.getComputedStyle(el);
return (
style.backgroundImage.includes("conic-gradient") &&
style.backgroundImage.includes("rgb(79, 70, 229)")
);
},
);
await page.waitForTimeout(500);
expect(hasGradientUnlocked).toBe(true);
expect(secondHasGradientUnlocked).toBe(true);
expect(thirdHasGradientLocked).toBe(true);
expect(fourthHasGradientUnlocked).toBe(true);
const elementCombineTextInput1 = await page
.getByTestId("handle-combinetext-shownode-first text-left")
.nth(1);
await elementCombineTextInput1.hover();
await page.mouse.up();
await elementCombineTextInput1.click();
await page
.getByTestId("title-Combine Text")
@ -157,68 +262,60 @@ test("should be able to see output preview from grouped components", async ({
const elementTextOutput0 = await page
.getByTestId("handle-textinput-shownode-text-right")
.nth(0);
await elementTextOutput0.hover();
await page.mouse.down();
await elementTextOutput0.click();
const elementGroupInput0 = await page.getByTestId(
"handle-groupnode-shownode-first text-left",
);
await elementGroupInput0.hover();
await page.mouse.up();
await elementGroupInput0.click();
//connection 3
const elementTextOutput1 = await page
.getByTestId("handle-textinput-shownode-text-right")
.nth(2);
await elementTextOutput1.hover();
await page.mouse.down();
await elementTextOutput1.click();
const elementGroupInput1 = await page
.getByTestId("handle-groupnode-shownode-second text-left")
.nth(1);
await elementGroupInput1.hover();
await page.mouse.up();
await elementGroupInput1.click();
//connection 4
const elementGroupOutput = await page
.getByTestId("handle-groupnode-shownode-combined text-right")
.nth(0);
await elementGroupOutput.hover();
await page.mouse.down();
await elementGroupOutput.click();
const elementTextOutputInput = await page
.getByTestId("handle-textoutput-shownode-text-left")
.nth(0);
await elementTextOutputInput.hover();
await page.mouse.up();
await elementTextOutputInput.click();
await page.getByTestId("textarea_str_input_value").nth(0).fill(randomName);
await page.waitForTimeout(1000);
await page.waitForTimeout(500);
await page
.getByTestId("textarea_str_input_value")
.nth(1)
.fill(secondRandomName);
await page.waitForTimeout(1000);
await page.waitForTimeout(500);
await page
.getByPlaceholder("Type something...", { exact: true })
.nth(6)
.fill(thirdRandomName);
await page.waitForTimeout(1000);
await page.waitForTimeout(500);
await page
.getByPlaceholder("Type something...", { exact: true })
.nth(3)
.fill("-");
await page.waitForTimeout(1000);
await page.waitForTimeout(500);
await page
.getByPlaceholder("Type something...", { exact: true })
.nth(4)
.fill("-");
await page.waitForTimeout(3000);
await page.waitForTimeout(500);
await page.getByTestId("button_run_text output").last().click();
@ -227,13 +324,13 @@ test("should be able to see output preview from grouped components", async ({
await page.getByText("built successfully").last().click({
timeout: 15000,
});
await page.waitForTimeout(3000);
await page.waitForTimeout(500);
expect(
await page.getByTestId("output-inspection-combined text").first(),
).not.toBeDisabled();
await page.getByTestId("output-inspection-combined text").first().click();
await page.waitForTimeout(1000);
await page.waitForTimeout(500);
await page.getByText("Component Output").isVisible();