diff --git a/packages/components-react/src/form-field-textbox/FormFieldTextbox.tsx b/packages/components-react/src/form-field-textbox/FormFieldTextbox.tsx index aa160091..b7e55d39 100644 --- a/packages/components-react/src/form-field-textbox/FormFieldTextbox.tsx +++ b/packages/components-react/src/form-field-textbox/FormFieldTextbox.tsx @@ -62,7 +62,7 @@ export const LuxFormFieldTextbox = ({ // TODO: naar utils function pick(obj: T, paths: Array): Pick { - const ret = Object.create(null); + const ret = {} as Pick; for (const k of paths) { ret[k] = obj[k]; } @@ -91,6 +91,8 @@ export const LuxFormFieldTextbox = ({ 'onChange', ]); + const formFieldAttrs = pick(restProps, ['children']); + return ( } className={className} - {...restProps} + {...formFieldAttrs} /> ); }; diff --git a/packages/components-react/src/form-field-textbox/test/form-field-textbox.spec.tsx b/packages/components-react/src/form-field-textbox/test/form-field-textbox.spec.tsx new file mode 100644 index 00000000..c03efa4c --- /dev/null +++ b/packages/components-react/src/form-field-textbox/test/form-field-textbox.spec.tsx @@ -0,0 +1,51 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen } from '@testing-library/react'; +import { LuxFormFieldTextbox } from '../FormFieldTextbox'; + +describe('Form Field Textbox', () => { + it('renders a basic form field textbox with label and input', () => { + render(); + + expect(screen.getByText('Name')).toBeInTheDocument(); + expect(screen.getByRole('textbox')).toBeInTheDocument(); + }); + + it('applies the base class', () => { + render(); + + const formField = screen.getByText('Name').closest('.utrecht-form-field'); + expect(formField).toHaveClass('utrecht-form-field'); + }); + + it('can have an additional class name', () => { + render(); + + const formField = screen.getByText('Name').closest('.utrecht-form-field'); + expect(formField).toHaveClass('utrecht-form-field'); + expect(formField).toHaveClass('custom-class'); + }); + + it('renders description when provided', () => { + render(); + + expect(screen.getByText('Enter your full name')).toBeInTheDocument(); + }); + + it('renders error message when invalid and error message provided', () => { + render(); + + expect(screen.getByText('Name is required')).toBeInTheDocument(); + }); + + it('adds the correct attributes to the Textbox', () => { + render(); + + const textbox = screen.getByRole('textbox'); + + expect(textbox).toBeInTheDocument(); + expect(textbox).toHaveAttribute('autocomplete', 'on'); + expect(textbox).toHaveAttribute('dir', 'rtl'); + expect(textbox).toHaveAttribute('aria-required', 'true'); + expect(textbox).not.toHaveAttribute('required'); + }); +}); diff --git a/packages/components-react/src/form-field/test/FormField.spec.tsx b/packages/components-react/src/form-field/test/FormField.spec.tsx index 4c1a5692..92d4b5e2 100644 --- a/packages/components-react/src/form-field/test/FormField.spec.tsx +++ b/packages/components-react/src/form-field/test/FormField.spec.tsx @@ -37,12 +37,6 @@ describe('Form Field', () => { expect(screen.getByText('Name is required')).toBeInTheDocument(); }); - it('does not render error message when not invalid', () => { - render(} invalid={false} errorMessage="Name is required" />); - - expect(screen.queryByText('Name is required')).not.toBeInTheDocument(); - }); - it('applies the correct class for checkbox type', () => { render(} type="checkbox" />);