@getmicdrop/svelte-components 5.5.4 → 5.5.5

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

@@ -0,0 +1,199 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import RadioGroup from './RadioGroup.svelte';
+
+const testOptions = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C' }
+];
+
+describe('RadioGroup Component', () => {
+  test('renders a fieldset', () => {
+    const { container } = render(RadioGroup);
+    expect(container.querySelector('fieldset')).toBeInTheDocument();
+  });
+
+  test('applies custom className to fieldset', () => {
+    const { container } = render(RadioGroup, { props: { class: 'custom-radio-group' } });
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset).toHaveClass('custom-radio-group');
+  });
+
+  test('renders radio inputs for each option', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    expect(radios.length).toBe(3);
+  });
+
+  test('empty options renders no radios', () => {
+    const { container } = render(RadioGroup);
+    const radios = container.querySelectorAll('input[type="radio"]');
+    expect(radios.length).toBe(0);
+  });
+});
+
+describe('RadioGroup Label', () => {
+  test('no label renders no legend', () => {
+    const { container } = render(RadioGroup);
+    expect(container.querySelector('legend')).not.toBeInTheDocument();
+  });
+
+  test('label prop displays legend text', () => {
+    render(RadioGroup, { props: { label: 'Select your preference' } });
+    expect(screen.getByText('Select your preference')).toBeInTheDocument();
+  });
+
+  test('legend is rendered in fieldset', () => {
+    const { container } = render(RadioGroup, { props: { label: 'Choose one' } });
+    const legend = container.querySelector('legend');
+    expect(legend).toBeInTheDocument();
+  });
+
+  test('required shows asterisk', () => {
+    render(RadioGroup, { props: { label: 'Selection', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('error state applies red text to legend', () => {
+    const { container } = render(RadioGroup, { props: { label: 'Test', error: 'Required' } });
+    const legend = container.querySelector('legend');
+    expect(legend).toHaveClass('text-red-500');
+  });
+});
+
+describe('RadioGroup Hint', () => {
+  test('no hint renders no hint text', () => {
+    const { container } = render(RadioGroup, { props: { label: 'Test' } });
+    const paragraphs = container.querySelectorAll('p');
+    expect(paragraphs.length).toBe(0);
+  });
+
+  test('hint prop displays hint text', () => {
+    render(RadioGroup, { props: { hint: 'Select one option' } });
+    expect(screen.getByText('Select one option')).toBeInTheDocument();
+  });
+
+  test('hint is hidden when error is present', () => {
+    render(RadioGroup, { props: { hint: 'Helper text', error: 'Error' } });
+    expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
+  });
+});
+
+describe('RadioGroup Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(RadioGroup);
+    expect(container.querySelector('[role="alert"]')).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(RadioGroup, { props: { error: 'Please select an option' } });
+    expect(screen.getByText('Please select an option')).toBeInTheDocument();
+  });
+});
+
+describe('RadioGroup Direction', () => {
+  test('default direction is vertical', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const optionsDiv = container.querySelector('.flex.flex-col');
+    expect(optionsDiv).toBeInTheDocument();
+  });
+
+  test('vertical direction has gap-2', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, direction: 'vertical' } });
+    const optionsDiv = container.querySelector('.flex.flex-col');
+    expect(optionsDiv).toHaveClass('gap-2');
+  });
+
+  test('horizontal direction uses flex wrap', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, direction: 'horizontal' } });
+    const optionsDiv = container.querySelector('.flex.flex-wrap');
+    expect(optionsDiv).toBeInTheDocument();
+  });
+
+  test('horizontal direction has gap-4', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, direction: 'horizontal' } });
+    const optionsDiv = container.querySelector('.flex.flex-wrap');
+    expect(optionsDiv).toHaveClass('gap-4');
+  });
+});
+
+describe('RadioGroup Props', () => {
+  test('name prop is passed to radios', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, name: 'preference' } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).toHaveAttribute('name', 'preference');
+    });
+  });
+
+  test('disabled prop disables all radios', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, disabled: true } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).toBeDisabled();
+    });
+  });
+
+  test('radios are not disabled by default', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).not.toBeDisabled();
+    });
+  });
+});
+
+describe('RadioGroup Options', () => {
+  test('option labels are displayed', () => {
+    render(RadioGroup, { props: { options: testOptions } });
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+    expect(screen.getByText('Option B')).toBeInTheDocument();
+    expect(screen.getByText('Option C')).toBeInTheDocument();
+  });
+
+  test('option values are set on radios', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    expect(radios[0]).toHaveAttribute('value', 'a');
+    expect(radios[1]).toHaveAttribute('value', 'b');
+    expect(radios[2]).toHaveAttribute('value', 'c');
+  });
+});
+
+describe('RadioGroup Combinations', () => {
+  test('label with options horizontal', () => {
+    render(RadioGroup, {
+      props: { label: 'Size', options: testOptions, direction: 'horizontal' }
+    });
+    expect(screen.getByText('Size')).toBeInTheDocument();
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(RadioGroup, {
+      props: {
+        label: 'Choose Color',
+        options: testOptions,
+        name: 'color',
+        disabled: true,
+        hint: 'Pick one color',
+        error: 'Selection required',
+        required: true,
+        direction: 'horizontal',
+        class: 'custom-group'
+      }
+    });
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset).toHaveClass('custom-group');
+    expect(screen.getByText('Choose Color')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Selection required')).toBeInTheDocument();
+    // Hint hidden when error present
+    expect(screen.queryByText('Pick one color')).not.toBeInTheDocument();
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).toBeDisabled();
+    });
+  });
+});

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

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

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

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

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

