From 1443af2e42dcc6a29f4dd0d7fd707b73814cd2f9 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 5 Nov 2024 11:55:22 -0300 Subject: [PATCH] tests: add decision flow test (#4384) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ (Vector Store.spec.ts): Update test to skip if required environment variables are not set and improve test flow for Vector Store RAG test. * ✨ (Vector Store.spec.ts): Update variable name from 'control' to 'Control' for better clarity and consistency 📝 (decisionFlow.spec.ts): Refactor test case to skip if OPENAI_API_KEY is not provided and improve code readability and maintainability by restructuring and commenting out unnecessary code blocks * 📝 (Vector Store.spec.ts): Comment out unnecessary test.skip blocks and unused code to improve code readability and maintainability. * refactor: update test to click on "New Flow" instead of "New Project" * ✨ (store-shard-2.spec.ts): Refactor test to use a reusable function for clicking elements and waiting for visibility to improve code readability and maintainability 🔧 (deleteFlows.spec.ts): Refactor test to use separate functions for waiting for and interacting with elements to improve code readability and maintainability --- .../core/integrations/decisionFlow.spec.ts | 583 +++++++++--------- 1 file changed, 292 insertions(+), 291 deletions(-) diff --git a/src/frontend/tests/core/integrations/decisionFlow.spec.ts b/src/frontend/tests/core/integrations/decisionFlow.spec.ts index c7b60213e61d..cd9adb16d3ab 100644 --- a/src/frontend/tests/core/integrations/decisionFlow.spec.ts +++ b/src/frontend/tests/core/integrations/decisionFlow.spec.ts @@ -159,295 +159,296 @@ async function moveElementByX( } test("should create a flow with decision", async ({ page }) => { - // test.skip( - // !process?.env?.OPENAI_API_KEY, - // "OPENAI_API_KEY required to run this test", - // ); - // if (!process.env.CI) { - // dotenv.config({ path: path.resolve(__dirname, "../../.env") }); - // } - // await page.goto("/"); - // await page.waitForSelector('[data-testid="mainpage_title"]', { - // timeout: 30000, - // }); - // await page.waitForSelector('[id="new-project-btn"]', { - // timeout: 30000, - // }); - // let modalCount = 0; - // try { - // const modalTitleElement = await page?.getByTestId("modal-title"); - // if (modalTitleElement) { - // modalCount = await modalTitleElement.count(); - // } - // } catch (error) { - // modalCount = 0; - // } - // while (modalCount === 0) { - // await page.getByText("New Project", { exact: true }).click(); - // await page.waitForTimeout(3000); - // modalCount = await page.getByTestId("modal-title")?.count(); - // } - // await page.waitForSelector('[data-testid="blank-flow"]', { - // timeout: 30000, - // }); - // await page.getByTestId("blank-flow").click(); - // //---------------------------------- CHAT INPUT - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("chat input"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("inputsChat Input") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- CREATE LIST - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("list"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("helpersCreate List") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // await page.getByTestId("input-list-plus-btn_texts-0").first().click(); - // await page.getByTestId("input-list-plus-btn_texts-0").first().click(); - // await page.getByTestId("input-list-plus-btn_texts-0").first().click(); - // await page - // .getByTestId("inputlist_str_texts_0") - // .first() - // .fill("big news! langflow 1.0 is out"); - // await page - // .getByTestId("inputlist_str_texts_1") - // .first() - // .fill("uhul that movie was awesome"); - // await page.getByTestId("inputlist_str_texts_2").first().fill("love you babe"); - // await page - // .getByTestId("helpersCreate List") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // await page.getByTestId("input-list-plus-btn_texts-0").last().click(); - // await page.getByTestId("input-list-plus-btn_texts-0").last().click(); - // await page.getByTestId("input-list-plus-btn_texts-0").last().click(); - // await page.getByTestId("inputlist_str_texts_0").last().fill("oh my cat died"); - // await page - // .getByTestId("inputlist_str_texts_1") - // .last() - // .fill("No one loves me"); - // await page.getByTestId("inputlist_str_texts_2").last().fill("not cool.."); - // //---------------------------------- PARSE DATA - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("parse data"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("helpersParse Data") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // await page - // .getByTestId("helpersParse Data") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- PASS - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("pass"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("prototypesPass") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // await page.waitForTimeout(500); - // await page - // .getByTestId("prototypesPass") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // await page.waitForTimeout(500); - // await page - // .getByTestId("prototypesPass") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- PROMPT - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("prompt"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("promptsPrompt") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- OPENAI - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("openai"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("modelsOpenAI") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- CONDITIONAL ROUTER - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("conditional router"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("prototypesConditional Router") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- CHAT OUTPUT - // await page.getByTestId("sidebar-search-input").click(); - // await page.getByTestId("sidebar-search-input").fill("chat output"); - // await page.waitForTimeout(500); - // await page - // .getByTestId("outputsChat Output") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // await page.waitForTimeout(500); - // await page - // .getByTestId("outputsChat Output") - // .dragTo(page.locator('//*[@id="react-flow-id"]')); - // //---------------------------------- - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByX(page, "Chat Output", 400, 1); - // await page.waitForTimeout(500); - // await moveElementByX(page, "Chat Output", 700, 0); - // await page.waitForTimeout(500); - // await moveElementByX(page, "Conditional Router", 1100, 0); - // await page.waitForTimeout(500); - // await page.getByTestId("fit_view").click(); - // await moveElementByX(page, "OpenAI", 980, 0); - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByX(page, "Prompt", 990, 0); - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByX(page, "Pass", 1000, 2); - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByXY(page, "Pass", 0, 200, 1); - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByXY(page, "Pass", 150, 200, 0); - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByXY(page, "Parse Data", 300, 200, 1); - // await page.getByTestId("fit_view").click(); - // await page.waitForTimeout(500); - // await moveElementByXY(page, "Parse Data", 450, 200, 0); - // await page.waitForTimeout(500); - // await moveElementByXY(page, "Create List", 600, 200, 1); - // await page.waitForTimeout(500); - // await moveElementByXY(page, "Create List", 800, 200, 0); - // await page.waitForTimeout(500); - // await page.getByTestId("fit_view").click(); - // //---------------------------------- EDIT PROMPT - // await page.getByTestId("promptarea_prompt_template").first().click(); - // await page.getByTestId("modal-promptarea_prompt_template").first().fill(` - // {Condition} - // Answer with either TRUE or FALSE (and nothing else). - // TRUE Examples: - // {true_examples} - // FALSE Examples: - // {false_examples} - // User: {user_message} - // AI: - // `); - // await page.getByText("Check & Save").last().click(); - // //---------------------------------- MAKE CONNECTIONS - // await page - // .getByTestId("handle-createlist-shownode-data list-right") - // .nth(0) - // .click(); - // await page.getByTestId("handle-parsedata-shownode-data-left").nth(0).click(); - // await page - // .getByTestId("handle-createlist-shownode-data list-right") - // .nth(2) - // .click(); - // await page.getByTestId("handle-parsedata-shownode-data-left").nth(1).click(); - // await page - // .getByTestId("handle-chatinput-shownode-message-right") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-pass-shownode-input message-left") - // .nth(2) - // .click(); - // await page.getByTestId("handle-parsedata-shownode-text-right").nth(0).click(); - // await page - // .getByTestId("handle-prompt-shownode-true_examples-left") - // .nth(0) - // .click(); - // await page.getByTestId("handle-parsedata-shownode-text-right").nth(2).click(); - // await page - // .getByTestId("handle-prompt-shownode-false_examples-left") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-pass-shownode-output message-right") - // .nth(4) - // .click(); - // await page - // .getByTestId("handle-prompt-shownode-user_message-left") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-prompt-shownode-prompt message-right") - // .first() - // .click(); - // await page - // .getByTestId("handle-openaimodel-shownode-input-left") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-openaimodel-shownode-text-right") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-conditionalrouter-shownode-input text-left") - // .nth(0) - // .click(); - // await page.getByTestId("popover-anchor-input-match_text").fill("TRUE"); - // await page.getByTestId("title-Pass").nth(1).click(); - // await page.getByTestId("edit-button-modal").click(); - // await page - // .getByTestId("popover-anchor-input-input_message-edit") - // .nth(0) - // .fill("You're Happy! 🤪"); - // await page.getByTestId("showignored_message").last().click(); - // await page.getByText("Close").last().click(); - // await page.getByTestId("title-Pass").nth(0).click(); - // await page.getByTestId("edit-button-modal").click(); - // await page - // .getByTestId("popover-anchor-input-input_message-edit") - // .nth(0) - // .fill("You're Sad! 🥲"); - // await page.getByTestId("showignored_message").last().click(); - // await page.getByText("Close").last().click(); - // await page - // .getByTestId("handle-conditionalrouter-shownode-true route-right") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-pass-shownode-ignored message-left") - // .nth(1) - // .click(); - // await page - // .getByTestId("handle-conditionalrouter-shownode-false route-right") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-pass-shownode-ignored message-left") - // .nth(0) - // .click(); - // await page - // .getByTestId("handle-pass-shownode-output message-right") - // .nth(2) - // .click(); - // await page.getByTestId("handle-chatoutput-shownode-text-left").nth(0).click(); - // await page - // .getByTestId("handle-pass-shownode-output message-right") - // .nth(0) - // .click(); - // await page.getByTestId("handle-chatoutput-shownode-text-left").nth(1).click(); - // const apiKeyInput = page.getByTestId("popover-anchor-input-api_key"); - // const isApiKeyInputVisible = await apiKeyInput.isVisible(); - // if (isApiKeyInputVisible) { - // await apiKeyInput.fill(process.env.OPENAI_API_KEY ?? ""); - // } - // await page.getByTestId("dropdown_str_model_name").click(); - // await page.getByTestId("gpt-4o-1-option").click(); - // await page.getByTestId("fit_view").click(); - // await page.getByText("Playground", { exact: true }).last().click(); - // await page.waitForSelector('[data-testid="input-chat-playground"]', { - // timeout: 100000, - // }); - // await page.getByTestId("input-chat-playground").click(); - // await page - // .getByTestId("input-chat-playground") - // .fill("my dog is alive and happy!"); - // await page.waitForSelector('[data-testid="icon-LucideSend"]', { - // timeout: 100000, - // }); - // await page.getByTestId("icon-LucideSend").click(); + test.skip( + !process?.env?.OPENAI_API_KEY, + "OPENAI_API_KEY required to run this test", + ); + if (!process.env.CI) { + dotenv.config({ path: path.resolve(__dirname, "../../.env") }); + } + await page.goto("/"); + await page.waitForSelector('[data-testid="mainpage_title"]', { + timeout: 30000, + }); + await page.waitForSelector('[id="new-project-btn"]', { + timeout: 30000, + }); + let modalCount = 0; + try { + const modalTitleElement = await page?.getByTestId("modal-title"); + if (modalTitleElement) { + modalCount = await modalTitleElement.count(); + } + } catch (error) { + modalCount = 0; + } + while (modalCount === 0) { + await page.getByText("New Flow", { exact: true }).click(); + await page.waitForTimeout(3000); + modalCount = await page.getByTestId("modal-title")?.count(); + } + await page.waitForSelector('[data-testid="blank-flow"]', { + timeout: 30000, + }); + await page.getByTestId("blank-flow").click(); + //---------------------------------- CHAT INPUT + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("chat input"); + await page.waitForTimeout(500); + await page + .getByTestId("inputsChat Input") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- CREATE LIST + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("list"); + await page.waitForTimeout(500); + await page + .getByTestId("helpersCreate List") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + await page.getByTestId("input-list-plus-btn_texts-0").first().click(); + await page.getByTestId("input-list-plus-btn_texts-0").first().click(); + await page.getByTestId("input-list-plus-btn_texts-0").first().click(); + await page + .getByTestId("inputlist_str_texts_0") + .first() + .fill("big news! langflow 1.0 is out"); + await page + .getByTestId("inputlist_str_texts_1") + .first() + .fill("uhul that movie was awesome"); + await page.getByTestId("inputlist_str_texts_2").first().fill("love you babe"); + await page + .getByTestId("helpersCreate List") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + await page.getByTestId("input-list-plus-btn_texts-0").last().click(); + await page.getByTestId("input-list-plus-btn_texts-0").last().click(); + await page.getByTestId("input-list-plus-btn_texts-0").last().click(); + await page.getByTestId("inputlist_str_texts_0").last().fill("oh my cat died"); + await page + .getByTestId("inputlist_str_texts_1") + .last() + .fill("No one loves me"); + await page.getByTestId("inputlist_str_texts_2").last().fill("not cool.."); + //---------------------------------- PARSE DATA + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("parse data"); + await page.waitForTimeout(500); + await page + .getByTestId("helpersParse Data") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + await page + .getByTestId("helpersParse Data") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- PASS + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("pass"); + await page.waitForTimeout(500); + await page + .getByTestId("prototypesPass") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + await page.waitForTimeout(500); + await page + .getByTestId("prototypesPass") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + await page.waitForTimeout(500); + await page + .getByTestId("prototypesPass") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- PROMPT + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("prompt"); + await page.waitForTimeout(500); + await page + .getByTestId("promptsPrompt") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- OPENAI + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("openai"); + await page.waitForTimeout(500); + await page + .getByTestId("modelsOpenAI") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- CONDITIONAL ROUTER + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("conditional router"); + await page.waitForTimeout(500); + await page + .getByTestId("prototypesConditional Router") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- CHAT OUTPUT + await page.getByTestId("sidebar-search-input").click(); + await page.getByTestId("sidebar-search-input").fill("chat output"); + await page.waitForTimeout(500); + await page + .getByTestId("outputsChat Output") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + await page.waitForTimeout(500); + await page + .getByTestId("outputsChat Output") + .dragTo(page.locator('//*[@id="react-flow-id"]')); + //---------------------------------- + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByX(page, "Chat Output", 400, 1); + await page.waitForTimeout(500); + await moveElementByX(page, "Chat Output", 700, 0); + await page.waitForTimeout(500); + await moveElementByX(page, "Conditional Router", 1100, 0); + await page.waitForTimeout(500); + await page.getByTestId("fit_view").click(); + await moveElementByX(page, "OpenAI", 980, 0); + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByX(page, "Prompt", 990, 0); + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByX(page, "Pass", 1000, 2); + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByXY(page, "Pass", 0, 200, 1); + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByXY(page, "Pass", 150, 200, 0); + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByXY(page, "Parse Data", 300, 200, 1); + await page.getByTestId("fit_view").click(); + await page.waitForTimeout(500); + await moveElementByXY(page, "Parse Data", 450, 200, 0); + await page.waitForTimeout(500); + await moveElementByXY(page, "Create List", 600, 200, 1); + await page.waitForTimeout(500); + await moveElementByXY(page, "Create List", 800, 200, 0); + await page.waitForTimeout(500); + await page.getByTestId("fit_view").click(); + //---------------------------------- EDIT PROMPT + await page.getByTestId("promptarea_prompt_template").first().click(); + await page.getByTestId("modal-promptarea_prompt_template").first().fill(` + {Condition} + Answer with either TRUE or FALSE (and nothing else). + TRUE Examples: + {true_examples} + FALSE Examples: + {false_examples} + User: {user_message} + AI: + `); + await page.getByText("Check & Save").last().click(); + //---------------------------------- MAKE CONNECTIONS + await page + .getByTestId("handle-createlist-shownode-data list-right") + .nth(0) + .click(); + await page.getByTestId("handle-parsedata-shownode-data-left").nth(0).click(); + await page + .getByTestId("handle-createlist-shownode-data list-right") + .nth(2) + .click(); + await page.getByTestId("handle-parsedata-shownode-data-left").nth(1).click(); + await page + .getByTestId("handle-chatinput-shownode-message-right") + .nth(0) + .click(); + await page + .getByTestId("handle-pass-shownode-input message-left") + .nth(2) + .click(); + await page.getByTestId("handle-parsedata-shownode-text-right").nth(0).click(); + await page + .getByTestId("handle-prompt-shownode-true_examples-left") + .nth(0) + .click(); + await page.getByTestId("handle-parsedata-shownode-text-right").nth(2).click(); + await page + .getByTestId("handle-prompt-shownode-false_examples-left") + .nth(0) + .click(); + await page + .getByTestId("handle-pass-shownode-output message-right") + .nth(4) + .click(); + await page + .getByTestId("handle-prompt-shownode-user_message-left") + .nth(0) + .click(); + await page + .getByTestId("handle-prompt-shownode-prompt message-right") + .first() + .click(); + await page + .getByTestId("handle-openaimodel-shownode-input-left") + .nth(0) + .click(); + await page + .getByTestId("handle-openaimodel-shownode-text-right") + .nth(0) + .click(); + await page + .getByTestId("handle-conditionalrouter-shownode-input text-left") + .nth(0) + .click(); + await page.getByTestId("popover-anchor-input-match_text").fill("TRUE"); + await page.getByTestId("title-Pass").nth(1).click(); + await page.getByTestId("edit-button-modal").click(); + await page + .getByTestId("popover-anchor-input-input_message-edit") + .nth(0) + .fill("You're Happy! 🤪"); + await page.getByTestId("showignored_message").last().click(); + await page.getByText("Close").last().click(); + await page.getByTestId("title-Pass").nth(0).click(); + await page.getByTestId("edit-button-modal").click(); + await page + .getByTestId("popover-anchor-input-input_message-edit") + .nth(0) + .fill("You're Sad! 🥲"); + await page.getByTestId("showignored_message").last().click(); + await page.getByText("Close").last().click(); + await page + .getByTestId("handle-conditionalrouter-shownode-true route-right") + .nth(0) + .click(); + await page + .getByTestId("handle-pass-shownode-ignored message-left") + .nth(1) + .click(); + await page + .getByTestId("handle-conditionalrouter-shownode-false route-right") + .nth(0) + .click(); + await page + .getByTestId("handle-pass-shownode-ignored message-left") + .nth(0) + .click(); + await page + .getByTestId("handle-pass-shownode-output message-right") + .nth(2) + .click(); + await page.getByTestId("handle-chatoutput-shownode-text-left").nth(0).click(); + await page + .getByTestId("handle-pass-shownode-output message-right") + .nth(0) + .click(); + await page.getByTestId("handle-chatoutput-shownode-text-left").nth(1).click(); + const apiKeyInput = page.getByTestId("popover-anchor-input-api_key"); + const isApiKeyInputVisible = await apiKeyInput.isVisible(); + if (isApiKeyInputVisible) { + await apiKeyInput.fill(process.env.OPENAI_API_KEY ?? ""); + } + await page.getByTestId("dropdown_str_model_name").click(); + await page.getByTestId("gpt-4o-1-option").click(); + await page.getByTestId("fit_view").click(); + await page.getByText("Playground", { exact: true }).last().click(); + await page.waitForSelector('[data-testid="input-chat-playground"]', { + timeout: 100000, + }); + await page.getByTestId("input-chat-playground").click(); + await page + .getByTestId("input-chat-playground") + .fill("my dog is alive and happy!"); + await page.waitForSelector('[data-testid="button-send"]', { + timeout: 100000, + }); + + await page.getByTestId("button-send").last().click(); });