FormfieldTextbox tests added

packages/components-react/src/form-field-textbox/FormFieldTextbox.tsx

@@ -62,7 +62,7 @@ export const LuxFormFieldTextbox = ({
 
   // TODO: naar utils
   function pick<T extends object, U extends keyof T>(obj: T, paths: Array<U>): Pick<T, U> {
-    const ret = Object.create(null);
+    const ret = {} as Pick<T, U>;
     for (const k of paths) {
       ret[k] = obj[k];
     }
@@ -91,6 +91,8 @@ export const LuxFormFieldTextbox = ({
     'onChange',
   ]);
 
+  const formFieldAttrs = pick(restProps, ['children']);
+
   return (
     <LuxFormField
       label={labelNode}
@@ -114,7 +116,7 @@ export const LuxFormFieldTextbox = ({
         />
       }
       className={className}
-      {...restProps}
+      {...formFieldAttrs}
     />
   );
 };

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(<LuxFormFieldTextbox label="Name" />);
+
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('applies the base class', () => {
+    render(<LuxFormFieldTextbox label="Name" />);
+
+    const formField = screen.getByText('Name').closest('.utrecht-form-field');
+    expect(formField).toHaveClass('utrecht-form-field');
+  });
+
+  it('can have an additional class name', () => {
+    render(<LuxFormFieldTextbox label="Name" className="custom-class" />);
+
+    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(<LuxFormFieldTextbox label="Name" description="Enter your full name" />);
+
+    expect(screen.getByText('Enter your full name')).toBeInTheDocument();
+  });
+
+  it('renders error message when invalid and error message provided', () => {
+    render(<LuxFormFieldTextbox label="Name" invalid={true} errorMessage="Name is required" />);
+
+    expect(screen.getByText('Name is required')).toBeInTheDocument();
+  });
+
+  it('adds the correct attributes to the Textbox', () => {
+    render(<LuxFormFieldTextbox label="Name" autoComplete="on" inputDir="rtl" required />);
+
+    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');
+  });
+});

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(<LuxFormField label="Name" input={<input type="text" />} invalid={false} errorMessage="Name is required" />);
-
-    expect(screen.queryByText('Name is required')).not.toBeInTheDocument();
-  });
-
   it('applies the correct class for checkbox type', () => {
     render(<LuxFormField label="Accept terms" input={<input type="checkbox" />} type="checkbox" />);