@@ -0,0 +1,188 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import SelectField from './SelectField.svelte';
+
+const testItems = [
+  { value: '1', name: 'First Option' },
+  { value: '2', name: 'Second Option' },
+  { value: '3', name: 'Third Option' }
+];
+
+describe('SelectField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(SelectField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(SelectField, { props: { class: 'custom-select-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-select-field');
+  });
+
+  test('renders a button trigger (custom select)', () => {
+    const { container } = render(SelectField);
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).toBeInTheDocument();
+  });
+});
+
+describe('SelectField Label', () => {
+  test('no label renders no label text', () => {
+    const { container } = render(SelectField);
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(SelectField, { props: { label: 'Choose Country' } });
+    expect(screen.getByText('Choose Country')).toBeInTheDocument();
+  });
+
+  test('required shows asterisk', () => {
+    render(SelectField, { props: { label: 'Country', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+});
+
+describe('SelectField Placeholder', () => {
+  test('default placeholder is "Select an option"', () => {
+    render(SelectField);
+    expect(screen.getByText('Select an option')).toBeInTheDocument();
+  });
+
+  test('custom placeholder is displayed', () => {
+    render(SelectField, { props: { placeholder: 'Pick a country' } });
+    expect(screen.getByText('Pick a country')).toBeInTheDocument();
+  });
+});
+
+describe('SelectField Items', () => {
+  // Note: Items are only rendered when dropdown is open
+  // We can test that items prop is accepted
+  test('accepts items prop', () => {
+    const { container } = render(SelectField, { props: { items: testItems } });
+    expect(container.querySelector('button[aria-haspopup="listbox"]')).toBeInTheDocument();
+  });
+
+  test('empty items renders select with placeholder only', () => {
+    const { container } = render(SelectField, { props: { items: [] } });
+    expect(screen.getByText('Select an option')).toBeInTheDocument();
+  });
+});
+
+describe('SelectField Hint', () => {
+  test('no hint renders no hint text', () => {
+    const { container } = render(SelectField, { props: { label: 'Test' } });
+    // The Select component itself may have paragraphs for errors
+    // We look specifically for our hint
+    expect(screen.queryByText('Select your preferred option')).not.toBeInTheDocument();
+  });
+
+  test('hint prop displays hint text', () => {
+    render(SelectField, { props: { hint: 'Select your preferred option' } });
+    expect(screen.getByText('Select your preferred option')).toBeInTheDocument();
+  });
+
+  test('hint is hidden when error is present', () => {
+    render(SelectField, { props: { hint: 'Helper text', error: 'Error message' } });
+    expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
+  });
+});
+
+describe('SelectField Error', () => {
+  test('error prop shows validation message', () => {
+    render(SelectField, { props: { error: 'Please select an option' } });
+    expect(screen.getByText('Please select an option')).toBeInTheDocument();
+  });
+
+  test('error applies error border to button', () => {
+    const { container } = render(SelectField, { props: { error: 'Required' } });
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).toHaveClass('border-red-500');
+  });
+
+  test('no error means no error border', () => {
+    const { container } = render(SelectField);
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).not.toHaveClass('border-red-500');
+  });
+});
+
+describe('SelectField Props', () => {
+  test('name prop is passed to button', () => {
+    const { container } = render(SelectField, { props: { name: 'country' } });
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).toHaveAttribute('name', 'country');
+  });
+
+  test('id prop is passed to button', () => {
+    const { container } = render(SelectField, { props: { id: 'country-select' } });
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).toHaveAttribute('id', 'country-select');
+  });
+
+  test('disabled prop disables button', () => {
+    const { container } = render(SelectField, { props: { disabled: true } });
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).toBeDisabled();
+  });
+
+  test('button is not disabled by default', () => {
+    const { container } = render(SelectField);
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).not.toBeDisabled();
+  });
+});
+
+describe('SelectField Size', () => {
+  test('default size renders button', () => {
+    const { container } = render(SelectField);
+    expect(container.querySelector('button[aria-haspopup="listbox"]')).toBeInTheDocument();
+  });
+
+  test('size sm works', () => {
+    const { container } = render(SelectField, { props: { size: 'sm' } });
+    expect(container.querySelector('button[aria-haspopup="listbox"]')).toBeInTheDocument();
+  });
+
+  test('size lg works', () => {
+    const { container } = render(SelectField, { props: { size: 'lg' } });
+    expect(container.querySelector('button[aria-haspopup="listbox"]')).toBeInTheDocument();
+  });
+});
+
+describe('SelectField Combinations', () => {
+  test('label with items', () => {
+    render(SelectField, { props: { label: 'Country', items: testItems } });
+    expect(screen.getByText('Country')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(SelectField, {
+      props: {
+        label: 'Region',
+        items: testItems,
+        placeholder: 'Pick a region',
+        hint: 'Select your region',
+        error: 'Region is required',
+        name: 'region',
+        id: 'region-select',
+        disabled: true,
+        required: true,
+        size: 'lg',
+        class: 'custom-select'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-select');
+    expect(screen.getByText('Region')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Region is required')).toBeInTheDocument();
+    // Hint hidden when error present
+    expect(screen.queryByText('Select your region')).not.toBeInTheDocument();
+    const button = container.querySelector('button[aria-haspopup="listbox"]');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('name', 'region');
+    expect(button).toHaveAttribute('id', 'region-select');
+  });
+});

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

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

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

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

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

@@ -0,0 +1,205 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import TextareaField from './TextareaField.svelte';
+
+describe('TextareaField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(TextareaField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(TextareaField, { props: { class: 'custom-textarea-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-textarea-field');
+  });
+
+  test('renders a textarea element', () => {
+    const { container } = render(TextareaField);
+    expect(container.querySelector('textarea')).toBeInTheDocument();
+  });
+});
+
+describe('TextareaField Label', () => {
+  test('no label renders no label text', () => {
+    const { container } = render(TextareaField);
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(TextareaField, { props: { label: 'Description' } });
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  test('required shows asterisk', () => {
+    render(TextareaField, { props: { label: 'Bio', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('error state shows error message', () => {
+    render(TextareaField, { props: { label: 'Test', error: 'Required' } });
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+});
+
+describe('TextareaField Placeholder', () => {
+  test('no placeholder by default', () => {
+    const { container } = render(TextareaField);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.placeholder).toBe('');
+  });
+
+  test('placeholder prop is displayed', () => {
+    const { container } = render(TextareaField, { props: { placeholder: 'Enter description...' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea.placeholder).toBe('Enter description...');
+  });
+});
+
+describe('TextareaField Rows', () => {
+  test('default rows is 4', () => {
+    const { container } = render(TextareaField);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('rows', '4');
+  });
+
+  test('custom rows value', () => {
+    const { container } = render(TextareaField, { props: { rows: 8 } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('rows', '8');
+  });
+});
+
+describe('TextareaField Hint', () => {
+  test('no hint renders no hint text', () => {
+    const { container } = render(TextareaField, { props: { label: 'Test' } });
+    const paragraphs = container.querySelectorAll('p');
+    expect(paragraphs.length).toBe(0);
+  });
+
+  test('hint prop displays hint text', () => {
+    render(TextareaField, { props: { hint: 'Max 500 characters' } });
+    expect(screen.getByText('Max 500 characters')).toBeInTheDocument();
+  });
+
+  test('hint is hidden when error is present', () => {
+    render(TextareaField, { props: { hint: 'Helper text', error: 'Error message' } });
+    expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
+  });
+});
+
+describe('TextareaField Error', () => {
+  test('no error shows no validation styling', () => {
+    const { container } = render(TextareaField);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toHaveClass('border-red-500');
+  });
+
+  test('error prop shows validation message', () => {
+    render(TextareaField, { props: { error: 'This field is required' } });
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+
+  test('error applies error border to textarea', () => {
+    const { container } = render(TextareaField, { props: { error: 'Required' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveClass('border-red-500');
+  });
+});
+
+describe('TextareaField Props', () => {
+  test('name prop is passed to textarea', () => {
+    const { container } = render(TextareaField, { props: { name: 'bio' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('name', 'bio');
+  });
+
+  test('id prop is passed to textarea', () => {
+    const { container } = render(TextareaField, { props: { id: 'bio-textarea' } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('id', 'bio-textarea');
+  });
+
+  test('disabled prop disables textarea', () => {
+    const { container } = render(TextareaField, { props: { disabled: true } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toBeDisabled();
+  });
+
+  test('textarea is not disabled by default', () => {
+    const { container } = render(TextareaField);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeDisabled();
+  });
+
+  test('readonly prop makes textarea readonly', () => {
+    const { container } = render(TextareaField, { props: { readonly: true } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('readonly');
+  });
+});
+
+describe('TextareaField Length Constraints', () => {
+  test('maxlength prop is passed to textarea', () => {
+    const { container } = render(TextareaField, { props: { maxlength: 500 } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('maxlength', '500');
+  });
+
+  test('minlength prop is passed to textarea', () => {
+    const { container } = render(TextareaField, { props: { minlength: 10 } });
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toHaveAttribute('minlength', '10');
+  });
+
+  test('no maxlength by default', () => {
+    const { container } = render(TextareaField);
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toHaveAttribute('maxlength');
+  });
+});
+
+describe('TextareaField Combinations', () => {
+  test('label with placeholder and rows', () => {
+    const { container } = render(TextareaField, {
+      props: { label: 'Notes', placeholder: 'Add notes...', rows: 6 }
+    });
+    expect(screen.getByText('Notes')).toBeInTheDocument();
+    const textarea = container.querySelector('textarea');
+    expect(textarea.placeholder).toBe('Add notes...');
+    expect(textarea).toHaveAttribute('rows', '6');
+  });
+
+  test('all props together', () => {
+    const { container } = render(TextareaField, {
+      props: {
+        label: 'Biography',
+        placeholder: 'Tell us about yourself',
+        rows: 10,
+        hint: 'Min 50, max 1000 characters',
+        error: 'Too short',
+        name: 'bio',
+        id: 'bio-field',
+        disabled: true,
+        required: true,
+        maxlength: 1000,
+        minlength: 50,
+        class: 'custom-textarea'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-textarea');
+    expect(screen.getByText('Biography')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Too short')).toBeInTheDocument();
+    // Hint hidden when error present
+    expect(screen.queryByText('Min 50, max 1000 characters')).not.toBeInTheDocument();
+    const textarea = container.querySelector('textarea');
+    expect(textarea).toBeDisabled();
+    expect(textarea).toHaveAttribute('name', 'bio');
+    expect(textarea).toHaveAttribute('id', 'bio-field');
+    expect(textarea).toHaveAttribute('rows', '10');
+    expect(textarea).toHaveAttribute('maxlength', '1000');
+    expect(textarea).toHaveAttribute('minlength', '50');
+  });
+});

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

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

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

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