@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/recipes/feedback/EmptyState/EmptyState.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EmptyState.spec.d.ts.map

package/dist/recipes/feedback/EmptyState/EmptyState.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.spec.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.spec.js"],"names":[],"mappings":""}

package/dist/recipes/feedback/EmptyState/EmptyState.spec.js

@@ -0,0 +1,202 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import EmptyState from './EmptyState.svelte';
+
+describe('EmptyState Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has flex centering classes', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('flex');
+    expect(wrapper).toHaveClass('flex-col');
+    expect(wrapper).toHaveClass('items-center');
+    expect(wrapper).toHaveClass('justify-center');
+  });
+
+  test('has text-center class', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('text-center');
+  });
+
+  test('has padding classes', () => {
+    const { container } = render(EmptyState);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('px-6');
+    expect(wrapper).toHaveClass('py-10');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(EmptyState, { props: { class: 'custom-empty' } });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('custom-empty');
+  });
+});
+
+describe('EmptyState Title/Message', () => {
+  test('shows default "No results found" when no title', () => {
+    render(EmptyState);
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+  });
+
+  test('title prop displays custom title', () => {
+    render(EmptyState, { props: { title: 'No items' } });
+    expect(screen.getByText('No items')).toBeInTheDocument();
+  });
+
+  test('message prop displays custom message', () => {
+    render(EmptyState, { props: { message: 'Nothing here' } });
+    expect(screen.getByText('Nothing here')).toBeInTheDocument();
+  });
+
+  test('title takes precedence over message', () => {
+    render(EmptyState, { props: { title: 'Title', message: 'Message' } });
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.queryByText('Message')).not.toBeInTheDocument();
+  });
+
+  test('title is in h3 element', () => {
+    const { container } = render(EmptyState, { props: { title: 'Test Title' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toBeInTheDocument();
+    expect(h3).toHaveTextContent('Test Title');
+  });
+});
+
+describe('EmptyState Description/Subtext', () => {
+  test('no subtext by default', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  test('description prop displays text', () => {
+    render(EmptyState, { props: { description: 'Try different filters' } });
+    expect(screen.getByText('Try different filters')).toBeInTheDocument();
+  });
+
+  test('subtext prop displays text', () => {
+    render(EmptyState, { props: { subtext: 'Check back later' } });
+    expect(screen.getByText('Check back later')).toBeInTheDocument();
+  });
+
+  test('description takes precedence over subtext', () => {
+    render(EmptyState, { props: { description: 'Description', subtext: 'Subtext' } });
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.queryByText('Subtext')).not.toBeInTheDocument();
+  });
+
+  test('subtext is in p element', () => {
+    const { container } = render(EmptyState, { props: { subtext: 'Subtext here' } });
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p).toHaveTextContent('Subtext here');
+  });
+
+  test('p element has mt-1 margin', () => {
+    const { container } = render(EmptyState, { props: { description: 'Desc' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('mt-1');
+  });
+});
+
+describe('EmptyState Icon/Image', () => {
+  test('no icon section when no icon or image', () => {
+    const { container } = render(EmptyState);
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  test('imageSrc renders img element', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', '/empty.png');
+  });
+
+  test('img has empty alt for decorative', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveAttribute('alt', '');
+  });
+
+  test('img has mb-3 margin', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('mb-3');
+  });
+
+  test('iconSize prop sets size classes on image', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image', iconSize: 'w-32 h-32' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-32');
+    expect(img).toHaveClass('h-32');
+  });
+
+  test('default iconSize is w-20 h-20', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/empty.png', iconType: 'image' }
+    });
+    const img = container.querySelector('img');
+    expect(img).toHaveClass('w-20');
+    expect(img).toHaveClass('h-20');
+  });
+});
+
+describe('EmptyState Props', () => {
+  test('iconType defaults to component', () => {
+    // When iconType is 'component' and no icon provided, no image renders
+    const { container } = render(EmptyState, { props: { imageSrc: '/test.png' } });
+    // Since iconType defaults to 'component', the image won't render
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  test('iconType=image with imageSrc renders image', () => {
+    const { container } = render(EmptyState, {
+      props: { imageSrc: '/test.png', iconType: 'image' }
+    });
+    expect(container.querySelector('img')).toBeInTheDocument();
+  });
+});
+
+describe('EmptyState Combinations', () => {
+  test('title and description together', () => {
+    render(EmptyState, { props: { title: 'Empty', description: 'Add some items' } });
+    expect(screen.getByText('Empty')).toBeInTheDocument();
+    expect(screen.getByText('Add some items')).toBeInTheDocument();
+  });
+
+  test('message and subtext together', () => {
+    render(EmptyState, { props: { message: 'No data', subtext: 'Try again' } });
+    expect(screen.getByText('No data')).toBeInTheDocument();
+    expect(screen.getByText('Try again')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(EmptyState, {
+      props: {
+        title: 'Nothing Found',
+        description: 'Your search returned no results',
+        imageSrc: '/empty.svg',
+        iconType: 'image',
+        iconSize: 'w-24 h-24',
+        class: 'min-h-screen'
+      }
+    });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('min-h-screen');
+    expect(container.querySelector('img')).toBeInTheDocument();
+    expect(screen.getByText('Nothing Found')).toBeInTheDocument();
+    expect(screen.getByText('Your search returned no results')).toBeInTheDocument();
+  });
+});

package/dist/recipes/feedback/ErrorDisplay.spec.js

@@ -22,15 +22,15 @@ describe("ErrorDisplay Component Tests", () => {
     const { container } = render(ErrorDisplay, {
       props: { error: "Error", show: true },
     });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("text-red-600");
+    const icon = container.querySelector("svg");
+    expect(icon).toHaveClass("text-red-600");
   });
 
   test("Has shake class when shake is true", () => {
     const { container } = render(ErrorDisplay, {
       props: { error: "Error", show: true, shake: true },
     });
-    const wrapper = container.firstChild;
+    const wrapper = container.querySelector("div.flex");
     expect(wrapper).toHaveClass("animate-shake");
   });
 
@@ -38,7 +38,7 @@ describe("ErrorDisplay Component Tests", () => {
     const { container } = render(ErrorDisplay, {
       props: { error: "Error", show: true, shake: false },
     });
-    const wrapper = container.firstChild;
+    const wrapper = container.querySelector("div.flex");
     expect(wrapper).not.toHaveClass("animate-shake");
   });
 
@@ -54,7 +54,7 @@ describe("ErrorDisplay Component Tests", () => {
     const { container } = render(ErrorDisplay, {
       props: { error: "Error", show: true },
     });
-    const wrapper = container.firstChild;
+    const wrapper = container.querySelector("div.flex");
     expect(wrapper).toHaveClass("flex");
     expect(wrapper).toHaveClass("items-center");
   });
@@ -63,7 +63,7 @@ describe("ErrorDisplay Component Tests", () => {
     const { container } = render(ErrorDisplay, {
       props: { error: "Error", show: true, className: "mt-2" },
     });
-    const wrapper = container.firstChild;
+    const wrapper = container.querySelector("div.flex");
     expect(wrapper).toHaveClass("mt-2");
   });
 });

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.js

@@ -6,15 +6,18 @@ describe('StatusIndicator', () => {
   describe('idle state', () => {
     it('renders empty container when status is idle', () => {
       const { container } = render(StatusIndicator, { status: 'idle' });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator).toBeTruthy();
-      expect(indicator.children.length).toBe(0);
+      // Check that no status indicators are rendered
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
     });
 
     it('uses default status of idle', () => {
       const { container } = render(StatusIndicator);
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.children.length).toBe(0);
+      // Default status is idle - no status indicators should be rendered
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
     });
   });
 
@@ -25,11 +28,12 @@ describe('StatusIndicator', () => {
       expect(spinner).toBeTruthy();
     });
 
-    it('renders spinner SVG with track and head circles', () => {
+    it('renders spinner SVG with circles', () => {
       const { container } = render(StatusIndicator, { status: 'loading' });
       const spinner = container.querySelector('.spinner');
       expect(spinner.querySelector('svg')).toBeTruthy();
-      expect(spinner.querySelector('.spinner-track')).toBeTruthy();
+      const circles = spinner.querySelectorAll('circle');
+      expect(circles.length).toBe(2); // Background circle and animated spinner head
       expect(spinner.querySelector('.spinner-head')).toBeTruthy();
     });
 
@@ -48,11 +52,11 @@ describe('StatusIndicator', () => {
       expect(success).toBeTruthy();
     });
 
-    it('renders success SVG with background and checkmark', () => {
+    it('renders success SVG with circle and checkmark', () => {
       const { container } = render(StatusIndicator, { status: 'success' });
       const success = container.querySelector('.success-circle');
       expect(success.querySelector('svg')).toBeTruthy();
-      expect(success.querySelector('.success-bg')).toBeTruthy();
+      expect(success.querySelector('circle')).toBeTruthy();
       expect(success.querySelector('.checkmark')).toBeTruthy();
     });
 
@@ -71,11 +75,11 @@ describe('StatusIndicator', () => {
       expect(error).toBeTruthy();
     });
 
-    it('renders error SVG with background and X lines', () => {
+    it('renders error SVG with circle and X lines', () => {
       const { container } = render(StatusIndicator, { status: 'error' });
       const error = container.querySelector('.error-circle');
       expect(error.querySelector('svg')).toBeTruthy();
-      expect(error.querySelector('.error-bg')).toBeTruthy();
+      expect(error.querySelector('circle')).toBeTruthy();
       const xLines = error.querySelectorAll('.error-x');
       expect(xLines.length).toBe(2);
     });
@@ -91,16 +95,16 @@ describe('StatusIndicator', () => {
   describe('size prop', () => {
     it('uses default size of 48px', () => {
       const { container } = render(StatusIndicator, { status: 'loading' });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.style.width).toBe('48px');
-      expect(indicator.style.height).toBe('48px');
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('48px');
+      expect(spinner.style.height).toBe('48px');
     });
 
     it('accepts custom size', () => {
       const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.style.width).toBe('100px');
-      expect(indicator.style.height).toBe('100px');
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('100px');
+      expect(spinner.style.height).toBe('100px');
     });
   });
 

package/dist/recipes/fields/CheckboxField.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CheckboxField.spec.d.ts.map

package/dist/recipes/fields/CheckboxField.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/CheckboxField.spec.js"],"names":[],"mappings":""}

package/dist/recipes/fields/CheckboxField.spec.js

@@ -0,0 +1,135 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import CheckboxField from './CheckboxField.svelte';
+
+describe('CheckboxField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(CheckboxField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(CheckboxField, { props: { class: 'custom-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-field');
+  });
+
+  test('renders a checkbox input', () => {
+    const { container } = render(CheckboxField);
+    expect(container.querySelector('input[type="checkbox"]')).toBeInTheDocument();
+  });
+});
+
+describe('CheckboxField Label', () => {
+  test('no label renders no label text', () => {
+    render(CheckboxField);
+    expect(screen.queryByText(/test label/i)).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(CheckboxField, { props: { label: 'Accept terms' } });
+    expect(screen.getByText('Accept terms')).toBeInTheDocument();
+  });
+
+  test('required adds asterisk to label', () => {
+    render(CheckboxField, { props: { label: 'Name', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('error state applies error styling to label', () => {
+    const { container } = render(CheckboxField, { props: { label: 'Test', error: 'Required' } });
+    const labelSpan = container.querySelector('span');
+    expect(labelSpan).toHaveClass('text-red-500');
+  });
+});
+
+describe('CheckboxField Description', () => {
+  test('no description renders no description', () => {
+    const { container } = render(CheckboxField);
+    const spans = container.querySelectorAll('span');
+    expect(spans.length).toBeLessThanOrEqual(1);
+  });
+
+  test('description prop displays description text', () => {
+    render(CheckboxField, { props: { description: 'You agree to our terms' } });
+    expect(screen.getByText('You agree to our terms')).toBeInTheDocument();
+  });
+
+  test('label and description together', () => {
+    render(CheckboxField, { props: { label: 'Terms', description: 'Read carefully' } });
+    expect(screen.getByText('Terms')).toBeInTheDocument();
+    expect(screen.getByText('Read carefully')).toBeInTheDocument();
+  });
+});
+
+describe('CheckboxField Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(CheckboxField);
+    const errorDiv = container.querySelector('.text-red-600');
+    expect(errorDiv).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(CheckboxField, { props: { error: 'This field is required' } });
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+});
+
+describe('CheckboxField Props', () => {
+  test('name prop is passed to checkbox', () => {
+    const { container } = render(CheckboxField, { props: { name: 'terms' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'terms');
+  });
+
+  test('value prop is passed to checkbox', () => {
+    const { container } = render(CheckboxField, { props: { value: 'accepted' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('value', 'accepted');
+  });
+
+  test('disabled prop disables checkbox', () => {
+    const { container } = render(CheckboxField, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+});
+
+describe('CheckboxField Layout', () => {
+  test('has flex container for checkbox and label', () => {
+    const { container } = render(CheckboxField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('has gap between checkbox and label', () => {
+    const { container } = render(CheckboxField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toHaveClass('gap-3');
+  });
+});
+
+describe('CheckboxField Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(CheckboxField, {
+      props: {
+        label: 'Newsletter',
+        description: 'Receive updates',
+        error: 'Please accept',
+        name: 'newsletter',
+        value: 'yes',
+        disabled: true,
+        required: true,
+        class: 'my-field'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('my-field');
+    expect(screen.getByText('Newsletter')).toBeInTheDocument();
+    expect(screen.getByText('Receive updates')).toBeInTheDocument();
+    expect(screen.getByText('Please accept')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+});

package/dist/recipes/fields/FormField.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=FormField.spec.d.ts.map

package/dist/recipes/fields/FormField.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/FormField.spec.js"],"names":[],"mappings":""}

package/dist/recipes/fields/FormField.spec.js

@@ -0,0 +1,159 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import FormField from './FormField.svelte';
+
+describe('FormField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(FormField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('wrapper has space-y-1 class', () => {
+    const { container } = render(FormField);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('space-y-1');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(FormField, { props: { class: 'custom-form-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-form-field');
+  });
+});
+
+describe('FormField Label', () => {
+  test('no label renders no label element', () => {
+    const { container } = render(FormField);
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(FormField, { props: { label: 'Email Address' } });
+    expect(screen.getByText('Email Address')).toBeInTheDocument();
+  });
+
+  test('label uses Label component', () => {
+    const { container } = render(FormField, { props: { label: 'Name' } });
+    const label = container.querySelector('label');
+    expect(label).toBeInTheDocument();
+  });
+
+  test('required shows asterisk', () => {
+    render(FormField, { props: { label: 'Username', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('required asterisk has red color', () => {
+    const { container } = render(FormField, { props: { label: 'Name', required: true } });
+    const asterisk = container.querySelector('.text-red-500');
+    expect(asterisk).toHaveTextContent('*');
+  });
+
+  test('error changes label color to red', () => {
+    const { container } = render(FormField, { props: { label: 'Email', error: 'Invalid' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-red-700');
+  });
+
+  test('no error keeps label gray', () => {
+    const { container } = render(FormField, { props: { label: 'Email' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-gray-900');
+  });
+});
+
+describe('FormField Hint', () => {
+  test('no hint renders no hint text', () => {
+    const { container } = render(FormField, { props: { label: 'Name' } });
+    const paragraphs = container.querySelectorAll('p');
+    expect(paragraphs.length).toBe(0);
+  });
+
+  test('hint prop displays hint text', () => {
+    render(FormField, { props: { hint: 'Enter your full name' } });
+    expect(screen.getByText('Enter your full name')).toBeInTheDocument();
+  });
+
+  test('hint is displayed in paragraph', () => {
+    const { container } = render(FormField, { props: { hint: 'Helper text' } });
+    const paragraph = container.querySelector('p');
+    expect(paragraph).toBeInTheDocument();
+    expect(paragraph).toHaveTextContent('Helper text');
+  });
+
+  test('hint is hidden when error is present', () => {
+    render(FormField, { props: { hint: 'Helper text', error: 'Error message' } });
+    expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
+  });
+});
+
+describe('FormField Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(FormField);
+    expect(container.querySelector('[role="alert"]')).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(FormField, { props: { error: 'This field is required' } });
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+
+  test('error message uses ValidationError component', () => {
+    const { container } = render(FormField, { props: { error: 'Invalid input' } });
+    const errorDiv = container.querySelector('.text-red-600');
+    expect(errorDiv).toBeInTheDocument();
+  });
+});
+
+describe('FormField ID', () => {
+  test('generates random id by default', () => {
+    const { container } = render(FormField, { props: { label: 'Test' } });
+    const label = container.querySelector('label');
+    expect(label.getAttribute('for')).toBeTruthy();
+  });
+
+  test('custom id is used when provided', () => {
+    const { container } = render(FormField, { props: { label: 'Test', id: 'my-custom-id' } });
+    const label = container.querySelector('label');
+    expect(label.getAttribute('for')).toBe('my-custom-id');
+  });
+});
+
+describe('FormField Combinations', () => {
+  test('label with hint', () => {
+    render(FormField, { props: { label: 'Email', hint: 'We won\'t share your email' } });
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText("We won't share your email")).toBeInTheDocument();
+  });
+
+  test('label with required and error', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Password', required: true, error: 'Too short' }
+    });
+    expect(screen.getByText('Password')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Too short')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(FormField, {
+      props: {
+        label: 'Username',
+        hint: 'Choose a unique username',
+        error: 'Username taken',
+        required: true,
+        id: 'username-field',
+        class: 'custom-field'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-field');
+    expect(screen.getByText('Username')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Username taken')).toBeInTheDocument();
+    // Hint should be hidden when error is present
+    expect(screen.queryByText('Choose a unique username')).not.toBeInTheDocument();
+    const label = container.querySelector('label');
+    expect(label.getAttribute('for')).toBe('username-field');
+  });
+});

package/dist/recipes/fields/RadioGroup.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioGroup.spec.d.ts.map

package/dist/recipes/fields/RadioGroup.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/fields/RadioGroup.spec.js"],"names":[],"mappings":""}