diff --git a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx index 8105623d..44fc1791 100644 --- a/src/visualBuilder/components/__test__/fieldToolbar.test.tsx +++ b/src/visualBuilder/components/__test__/fieldToolbar.test.tsx @@ -797,6 +797,89 @@ describe("FieldToolbarComponent", () => { }); }); + describe("Boolean field toolbar", () => { + const booleanSchema = { + data_type: "boolean", + display_name: "Featured", + uid: "featured", + field_metadata: { description: "", default_value: false }, + multiple: false, + mandatory: false, + unique: false, + non_localizable: false, + } as unknown as ISchemaFieldMap; + + const EDIT_ID = + "visual-builder__focused-toolbar__multiple-field-toolbar__edit-button"; + + const booleanMetadata: CslpData = { + ...mockMultipleFieldMetadata, + fieldPath: "featured", + fieldPathWithIndex: "featured", + multipleFieldMetadata: { index: -1, parentDetails: null }, + instance: { fieldPathWithIndex: "featured" }, + }; + + const renderField = async ( + schema: ISchemaFieldMap, + fieldMetadata: CslpData + ) => { + vi.mocked(FieldSchemaMap.getFieldSchema).mockImplementation(() => + Promise.resolve(schema) + ); + const utils = render( + + ); + await act(async () => { + await new Promise((r) => setTimeout(r, 0)); + }); + return utils; + }; + + test("boolean field shows the edit button", async () => { + const { container } = await renderField( + booleanSchema, + booleanMetadata + ); + + expect( + await findByTestId(container, EDIT_ID, {}, { timeout: 1000 }) + ).toBeInTheDocument(); + }); + + test("edit button is disabled when the boolean field is disabled", async () => { + vi.mocked(isFieldDisabled).mockReturnValue({ + isDisabled: true, + reason: "", + } as ReturnType); + const { container } = await renderField( + booleanSchema, + booleanMetadata + ); + + expect( + await findByTestId(container, EDIT_ID, {}, { timeout: 1000 }) + ).toBeDisabled(); + }); + + test("boolean field has no replace button", async () => { + const { container } = await renderField( + booleanSchema, + booleanMetadata + ); + + await findByTestId(container, EDIT_ID, {}, { timeout: 1000 }); + expect( + container.querySelector( + '[data-testid="visual-builder-replace-boolean"]' + ) + ).not.toBeInTheDocument(); + }); + }); + describe("Taxonomy field toolbar", () => { const taxonomySchema = { data_type: "taxonomy", diff --git a/src/visualBuilder/components/icons/fields/index.ts b/src/visualBuilder/components/icons/fields/index.ts index a7ed0328..f655fead 100644 --- a/src/visualBuilder/components/icons/fields/index.ts +++ b/src/visualBuilder/components/icons/fields/index.ts @@ -13,4 +13,5 @@ export const fieldIcons: Partial> = { select: EditIcon, taxonomy: EditIcon, tags: EditIcon, + boolean: EditIcon, }; diff --git a/src/visualBuilder/utils/constants.ts b/src/visualBuilder/utils/constants.ts index 130b579a..3825c50e 100644 --- a/src/visualBuilder/utils/constants.ts +++ b/src/visualBuilder/utils/constants.ts @@ -48,6 +48,7 @@ export const ALLOWED_MODAL_EDITABLE_FIELD: FieldDataType[] = [ FieldDataType.SELECT, FieldDataType.TAXONOMY, FieldDataType.TAGS, + FieldDataType.BOOLEAN, ]; export const ALLOWED_REPLACE_FIELDS: FieldDataType[] = [