test: add other fields to routing form e2e (#8112)

* chore: add test id

* chore: add test

* remove console log

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

* fix: linting

---------

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
pull/6876/head
Nafees Nazik 2023-04-13 02:28:03 +05:30 committed by GitHub
parent a8368aac79
commit 7349fb9f6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 12 deletions

View File

@ -37,29 +37,29 @@ test.describe("Routing Forms", () => {
const formId = await addForm(page); const formId = await addForm(page);
const description = "Test Description"; const description = "Test Description";
const field = { const label = "Test Label";
label: "Test Label",
typeIndex: 1,
};
const { types } = await addOneFieldAndDescriptionAndSaveForm(formId, page, { const createdFields: Record<number, { label: string; typeIndex: number }> = {};
description,
field: field, const { types } = await addMultipleFieldsAndSaveForm(formId, page, { description, label });
});
await page.reload(); await page.reload();
expect(await page.inputValue(`[data-testid="description"]`)).toBe(description); expect(await page.inputValue(`[data-testid="description"]`)).toBe(description);
expect(await page.locator('[data-testid="field"]').count()).toBe(1); expect(await page.locator('[data-testid="field"]').count()).toBe(types.length);
await expectCurrentFormToHaveFields(page, { 0: field }, types); types.forEach((item, index) => {
createdFields[index] = { label: `Test Label ${index + 1}`, typeIndex: index };
});
await expectCurrentFormToHaveFields(page, createdFields, types);
await page.click('[href*="/apps/routing-forms/route-builder/"]'); await page.click('[href*="/apps/routing-forms/route-builder/"]');
await selectNewRoute(page); await selectNewRoute(page);
await page.click('[data-testid="add-rule"]'); await page.click('[data-testid="add-rule"]');
await verifyFieldOptionsInRule([field.label], page); const options = Object.values(createdFields).map((item) => item.label);
await verifyFieldOptionsInRule(options, page);
}); });
test.describe("F1<-F2 Relationship", () => { test.describe("F1<-F2 Relationship", () => {
@ -387,6 +387,45 @@ export async function addForm(page: Page, { name = "Test Form Name" } = {}) {
return formId; return formId;
} }
async function addMultipleFieldsAndSaveForm(
formId: string,
page: Page,
form: { description: string; label: string }
) {
await page.goto(`apps/routing-forms/form-edit/${formId}`);
await page.click('[data-testid="add-field"]');
await page.fill('[data-testid="description"]', form.description);
const { optionsInUi: types } = await verifySelectOptions(
{ selector: ".data-testid-field-type", nth: 0 },
["Email", "Long Text", "MultiSelect", "Number", "Phone", "Select", "Short Text"],
page
);
await page.fill(`[name="fields.0.label"]`, `${form.label} 1`);
await page.click('[data-testid="add-field"]');
const withoutFirstValue = [...types].filter((val) => val !== "Short Text");
for (let index = 0; index < withoutFirstValue.length; index++) {
const fieldName = withoutFirstValue[index];
const nth = index + 1;
const label = `${form.label} ${index + 2}`;
await page.locator(".data-testid-field-type").nth(nth).click();
await page.locator(`[data-testid="select-option-${fieldName}"]`).click();
await page.fill(`[name="fields.${nth}.label"]`, label);
if (index !== withoutFirstValue.length - 1) {
await page.click('[data-testid="add-field"]');
}
}
await saveCurrentForm(page);
return {
types,
};
}
export async function addOneFieldAndDescriptionAndSaveForm( export async function addOneFieldAndDescriptionAndSaveForm(
formId: string, formId: string,
page: Page, page: Page,

View File

@ -43,7 +43,9 @@ export const OptionComponent = <
// This gets styled in the select classNames prop now - handles overrides with styles vs className here doesnt // This gets styled in the select classNames prop now - handles overrides with styles vs className here doesnt
<reactSelectComponents.Option {...props}> <reactSelectComponents.Option {...props}>
<div className="flex"> <div className="flex">
<span className="mr-auto">{props.label}</span> <span className="mr-auto" data-testid={`select-option-${props.label}`}>
{props.label}
</span>
{(props.data as unknown as ExtendedOption).needsUpgrade && <UpgradeTeamsBadge />} {(props.data as unknown as ExtendedOption).needsUpgrade && <UpgradeTeamsBadge />}
{props.isSelected && <Check className="ml-2 h-4 w-4" />} {props.isSelected && <Check className="ml-2 h-4 w-4" />}
</div> </div>