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

fix(components): fix dropdown component id attribute to include index for uniqueness

Browse source 
fix(components): fix dict component id attribute to include index for uniqueness
fix(components): fix code area component id attribute to include id for uniqueness
fix(modals): fix edit node modal dict component id attribute to include id for uniqueness
fix(modals): fix dict area modal save button data-testid attribute for testing
fix(pages): fix node toolbar component class name for more options button
fix(types): add id property to dropdown component type
fix(types): add id property to dict component type
feat(tests): add end-to-end test for dropdown component
feat(tests): add end-to-end test for dict component
feat(tests): add end-to-end test for node toolbar component
feat(tests): add end-to-end test for nested component
feat(tests): add input component test
feat(tests): add toggle component test
This commit is contained in:
cristhianzl 2023-11-27 16:29:43 -03:00
commit ea5ddc0ed5
12 changed files with 376 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -422,6 +422,7 @@ export default function ParameterComponent({
options={data.node.template[name].options}
onSelect={handleOnNewValue}
value={data.node.template[name].value ?? "Choose an option"}
id={"dropdown-" + index}
/>
</div>
{data.node?.template[name].refresh && (
@ -513,6 +514,7 @@ export default function ParameterComponent({
data.node!.template[name].value = newValue;
handleOnNewValue(newValue);
}}
id="div-dict-input"
/>
</div>
) : left === true && type === "dict" ? (

1
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -45,6 +45,7 @@ export default function CodeAreaComponent({
<div className="flex w-full items-center">
<span
id={id}
data-testid={id}
className={
editNode
? "input-edit-node input-dialog"

4
src/frontend/src/components/dictComponent/index.tsx
View file

@ -10,6 +10,7 @@ export default function DictComponent({
onChange,
disabled,
editNode = false,
id = "",
}: DictComponentType): JSX.Element {
useEffect(() => {
if (disabled) {
@ -30,7 +31,7 @@ export default function DictComponent({
)}
>
{
<div className="flex w-full gap-3">
<div className="flex w-full gap-3" data-testid={id}>
<DictAreaModal
value={ref.current}
onChange={(obj) => {
@ -45,6 +46,7 @@ export default function DictComponent({
: "input-disable pointer-events-none cursor-pointer"
}
placeholder="Click to edit your dictionary..."
data-testid="dict-input"
/>
</DictAreaModal>
</div>

8
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -11,6 +11,7 @@ export default function Dropdown({
editNode = false,
numberOfOptions = 0,
apiModal = false,
id = "",
}: DropDownComponentType): JSX.Element {
let [internalValue, setInternalValue] = useState(
value === "" || !value ? "Choose an option" : value
@ -33,13 +34,17 @@ export default function Dropdown({
<>
<div className={editNode ? "mt-1" : "relative mt-1"}>
<Listbox.Button
data-test={`${id ?? ""}`}
className={
editNode
? "dropdown-component-outline"
: "dropdown-component-false-outline"
}
>
<span className="dropdown-component-display">
<span
className="dropdown-component-display"
data-testid={`${id ?? ""}-display`}
>
{internalValue}
</span>
<span className={"dropdown-component-arrow"}>
@ -86,6 +91,7 @@ export default function Dropdown({
selected ? "font-semibold" : "font-normal",
"block truncate "
)}
data-testid={`${option}-${id ?? ""}-option`}
>
{option}
</span>

6
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -248,9 +248,9 @@ const EditNodeModal = forwardRef(
disabled={disabled}
editNode={true}
value={
myData.current.node!.template[
myData?.current?.node!.template[
templateParam
].value.toString() === "{}"
]?.value?.toString() === "{}"
? {
yourkey: "value",
}
@ -264,6 +264,7 @@ const EditNodeModal = forwardRef(
].value = newValue;
handleOnNewValue(newValue, templateParam);
}}
id="editnode-div-dict-input"
/>
</div>
) : myData.current.node?.template[templateParam]
@ -371,6 +372,7 @@ const EditNodeModal = forwardRef(
templateParam
].value ?? "Choose an option"
}
id={"dropdown-edit-" + index}
></Dropdown>
</div>
) : myData.current.node?.template[templateParam]

1
src/frontend/src/modals/dictAreaModal/index.tsx
View file

@ -54,6 +54,7 @@ export default function DictAreaModal({
/>
<div className="flex h-fit w-full justify-end">
<Button
data-testid="save-dict-button"
className="mt-3"
type="submit"
onClick={() => {

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

@ -186,10 +186,7 @@ export default function NodeToolbarComponent({
<div
data-testid="more-options-modal"
className={classNames(
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground")
"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

2
src/frontend/src/types/components/index.ts
View file

@ -36,6 +36,7 @@ export type DropDownComponentType = {
editNode?: boolean;
apiModal?: boolean;
numberOfOptions?: number;
id?: string;
};
export type ParameterComponentType = {
data: NodeDataType;
@ -78,6 +79,7 @@ export type DictComponentType = {
onChange: (value) => void;
disabled: boolean;
editNode?: boolean;
id?: string;
};
export type TextAreaComponentType = {

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

@ -0,0 +1,104 @@
import { expect, test } from "@playwright/test";
test("dropDownComponent", async ({ page }) => {
await page.goto("http://localhost:3000/");
await page.waitForTimeout(2000);
await page.locator('//*[@id="new-project-btn"]').click();
await page.waitForTimeout(2000);
await page.getByPlaceholder("Search").click();
await page.getByPlaceholder("Search").fill("amazon");
await page.waitForTimeout(2000);
await page
.getByTestId("llmsAmazon Bedrock")
.first()
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await page.getByTestId("dropdown-2-display").click();
await page.getByTestId("ai21.j2-grande-instruct-0-option").click();
let value = await page.getByTestId("dropdown-2-display").innerText();
if (value !== "ai21.j2-grande-instruct") {
expect(false).toBeTruthy();
}
await page.getByTestId("dropdown-2-display").click();
await page.getByTestId("ai21.j2-jumbo-instruct-1-option").click();
value = await page.getByTestId("dropdown-2-display").innerText();
if (value !== "ai21.j2-jumbo-instruct") {
expect(false).toBeTruthy();
}
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
value = await page.getByTestId("dropdown-edit-1-display").innerText();
if (value !== "ai21.j2-jumbo-instruct") {
expect(false).toBeTruthy();
}
// showcredentials_profile_name
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeFalsy();
// showmodel_id
await page.locator('//*[@id="showmodel_id"]').click();
expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
// showcredentials_profile_name
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeTruthy();
// showmodel_id
await page.locator('//*[@id="showmodel_id"]').click();
expect(
await page.locator('//*[@id="showmodel_id"]').isChecked()
).toBeTruthy();
// showcredentials_profile_name
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeFalsy();
// showmodel_id
await page.locator('//*[@id="showmodel_id"]').click();
expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
// showcredentials_profile_name
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
).toBeTruthy();
// showmodel_id
await page.locator('//*[@id="showmodel_id"]').click();
expect(
await page.locator('//*[@id="showmodel_id"]').isChecked()
).toBeTruthy();
await page.getByTestId("dropdown-edit-1-display").click();
await page.getByTestId("ai21.j2-ultra-v1-5-option").click();
value = await page.getByTestId("dropdown-edit-1-display").innerText();
if (value !== "ai21.j2-ultra-v1") {
expect(false).toBeTruthy();
}
await page.locator('//*[@id="saveChangesBtn"]').click();
value = await page.getByTestId("dropdown-2-display").innerText();
if (value !== "ai21.j2-ultra-v1") {
expect(false).toBeTruthy();
}
});

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

@ -0,0 +1,239 @@
import { expect, test } from "@playwright/test";
test("NestedComponent", async ({ page }) => {
await page.goto("http://localhost:3000/");
await page.waitForTimeout(2000);
await page.locator('//*[@id="new-project-btn"]').click();
await page.waitForTimeout(2000);
await page.getByPlaceholder("Search").click();
await page.getByPlaceholder("Search").fill("pinecone");
await page.waitForTimeout(2000);
await page
.getByTestId("vectorstoresPinecone")
.first()
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
// showindex_name
await page.locator('//*[@id="showindex_name"]').click();
expect(
await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeFalsy();
// shownamespace
await page.locator('//*[@id="shownamespace"]').click();
expect(
await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeFalsy();
// showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click();
expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeTruthy();
// showpinecone_env
await page.locator('//*[@id="showpinecone_env"]').click();
expect(
await page.locator('//*[@id="showpinecone_env"]').isChecked()
).toBeTruthy();
// showsearch_kwargs
await page.locator('//*[@id="showsearch_kwargs"]').click();
expect(
await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
).toBeTruthy();
// showindex_name
await page.locator('//*[@id="showindex_name"]').click();
expect(
await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeTruthy();
// shownamespace
await page.locator('//*[@id="shownamespace"]').click();
expect(
await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeTruthy();
// showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click();
expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeFalsy();
// showpinecone_env
await page.locator('//*[@id="showpinecone_env"]').click();
expect(
await page.locator('//*[@id="showpinecone_env"]').isChecked()
).toBeFalsy();
// showsearch_kwargs
await page.locator('//*[@id="showsearch_kwargs"]').click();
expect(
await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
).toBeFalsy();
// showindex_name
await page.locator('//*[@id="showindex_name"]').click();
expect(
await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeFalsy();
// shownamespace
await page.locator('//*[@id="shownamespace"]').click();
expect(
await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeFalsy();
// showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click();
expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeTruthy();
// showpinecone_env
await page.locator('//*[@id="showpinecone_env"]').click();
expect(
await page.locator('//*[@id="showpinecone_env"]').isChecked()
).toBeTruthy();
// showsearch_kwargs
await page.locator('//*[@id="showsearch_kwargs"]').click();
expect(
await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
).toBeTruthy();
// showindex_name
await page.locator('//*[@id="showindex_name"]').click();
expect(
await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeTruthy();
// shownamespace
await page.locator('//*[@id="shownamespace"]').click();
expect(
await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeTruthy();
// showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click();
expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeFalsy();
// showpinecone_env
await page.locator('//*[@id="showpinecone_env"]').click();
expect(
await page.locator('//*[@id="showpinecone_env"]').isChecked()
).toBeFalsy();
// showsearch_kwargs
await page.locator('//*[@id="showsearch_kwargs"]').click();
expect(
await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
).toBeFalsy();
// showindex_name
await page.locator('//*[@id="showindex_name"]').click();
expect(
await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeFalsy();
// shownamespace
await page.locator('//*[@id="shownamespace"]').click();
expect(
await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeFalsy();
// showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click();
expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeTruthy();
// showpinecone_env
await page.locator('//*[@id="showpinecone_env"]').click();
expect(
await page.locator('//*[@id="showpinecone_env"]').isChecked()
).toBeTruthy();
// showsearch_kwargs
await page.locator('//*[@id="showsearch_kwargs"]').click();
expect(
await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
).toBeTruthy();
// showindex_name
await page.locator('//*[@id="showindex_name"]').click();
expect(
await page.locator('//*[@id="showindex_name"]').isChecked()
).toBeTruthy();
// shownamespace
await page.locator('//*[@id="shownamespace"]').click();
expect(
await page.locator('//*[@id="shownamespace"]').isChecked()
).toBeTruthy();
// showpinecone_api_key
await page.locator('//*[@id="showpinecone_api_key"]').click();
expect(
await page.locator('//*[@id="showpinecone_api_key"]').isChecked()
).toBeFalsy();
// showpinecone_env
await page.locator('//*[@id="showpinecone_env"]').click();
expect(
await page.locator('//*[@id="showpinecone_env"]').isChecked()
).toBeFalsy();
await page.locator('//*[@id="saveChangesBtn"]').click();
await page.getByTestId("div-dict-input").click();
const spanElement = await page
.locator('//*[@id="radix-:r4i:"]/div[2]/div/div/code/div/div/span[1]')
.innerHTML();
if (spanElement !== "yourkey") {
expect(true).toBeFalsy();
}
});

8
src/frontend/tests/onlyFront/inputComponent.spec.ts
View file

@ -23,7 +23,7 @@ test("InputComponent", async ({ page }) => {
await page.waitForTimeout(2000);
await page
.locator('//*[@id="sideChroma"]')
.getByTestId("vectorstoresChroma")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
@ -44,7 +44,8 @@ test("InputComponent", async ({ page }) => {
'//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
)
.click();
await page.locator('//*[@id="editAdvancedIcon"]').click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
expect(
@ -154,7 +155,8 @@ test("InputComponent", async ({ page }) => {
'//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
)
.click();
await page.locator('//*[@id="editAdvancedIcon"]').click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
await page.locator('//*[@id="showcollection_name"]').click();
expect(

14
src/frontend/tests/onlyFront/toggleComponent.spec.ts
View file

@ -22,7 +22,7 @@ test("ToggleComponent", async ({ page }) => {
await page.waitForTimeout(2000);
await page
.locator('//*[@id="sideDirectoryLoader"]')
.getByTestId("documentloadersDirectoryLoader")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
@ -32,8 +32,8 @@ test("ToggleComponent", async ({ page }) => {
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
)
.click();
await page.locator('//*[@id="advancedIcon"]').click();
await page.locator('//*[@id="editAdvancedBtn"]').click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
await page.locator('//*[@id="showload_hidden"]').click();
expect(
@ -62,8 +62,8 @@ test("ToggleComponent", async ({ page }) => {
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
)
.click();
await page.locator('//*[@id="advancedIcon"]').click();
await page.locator('//*[@id="editAdvancedBtn"]').click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
expect(
await page.locator('//*[@id="toggle-edit-1"]').isChecked()
@ -144,8 +144,8 @@ test("ToggleComponent", async ({ page }) => {
await page
.locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
.click();
await page.locator('//*[@id="advancedIcon"]').click();
await page.locator('//*[@id="editAdvancedBtn"]').click();
await page.getByTestId("more-options-modal").click();
await page.getByTestId("edit-button-modal").click();
await page.locator('//*[@id="showload_hidden"]').click();
expect(