💡 (index.tsx): remove trailing commas for cleaner code formatting

 (tests): remove unnecessary keyboard press and fix formatting in chatInputOutputUser.spec.ts
 (tests): update selector for copy button in curl_api_generation.spec.ts
 (tests): fix formatting in intComponent.spec.ts

 (tests): update end-to-end tests for improved stability and clarity

- Remove redundant "Close" button clicks in logs and textInputOutput tests
- Add "more-options-modal" click in promptModalComponent and saveComponents tests
- Replace role-based selectors with test ID selectors for "Copy Code" button
- Update API key section text in userSettings test for consistency
This commit is contained in:
cristhianzl 2024-06-11 15:46:59 -03:00
commit 742f93e229
12 changed files with 87 additions and 91 deletions

View file

@ -138,7 +138,7 @@ export default function CodeTabsComponent({
<Label
className={cn(
"relative right-1 top-[4px] text-xs font-medium text-muted-foreground",
activeTweaks ? "text-primary" : "",
activeTweaks ? "text-primary" : ""
)}
htmlFor="tweaks-switch"
>
@ -193,7 +193,7 @@ export default function CodeTabsComponent({
<div className="api-modal-according-display">
<div
className={classNames(
"h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll",
"h-[70vh] w-full overflow-y-auto overflow-x-hidden rounded-lg bg-muted custom-scroll"
)}
>
{data?.map((node: any, i) => (
@ -232,8 +232,8 @@ export default function CodeTabsComponent({
.show &&
LANGFLOW_SUPPORTED_TYPES.has(
node.data.node.template[templateField]
.type,
),
.type
)
)
.map((templateField, indx) => {
return (
@ -291,7 +291,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -337,7 +337,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -390,7 +390,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -427,7 +427,7 @@ export default function CodeTabsComponent({
e,
node.data.node.template[
templateField
],
]
);
}}
size="small"
@ -458,7 +458,7 @@ export default function CodeTabsComponent({
].fileTypes
}
onFileChange={(
value: any,
value: any
) => {
node.data.node.template[
templateField
@ -511,7 +511,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -551,7 +551,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
value={
@ -613,7 +613,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -659,7 +659,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -705,7 +705,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>
@ -737,8 +737,8 @@ export default function CodeTabsComponent({
].value,
type(
node,
templateField,
),
templateField
)
)
}
duplicateKey={
@ -747,15 +747,15 @@ export default function CodeTabsComponent({
onChange={(target) => {
const valueToNumbers =
convertValuesToNumbers(
target,
target
);
node.data.node!.template[
templateField
].value = valueToNumbers;
setErrorDuplicateKey(
hasDuplicateKeys(
valueToNumbers,
),
valueToNumbers
)
);
setData((old) => {
let newInputList =
@ -772,7 +772,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
isList={
@ -820,7 +820,7 @@ export default function CodeTabsComponent({
target,
node.data.node.template[
templateField
],
]
);
}}
/>

View file

@ -50,7 +50,7 @@ export default function NodeToolbarComponent({
const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version),
createFlowComponent(cloneDeep(data), version)
);
const preventDefault = true;
const isMac = navigator.platform.toUpperCase().includes("MAC");
@ -67,7 +67,7 @@ export default function NodeToolbarComponent({
data.node.template[templateField].type === "Any" ||
data.node.template[templateField].type === "int" ||
data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict"),
data.node.template[templateField].type === "NestedDict")
).length;
const hasStore = useStoreStore((state) => state.hasStore);
@ -220,7 +220,7 @@ export default function NodeToolbarComponent({
const updateNodeInternals = useUpdateNodeInternals();
const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection,
(state) => state.setLastCopiedSelection
);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -294,7 +294,7 @@ export default function NodeToolbarComponent({
nodes,
edges,
setNodes,
setEdges,
setEdges
);
break;
case "override":
@ -321,14 +321,14 @@ export default function NodeToolbarComponent({
y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y,
},
}
);
break;
}
};
const isSaved = flows.some((flow) =>
Object.values(flow).includes(data.node?.display_name!),
Object.values(flow).includes(data.node?.display_name!)
);
function displayShortcut({
@ -346,7 +346,7 @@ export default function NodeToolbarComponent({
}
});
const filteredShortcut = fixedShortcut.filter(
(key) => !key.toLowerCase().includes("shift"),
(key) => !key.toLowerCase().includes("shift")
);
let shortcutWPlus: string[] = [];
if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@ -370,7 +370,7 @@ export default function NodeToolbarComponent({
const setNode = useFlowStore((state) => state.setNode);
const handleOnNewValue = (
newValue: string | string[] | boolean | Object[],
newValue: string | string[] | boolean | Object[]
): void => {
if (data.node!.template[name].value !== newValue) {
takeSnapshot();
@ -426,8 +426,8 @@ export default function NodeToolbarComponent({
<ShadTooltip
content={displayShortcut(
shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "code",
)!,
({ name }) => name.split(" ")[0].toLowerCase() === "code"
)!
)}
side="top"
>
@ -446,8 +446,8 @@ export default function NodeToolbarComponent({
<ShadTooltip
content={displayShortcut(
shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
)!,
({ name }) => name.split(" ")[0].toLowerCase() === "advanced"
)!
)}
side="top"
>
@ -458,7 +458,7 @@ export default function NodeToolbarComponent({
onClick={() => {
setShowModalAdvanced(true);
}}
data-testid="code-button-modal"
data-testid="advanced-button-modal"
>
<IconComponent name="Settings2" className="h-4 w-4" />
</button>
@ -486,14 +486,14 @@ export default function NodeToolbarComponent({
<ShadTooltip
content={displayShortcut(
shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
)!,
({ name }) => name.split(" ")[0].toLowerCase() === "freeze"
)!
)}
side="top"
>
<button
className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
)}
onClick={(event) => {
event.preventDefault();
@ -514,7 +514,7 @@ export default function NodeToolbarComponent({
className={cn(
"h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : "",
frozen ? "animate-wiggle text-ice" : ""
)}
/>
</button>
@ -542,7 +542,7 @@ export default function NodeToolbarComponent({
<div
data-testid="more-options-modal"
className={classNames(
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
)}
>
<IconComponent
@ -710,7 +710,9 @@ export default function NodeToolbarComponent({
/>{" "}
<span className="">Delete</span>{" "}
<span
className={` absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
className={` absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2] ${
deleteIsFocus ? " " : "bg-muted"
}`}
>
<IconComponent
name="Delete"

View file

@ -52,13 +52,11 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
expect(valueUser).toBe("User");
expect(valueAI).toBe("AI");
await page.keyboard.press("Escape");
await page
.getByTestId("textarea-input_value")
.nth(1)
.fill(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
);
await page.getByTestId("icon-LucideSend").click();
await page.getByText("Close", { exact: true }).click();
@ -89,9 +87,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
await page
.getByText(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
{ exact: true },
{ exact: true }
)
.isVisible(),
.isVisible()
);
});
@ -195,17 +193,13 @@ test("user must be able to send an image on chat", async ({ page }) => {
await page.getByText("Chat Input", { exact: true }).click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
await page.getByTestId("toggle-edit-return_record").click();
expect(
await page.getByTestId("toggle-edit-return_record").isChecked(),
).toBeTruthy();
await page.getByText("Save Changes").click();
await page.getByText("Playground", { exact: true }).click();
const jsonContent = readFileSync(
"src/frontend/tests/end-to-end/assets/chain.png",
"utf-8",
"utf-8"
);
// Create the DataTransfer and File

View file

@ -21,9 +21,9 @@ test("curl_api_generation", async ({ page, context }) => {
await page.waitForTimeout(2000);
await page.getByText("API", { exact: true }).click();
await page.getByRole("tab", { name: "cURL" }).click();
await page.getByRole("button", { name: "Copy Code" }).click();
await page.getByTestId("icon-Copy").last().click();
const handle = await page.evaluateHandle(() =>
navigator.clipboard.readText(),
navigator.clipboard.readText()
);
const clipboardContent = await handle.jsonValue();
expect(clipboardContent.length).toBeGreaterThan(0);

View file

@ -87,77 +87,77 @@ test("IntComponent", async ({ page }) => {
await page.locator('//*[@id="showmodel_kwargs"]').click();
expect(
await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showmodel_name"]').click();
expect(
await page.locator('//*[@id="showmodel_name"]').isChecked(),
await page.locator('//*[@id="showmodel_name"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showopenai_api_base"]').click();
expect(
await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showopenai_api_base"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showopenai_api_key"]').click();
expect(
await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
await page.locator('//*[@id="showopenai_api_key"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showtemperature"]').click();
expect(
await page.locator('//*[@id="showtemperature"]').isChecked(),
await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showmodel_kwargs"]').click();
expect(
await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showmodel_name"]').click();
expect(
await page.locator('//*[@id="showmodel_name"]').isChecked(),
await page.locator('//*[@id="showmodel_name"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showopenai_api_base"]').click();
expect(
await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="showopenai_api_base"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showopenai_api_key"]').click();
expect(
await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
await page.locator('//*[@id="showopenai_api_key"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showtemperature"]').click();
expect(
await page.locator('//*[@id="showtemperature"]').isChecked(),
await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showmodel_kwargs"]').click();
expect(
await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showmodel_name"]').click();
expect(
await page.locator('//*[@id="showmodel_name"]').isChecked(),
await page.locator('//*[@id="showmodel_name"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showopenai_api_base"]').click();
expect(
await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showopenai_api_base"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showopenai_api_key"]').click();
expect(
await page.locator('//*[@id="showopenai_api_key"]').isChecked(),
await page.locator('//*[@id="showopenai_api_key"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="showtemperature"]').click();
expect(
await page.locator('//*[@id="showtemperature"]').isChecked(),
await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeFalsy();
await page.getByText("Save Changes", { exact: true }).click();
@ -172,7 +172,7 @@ test("IntComponent", async ({ page }) => {
await page.locator('//*[@id="showtimeout"]').click();
expect(
await page.locator('//*[@id="showtimeout"]').isChecked(),
await page.locator('//*[@id="showtimeout"]').isChecked()
).toBeTruthy();
const valueEditNode = await page

View file

@ -30,8 +30,6 @@ test("should able to see and interact with logs", async ({ page }) => {
await page.getByText("No Data Available", { exact: true }).isVisible();
await page.keyboard.press("Escape");
await page.getByText("Close").last().click();
await page
.getByTestId("popover-anchor-input-openai_api_key")
.fill(process.env.OPENAI_API_KEY ?? "");

View file

@ -72,6 +72,8 @@ test("PromptTemplateComponent", async ({ page }) => {
expect(false).toBeTruthy();
}
await page.getByTestId("more-options-modal").click();
await page.getByTestId("save-button-modal").click();
const replace = await page.getByTestId("replace-button").isVisible();
@ -138,7 +140,7 @@ test("PromptTemplateComponent", async ({ page }) => {
await page.locator('//*[@id="showtemplate"]').click();
expect(
await page.locator('//*[@id="showtemplate"]').isChecked(),
await page.locator('//*[@id="showtemplate"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showprompt"]').click();
@ -158,7 +160,7 @@ test("PromptTemplateComponent", async ({ page }) => {
await page.locator('//*[@id="showtemplate"]').click();
expect(
await page.locator('//*[@id="showtemplate"]').isChecked(),
await page.locator('//*[@id="showtemplate"]').isChecked()
).toBeTruthy();
await page.locator('//*[@id="showprompt"]').click();

View file

@ -21,9 +21,9 @@ test("python_api_generation", async ({ page, context }) => {
await page.waitForTimeout(2000);
await page.getByText("API", { exact: true }).click();
await page.getByRole("tab", { name: "Python API" }).click();
await page.getByRole("button", { name: "Copy Code" }).click();
await page.getByTestId("icon-Copy").click();
const handle = await page.evaluateHandle(() =>
navigator.clipboard.readText(),
navigator.clipboard.readText()
);
const clipboardContent = await handle.jsonValue();
expect(clipboardContent.length).toBeGreaterThan(0);

View file

@ -27,7 +27,7 @@ test.describe("save component tests", () => {
// Read your file into a buffer.
const jsonContent = readFileSync(
"src/frontend/tests/end-to-end/assets/flow_group_test.json",
"utf-8",
"utf-8"
);
// Create the DataTransfer and File
@ -49,7 +49,7 @@ test.describe("save component tests", () => {
"drop",
{
dataTransfer,
},
}
);
const genericNoda = page.getByTestId("div-generic-node");
@ -84,6 +84,8 @@ test.describe("save component tests", () => {
}
await page.getByTestId("title-Group").click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("icon-SaveAll").click();
const replaceButton = await page.getByTestId("replace-button").isVisible();

View file

@ -60,7 +60,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Click and hold on the first element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div',
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
)
.hover();
await page.mouse.down();
@ -68,7 +68,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Move to the second element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div',
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[9]/div/button/div/div'
)
.hover();
@ -92,7 +92,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Click and hold on the first element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div',
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[13]/button/div/div'
)
.hover();
await page.mouse.down();
@ -100,7 +100,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Move to the second element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div',
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div/div'
)
.hover();
@ -137,8 +137,6 @@ test("TextInputOutputComponent", async ({ page }) => {
await page.keyboard.press("Escape");
await page.getByText("Close", { exact: true }).last().click();
await page
.getByTestId("popover-anchor-input-input_value")
.nth(0)

View file

@ -22,9 +22,9 @@ test("curl_api_generation", async ({ page, context }) => {
await page.waitForTimeout(2000);
await page.getByText("API", { exact: true }).click();
await page.getByRole("tab", { name: "cURL" }).click();
await page.getByRole("button", { name: "Copy Code" }).click();
await page.getByTestId("icon-Copy").click();
const handle = await page.evaluateHandle(() =>
navigator.clipboard.readText(),
navigator.clipboard.readText()
);
const clipboardContent = await handle.jsonValue();
const oldValue = clipboardContent;
@ -48,9 +48,9 @@ test("curl_api_generation", async ({ page, context }) => {
.first()
.fill("teste");
await page.getByRole("tab", { name: "cURL" }).click();
await page.getByRole("button", { name: "Copy Code" }).click();
await page.getByTestId("icon-Copy").click();
const handle2 = await page.evaluateHandle(() =>
navigator.clipboard.readText(),
navigator.clipboard.readText()
);
const clipboardContent2 = await handle2.jsonValue();
const newValue = clipboardContent2;

View file

@ -108,8 +108,8 @@ test("should interact with API Keys", async ({ page }) => {
await page.waitForTimeout(2000);
await page.getByTestId("user-profile-settings").click();
await page.getByText("Settings").click();
await page.getByText("API Keys").click();
await page.getByText("API Keys", { exact: true }).nth(1).isVisible();
await page.getByText("Langflow API").click();
await page.getByText("Langflow API", { exact: true }).nth(1).isVisible();
await page.getByText("Add New").click();
await page.getByPlaceholder("Insert a name for your API Key").isVisible();