@getmicdrop/svelte-components 5.5.4 → 5.6.0

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/SelectField.svelte

@@ -1,82 +1,82 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Select from '../../primitives/Input/Select.svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface SelectItem {
-    value: string;
-    name: string;
-  }
-
-  interface Props {
-    /** Current value */
-    value?: string;
-    /** Select items array */
-    items?: SelectItem[];
-    /** Placeholder text */
-    placeholder?: string;
-    /** Label text */
-    label?: string;
-    /** Whether required */
-    required?: boolean;
-    /** Whether disabled */
-    disabled?: boolean;
-    /** Error message */
-    error?: string;
-    /** Input name */
-    name?: string;
-    /** Input id */
-    id?: string;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Hint text shown below input (string version) */
-    hint?: string;
-    /** Custom hint content snippet (supports links, formatting) */
-    hintContent?: Snippet;
-    /** Additional class for the wrapper div */
-    class?: string;
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Select from '../../primitives/Input/Select.svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface SelectItem {
+    value: string;
+    name: string;
+  }
+
+  interface Props {
+    /** Current value */
+    value?: string;
+    /** Select items array */
+    items?: SelectItem[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Whether required */
+    required?: boolean;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Input name */
+    name?: string;
+    /** Input id */
+    id?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Hint text shown below input (string version) */
+    hint?: string;
+    /** Custom hint content snippet (supports links, formatting) */
+    hintContent?: Snippet;
+    /** Additional class for the wrapper div */
+    class?: string;
     /** Change handler */
     onchange?: (detail: { value: string; item: SelectItem }) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    items = [],
-    placeholder = 'Select an option',
-    label = '',
-    required = false,
-    disabled = false,
-    error = '',
-    name = '',
-    id = '',
-    size = 'md',
-    hint = '',
-    hintContent,
-    class: className = '',
-    onchange
-  }: Props = $props();
-</script>
-
-<div class={className}>
-  <Select
-    {id}
-    {name}
-    {items}
-    {placeholder}
-    {label}
-    {disabled}
-    {required}
-    {error}
-    {size}
-    {onchange}
-    bind:value
-  />
-
-  {#if !error}
-    {#if hintContent}
-      <p class={`${typography.smMuted} mt-1`}>{@render hintContent()}</p>
-    {:else if hint}
-      <p class={`${typography.smMuted} mt-1`}>{hint}</p>
-    {/if}
-  {/if}
-</div>
+  }
+
+  let {
+    value = $bindable(''),
+    items = [],
+    placeholder = 'Select an option',
+    label = '',
+    required = false,
+    disabled = false,
+    error = '',
+    name = '',
+    id = '',
+    size = 'md',
+    hint = '',
+    hintContent,
+    class: className = '',
+    onchange
+  }: Props = $props();
+</script>
+
+<div class={className}>
+  <Select
+    {id}
+    {name}
+    {items}
+    {placeholder}
+    {label}
+    {disabled}
+    {required}
+    {error}
+    {size}
+    {onchange}
+    bind:value
+  />
+
+  {#if !error}
+    {#if hintContent}
+      <p class={`${typography.smMuted} mt-1`}>{@render hintContent()}</p>
+    {:else if hint}
+      <p class={`${typography.smMuted} mt-1`}>{hint}</p>
+    {/if}
+  {/if}
+</div>

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');
+  });
+});