test: add test id to frozen icon and streamline freeze functionality test (#8619)
* fix: add data-testid attribute to frozen icon in NodeOutputField component for improved testing * refactor: simplify freeze.spec.ts by removing redundant component interactions and enhancing test clarity - Removed unnecessary component interactions and waits to streamline the test flow. - Updated assertions to ensure expected output values are validated correctly. - Improved timeout settings for better reliability in test execution. * refactor: enhance freeze.spec.ts by replacing timeout with waitForSelector for improved test reliability - Updated the test to use waitForSelector instead of a fixed timeout, enhancing the robustness of the test execution. - This change aims to ensure that the test waits for the specific element to be present before proceeding, reducing flakiness. * Revert "refactor: enhance freeze.spec.ts by replacing timeout with waitForSelector for improved test reliability" This reverts commit 42eccbfa0d7e7defba02ee3589535689556390bb. * test: increase timeout for frozen icon selector to improve test reliability * test: increase timeout for frozen icon selector to enhance reliability * test: simplify frozen icon visibility check in freeze.spec.ts * test: comment out frozen icon visibility check in freeze.spec.ts * test: add assertion for initial output and enhance frozen icon visibility check in freeze.spec.ts * test: replace fixed timeout with waitForSelector for improved frozen icon visibility check in freeze.spec.ts * test: implement polling approach for frozen icon visibility check in freeze.spec.ts to enhance error handling and reliability * [autofix.ci] apply automated fixes * fix: add data-testid attribute to frozen icon in NodeOutputField component for improved testing * refactor: simplify freeze.spec.ts by removing redundant component interactions and enhancing test clarity - Removed unnecessary component interactions and waits to streamline the test flow. - Updated assertions to ensure expected output values are validated correctly. - Improved timeout settings for better reliability in test execution. * refactor: enhance freeze.spec.ts by replacing timeout with waitForSelector for improved test reliability - Updated the test to use waitForSelector instead of a fixed timeout, enhancing the robustness of the test execution. - This change aims to ensure that the test waits for the specific element to be present before proceeding, reducing flakiness. * Revert "refactor: enhance freeze.spec.ts by replacing timeout with waitForSelector for improved test reliability" This reverts commit 42eccbfa0d7e7defba02ee3589535689556390bb. * test: increase timeout for frozen icon selector to improve test reliability * test: increase timeout for frozen icon selector to enhance reliability * test: simplify frozen icon visibility check in freeze.spec.ts * test: comment out frozen icon visibility check in freeze.spec.ts * test: add assertion for initial output and enhance frozen icon visibility check in freeze.spec.ts * test: replace fixed timeout with waitForSelector for improved frozen icon visibility check in freeze.spec.ts * test: implement polling approach for frozen icon visibility check in freeze.spec.ts to enhance error handling and reliability * [autofix.ci] apply automated fixes * ✨ (freeze.spec.ts): add a 1-second delay before making the final assertion to ensure the element is fully rendered before checking its visibility * ✨ (nodeToolbarComponent/index.tsx): add data-testid attribute to freeze button for better testing 🐛 (freeze.spec.ts): update test to use new data-testid for freeze button to ensure proper element selection * ✨ (nodeToolbarComponent/index.tsx): add functionality to take a snapshot when freezing all vertices in the flow. * ✨ (component_freeze.spec.ts): add test case for freezing a component to ensure user can freeze components in the application and verify the frozen state with polling approach for better error handling. * ✨ (component_freeze.spec.ts): refactor frozen icon visibility check to use waitForSelector for improved reliability and error handling, replacing the previous polling approach. * ✅ (component_freeze.spec.ts): update timeout values to improve test reliability and stability * ✨ (freeze.spec.ts): add test case for freezing a component in the application to ensure the functionality works as expected --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: cristhianzl <cristhian.lousa@gmail.com> Co-authored-by: Yuqi Tang <yuqi.tang@datastax.com>
This commit is contained in:
Gabriel Luiz Freitas Almeida
GitHub
parent
4fcc447109
commit
322e70ad49
3 changed files with 32 additions and 242 deletions
|
|
@ -357,7 +357,7 @@ function NodeOutputField({
|
|||
</div>
|
||||
|
||||
{data.node?.frozen && (
|
||||
<div className="pr-1">
|
||||
<div className="pr-1" data-testid="frozen-icon">
|
||||
<SnowflakeIcon />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -307,6 +307,7 @@ const NodeToolbarComponent = memo(
|
|||
saveComponent();
|
||||
break;
|
||||
case "freezeAll":
|
||||
takeSnapshot();
|
||||
FreezeAllVertices({ flowId: currentFlowId, stopNodeId: data.id });
|
||||
break;
|
||||
case "code":
|
||||
|
|
@ -454,6 +455,7 @@ const NodeToolbarComponent = memo(
|
|||
<ToolbarButton
|
||||
icon="FreezeAll"
|
||||
label="Freeze"
|
||||
dataTestId="freeze-all-button-modal"
|
||||
onClick={() => {
|
||||
takeSnapshot();
|
||||
FreezeAllVertices({
|
||||
|
|
@ -669,7 +671,10 @@ const NodeToolbarComponent = memo(
|
|||
</SelectItem>
|
||||
)}
|
||||
{hasToolMode && (
|
||||
<SelectItem value="freezeAll">
|
||||
<SelectItem
|
||||
value="freezeAll"
|
||||
data-testid="freeze-all-button-modal"
|
||||
>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) =>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ import { expect, test } from "@playwright/test";
|
|||
import { addFlowToTestOnEmptyLangflow } from "../../utils/add-flow-to-test-on-empty-langflow";
|
||||
import { addLegacyComponents } from "../../utils/add-legacy-components";
|
||||
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
|
||||
import { runChatOutput } from "../../utils/run-chat-output";
|
||||
import { zoomOut } from "../../utils/zoom-out";
|
||||
|
||||
test(
|
||||
"user must be able to freeze a component",
|
||||
|
|
@ -24,279 +22,66 @@ test(
|
|||
|
||||
await addLegacyComponents(page);
|
||||
|
||||
//first component
|
||||
await page.getByTestId("sidebar-search-input").click();
|
||||
await page.getByTestId("sidebar-search-input").fill("text input");
|
||||
await page.waitForSelector('[data-testid="input_outputText Input"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
|
||||
await zoomOut(page, 3);
|
||||
|
||||
await page
|
||||
.getByTestId("input_outputText Input")
|
||||
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
|
||||
targetPosition: { x: 100, y: 100 },
|
||||
});
|
||||
|
||||
await page.getByTestId("sidebar-search-input").click();
|
||||
await page.getByTestId("sidebar-search-input").fill("url");
|
||||
await page.waitForSelector('[data-testid="dataURL"]', {
|
||||
timeout: 1000,
|
||||
await page.getByTestId("textarea_str_input_value").fill("hello world");
|
||||
|
||||
await page.getByTestId("div-generic-node").getByRole("button").click();
|
||||
|
||||
await page.waitForSelector('[data-testid="div-generic-node"]', {
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
await page
|
||||
.getByTestId("dataURL")
|
||||
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
|
||||
targetPosition: { x: 300, y: 300 },
|
||||
});
|
||||
await page.getByTestId("output-inspection-output text-textinput").click();
|
||||
|
||||
//third component
|
||||
const firstOutputText = await page.getByPlaceholder("Empty").textContent();
|
||||
|
||||
await page.getByTestId("sidebar-search-input").click();
|
||||
await page.getByTestId("sidebar-search-input").fill("split text");
|
||||
await page.waitForSelector('[data-testid="processingSplit Text"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
|
||||
await page
|
||||
.getByTestId("processingSplit Text")
|
||||
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
|
||||
targetPosition: { x: 350, y: 100 },
|
||||
});
|
||||
|
||||
//fourth component
|
||||
|
||||
await page.getByTestId("sidebar-search-input").click();
|
||||
await page.getByTestId("sidebar-search-input").fill("Parser");
|
||||
await page.waitForSelector('[data-testid="processingParser"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
|
||||
await page
|
||||
.getByTestId("processingParser")
|
||||
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
|
||||
targetPosition: { x: 50, y: 300 },
|
||||
});
|
||||
|
||||
await page.getByTestId("zoom_out").click();
|
||||
|
||||
//fifth component
|
||||
|
||||
await page.getByTestId("sidebar-search-input").click();
|
||||
await page.getByTestId("sidebar-search-input").fill("chat output");
|
||||
await page.waitForSelector('[data-testid="input_outputChat Output"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
|
||||
await page
|
||||
.getByTestId("input_outputChat Output")
|
||||
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
|
||||
targetPosition: { x: 600, y: 200 },
|
||||
});
|
||||
|
||||
await page.getByTestId("div-generic-node").nth(4).click();
|
||||
|
||||
await page.getByTestId("more-options-modal").click();
|
||||
|
||||
await page.getByTestId("expand-button-modal").click();
|
||||
|
||||
await page.getByTestId("fit_view").click();
|
||||
|
||||
let outdatedComponents = await page.getByTestId("update-button").count();
|
||||
|
||||
while (outdatedComponents > 0) {
|
||||
await page.getByTestId("update-button").first().click();
|
||||
await page.waitForSelector('[data-testid="update-button"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
outdatedComponents = await page.getByTestId("update-button").count();
|
||||
}
|
||||
|
||||
let filledApiKey = await page.getByTestId("remove-icon-badge").count();
|
||||
while (filledApiKey > 0) {
|
||||
await page.getByTestId("remove-icon-badge").first().click();
|
||||
filledApiKey = await page.getByTestId("remove-icon-badge").count();
|
||||
}
|
||||
|
||||
await page.getByTestId("fit_view").click();
|
||||
await zoomOut(page, 2);
|
||||
|
||||
//connection 1
|
||||
await page
|
||||
.getByTestId("handle-urlcomponent-shownode-extracted pages-right")
|
||||
.nth(0)
|
||||
.click();
|
||||
await page
|
||||
.getByTestId("handle-splittext-shownode-data or dataframe-left")
|
||||
.click();
|
||||
|
||||
//connection 2
|
||||
await page
|
||||
.getByTestId("handle-textinput-shownode-output text-right")
|
||||
.nth(0)
|
||||
.click();
|
||||
await page.getByTestId("handle-splittext-shownode-separator-left").click();
|
||||
|
||||
//connection 3
|
||||
await page
|
||||
.getByTestId("handle-splittext-shownode-chunks-right")
|
||||
.nth(0)
|
||||
.click();
|
||||
await page
|
||||
.getByTestId("handle-parsercomponent-shownode-data or dataframe-left")
|
||||
.click();
|
||||
|
||||
//connection 4
|
||||
await page
|
||||
.getByTestId("handle-parsercomponent-shownode-parsed text-right")
|
||||
.nth(0)
|
||||
.click();
|
||||
await page.getByTestId("handle-chatoutput-shownode-inputs-left").click();
|
||||
|
||||
await page
|
||||
.getByTestId("textarea_str_input_value")
|
||||
.first()
|
||||
.fill("lorem ipsum");
|
||||
|
||||
await page
|
||||
.getByTestId("inputlist_str_urls_0")
|
||||
.fill("https://www.lipsum.com/feed/html");
|
||||
|
||||
await runChatOutput(page);
|
||||
|
||||
await page.waitForSelector("text=built successfully", {
|
||||
timeout: 30000 * 3,
|
||||
});
|
||||
|
||||
await page.waitForSelector(
|
||||
'[data-testid="output-inspection-output message-chatoutput"]',
|
||||
{
|
||||
timeout: 1000,
|
||||
},
|
||||
);
|
||||
|
||||
await page
|
||||
.getByTestId("output-inspection-output message-chatoutput")
|
||||
.first()
|
||||
.click();
|
||||
|
||||
const firstRunWithoutFreezing = await page
|
||||
.getByPlaceholder("Empty")
|
||||
.textContent();
|
||||
expect(firstOutputText).toBe("hello world");
|
||||
|
||||
await page.getByText("Close").last().click();
|
||||
|
||||
await page.getByTestId("textarea_str_input_value").first().fill(",");
|
||||
await page.getByTestId("textarea_str_input_value").fill("goodbye world");
|
||||
|
||||
await runChatOutput(page);
|
||||
await page.getByTestId("div-generic-node").click();
|
||||
|
||||
await page.waitForSelector("text=built successfully", {
|
||||
timeout: 30000 * 3,
|
||||
});
|
||||
|
||||
await page.waitForSelector(
|
||||
'[data-testid="output-inspection-output message-chatoutput"]',
|
||||
{
|
||||
timeout: 1000,
|
||||
},
|
||||
);
|
||||
|
||||
await page
|
||||
.getByTestId("output-inspection-output message-chatoutput")
|
||||
.first()
|
||||
.click();
|
||||
|
||||
const secondRunWithoutFreezing = await page
|
||||
.getByPlaceholder("Empty")
|
||||
.textContent();
|
||||
|
||||
await page.getByText("Close").last().click();
|
||||
|
||||
await page.getByText("Split Text", { exact: true }).last().click();
|
||||
|
||||
await page.waitForSelector('[data-testid="more-options-modal"]', {
|
||||
await page.waitForSelector('[data-testid="freeze-all-button-modal"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
|
||||
await page.getByTestId("more-options-modal").click();
|
||||
await page.getByTestId("freeze-all-button-modal").click();
|
||||
|
||||
await page.waitForSelector('[data-testid="icon-FreezeAll"]', {
|
||||
timeout: 1000,
|
||||
});
|
||||
|
||||
await page.getByTestId("icon-FreezeAll").last().click();
|
||||
|
||||
await page.waitForTimeout(3000);
|
||||
await page.waitForTimeout(5000);
|
||||
|
||||
await page.getByTestId("icon-FreezeAll").click();
|
||||
await page.waitForSelector('[data-testid="frozen-icon"]', {
|
||||
timeout: 20000,
|
||||
});
|
||||
await expect(page.getByTestId("frozen-icon")).toBeVisible();
|
||||
await page.keyboard.press("Escape");
|
||||
|
||||
await page.locator('//*[@id="react-flow-id"]').click();
|
||||
await page.getByTestId("div-generic-node").getByRole("button").click();
|
||||
|
||||
await page
|
||||
.getByTestId("textarea_str_input_value")
|
||||
.first()
|
||||
.fill("lorem ipsum");
|
||||
await page.waitForTimeout(5000);
|
||||
|
||||
await page.waitForTimeout(2000);
|
||||
await page.getByTestId("output-inspection-output text-textinput").click();
|
||||
|
||||
await runChatOutput(page);
|
||||
const secondOutputText = await page.getByPlaceholder("Empty").textContent();
|
||||
|
||||
await page.waitForSelector("text=built successfully", {
|
||||
timeout: 30000 * 3,
|
||||
});
|
||||
|
||||
await page.waitForSelector(
|
||||
'[data-testid="output-inspection-output message-chatoutput"]',
|
||||
{
|
||||
timeout: 1000,
|
||||
},
|
||||
);
|
||||
|
||||
await page
|
||||
.getByTestId("output-inspection-output message-chatoutput")
|
||||
.first()
|
||||
.click();
|
||||
|
||||
const firstTextFreezed = await page.getByPlaceholder("Empty").textContent();
|
||||
|
||||
await page.getByText("Close").last().click();
|
||||
|
||||
await page.getByText("Split Text", { exact: true }).click();
|
||||
|
||||
await page.getByText("Freeze").first().click();
|
||||
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
await page.keyboard.press("Escape");
|
||||
|
||||
await runChatOutput(page);
|
||||
|
||||
await page.waitForSelector("text=built successfully", {
|
||||
timeout: 30000 * 3,
|
||||
});
|
||||
|
||||
await page.waitForSelector(
|
||||
'[data-testid="output-inspection-output message-chatoutput"]',
|
||||
{
|
||||
timeout: 1000,
|
||||
},
|
||||
);
|
||||
|
||||
await page
|
||||
.getByTestId("output-inspection-output message-chatoutput")
|
||||
.first()
|
||||
.click();
|
||||
|
||||
const thirdTextWithoutFreezing = await page
|
||||
.getByPlaceholder("Empty")
|
||||
.textContent();
|
||||
|
||||
expect(firstTextFreezed).toBe(secondRunWithoutFreezing);
|
||||
|
||||
expect(firstTextFreezed).not.toBe(firstRunWithoutFreezing);
|
||||
expect(firstTextFreezed).not.toBe(thirdTextWithoutFreezing);
|
||||
expect(firstRunWithoutFreezing).not.toBe(secondRunWithoutFreezing);
|
||||
expect(thirdTextWithoutFreezing).not.toBe(secondRunWithoutFreezing);
|
||||
expect(secondOutputText).toBe(firstOutputText);
|
||||
expect(secondOutputText).toBe("hello world");
|
||||
},
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue