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

♻️ (playwright.config.ts): disable fullyParallel and increase workers to 5 to optimize test execution

Browse source 
♻️ (addNewVariableButton.tsx): remove unused Button import and add data-testid to Save Variable button for better testing
♻️ (index.tsx): add preventDefault to button click handlers to prevent form submission
♻️ (sideBarFolderButtons): add data-testid attributes to buttons and inputs for better testing and readability

♻️ (api.tsx): refactor duplicate request check logic into helper function
✨ (api.tsx): add helper function to check and store duplicate requests
♻️ (genericNode): refactor code for better readability and maintainability
💡 (genericNode): add data-testid attribute for testing purposes
🐛 (use-fetch-data-on-mount): fix error handling to prevent undefined errors

🐛 (use-handle-new-value.tsx, use-handle-refresh-buttons.tsx): fix potential undefined errors in error handling
✨ (baseModal/index.tsx, flowSettingsModal/index.tsx): add data-testid attributes for better testability
♻️ (editNodeModal/index.tsx): refactor code for better readability and consistency

♻️ (nodeToolbarComponent): remove trailing commas to improve code style
♻️ (GeneralPage): reorder imports and remove trailing commas for consistency
✅ (chatInputOutput.spec.ts): update path to ChatTest.json for better file organization

✅ (chatInputOutputUser.spec.ts): add additional interactions to chat test
✅ (dragAndDrop.spec.ts): update file path for collection.json
✅ (dropdownComponent.spec.ts): fix formatting and improve locator usage

✅ (filterEdge.spec.ts): fix locator strings and remove redundant code
✅ (floatComponent.spec.ts): remove redundant cache checks and fix locator strings

✅ (flowSettings.spec.ts): update test to use data-testid for save button
✅ (folders.spec.ts): refactor folder creation and editing to use data-testid
✅ (globalVariables.spec.ts): remove redundant save button click in test

✅ (tests): update test locators to use more specific selectors

- Change locators for "Save Changes" button to use `getByText` with exact match
- Update locators for `showchroma_server_http_port` in `inputComponent.spec.ts`
- Add additional test steps in `intComponent.spec.ts` for better coverage

✅ (keyPairListComponent.spec.ts, langflowShortcuts.spec.ts, logs.spec.ts): update locators for better test stability and readability

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

✅ (textInputOutput.spec.ts): update locators and placeholders for accuracy
✅ (toggleComponent.spec.ts): replace locators with getByText for clarity
This commit is contained in:
cristhianzl 2024-06-04 17:49:58 -03:00
commit 0ae32f89d2
36 changed files with 348 additions and 333 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/frontend/playwright.config.ts
View file

@ -15,13 +15,13 @@ dotenv.config({ path: path.resolve(__dirname, "../../.env") });
export default defineConfig({ export default defineConfig({
testDir: "./tests", testDir: "./tests",
/* Run tests in files in parallel */ /* Run tests in files in parallel */
fullyParallel: true, fullyParallel: false,
/* Fail the build on CI if you accidentally left test.only in the source code. */ /* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI, forbidOnly: !!process.env.CI,
/* Retry on CI only */ /* Retry on CI only */
retries: process.env.CI ? 2 : 0, retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */ /* Opt out of parallel tests on CI. */
workers: 1, workers: 5,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */ /* Reporter to use. See https://playwright.dev/docs/test-reporters */
timeout: 120 * 1000, timeout: 120 * 1000,
// reporter: [ // reporter: [
@ -52,18 +52,18 @@ export default defineConfig({
}, },
}, },
{ // {
name: "firefox", // name: "firefox",
use: { // use: {
...devices["Desktop Firefox"], // ...devices["Desktop Firefox"],
launchOptions: { // launchOptions: {
firefoxUserPrefs: { // firefoxUserPrefs: {
"dom.events.asyncClipboard.readText": true, // "dom.events.asyncClipboard.readText": true,
"dom.events.testing.asyncClipboard": true, // "dom.events.testing.asyncClipboard": true,
}, // },
}, // },
}, // },
}, // },
], ],
webServer: [ webServer: [
{ {

13
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -7,7 +7,6 @@ import { useTypesStore } from "../../stores/typesStore";
import { ResponseErrorDetailAPI } from "../../types/api"; import { ResponseErrorDetailAPI } from "../../types/api";
import ForwardedIconComponent from "../genericIconComponent"; import ForwardedIconComponent from "../genericIconComponent";
import InputComponent from "../inputComponent"; import InputComponent from "../inputComponent";
import { Button } from "../ui/button";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { Label } from "../ui/label"; import { Label } from "../ui/label";
import { Textarea } from "../ui/textarea"; import { Textarea } from "../ui/textarea";
@ -24,19 +23,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields); const componentFields = useTypesStore((state) => state.ComponentFields);
const unavaliableFields = new Set( const unavaliableFields = new Set(
Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)), Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
); );
const availableFields = () => { const availableFields = () => {
const fields = Array.from(componentFields).filter( const fields = Array.from(componentFields).filter(
(field) => !unavaliableFields.has(field), (field) => !unavaliableFields.has(field)
); );
return sortByName(fields); return sortByName(fields);
}; };
const addGlobalVariable = useGlobalVariablesStore( const addGlobalVariable = useGlobalVariablesStore(
(state) => state.addGlobalVariable, (state) => state.addGlobalVariable
); );
function handleSaveVariable() { function handleSaveVariable() {
@ -65,7 +64,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
let responseError = error as ResponseErrorDetailAPI; let responseError = error as ResponseErrorDetailAPI;
setErrorData({ setErrorData({
title: "Error creating variable", title: "Error creating variable",
list: [responseError.response.data.detail ?? "Unknown error"], list: [responseError?.response?.data?.detail ?? "Unknown error"],
}); });
}); });
} }
@ -142,7 +141,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
></InputComponent> ></InputComponent>
</div> </div>
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer submit={{ label: "Save Variable" }} /> <BaseModal.Footer
submit={{ label: "Save Variable", dataTestId: "save-variable-btn" }}
/>
</BaseModal> </BaseModal>
); );
} }

6
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -55,10 +55,11 @@ export default function InputListComponent({
/> />
{idx === value.length - 1 ? ( {idx === value.length - 1 ? (
<button <button
onClick={() => { onClick={(e) => {
let newInputList = _.cloneDeep(value); let newInputList = _.cloneDeep(value);
newInputList.push(""); newInputList.push("");
onChange(newInputList); onChange(newInputList);
e.preventDefault();
}} }}
data-testid={ data-testid={
`input-list-plus-btn${ `input-list-plus-btn${
@ -79,10 +80,11 @@ export default function InputListComponent({
editNode ? "-edit" : "" editNode ? "-edit" : ""
}_${componentName}-` + idx }_${componentName}-` + idx
} }
onClick={() => { onClick={(e) => {
let newInputList = _.cloneDeep(value); let newInputList = _.cloneDeep(value);
newInputList.splice(idx, 1); newInputList.splice(idx, 1);
onChange(newInputList); onChange(newInputList);
e.preventDefault();
}} }}
disabled={disabled || playgroundDisabled} disabled={disabled || playgroundDisabled}
> >

21
src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -33,7 +33,7 @@ const SideBarFoldersButtonsComponent = ({
const [foldersNames, setFoldersNames] = useState({}); const [foldersNames, setFoldersNames] = useState({});
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const [editFolders, setEditFolderName] = useState( const [editFolders, setEditFolderName] = useState(
folders.map((obj) => ({ name: obj.name, edit: false })), folders.map((obj) => ({ name: obj.name, edit: false }))
); );
const uploadFolder = useFolderStore((state) => state.uploadFolder); const uploadFolder = useFolderStore((state) => state.uploadFolder);
const currentFolder = pathname.split("/"); const currentFolder = pathname.split("/");
@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop( const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
folderId, folderId,
handleFolderChange, handleFolderChange
); );
const handleUploadFlowsToFolder = () => { const handleUploadFlowsToFolder = () => {
@ -73,7 +73,7 @@ const SideBarFoldersButtonsComponent = ({
addFolder({ name: "New Folder", parent_id: null, description: "" }).then( addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
(res) => { (res) => {
getFoldersApi(true); getFoldersApi(true);
}, }
); );
} }
@ -100,6 +100,7 @@ const SideBarFoldersButtonsComponent = ({
size="icon" size="icon"
className="px-2" className="px-2"
onClick={addNewFolder} onClick={addNewFolder}
data-testid="add-folder-button"
> >
<ForwardedIconComponent name="FolderPlus" className="w-4" /> <ForwardedIconComponent name="FolderPlus" className="w-4" />
</Button> </Button>
@ -108,6 +109,7 @@ const SideBarFoldersButtonsComponent = ({
size="icon" size="icon"
className="px-2" className="px-2"
onClick={handleUploadFlowsToFolder} onClick={handleUploadFlowsToFolder}
data-testid="upload-folder-button"
> >
<ForwardedIconComponent name="Upload" className="w-4" /> <ForwardedIconComponent name="Upload" className="w-4" />
</Button> </Button>
@ -117,7 +119,7 @@ const SideBarFoldersButtonsComponent = ({
<> <>
{folders.map((item, index) => { {folders.map((item, index) => {
const editFolderName = editFolders?.filter( const editFolderName = editFolders?.filter(
(folder) => folder.name === item.name, (folder) => folder.name === item.name
)[0]; )[0];
return ( return (
<div <div
@ -133,7 +135,7 @@ const SideBarFoldersButtonsComponent = ({
? "border border-border bg-muted hover:bg-muted" ? "border border-border bg-muted hover:bg-muted"
: "border hover:bg-transparent lg:border-transparent lg:hover:border-border", : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
"group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full", "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
folderIdDragging === item.id! ? "bg-border" : "", folderIdDragging === item.id! ? "bg-border" : ""
)} )}
onClick={() => handleChangeFolder!(item.id!)} onClick={() => handleChangeFolder!(item.id!)}
> >
@ -203,7 +205,7 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ folders.map((obj) => ({
name: obj.name, name: obj.name,
edit: false, edit: false,
})), }))
); );
} }
if (e.key === "Enter") { if (e.key === "Enter") {
@ -236,10 +238,10 @@ const SideBarFoldersButtonsComponent = ({
}; };
const updatedFolder = await updateFolder( const updatedFolder = await updateFolder(
body, body,
item.id!, item.id!
); );
const updateFolders = folders.filter( const updateFolders = folders.filter(
(f) => f.name !== item.name, (f) => f.name !== item.name
); );
setFolders([...updateFolders, updatedFolder]); setFolders([...updateFolders, updatedFolder]);
setFoldersNames({}); setFoldersNames({});
@ -247,7 +249,7 @@ const SideBarFoldersButtonsComponent = ({
folders.map((obj) => ({ folders.map((obj) => ({
name: obj.name, name: obj.name,
edit: false, edit: false,
})), }))
); );
} else { } else {
setFoldersNames((old) => ({ setFoldersNames((old) => ({
@ -258,6 +260,7 @@ const SideBarFoldersButtonsComponent = ({
}} }}
value={foldersNames[item.name]} value={foldersNames[item.name]}
id={`input-folder-${item.name}`} id={`input-folder-${item.name}`}
data-testid={`input-folder`}
/> />
</div> </div>
) : ( ) : (

34
src/frontend/src/controllers/API/api.tsx
View file

@ -2,11 +2,11 @@ import axios, { AxiosError, AxiosInstance } from "axios";
import { useContext, useEffect } from "react"; import { useContext, useEffect } from "react";
import { Cookies } from "react-cookie"; import { Cookies } from "react-cookie";
import { renewAccessToken } from "."; import { renewAccessToken } from ".";
import { AUTHORIZED_DUPLICATE_REQUESTS } from "../../constants/constants";
import { BuildStatus } from "../../constants/enums"; import { BuildStatus } from "../../constants/enums";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests";
// Create a new Axios instance // Create a new Axios instance
const api: AxiosInstance = axios.create({ const api: AxiosInstance = axios.create({
@ -48,7 +48,7 @@ function ApiInterceptor() {
} }
await clearBuildVerticesState(error); await clearBuildVerticesState(error);
return Promise.reject(error); return Promise.reject(error);
}, }
); );
const isAuthorizedURL = (url) => { const isAuthorizedURL = (url) => {
@ -65,10 +65,10 @@ function ApiInterceptor() {
const parsedURL = new URL(url); const parsedURL = new URL(url);
const isDomainAllowed = authorizedDomains.some( const isDomainAllowed = authorizedDomains.some(
(domain) => parsedURL.origin === new URL(domain).origin, (domain) => parsedURL.origin === new URL(domain).origin
); );
const isEndpointAllowed = authorizedEndpoints.some((endpoint) => const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
parsedURL.pathname.includes(endpoint), parsedURL.pathname.includes(endpoint)
); );
return isDomainAllowed || isEndpointAllowed; return isDomainAllowed || isEndpointAllowed;
@ -81,28 +81,12 @@ function ApiInterceptor() {
// Request interceptor to add access token to every request // Request interceptor to add access token to every request
const requestInterceptor = api.interceptors.request.use( const requestInterceptor = api.interceptors.request.use(
(config) => { (config) => {
const lastUrl = localStorage.getItem("lastUrlCalled"); const checkRequest = checkDuplicateRequestAndStoreRequest(config);
const lastMethodCalled = localStorage.getItem("lastMethodCalled");
const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) => if (!checkRequest) {
config?.url!.includes(request), return Promise.reject("Duplicate request.");
);
if (
config?.url === lastUrl &&
!isContained &&
lastMethodCalled === config.method
) {
return Promise.reject("Duplicate request");
} }
localStorage.setItem("lastUrlCalled", config.url ?? "");
localStorage.setItem("lastMethodCalled", config.method ?? "");
localStorage.setItem(
"lastRequestData",
JSON.stringify(config.data) ?? "",
);
const accessToken = cookies.get("access_token_lf"); const accessToken = cookies.get("access_token_lf");
if (accessToken && !isAuthorizedURL(config?.url)) { if (accessToken && !isAuthorizedURL(config?.url)) {
config.headers["Authorization"] = `Bearer ${accessToken}`; config.headers["Authorization"] = `Bearer ${accessToken}`;
@ -112,7 +96,7 @@ function ApiInterceptor() {
}, },
(error) => { (error) => {
return Promise.reject(error); return Promise.reject(error);
}, }
); );
return () => { return () => {
@ -144,7 +128,7 @@ function ApiInterceptor() {
if (error?.config?.headers) { if (error?.config?.headers) {
delete error.config.headers["Authorization"]; delete error.config.headers["Authorization"];
error.config.headers["Authorization"] = `Bearer ${cookies.get( error.config.headers["Authorization"] = `Bearer ${cookies.get(
"access_token_lf", "access_token_lf"
)}`; )}`;
const response = await axios.request(error.config); const response = await axios.request(error.config);
return response; return response;

30
src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts Normal file
View file

@ -0,0 +1,30 @@
import { AUTHORIZED_DUPLICATE_REQUESTS } from "../../../constants/constants";
export function checkDuplicateRequestAndStoreRequest(config) {
const lastUrl = localStorage.getItem("lastUrlCalled");
const lastMethodCalled = localStorage.getItem("lastMethodCalled");
const lastRequestTime = localStorage.getItem("lastRequestTime");
const currentTime = Date.now();
const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
config?.url!.includes(request),
);
if (
config?.url === lastUrl &&
!isContained &&
lastMethodCalled === config.method &&
lastMethodCalled === "get" && // Assuming you want to check only for GET requests
lastRequestTime &&
currentTime - parseInt(lastRequestTime, 10) < 800
) {
return false;
}
localStorage.setItem("lastUrlCalled", config.url ?? "");
localStorage.setItem("lastMethodCalled", config.method ?? "");
localStorage.setItem("lastRequestTime", currentTime.toString());
return true;
}

37
src/frontend/src/customNodes/genericNode/index.tsx
View file

@ -55,14 +55,14 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description!, data.node?.description!
); );
const [isOutdated, setIsOutdated] = useState(false); const [isOutdated, setIsOutdated] = useState(false);
const buildStatus = useFlowStore( const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status, (state) => state.flowBuildStatus[data.id]?.status
); );
const lastRunTime = useFlowStore( const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp, (state) => state.flowBuildStatus[data.id]?.timestamp
); );
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
useState<validationStatusType | null>(null); useState<validationStatusType | null>(null);
@ -77,10 +77,10 @@ export default function GenericNode({
// first check if data.type in NATIVE_CATEGORIES // first check if data.type in NATIVE_CATEGORIES
// if not return // if not return
if (!data.node?.template?.code?.value) return; if (!data.node?.template?.code?.value) return;
const thisNodeTemplate = templates[data.type].template; const thisNodeTemplate = templates[data.type]?.template;
// if the template does not have a code key // if the template does not have a code key
// return // return
if (!thisNodeTemplate.code) return; if (!thisNodeTemplate?.code) return;
const currentCode = thisNodeTemplate.code?.value; const currentCode = thisNodeTemplate.code?.value;
const thisNodesCode = data.node!.template?.code?.value; const thisNodesCode = data.node!.template?.code?.value;
const componentsToIgnore = ["Custom Component"]; const componentsToIgnore = ["Custom Component"];
@ -115,7 +115,7 @@ export default function GenericNode({
updateNodeInternals(data.id); updateNodeInternals(data.id);
}, },
[data.id, data.node, setNode, setIsOutdated], [data.id, data.node, setNode, setIsOutdated]
); );
if (!data.node!.template) { if (!data.node!.template) {
@ -255,7 +255,7 @@ export default function GenericNode({
const isDark = useDarkStore((state) => state.dark); const isDark = useDarkStore((state) => state.dark);
const renderIconStatus = ( const renderIconStatus = (
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null, validationStatus: validationStatusType | null
) => { ) => {
if (buildStatus === BuildStatus.BUILDING) { if (buildStatus === BuildStatus.BUILDING) {
return <Loading className="text-medium-indigo" />; return <Loading className="text-medium-indigo" />;
@ -296,7 +296,7 @@ export default function GenericNode({
}; };
const getSpecificClassFromBuildStatus = ( const getSpecificClassFromBuildStatus = (
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null, validationStatus: validationStatusType | null
) => { ) => {
let isInvalid = validationStatus && !validationStatus.valid; let isInvalid = validationStatus && !validationStatus.valid;
@ -320,11 +320,11 @@ export default function GenericNode({
selected: boolean, selected: boolean,
showNode: boolean, showNode: boolean,
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null, validationStatus: validationStatusType | null
) => { ) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus, buildStatus,
validationStatus, validationStatus
); );
const baseBorderClass = getBaseBorderClass(selected); const baseBorderClass = getBaseBorderClass(selected);
@ -333,7 +333,7 @@ export default function GenericNode({
baseBorderClass, baseBorderClass,
nodeSizeClass, nodeSizeClass,
"generic-node-div", "generic-node-div",
specificClassFromBuildStatus, specificClassFromBuildStatus
); );
return names; return names;
}; };
@ -393,7 +393,7 @@ export default function GenericNode({
selected, selected,
showNode, showNode,
buildStatus, buildStatus,
validationStatus, validationStatus
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -416,6 +416,7 @@ export default function GenericNode({
"generic-node-title-arrangement rounded-full" + "generic-node-title-arrangement rounded-full" +
(!showNode && " justify-center ") (!showNode && " justify-center ")
} }
data-testid="generic-node-title-arrangement"
> >
{iconNodeRender()} {iconNodeRender()}
{showNode && ( {showNode && (
@ -523,7 +524,7 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
@ -551,7 +552,7 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy} proxy={data.node?.template[templateField].proxy}
showNode={showNode} showNode={showNode}
/> />
), )
)} )}
<ParameterComponent <ParameterComponent
key={scapedJSONStringfy({ key={scapedJSONStringfy({
@ -708,7 +709,7 @@ export default function GenericNode({
!data.node?.description) && !data.node?.description) &&
nameEditable nameEditable
? "font-light italic" ? "font-light italic"
: "", : ""
)} )}
onClick={(e) => { onClick={(e) => {
setInputDescription(true); setInputDescription(true);
@ -770,13 +771,13 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField, templateField
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
tooltipTitle={ tooltipTitle={
data.node?.template[templateField].input_types?.join( data.node?.template[templateField].input_types?.join(
"\n", "\n"
) ?? data.node?.template[templateField].type ) ?? data.node?.template[templateField].type
} }
required={data.node!.template[templateField].required} required={data.node!.template[templateField].required}
@ -803,7 +804,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "", Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center", "flex-max-width justify-center"
)} )}
> >
{" "} {" "}

4
src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx
View file

@ -9,7 +9,7 @@ const useFetchDataOnMount = (
handleUpdateValues, handleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading, setIsLoading
) => { ) => {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
@ -40,7 +40,7 @@ const useFetchDataOnMount = (
setErrorData({ setErrorData({
title: "Error while updating the Component", title: "Error while updating the Component",
list: [responseError.response.data.detail ?? "Unknown error"], list: [responseError?.response?.data?.detail ?? "Unknown error"],
}); });
} }
setIsLoading(false); setIsLoading(false);

6
src/frontend/src/customNodes/hooks/use-handle-new-value.tsx
View file

@ -10,7 +10,7 @@ const useHandleOnNewValue = (
debouncedHandleUpdateValues, debouncedHandleUpdateValues,
setNode, setNode,
renderTooltips, renderTooltips,
setIsLoading, setIsLoading
) => { ) => {
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
@ -44,7 +44,9 @@ const useHandleOnNewValue = (
let responseError = error as ResponseErrorTypeAPI; let responseError = error as ResponseErrorTypeAPI;
setErrorData({ setErrorData({
title: "Error while updating the Component", title: "Error while updating the Component",
list: [responseError.response.data.detail.error ?? "Unknown error"], list: [
responseError?.response?.data?.detail.error ?? "Unknown error",
],
}); });
} }
setIsLoading(false); setIsLoading(false);

2
src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx
View file

@ -26,7 +26,7 @@ const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => {
setErrorData({ setErrorData({
title: "Error while updating the Component", title: "Error while updating the Component",
list: [responseError.response.data.detail ?? "Unknown error"], list: [responseError?.response?.data?.detail ?? "Unknown error"],
}); });
} }
setIsLoading(false); setIsLoading(false);

14
src/frontend/src/modals/baseModal/index.tsx
View file

@ -71,6 +71,7 @@ const Footer: React.FC<{
icon?: ReactNode; icon?: ReactNode;
loading?: boolean; loading?: boolean;
disabled?: boolean; disabled?: boolean;
dataTestId?: string;
}; };
}> = ({ children, submit }) => { }> = ({ children, submit }) => {
return submit ? ( return submit ? (
@ -83,6 +84,7 @@ const Footer: React.FC<{
</Button> </Button>
</DialogClose> </DialogClose>
<Button <Button
data-testid={submit.dataTestId}
type="submit" type="submit"
disabled={submit.loading || submit.disabled} disabled={submit.loading || submit.disabled}
className="relative" className="relative"
@ -90,7 +92,7 @@ const Footer: React.FC<{
<div <div
className={cn( className={cn(
submit.loading ? "opacity-100" : "opacity-0", submit.loading ? "opacity-100" : "opacity-0",
"absolute self-center", "absolute self-center"
)} )}
> >
<ForwardedIconComponent <ForwardedIconComponent
@ -114,7 +116,7 @@ interface BaseModalProps {
React.ReactElement<ContentProps>, React.ReactElement<ContentProps>,
React.ReactElement<HeaderProps>, React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>?, React.ReactElement<TriggerProps>?,
React.ReactElement<FooterProps>?, React.ReactElement<FooterProps>?
]; ];
open?: boolean; open?: boolean;
setOpen?: (open: boolean) => void; setOpen?: (open: boolean) => void;
@ -148,16 +150,16 @@ function BaseModal({
onSubmit, onSubmit,
}: BaseModalProps) { }: BaseModalProps) {
const headerChild = React.Children.toArray(children).find( const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header, (child) => (child as React.ReactElement).type === Header
); );
const triggerChild = React.Children.toArray(children).find( const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger, (child) => (child as React.ReactElement).type === Trigger
); );
const ContentChild = React.Children.toArray(children).find( const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content, (child) => (child as React.ReactElement).type === Content
); );
const ContentFooter = React.Children.toArray(children).find( const ContentFooter = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Footer, (child) => (child as React.ReactElement).type === Footer
); );
let minWidth: string; let minWidth: string;

42
src/frontend/src/modals/editNodeModal/index.tsx
View file

@ -52,7 +52,7 @@ const EditNodeModal = forwardRef(
setOpen: (open: boolean) => void; setOpen: (open: boolean) => void;
data: NodeDataType; data: NodeDataType;
}, },
ref, ref
) => { ) => {
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
@ -134,7 +134,7 @@ const EditNodeModal = forwardRef(
"edit-node-modal-box", "edit-node-modal-box",
nodeLength > limitScrollFieldsModal nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "", : ""
)} )}
> >
{nodeLength > 0 && ( {nodeLength > 0 && (
@ -157,8 +157,8 @@ const EditNodeModal = forwardRef(
templateParam.charAt(0) !== "_" && templateParam.charAt(0) !== "_" &&
myData.node?.template[templateParam].show && myData.node?.template[templateParam].show &&
LANGFLOW_SUPPORTED_TYPES.has( LANGFLOW_SUPPORTED_TYPES.has(
myData.node!.template[templateParam].type, myData.node!.template[templateParam].type
), )
) )
.map((templateParam, index) => { .map((templateParam, index) => {
let id = { let id = {
@ -180,8 +180,8 @@ const EditNodeModal = forwardRef(
myData.node?.template[templateParam] myData.node?.template[templateParam]
.proxy, .proxy,
} }
: id, : id
), )
) ?? false; ) ?? false;
return ( return (
<TableRow <TableRow
@ -204,11 +204,11 @@ const EditNodeModal = forwardRef(
? myData.node?.template[templateParam] ? myData.node?.template[templateParam]
.proxy?.id .proxy?.id
: myData.node?.template[templateParam] : myData.node?.template[templateParam]
.display_name .display_name
? myData.node!.template[templateParam] ? myData.node!.template[templateParam]
.display_name .display_name
: myData.node?.template[templateParam] : myData.node?.template[templateParam]
.name .name
} }
> >
<span> <span>
@ -263,7 +263,7 @@ const EditNodeModal = forwardRef(
onChange={(value: string[]) => { onChange={(value: string[]) => {
handleOnNewValue( handleOnNewValue(
value, value,
templateParam, templateParam
); );
}} }}
/> />
@ -287,11 +287,11 @@ const EditNodeModal = forwardRef(
.value ?? "" .value ?? ""
} }
onChange={( onChange={(
value: string | string[], value: string | string[]
) => { ) => {
handleOnNewValue( handleOnNewValue(
value, value,
templateParam, templateParam
); );
}} }}
/> />
@ -341,7 +341,7 @@ const EditNodeModal = forwardRef(
].value = newValue; ].value = newValue;
handleOnNewValue( handleOnNewValue(
newValue, newValue,
templateParam, templateParam
); );
}} }}
id="editnode-div-dict-input" id="editnode-div-dict-input"
@ -358,7 +358,7 @@ const EditNodeModal = forwardRef(
myData.node!.template[templateParam].value myData.node!.template[templateParam].value
?.length > 1 ?.length > 1
? "my-3" ? "my-3"
: "", : ""
)} )}
> >
<KeypairListComponent <KeypairListComponent
@ -374,7 +374,7 @@ const EditNodeModal = forwardRef(
myData.node!.template[ myData.node!.template[
templateParam templateParam
].value, ].value,
type(templateParam)!, type(templateParam)!
) )
} }
duplicateKey={errorDuplicateKey} duplicateKey={errorDuplicateKey}
@ -385,11 +385,11 @@ const EditNodeModal = forwardRef(
templateParam templateParam
].value = valueToNumbers; ].value = valueToNumbers;
setErrorDuplicateKey( setErrorDuplicateKey(
hasDuplicateKeys(valueToNumbers), hasDuplicateKeys(valueToNumbers)
); );
handleOnNewValue( handleOnNewValue(
valueToNumbers, valueToNumbers,
templateParam, templateParam
); );
}} }}
isList={ isList={
@ -419,7 +419,7 @@ const EditNodeModal = forwardRef(
setEnabled={(isEnabled) => { setEnabled={(isEnabled) => {
handleOnNewValue( handleOnNewValue(
isEnabled, isEnabled,
templateParam, templateParam
); );
}} }}
size="small" size="small"
@ -643,7 +643,7 @@ const EditNodeModal = forwardRef(
<BaseModal.Footer submit={{ label: "Save Changes" }} /> <BaseModal.Footer submit={{ label: "Save Changes" }} />
</BaseModal> </BaseModal>
); );
}, }
); );
export default EditNodeModal; export default EditNodeModal;

4
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -1,7 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import EditFlowSettings from "../../components/editFlowSettingsComponent"; import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants"; import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
@ -36,7 +35,7 @@ export default function FlowSettingsModal({
.catch((err) => { .catch((err) => {
useAlertStore.getState().setErrorData({ useAlertStore.getState().setErrorData({
title: "Error while saving changes", title: "Error while saving changes",
list: [(err as AxiosError).response?.data.detail ?? ""], list: [err?.response?.data.detail ?? ""],
}); });
console.error(err); console.error(err);
}); });
@ -79,6 +78,7 @@ export default function FlowSettingsModal({
submit={{ submit={{
label: "Save", label: "Save",
disabled: nameLists.includes(name) && name !== currentFlow!.name, disabled: nameLists.includes(name) && name !== currentFlow!.name,
dataTestId: "save-flow-settings",
}} }}
/> />
</BaseModal> </BaseModal>

28
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -58,7 +58,7 @@ export default function NodeToolbarComponent({
data.node.template[templateField].type === "Any" || data.node.template[templateField].type === "Any" ||
data.node.template[templateField].type === "int" || data.node.template[templateField].type === "int" ||
data.node.template[templateField].type === "dict" || data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict"), data.node.template[templateField].type === "NestedDict")
).length; ).length;
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const hasStore = useStoreStore((state) => state.hasStore); const hasStore = useStoreStore((state) => state.hasStore);
@ -85,7 +85,7 @@ export default function NodeToolbarComponent({
const [showconfirmShare, setShowconfirmShare] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>( const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version), createFlowComponent(cloneDeep(data), version)
); );
const openInNewTab = (url) => { const openInNewTab = (url) => {
@ -100,7 +100,7 @@ export default function NodeToolbarComponent({
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection, (state) => state.setLastCopiedSelection
); );
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -153,7 +153,7 @@ export default function NodeToolbarComponent({
nodes, nodes,
edges, edges,
setNodes, setNodes,
setEdges, setEdges
); );
break; break;
case "override": case "override":
@ -177,16 +177,16 @@ export default function NodeToolbarComponent({
y: 10, y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x, paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y, paneY: nodes.find((node) => node.id === data.id)?.position.y,
}, }
); );
break; break;
case "update": case "update":
takeSnapshot(); takeSnapshot();
// to update we must get the code from the templates in useTypesStore // to update we must get the code from the templates in useTypesStore
const thisNodeTemplate = templates[data.type].template; const thisNodeTemplate = templates[data.type]?.template;
// if the template does not have a code key // if the template does not have a code key
// return // return
if (!thisNodeTemplate.code) return; if (!thisNodeTemplate?.code) return;
const currentCode = thisNodeTemplate.code.value; const currentCode = thisNodeTemplate.code.value;
if (data.node) { if (data.node) {
@ -215,13 +215,13 @@ export default function NodeToolbarComponent({
}; };
const isSaved = flows.some((flow) => const isSaved = flows.some((flow) =>
Object.values(flow).includes(data.node?.display_name!), Object.values(flow).includes(data.node?.display_name!)
); );
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
const handleOnNewValue = ( const handleOnNewValue = (
newValue: string | string[] | boolean | Object[], newValue: string | string[] | boolean | Object[]
): void => { ): void => {
if (data.node!.template[name].value !== newValue) { if (data.node!.template[name].value !== newValue) {
takeSnapshot(); takeSnapshot();
@ -408,7 +408,7 @@ export default function NodeToolbarComponent({
data-testid="save-button-modal" data-testid="save-button-modal"
className={classNames( 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",
hasCode ? " " : " rounded-l-md ", hasCode ? " " : " rounded-l-md "
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -426,7 +426,7 @@ export default function NodeToolbarComponent({
<button <button
data-testid="duplicate-button-modal" data-testid="duplicate-button-modal"
className={classNames( 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) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -440,7 +440,7 @@ export default function NodeToolbarComponent({
<ShadTooltip content="Freeze" side="top"> <ShadTooltip content="Freeze" side="top">
<button <button
className={classNames( 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) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -461,7 +461,7 @@ export default function NodeToolbarComponent({
className={cn( className={cn(
"h-4 w-4 transition-all", "h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE // TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : "", frozen ? "animate-wiggle text-ice" : ""
)} )}
/> />
</button> </button>
@ -474,7 +474,7 @@ export default function NodeToolbarComponent({
<div <div
data-testid="more-options-modal" data-testid="more-options-modal"
className={classNames( 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 <IconComponent

20
src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
View file

@ -1,6 +1,7 @@
import * as Form from "@radix-ui/react-form"; import * as Form from "@radix-ui/react-form";
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import ForwardedIconComponent from "../../../../components/genericIconComponent"; import ForwardedIconComponent from "../../../../components/genericIconComponent";
import GradientChooserComponent from "../../../../components/gradientChooserComponent"; import GradientChooserComponent from "../../../../components/gradientChooserComponent";
import InputComponent from "../../../../components/inputComponent"; import InputComponent from "../../../../components/inputComponent";
@ -35,17 +36,16 @@ import {
} from "../../../../controllers/API"; } from "../../../../controllers/API";
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useStoreStore } from "../../../../stores/storeStore";
import { import {
inputHandlerEventType, inputHandlerEventType,
patchUserInputStateType, patchUserInputStateType,
} from "../../../../types/components"; } from "../../../../types/components";
import { gradients } from "../../../../utils/styleUtils"; import { gradients } from "../../../../utils/styleUtils";
import { useStoreStore } from "../../../../stores/storeStore";
import { useParams } from "react-router-dom";
export default function GeneralPage() { export default function GeneralPage() {
const setCurrentFlowId = useFlowsManagerStore( const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId, (state) => state.setCurrentFlowId
); );
const { scrollId } = useParams(); const { scrollId } = useParams();
@ -59,7 +59,7 @@ export default function GeneralPage() {
}, [scrollId]); }, [scrollId]);
const [inputState, setInputState] = useState<patchUserInputStateType>( const [inputState, setInputState] = useState<patchUserInputStateType>(
CONTROL_PATCH_USER_STATE, CONTROL_PATCH_USER_STATE
); );
const { autoLogin } = useContext(AuthContext); const { autoLogin } = useContext(AuthContext);
@ -143,7 +143,7 @@ export default function GeneralPage() {
setHasApiKey(false); setHasApiKey(false);
setValidApiKey(false); setValidApiKey(false);
setLoadingApiKey(false); setLoadingApiKey(false);
}, }
); );
} }
}; };
@ -290,8 +290,8 @@ export default function GeneralPage() {
{(hasApiKey && !validApiKey {(hasApiKey && !validApiKey
? INVALID_API_KEY ? INVALID_API_KEY
: !hasApiKey : !hasApiKey
? NO_API_KEY ? NO_API_KEY
: "") + INSERT_API_KEY} : "") + INSERT_API_KEY}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -319,7 +319,11 @@ export default function GeneralPage() {
</CardContent> </CardContent>
<CardFooter className="border-t px-6 py-4"> <CardFooter className="border-t px-6 py-4">
<Form.Submit asChild> <Form.Submit asChild>
<Button loading={loadingApiKey} type="submit"> <Button
loading={loadingApiKey}
type="submit"
data-testid="api-key-save-button-store"
>
Save Save
</Button> </Button>
</Form.Submit> </Form.Submit>

2
src/frontend/tests/end-to-end/chatInputOutput.spec.ts
View file

@ -23,7 +23,7 @@ test("chat_io_teste", async ({ page }) => {
} }
const jsonContent = readFileSync( const jsonContent = readFileSync(
"tests/end-to-end/assets/ChatTest.json", "src/frontend/tests/end-to-end/assets/ChatTest.json",
"utf-8" "utf-8"
); );

5
src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
View file

@ -59,6 +59,9 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
.fill( .fill(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!" "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
); );
await page.getByTestId("icon-LucideSend").click();
await page.getByText("Close", { exact: true }).click();
await page await page
.getByTestId("popover-anchor-input-sender_name") .getByTestId("popover-anchor-input-sender_name")
.nth(1) .nth(1)
@ -68,7 +71,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
.nth(0) .nth(0)
.fill("TestSenderNameAI"); .fill("TestSenderNameAI");
await page.getByText("Playground", { exact: true }).click(); await page.getByText("Playground", { exact: true }).last().click();
await page.getByTestId("icon-LucideSend").click(); await page.getByTestId("icon-LucideSend").click();
valueUser = await page valueUser = await page

6
src/frontend/tests/end-to-end/dragAndDrop.spec.ts
View file

@ -26,8 +26,8 @@ test.describe("drag and drop test", () => {
await page.locator("span").filter({ hasText: "My Collection" }).isVisible(); await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
// Read your file into a buffer. // Read your file into a buffer.
const jsonContent = readFileSync( const jsonContent = readFileSync(
"tests/end-to-end/assets/collection.json", "src/frontend/tests/end-to-end/assets/collection.json",
"utf-8", "utf-8"
); );
// Create the DataTransfer and File // Create the DataTransfer and File
@ -47,7 +47,7 @@ test.describe("drag and drop test", () => {
"drop", "drop",
{ {
dataTransfer, dataTransfer,
}, }
); );
const genericNoda = page.getByTestId("div-generic-node"); const genericNoda = page.getByTestId("div-generic-node");

30
src/frontend/tests/end-to-end/dropdownComponent.spec.ts
View file

@ -78,32 +78,32 @@ test("dropDownComponent", async ({ page }) => {
await page.locator('//*[@id="showcredentials_profile_name"]').click(); await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect( expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(), await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showcredentials_profile_name"]').click(); await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect( expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(), await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showendpoint_url"]').click(); await page.locator('//*[@id="showendpoint_url"]').click();
expect( expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked(), await page.locator('//*[@id="showendpoint_url"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showendpoint_url"]').click(); await page.locator('//*[@id="showendpoint_url"]').click();
expect( expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked(), await page.locator('//*[@id="showendpoint_url"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showregion_name"]').click(); await page.locator('//*[@id="showregion_name"]').click();
expect( expect(
await page.locator('//*[@id="showregion_name"]').isChecked(), await page.locator('//*[@id="showregion_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showregion_name"]').click(); await page.locator('//*[@id="showregion_name"]').click();
expect( expect(
await page.locator('//*[@id="showregion_name"]').isChecked(), await page.locator('//*[@id="showregion_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showmodel_id // showmodel_id
@ -113,7 +113,7 @@ test("dropDownComponent", async ({ page }) => {
// showmodel_id // showmodel_id
await page.locator('//*[@id="showmodel_id"]').click(); await page.locator('//*[@id="showmodel_id"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_id"]').isChecked(), await page.locator('//*[@id="showmodel_id"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showcache"]').click(); await page.locator('//*[@id="showcache"]').click();
@ -124,32 +124,32 @@ test("dropDownComponent", async ({ page }) => {
await page.locator('//*[@id="showcredentials_profile_name"]').click(); await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect( expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(), await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showcredentials_profile_name"]').click(); await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect( expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(), await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showendpoint_url"]').click(); await page.locator('//*[@id="showendpoint_url"]').click();
expect( expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked(), await page.locator('//*[@id="showendpoint_url"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showendpoint_url"]').click(); await page.locator('//*[@id="showendpoint_url"]').click();
expect( expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked(), await page.locator('//*[@id="showendpoint_url"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showregion_name"]').click(); await page.locator('//*[@id="showregion_name"]').click();
expect( expect(
await page.locator('//*[@id="showregion_name"]').isChecked(), await page.locator('//*[@id="showregion_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showregion_name"]').click(); await page.locator('//*[@id="showregion_name"]').click();
expect( expect(
await page.locator('//*[@id="showregion_name"]').isChecked(), await page.locator('//*[@id="showregion_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showmodel_id // showmodel_id
@ -159,7 +159,7 @@ test("dropDownComponent", async ({ page }) => {
// showmodel_id // showmodel_id
await page.locator('//*[@id="showmodel_id"]').click(); await page.locator('//*[@id="showmodel_id"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_id"]').isChecked(), await page.locator('//*[@id="showmodel_id"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("dropdown-edit-model_id").click(); await page.getByTestId("dropdown-edit-model_id").click();
@ -170,7 +170,7 @@ test("dropDownComponent", async ({ page }) => {
expect(false).toBeTruthy(); expect(false).toBeTruthy();
} }
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
value = await page.getByTestId("dropdown-model_id").innerText(); value = await page.getByTestId("dropdown-model_id").innerText();
if (value !== "ai21.j2-mid-v1") { if (value !== "ai21.j2-mid-v1") {

30
src/frontend/tests/end-to-end/filterEdge.spec.ts
View file

@ -40,7 +40,7 @@ test("LLMChain - Tooltip", async ({ page }) => {
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div', '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
) )
.hover() .hover()
.then(async () => { .then(async () => {
@ -60,17 +60,17 @@ test("LLMChain - Tooltip", async ({ page }) => {
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div', '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
) )
.hover() .hover()
.then(async () => { .then(async () => {
await expect( await expect(
page.getByTestId("tooltip-Model Specs").first(), page.getByTestId("tooltip-Model Specs").first()
).toBeVisible(); ).toBeVisible();
await page.waitForTimeout(2000); await page.waitForTimeout(2000);
await expect( await expect(
page.getByTestId("tooltip-Model Specs").first(), page.getByTestId("tooltip-Model Specs").first()
).toBeVisible(); ).toBeVisible();
await page.getByTestId("icon-Search").click(); await page.getByTestId("icon-Search").click();
@ -81,12 +81,12 @@ test("LLMChain - Tooltip", async ({ page }) => {
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div', '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div'
) )
.hover() .hover()
.then(async () => { .then(async () => {
await expect( await expect(
page.getByTestId("empty-tooltip-filter").first(), page.getByTestId("empty-tooltip-filter").first()
).toBeVisible(); ).toBeVisible();
}); });
}); });
@ -113,7 +113,7 @@ test("LLMChain - Filter", async ({ page }) => {
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
await page.getByTestId( await page.getByTestId(
"input-list-plus-btn-edit_metadata_indexing_include-2", "input-list-plus-btn-edit_metadata_indexing_include-2"
); );
await page.getByTestId("blank-flow").click(); await page.getByTestId("blank-flow").click();
@ -136,7 +136,7 @@ test("LLMChain - Filter", async ({ page }) => {
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
) )
.click(); .click();
@ -148,16 +148,15 @@ test("LLMChain - Filter", async ({ page }) => {
await expect(page.getByTestId("model_specsChatOllama")).toBeVisible(); await expect(page.getByTestId("model_specsChatOllama")).toBeVisible();
await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible(); await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible(); await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
await expect(page.getByTestId("model_specsCohere")).toBeVisible();
await expect( await expect(
page.getByTestId("model_specsGoogle Generative AI"), page.getByTestId("model_specsGoogle Generative AI")
).toBeVisible(); ).toBeVisible();
await expect( await expect(
page.getByTestId("model_specsHugging Face Inference API"), page.getByTestId("model_specsHugging Face Inference API")
).toBeVisible(); ).toBeVisible();
await expect(page.getByTestId("model_specsOllama")).toBeVisible(); await expect(page.getByTestId("model_specsOllama")).toBeVisible();
await expect( await expect(
page.getByTestId("model_specsQianfanChatEndpoint"), page.getByTestId("model_specsQianfanChatEndpoint")
).toBeVisible(); ).toBeVisible();
await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible(); await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible();
await expect(page.getByTestId("model_specsVertexAI")).toBeVisible(); await expect(page.getByTestId("model_specsVertexAI")).toBeVisible();
@ -169,24 +168,23 @@ test("LLMChain - Filter", async ({ page }) => {
await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible(); await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible(); await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
await expect( await expect(
page.getByTestId("model_specsAzureChatOpenAI"), page.getByTestId("model_specsAzureChatOpenAI")
).not.toBeVisible(); ).not.toBeVisible();
await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible(); await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible(); await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible(); await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible(); await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible(); await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
await expect(page.getByTestId("model_specsCohere")).not.toBeVisible();
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
) )
.click(); .click();
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div', '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
) )
.click(); .click();

40
src/frontend/tests/end-to-end/floatComponent.spec.ts
View file

@ -60,44 +60,38 @@ test("FloatComponent", async ({ page }) => {
await page.getByTestId("more-options-modal").click(); await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click(); await page.getByTestId("edit-button-modal").click();
await page.locator('//*[@id="showcache"]').click();
expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
await page.locator('//*[@id="showcache"]').click();
expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
await page.getByTestId("showformat").click(); await page.getByTestId("showformat").click();
expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeTruthy(); expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeTruthy();
await page.getByTestId("showformat").click(); await page.getByTestId("showformat").click();
expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeFalsy(); expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeFalsy();
await page.getByTestId("showmirostat").click();
expect(
await page.locator('//*[@id="showmirostat"]').isChecked(),
).toBeTruthy();
await page.getByTestId("showmirostat").click(); await page.getByTestId("showmirostat").click();
expect(await page.locator('//*[@id="showmirostat"]').isChecked()).toBeFalsy(); expect(await page.locator('//*[@id="showmirostat"]').isChecked()).toBeFalsy();
await page.getByTestId("showmirostat_eta").click(); await page.getByTestId("showmirostat").click();
expect( expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked(), await page.locator('//*[@id="showmirostat"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("showmirostat_eta").click(); await page.getByTestId("showmirostat_eta").click();
expect( expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked(), await page.locator('//*[@id="showmirostat_eta"]').isChecked()
).toBeTruthy();
await page.getByTestId("showmirostat_eta").click();
expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showmirostat_tau").click(); await page.getByTestId("showmirostat_tau").click();
expect( expect(
await page.locator('//*[@id="showmirostat_tau"]').isChecked(), await page.locator('//*[@id="showmirostat_tau"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("showmirostat_tau").click(); await page.getByTestId("showmirostat_tau").click();
expect( expect(
await page.locator('//*[@id="showmirostat_tau"]').isChecked(), await page.locator('//*[@id="showmirostat_tau"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showmodel").click(); await page.getByTestId("showmodel").click();
@ -120,25 +114,25 @@ test("FloatComponent", async ({ page }) => {
await page.getByTestId("shownum_thread").click(); await page.getByTestId("shownum_thread").click();
expect( expect(
await page.locator('//*[@id="shownum_thread"]').isChecked(), await page.locator('//*[@id="shownum_thread"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("shownum_thread").click(); await page.getByTestId("shownum_thread").click();
expect( expect(
await page.locator('//*[@id="shownum_thread"]').isChecked(), await page.locator('//*[@id="shownum_thread"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("showrepeat_last_n").click(); await page.getByTestId("showrepeat_last_n").click();
expect( expect(
await page.locator('//*[@id="showrepeat_last_n"]').isChecked(), await page.locator('//*[@id="showrepeat_last_n"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("showrepeat_last_n").click(); await page.getByTestId("showrepeat_last_n").click();
expect( expect(
await page.locator('//*[@id="showrepeat_last_n"]').isChecked(), await page.locator('//*[@id="showrepeat_last_n"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
const plusButtonLocator = page.locator('//*[@id="float-input"]'); const plusButtonLocator = page.locator('//*[@id="float-input"]');
const elementCount = await plusButtonLocator?.count(); const elementCount = await plusButtonLocator?.count();
@ -151,10 +145,10 @@ test("FloatComponent", async ({ page }) => {
// showtemperature // showtemperature
await page.locator('//*[@id="showtemperature"]').click(); await page.locator('//*[@id="showtemperature"]').click();
expect( expect(
await page.locator('//*[@id="showtemperature"]').isChecked(), await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.locator('//*[@id="float-input"]').click(); await page.locator('//*[@id="float-input"]').click();
await page.locator('//*[@id="float-input"]').fill("3"); await page.locator('//*[@id="float-input"]').fill("3");

7
src/frontend/tests/end-to-end/flowSettings.spec.ts
View file

@ -29,7 +29,7 @@ test("flowSettings", async ({ page }) => {
await page await page
.getByPlaceholder("Flow name") .getByPlaceholder("Flow name")
.fill( .fill(
"Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test", "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
); );
await page.getByText("Character limit reached").isVisible(); await page.getByText("Character limit reached").isVisible();
@ -41,10 +41,11 @@ test("flowSettings", async ({ page }) => {
await page await page
.getByPlaceholder("Flow description") .getByPlaceholder("Flow description")
.fill( .fill(
"Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test", "Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test Flow Name Test"
); );
await page.getByText("Save").last().click(); await page.getByTestId("save-flow-settings").click();
await page.getByTestId("save-flow-settings").click();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);

53
src/frontend/tests/end-to-end/folders.spec.ts
View file

@ -31,33 +31,16 @@ test("CRUD folders", async ({ page }) => {
await page.getByText("All").first().isVisible(); await page.getByText("All").first().isVisible();
await page.getByText("Select All").isVisible(); await page.getByText("Select All").isVisible();
await page.getByText("New Folder", { exact: true }).last().click(); await page.getByTestId("add-folder-button").click();
await page.getByPlaceholder("Insert a name for the folder").fill("test"); await page.getByText("New Folder").last().isVisible();
await page
.getByPlaceholder("Insert a description for the folder")
.fill("test");
await page.getByText("Save Folder").click();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
await page.getByText("Folder created succefully").isVisible(); await page.getByText("New Folder").last().dblclick();
await page.getByText("test").last().isVisible(); await page.getByTestId("input-folder").fill("new folder test name");
await page await page.keyboard.press("Enter");
.getByText("test") await page.getByText("new folder test name").last().isVisible();
.last()
.hover()
.then(async () => {
await page.getByTestId("icon-pencil").last().click();
});
await page.getByPlaceholder("Insert a name for the folder").fill("test edit");
await page
.getByPlaceholder("Insert a description for the folder")
.fill("test edit");
await page.getByText("Edit Folder").last().click();
await page.getByText("test edit").last().isVisible();
await page await page
.getByText("test edit") .getByText("new folder test name")
.last() .last()
.hover() .hover()
.then(async () => { .then(async () => {
@ -74,8 +57,8 @@ test("add folder by drag and drop", async ({ page }) => {
await page.waitForTimeout(2000); await page.waitForTimeout(2000);
const jsonContent = readFileSync( const jsonContent = readFileSync(
"tests/end-to-end/assets/collection.json", "src/frontend/tests/end-to-end/assets/collection.json",
"utf-8", "utf-8"
); );
// Create the DataTransfer and File // Create the DataTransfer and File
@ -95,7 +78,7 @@ test("add folder by drag and drop", async ({ page }) => {
"drop", "drop",
{ {
dataTransfer, dataTransfer,
}, }
); );
await page.getByText("Getting Started").first().isVisible(); await page.getByText("Getting Started").first().isVisible();
@ -131,17 +114,13 @@ test("change flow folder", async ({ page }) => {
await page.getByText("All").first().isVisible(); await page.getByText("All").first().isVisible();
await page.getByText("Select All").isVisible(); await page.getByText("Select All").isVisible();
await page.getByText("New Folder", { exact: true }).last().click(); await page.getByTestId("add-folder-button").click();
await page.getByPlaceholder("Insert a name for the folder").fill("test"); await page.getByText("New Folder").last().isVisible();
await page
.getByPlaceholder("Insert a description for the folder")
.fill("test");
await page.getByText("Save Folder").click();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);
await page.getByText("Folder created succefully").isVisible(); await page.getByText("New Folder").last().dblclick();
await page.getByText("test").last().isVisible(); await page.getByTestId("input-folder").fill("new folder test name");
await page.keyboard.press("Enter");
await page.getByText("new folder test name").last().isVisible();
await page.getByText("My Projects").last().click(); await page.getByText("My Projects").last().click();
await page.getByText("Basic Prompting").first().hover(); await page.getByText("Basic Prompting").first().hover();

1
src/frontend/tests/end-to-end/globalVariables.spec.ts
View file

@ -69,7 +69,6 @@ test("GlobalVariables", async ({ page }) => {
await page.getByText("Save Variable", { exact: true }).click(); await page.getByText("Save Variable", { exact: true }).click();
expect(page.getByText(credentialName, { exact: true })).not.toBeNull(); expect(page.getByText(credentialName, { exact: true })).not.toBeNull();
await page.getByText(credentialName, { exact: true }).isVisible(); await page.getByText(credentialName, { exact: true }).isVisible();
await page.getByText("Save Variable", { exact: true }).click();
await page.waitForTimeout(2000); await page.waitForTimeout(2000);
await page await page

36
src/frontend/tests/end-to-end/inputComponent.spec.ts
View file

@ -60,69 +60,69 @@ test("InputComponent", async ({ page }) => {
expect( expect(
await page await page
.locator('//*[@id="showchroma_server_cors_allow_origins"]') .locator('//*[@id="showchroma_server_cors_allow_origins"]')
.isChecked(), .isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showchroma_server_grpc_port"]').click(); await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked(), await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showchroma_server_host"]').click(); await page.locator('//*[@id="showchroma_server_host"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_host"]').isChecked(), await page.locator('//*[@id="showchroma_server_host"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showchroma_server_port"]').click(); await page.locator('//*[@id="showchroma_server_http_port"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_port"]').isChecked(), await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click(); await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked(), await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showcollection_name"]').click(); await page.locator('//*[@id="showcollection_name"]').click();
expect( expect(
await page.locator('//*[@id="showcollection_name"]').isChecked(), await page.locator('//*[@id="showcollection_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showindex_directory"]').click(); await page.locator('//*[@id="showindex_directory"]').click();
expect( expect(
await page.locator('//*[@id="showindex_directory"]').isChecked(), await page.locator('//*[@id="showindex_directory"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click(); await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
expect( expect(
await page await page
.locator('//*[@id="showchroma_server_cors_allow_origins"]') .locator('//*[@id="showchroma_server_cors_allow_origins"]')
.isChecked(), .isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showchroma_server_grpc_port"]').click(); await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked(), await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showchroma_server_host"]').click(); await page.locator('//*[@id="showchroma_server_host"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_host"]').isChecked(), await page.locator('//*[@id="showchroma_server_host"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showchroma_server_port"]').click(); await page.locator('//*[@id="showchroma_server_http_port"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_port"]').isChecked(), await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click(); await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
expect( expect(
await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked(), await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showindex_directory"]').click(); await page.locator('//*[@id="showindex_directory"]').click();
expect( expect(
await page.locator('//*[@id="showindex_directory"]').isChecked(), await page.locator('//*[@id="showindex_directory"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
let valueEditNode = await page let valueEditNode = await page
@ -138,7 +138,7 @@ test("InputComponent", async ({ page }) => {
.getByTestId("popover-anchor-input-collection_name-edit") .getByTestId("popover-anchor-input-collection_name-edit")
.fill("NEW_collection_name_test_123123123!@#$&*(&%$@ÇÇÇÀõe"); .fill("NEW_collection_name_test_123123123!@#$&*(&%$@ÇÇÇÀõe");
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
const plusButtonLocator = page.getByTestId("input-collection_name"); const plusButtonLocator = page.getByTestId("input-collection_name");
const elementCount = await plusButtonLocator?.count(); const elementCount = await plusButtonLocator?.count();
@ -152,10 +152,10 @@ test("InputComponent", async ({ page }) => {
await page.locator('//*[@id="showcollection_name"]').click(); await page.locator('//*[@id="showcollection_name"]').click();
expect( expect(
await page.locator('//*[@id="showcollection_name"]').isChecked(), await page.locator('//*[@id="showcollection_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
let value = await page let value = await page
.getByTestId("popover-anchor-input-collection_name") .getByTestId("popover-anchor-input-collection_name")

2
src/frontend/tests/end-to-end/inputListComponent.spec.ts
View file

@ -68,7 +68,7 @@ test("InputListComponent", async ({ page }) => {
.getByTestId("input-list-input-edit_metadata_indexing_include-1") .getByTestId("input-list-input-edit_metadata_indexing_include-1")
.fill("test1 test1 test1 test1"); .fill("test1 test1 test1 test1");
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page await page
.getByTestId("input-list-input_metadata_indexing_include-0") .getByTestId("input-list-input_metadata_indexing_include-0")

42
src/frontend/tests/end-to-end/intComponent.spec.ts
View file

@ -39,6 +39,12 @@ test("IntComponent", async ({ page }) => {
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
await page.getByTestId("showmax_tokens").click();
await page.getByText("Save Changes", { exact: true }).click();
await page.getByTestId("int-input-max_tokens").click(); await page.getByTestId("int-input-max_tokens").click();
await page await page
.getByTestId("int-input-max_tokens") .getByTestId("int-input-max_tokens")
@ -81,80 +87,80 @@ test("IntComponent", async ({ page }) => {
await page.locator('//*[@id="showmodel_kwargs"]').click(); await page.locator('//*[@id="showmodel_kwargs"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_kwargs"]').isChecked(), await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showmodel_name"]').click(); await page.locator('//*[@id="showmodel_name"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_name"]').isChecked(), await page.locator('//*[@id="showmodel_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showopenai_api_base"]').click(); await page.locator('//*[@id="showopenai_api_base"]').click();
expect( expect(
await page.locator('//*[@id="showopenai_api_base"]').isChecked(), await page.locator('//*[@id="showopenai_api_base"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showopenai_api_key"]').click(); await page.locator('//*[@id="showopenai_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showopenai_api_key"]').isChecked(), await page.locator('//*[@id="showopenai_api_key"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showtemperature"]').click(); await page.locator('//*[@id="showtemperature"]').click();
expect( expect(
await page.locator('//*[@id="showtemperature"]').isChecked(), await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showmodel_kwargs"]').click(); await page.locator('//*[@id="showmodel_kwargs"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_kwargs"]').isChecked(), await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showmodel_name"]').click(); await page.locator('//*[@id="showmodel_name"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_name"]').isChecked(), await page.locator('//*[@id="showmodel_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showopenai_api_base"]').click(); await page.locator('//*[@id="showopenai_api_base"]').click();
expect( expect(
await page.locator('//*[@id="showopenai_api_base"]').isChecked(), await page.locator('//*[@id="showopenai_api_base"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showopenai_api_key"]').click(); await page.locator('//*[@id="showopenai_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showopenai_api_key"]').isChecked(), await page.locator('//*[@id="showopenai_api_key"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showtemperature"]').click(); await page.locator('//*[@id="showtemperature"]').click();
expect( expect(
await page.locator('//*[@id="showtemperature"]').isChecked(), await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showmodel_kwargs"]').click(); await page.locator('//*[@id="showmodel_kwargs"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_kwargs"]').isChecked(), await page.locator('//*[@id="showmodel_kwargs"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showmodel_name"]').click(); await page.locator('//*[@id="showmodel_name"]').click();
expect( expect(
await page.locator('//*[@id="showmodel_name"]').isChecked(), await page.locator('//*[@id="showmodel_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showopenai_api_base"]').click(); await page.locator('//*[@id="showopenai_api_base"]').click();
expect( expect(
await page.locator('//*[@id="showopenai_api_base"]').isChecked(), await page.locator('//*[@id="showopenai_api_base"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showopenai_api_key"]').click(); await page.locator('//*[@id="showopenai_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showopenai_api_key"]').isChecked(), await page.locator('//*[@id="showopenai_api_key"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showtemperature"]').click(); await page.locator('//*[@id="showtemperature"]').click();
expect( expect(
await page.locator('//*[@id="showtemperature"]').isChecked(), await page.locator('//*[@id="showtemperature"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
const plusButtonLocator = page.getByTestId("int-input-max_tokens"); const plusButtonLocator = page.getByTestId("int-input-max_tokens");
const elementCount = await plusButtonLocator?.count(); const elementCount = await plusButtonLocator?.count();
@ -166,7 +172,7 @@ test("IntComponent", async ({ page }) => {
await page.locator('//*[@id="showtimeout"]').click(); await page.locator('//*[@id="showtimeout"]').click();
expect( expect(
await page.locator('//*[@id="showtimeout"]').isChecked(), await page.locator('//*[@id="showtimeout"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
const valueEditNode = await page const valueEditNode = await page
@ -177,7 +183,7 @@ test("IntComponent", async ({ page }) => {
expect(false).toBeTruthy(); expect(false).toBeTruthy();
} }
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.getByTestId("int-input-max_tokens").click(); await page.getByTestId("int-input-max_tokens").click();
await page.getByTestId("int-input-max_tokens").fill("3"); await page.getByTestId("int-input-max_tokens").fill("3");

8
src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
View file

@ -81,9 +81,9 @@ test("KeypairListComponent", async ({ page }) => {
expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy(); expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
await page.locator('//*[@id="showcredentials_profile_name"]').click(); await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect( expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(), await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
const plusButtonLocator = page.locator('//*[@id="plusbtn0"]'); const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
const elementCount = await plusButtonLocator?.count(); const elementCount = await plusButtonLocator?.count();
@ -96,7 +96,7 @@ test("KeypairListComponent", async ({ page }) => {
await page.locator('//*[@id="showcredentials_profile_name"]').click(); await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect( expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(), await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showcache"]').click(); await page.locator('//*[@id="showcache"]').click();
expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy(); expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
@ -108,7 +108,7 @@ test("KeypairListComponent", async ({ page }) => {
const elementKeyCount = await keyPairVerification?.count(); const elementKeyCount = await keyPairVerification?.count();
if (elementKeyCount === 1) { if (elementKeyCount === 1) {
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.getByTestId("div-generic-node").click(); await page.getByTestId("div-generic-node").click();

12
src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
View file

@ -47,11 +47,11 @@ test("LangflowShortcuts", async ({ page }) => {
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTitle("zoom out").click(); await page.getByTitle("zoom out").click();
await page.getByTestId("title-Ollama").click(); await page.getByTestId("generic-node-title-arrangement").click();
await page.keyboard.press(`${control}+Shift+A`); await page.keyboard.press(`${control}+Shift+A`);
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.getByTestId("title-Ollama").click(); await page.getByTestId("generic-node-title-arrangement").click();
await page.keyboard.press(`${control}+d`); await page.keyboard.press(`${control}+d`);
let numberOfNodes = await page.getByTestId("title-Ollama")?.count(); let numberOfNodes = await page.getByTestId("title-Ollama")?.count();
@ -61,7 +61,7 @@ test("LangflowShortcuts", async ({ page }) => {
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]', '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
) )
.click(); .click();
await page.keyboard.press("Backspace"); await page.keyboard.press("Backspace");
@ -71,7 +71,7 @@ test("LangflowShortcuts", async ({ page }) => {
expect(false).toBeTruthy(); expect(false).toBeTruthy();
} }
await page.getByTestId("title-Ollama").click(); await page.getByTestId("generic-node-title-arrangement").click();
await page.keyboard.press(`${control}+c`); await page.keyboard.press(`${control}+c`);
await page.getByTestId("title-Ollama").click(); await page.getByTestId("title-Ollama").click();
@ -84,7 +84,7 @@ test("LangflowShortcuts", async ({ page }) => {
await page await page
.locator( .locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]', '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
) )
.click(); .click();
await page.keyboard.press("Backspace"); await page.keyboard.press("Backspace");

2
src/frontend/tests/end-to-end/logs.spec.ts
View file

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

44
src/frontend/tests/end-to-end/nestedComponent.spec.ts
View file

@ -41,7 +41,7 @@ test("NestedComponent", async ({ page }) => {
await page.locator('//*[@id="showpool_threads"]').click(); await page.locator('//*[@id="showpool_threads"]').click();
expect( expect(
await page.locator('//*[@id="showpool_threads"]').isChecked(), await page.locator('//*[@id="showpool_threads"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
//showtext_key //showtext_key
@ -53,141 +53,141 @@ test("NestedComponent", async ({ page }) => {
await page.locator('//*[@id="showindex_name"]').click(); await page.locator('//*[@id="showindex_name"]').click();
expect( expect(
await page.locator('//*[@id="showindex_name"]').isChecked(), await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// shownamespace // shownamespace
await page.locator('//*[@id="shownamespace"]').click(); await page.locator('//*[@id="shownamespace"]').click();
expect( expect(
await page.locator('//*[@id="shownamespace"]').isChecked(), await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// showpinecone_api_key // showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click(); await page.locator('//*[@id="showpinecone_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked(), await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// showindex_name // showindex_name
await page.locator('//*[@id="showindex_name"]').click(); await page.locator('//*[@id="showindex_name"]').click();
expect( expect(
await page.locator('//*[@id="showindex_name"]').isChecked(), await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// shownamespace // shownamespace
await page.locator('//*[@id="shownamespace"]').click(); await page.locator('//*[@id="shownamespace"]').click();
expect( expect(
await page.locator('//*[@id="shownamespace"]').isChecked(), await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showpinecone_api_key // showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click(); await page.locator('//*[@id="showpinecone_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked(), await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showindex_name // showindex_name
await page.locator('//*[@id="showindex_name"]').click(); await page.locator('//*[@id="showindex_name"]').click();
expect( expect(
await page.locator('//*[@id="showindex_name"]').isChecked(), await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// shownamespace // shownamespace
await page.locator('//*[@id="shownamespace"]').click(); await page.locator('//*[@id="shownamespace"]').click();
expect( expect(
await page.locator('//*[@id="shownamespace"]').isChecked(), await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// showpinecone_api_key // showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click(); await page.locator('//*[@id="showpinecone_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked(), await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// showindex_name // showindex_name
await page.locator('//*[@id="showindex_name"]').click(); await page.locator('//*[@id="showindex_name"]').click();
expect( expect(
await page.locator('//*[@id="showindex_name"]').isChecked(), await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// shownamespace // shownamespace
await page.locator('//*[@id="shownamespace"]').click(); await page.locator('//*[@id="shownamespace"]').click();
expect( expect(
await page.locator('//*[@id="shownamespace"]').isChecked(), await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showpinecone_api_key // showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click(); await page.locator('//*[@id="showpinecone_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked(), await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showindex_name // showindex_name
await page.locator('//*[@id="showindex_name"]').click(); await page.locator('//*[@id="showindex_name"]').click();
expect( expect(
await page.locator('//*[@id="showindex_name"]').isChecked(), await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// shownamespace // shownamespace
await page.locator('//*[@id="shownamespace"]').click(); await page.locator('//*[@id="shownamespace"]').click();
expect( expect(
await page.locator('//*[@id="shownamespace"]').isChecked(), await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// showpinecone_api_key // showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click(); await page.locator('//*[@id="showpinecone_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked(), await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
// showindex_name // showindex_name
await page.locator('//*[@id="showindex_name"]').click(); await page.locator('//*[@id="showindex_name"]').click();
expect( expect(
await page.locator('//*[@id="showindex_name"]').isChecked(), await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// shownamespace // shownamespace
await page.locator('//*[@id="shownamespace"]').click(); await page.locator('//*[@id="shownamespace"]').click();
expect( expect(
await page.locator('//*[@id="shownamespace"]').isChecked(), await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
// showpinecone_api_key // showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click(); await page.locator('//*[@id="showpinecone_api_key"]').click();
expect( expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked(), await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
//showpool_threads //showpool_threads
await page.locator('//*[@id="showpool_threads"]').click(); await page.locator('//*[@id="showpool_threads"]').click();
expect( expect(
await page.locator('//*[@id="showpool_threads"]').isChecked(), await page.locator('//*[@id="showpool_threads"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
//showtext_key //showtext_key
await page.locator('//*[@id="showtext_key"]').click(); await page.locator('//*[@id="showtext_key"]').click();
expect( expect(
await page.locator('//*[@id="showtext_key"]').isChecked(), await page.locator('//*[@id="showtext_key"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
}); });

6
src/frontend/tests/end-to-end/promptModalComponent.spec.ts
View file

@ -138,7 +138,7 @@ test("PromptTemplateComponent", async ({ page }) => {
await page.locator('//*[@id="showtemplate"]').click(); await page.locator('//*[@id="showtemplate"]').click();
expect( expect(
await page.locator('//*[@id="showtemplate"]').isChecked(), await page.locator('//*[@id="showtemplate"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showprompt"]').click(); await page.locator('//*[@id="showprompt"]').click();
@ -158,13 +158,13 @@ test("PromptTemplateComponent", async ({ page }) => {
await page.locator('//*[@id="showtemplate"]').click(); await page.locator('//*[@id="showtemplate"]').click();
expect( expect(
await page.locator('//*[@id="showtemplate"]').isChecked(), await page.locator('//*[@id="showtemplate"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showprompt"]').click(); await page.locator('//*[@id="showprompt"]').click();
expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy(); expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.getByTestId("more-options-modal").click(); await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click(); await page.getByTestId("edit-button-modal").click();

6
src/frontend/tests/end-to-end/saveComponents.spec.ts
View file

@ -26,8 +26,8 @@ test.describe("save component tests", () => {
// Read your file into a buffer. // Read your file into a buffer.
const jsonContent = readFileSync( const jsonContent = readFileSync(
"tests/end-to-end/assets/flow_group_test.json", "src/frontend/tests/end-to-end/assets/flow_group_test.json",
"utf-8", "utf-8"
); );
// Create the DataTransfer and File // Create the DataTransfer and File
@ -49,7 +49,7 @@ test.describe("save component tests", () => {
"drop", "drop",
{ {
dataTransfer, dataTransfer,
}, }
); );
const genericNoda = page.getByTestId("div-generic-node"); const genericNoda = page.getByTestId("div-generic-node");

6
src/frontend/tests/end-to-end/store.spec.ts
View file

@ -141,7 +141,6 @@ test("should add API-KEY", async ({ page }) => {
await page.waitForTimeout(2000); await page.waitForTimeout(2000);
await page.getByText("API Key Error").isVisible(); await page.getByText("API Key Error").isVisible();
await page.getByTestId("api-key-button-store").click();
await page await page
.getByPlaceholder("Insert your API Key") .getByPlaceholder("Insert your API Key")
.fill(process.env.STORE_API_KEY ?? ""); .fill(process.env.STORE_API_KEY ?? "");
@ -174,6 +173,9 @@ test("should like and add components and flows", async ({ page }) => {
await page.waitForTimeout(2000); await page.waitForTimeout(2000);
await page.getByText("API Key Error").isHidden(); await page.getByText("API Key Error").isHidden();
await page.waitForTimeout(2000);
await page.getByTestId("button-store").click();
await page.waitForTimeout(5000); await page.waitForTimeout(5000);
const likedValue = await page const likedValue = await page
@ -257,7 +259,7 @@ test("should share component with share button", async ({ page }) => {
await page.getByText("Set workflow status to public").isVisible(); await page.getByText("Set workflow status to public").isVisible();
await page await page
.getByText( .getByText(
"Attention: API keys in specified fields are automatically removed upon sharing.", "Attention: API keys in specified fields are automatically removed upon sharing."
) )
.isVisible(); .isVisible();
await page.getByText("Export").first().isVisible(); await page.getByText("Export").first().isVisible();

14
src/frontend/tests/end-to-end/textInputOutput.spec.ts
View file

@ -60,7 +60,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Click and hold on the first element // Click and hold on the first element
await page await page
.locator( .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(); .hover();
await page.mouse.down(); await page.mouse.down();
@ -68,7 +68,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Move to the second element // Move to the second element
await page await page
.locator( .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(); .hover();
@ -92,7 +92,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Click and hold on the first element // Click and hold on the first element
await page await page
.locator( .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(); .hover();
await page.mouse.down(); await page.mouse.down();
@ -100,7 +100,7 @@ test("TextInputOutputComponent", async ({ page }) => {
// Move to the second element // Move to the second element
await page await page
.locator( .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(); .hover();
@ -132,11 +132,13 @@ test("TextInputOutputComponent", async ({ page }) => {
await page.getByText("Outputs", { exact: true }).nth(1).click(); await page.getByText("Outputs", { exact: true }).nth(1).click();
await page.getByText("Text Output", { exact: true }).nth(2).click(); await page.getByText("Text Output", { exact: true }).nth(2).click();
let contentOutput = await page.getByPlaceholder("Empty").inputValue(); let contentOutput = await page.getByPlaceholder("Enter text...").inputValue();
expect(contentOutput).not.toBe(null); expect(contentOutput).not.toBe(null);
await page.keyboard.press("Escape"); await page.keyboard.press("Escape");
await page.getByText("Close", { exact: true }).last().click();
await page await page
.getByTestId("popover-anchor-input-input_value") .getByTestId("popover-anchor-input-input_value")
.nth(0) .nth(0)
@ -151,6 +153,6 @@ test("TextInputOutputComponent", async ({ page }) => {
await page.getByText("Outputs", { exact: true }).nth(1).click(); await page.getByText("Outputs", { exact: true }).nth(1).click();
await page.getByText("Text Output", { exact: true }).nth(2).click(); await page.getByText("Text Output", { exact: true }).nth(2).click();
contentOutput = await page.getByPlaceholder("Empty").inputValue(); contentOutput = await page.getByPlaceholder("Enter text...").inputValue();
expect(contentOutput).not.toBe(null); expect(contentOutput).not.toBe(null);
}); });

40
src/frontend/tests/end-to-end/toggleComponent.spec.ts
View file

@ -45,10 +45,10 @@ test("ToggleComponent", async ({ page }) => {
await page.locator('//*[@id="showload_hidden"]').click(); await page.locator('//*[@id="showload_hidden"]').click();
expect( expect(
await page.locator('//*[@id="showload_hidden"]').isChecked(), await page.locator('//*[@id="showload_hidden"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.getByTitle("fit view").click(); await page.getByTitle("fit view").click();
@ -81,12 +81,12 @@ test("ToggleComponent", async ({ page }) => {
await page.locator('//*[@id="showload_hidden"]').click(); await page.locator('//*[@id="showload_hidden"]').click();
expect( expect(
await page.locator('//*[@id="showload_hidden"]').isChecked(), await page.locator('//*[@id="showload_hidden"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showmax_concurrency"]').click(); await page.locator('//*[@id="showmax_concurrency"]').click();
expect( expect(
await page.locator('//*[@id="showmax_concurrency"]').isChecked(), await page.locator('//*[@id="showmax_concurrency"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showpath"]').click(); await page.locator('//*[@id="showpath"]').click();
@ -94,22 +94,22 @@ test("ToggleComponent", async ({ page }) => {
await page.locator('//*[@id="showrecursive"]').click(); await page.locator('//*[@id="showrecursive"]').click();
expect( expect(
await page.locator('//*[@id="showrecursive"]').isChecked(), await page.locator('//*[@id="showrecursive"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showsilent_errors"]').click(); await page.locator('//*[@id="showsilent_errors"]').click();
expect( expect(
await page.locator('//*[@id="showsilent_errors"]').isChecked(), await page.locator('//*[@id="showsilent_errors"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showuse_multithreading"]').click(); await page.locator('//*[@id="showuse_multithreading"]').click();
expect( expect(
await page.locator('//*[@id="showuse_multithreading"]').isChecked(), await page.locator('//*[@id="showuse_multithreading"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="showmax_concurrency"]').click(); await page.locator('//*[@id="showmax_concurrency"]').click();
expect( expect(
await page.locator('//*[@id="showmax_concurrency"]').isChecked(), await page.locator('//*[@id="showmax_concurrency"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showpath"]').click(); await page.locator('//*[@id="showpath"]').click();
@ -117,20 +117,20 @@ test("ToggleComponent", async ({ page }) => {
await page.locator('//*[@id="showrecursive"]').click(); await page.locator('//*[@id="showrecursive"]').click();
expect( expect(
await page.locator('//*[@id="showrecursive"]').isChecked(), await page.locator('//*[@id="showrecursive"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showsilent_errors"]').click(); await page.locator('//*[@id="showsilent_errors"]').click();
expect( expect(
await page.locator('//*[@id="showsilent_errors"]').isChecked(), await page.locator('//*[@id="showsilent_errors"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="showuse_multithreading"]').click(); await page.locator('//*[@id="showuse_multithreading"]').click();
expect( expect(
await page.locator('//*[@id="showuse_multithreading"]').isChecked(), await page.locator('//*[@id="showuse_multithreading"]').isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
const plusButtonLocator = page.getByTestId("toggle-load_hidden"); const plusButtonLocator = page.getByTestId("toggle-load_hidden");
const elementCount = await plusButtonLocator?.count(); const elementCount = await plusButtonLocator?.count();
@ -144,38 +144,38 @@ test("ToggleComponent", async ({ page }) => {
await page.locator('//*[@id="showload_hidden"]').click(); await page.locator('//*[@id="showload_hidden"]').click();
expect( expect(
await page.locator('//*[@id="showload_hidden"]').isChecked(), await page.locator('//*[@id="showload_hidden"]').isChecked()
).toBeTruthy(); ).toBeTruthy();
expect( expect(
await page.getByTestId("toggle-edit-load_hidden").isChecked(), await page.getByTestId("toggle-edit-load_hidden").isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click(); await page.getByText("Save Changes", { exact: true }).click();
await page.getByTestId("toggle-load_hidden").click(); await page.getByTestId("toggle-load_hidden").click();
expect( expect(
await page.getByTestId("toggle-load_hidden").isChecked(), await page.getByTestId("toggle-load_hidden").isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("toggle-load_hidden").click(); await page.getByTestId("toggle-load_hidden").click();
expect( expect(
await page.getByTestId("toggle-load_hidden").isChecked(), await page.getByTestId("toggle-load_hidden").isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("toggle-load_hidden").click(); await page.getByTestId("toggle-load_hidden").click();
expect( expect(
await page.getByTestId("toggle-load_hidden").isChecked(), await page.getByTestId("toggle-load_hidden").isChecked()
).toBeFalsy(); ).toBeFalsy();
await page.getByTestId("toggle-load_hidden").click(); await page.getByTestId("toggle-load_hidden").click();
expect( expect(
await page.getByTestId("toggle-load_hidden").isChecked(), await page.getByTestId("toggle-load_hidden").isChecked()
).toBeTruthy(); ).toBeTruthy();
await page.getByTestId("toggle-load_hidden").click(); await page.getByTestId("toggle-load_hidden").click();
expect( expect(
await page.getByTestId("toggle-load_hidden").isChecked(), await page.getByTestId("toggle-load_hidden").isChecked()
).toBeFalsy(); ).toBeFalsy();
} }
}); });