diff --git a/packages/app-store/routing-forms/playwright/tests/basic.e2e.ts b/packages/app-store/routing-forms/playwright/tests/basic.e2e.ts index 127c0e138b..ee485e4206 100644 --- a/packages/app-store/routing-forms/playwright/tests/basic.e2e.ts +++ b/packages/app-store/routing-forms/playwright/tests/basic.e2e.ts @@ -37,29 +37,29 @@ test.describe("Routing Forms", () => { const formId = await addForm(page); const description = "Test Description"; - const field = { - label: "Test Label", - typeIndex: 1, - }; + const label = "Test Label"; - const { types } = await addOneFieldAndDescriptionAndSaveForm(formId, page, { - description, - field: field, - }); + const createdFields: Record = {}; + + const { types } = await addMultipleFieldsAndSaveForm(formId, page, { description, label }); await page.reload(); 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 selectNewRoute(page); 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", () => { @@ -387,6 +387,45 @@ export async function addForm(page: Page, { name = "Test Form Name" } = {}) { 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( formId: string, page: Page, diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx index 7e0057ea08..3a5a4462d0 100644 --- a/packages/ui/components/form/select/components.tsx +++ b/packages/ui/components/form/select/components.tsx @@ -43,7 +43,9 @@ export const OptionComponent = < // This gets styled in the select classNames prop now - handles overrides with styles vs className here doesnt
- {props.label} + + {props.label} + {(props.data as unknown as ExtendedOption).needsUpgrade && } {props.isSelected && }