@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/Radio/Radio.spec.js

@@ -0,0 +1,206 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Radio from './Radio.svelte';
+
+describe('Radio Component', () => {
+  test('renders a radio input', () => {
+    const { container } = render(Radio);
+    expect(container.querySelector('input[type="radio"]')).toBeInTheDocument();
+  });
+
+  test('renders with label element', () => {
+    const { container } = render(Radio);
+    expect(container.querySelector('label')).toBeInTheDocument();
+  });
+
+  test('radio is inside label', () => {
+    const { container } = render(Radio);
+    expect(container.querySelector('label input[type="radio"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className to label', () => {
+    const { container } = render(Radio, { props: { class: 'custom-radio' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-radio');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Radio, { props: { 'data-testid': 'my-radio' } });
+    const label = container.querySelector('[data-testid="my-radio"]');
+    expect(label).toBeInTheDocument();
+  });
+});
+
+describe('Radio Props', () => {
+  test('value prop is applied to input', () => {
+    const { container } = render(Radio, { props: { value: 'option1' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('value', 'option1');
+  });
+
+  test('name prop is applied to input', () => {
+    const { container } = render(Radio, { props: { name: 'color' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'color');
+  });
+
+  test('disabled prop disables the input', () => {
+    const { container } = render(Radio, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+
+  test('checked prop controls checked state', () => {
+    const { container } = render(Radio, { props: { checked: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeChecked();
+  });
+
+  test('unchecked when checked=false', () => {
+    const { container } = render(Radio, { props: { checked: false } });
+    const input = container.querySelector('input');
+    expect(input).not.toBeChecked();
+  });
+});
+
+describe('Radio Colors', () => {
+  test('default color is blue', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-blue-600');
+  });
+
+  test('red color applies text-red-600', () => {
+    const { container } = render(Radio, { props: { color: 'red' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-red-600');
+  });
+
+  test('green color applies text-green-600', () => {
+    const { container } = render(Radio, { props: { color: 'green' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-green-600');
+  });
+
+  test('purple color applies text-purple-600', () => {
+    const { container } = render(Radio, { props: { color: 'purple' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-purple-600');
+  });
+
+  test('orange color applies text-orange-500', () => {
+    const { container } = render(Radio, { props: { color: 'orange' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-orange-500');
+  });
+
+  test('yellow color applies text-yellow-400', () => {
+    const { container } = render(Radio, { props: { color: 'yellow' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('text-yellow-400');
+  });
+});
+
+describe('Radio Input Styling', () => {
+  test('has w-4 and h-4 size', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('w-4');
+    expect(input).toHaveClass('h-4');
+  });
+
+  test('has bg-gray-100 background', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('bg-gray-100');
+  });
+
+  test('has border-gray-300 border', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('border-gray-300');
+  });
+
+  test('has dark mode background', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('has dark mode border', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('dark:border-gray-600');
+  });
+
+  test('has focus:outline-none', () => {
+    const { container } = render(Radio);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('focus:outline-none');
+  });
+});
+
+describe('Radio Label Styling', () => {
+  test('label has inline-flex layout', () => {
+    const { container } = render(Radio);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('inline-flex');
+  });
+
+  test('label has items-center alignment', () => {
+    const { container } = render(Radio);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('items-center');
+  });
+
+  test('label has gap-2 spacing', () => {
+    const { container } = render(Radio);
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('gap-2');
+  });
+
+  test('label has cursor-pointer when not disabled', () => {
+    const { container } = render(Radio, { props: { disabled: false } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-pointer');
+  });
+
+  test('label has cursor-not-allowed when disabled', () => {
+    const { container } = render(Radio, { props: { disabled: true } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-not-allowed');
+  });
+
+  test('label has opacity-50 when disabled', () => {
+    const { container } = render(Radio, { props: { disabled: true } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('opacity-50');
+  });
+});
+
+describe('Radio Event Handling', () => {
+  test('calls onchange when selected', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Radio, { props: { onchange, value: 'test' } });
+
+    const input = container.querySelector('input');
+    await user.click(input);
+    expect(onchange).toHaveBeenCalledWith({ value: 'test' });
+  });
+});
+
+describe('Radio Group Behavior', () => {
+  test('is checked when group matches value', () => {
+    const { container } = render(Radio, { props: { value: 'a', group: 'a' } });
+    const input = container.querySelector('input');
+    expect(input).toBeChecked();
+  });
+
+  test('is not checked when group does not match value', () => {
+    const { container } = render(Radio, { props: { value: 'a', group: 'b' } });
+    const input = container.querySelector('input');
+    expect(input).not.toBeChecked();
+  });
+});

package/dist/primitives/Skeleton/CardPlaceholder.spec.d.ts

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

package/dist/primitives/Skeleton/CardPlaceholder.spec.d.ts.map

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

package/dist/primitives/Skeleton/CardPlaceholder.spec.js

@@ -0,0 +1,156 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import CardPlaceholder from './CardPlaceholder.svelte';
+
+describe('CardPlaceholder Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(CardPlaceholder);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has role status', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has aria-label for accessibility', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[aria-label="Loading card"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has sr-only loading text', () => {
+    render(CardPlaceholder);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(CardPlaceholder, { props: { class: 'custom-card' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('custom-card');
+  });
+});
+
+describe('CardPlaceholder Animation', () => {
+  test('animate is true by default', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('animate-pulse');
+  });
+
+  test('animate false removes pulse', () => {
+    const { container } = render(CardPlaceholder, { props: { animate: false } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).not.toHaveClass('animate-pulse');
+  });
+});
+
+describe('CardPlaceholder Size', () => {
+  test('default size is md (max-w-sm)', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-sm');
+  });
+
+  test('size sm applies max-w-xs', () => {
+    const { container } = render(CardPlaceholder, { props: { size: 'sm' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-xs');
+  });
+
+  test('size lg applies max-w-md', () => {
+    const { container } = render(CardPlaceholder, { props: { size: 'lg' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-md');
+  });
+
+  test('size xl applies max-w-lg', () => {
+    const { container } = render(CardPlaceholder, { props: { size: 'xl' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-lg');
+  });
+
+  test('size 2xl applies max-w-xl', () => {
+    const { container } = render(CardPlaceholder, { props: { size: '2xl' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-xl');
+  });
+});
+
+describe('CardPlaceholder ShowAvatar', () => {
+  test('showAvatar is true by default', () => {
+    const { container } = render(CardPlaceholder);
+    // Should have avatar svg
+    const avatarSvgs = container.querySelectorAll('svg');
+    expect(avatarSvgs.length).toBeGreaterThan(0);
+  });
+
+  test('showAvatar false hides avatar section', () => {
+    const { container } = render(CardPlaceholder, { props: { showAvatar: false, showImage: false } });
+    // Should have no svgs
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBe(0);
+  });
+});
+
+describe('CardPlaceholder ShowImage', () => {
+  test('showImage is true by default', () => {
+    const { container } = render(CardPlaceholder);
+    // Should have image placeholder with h-48
+    const imageContainer = container.querySelector('.h-48');
+    expect(imageContainer).toBeInTheDocument();
+  });
+
+  test('showImage false hides image section', () => {
+    const { container } = render(CardPlaceholder, { props: { showImage: false } });
+    // Should not have image placeholder height class
+    const imageContainer = container.querySelector('.h-48');
+    expect(imageContainer).not.toBeInTheDocument();
+  });
+});
+
+describe('CardPlaceholder Styling', () => {
+  test('has padding', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('p-4');
+  });
+
+  test('has border', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('border');
+    expect(wrapper).toHaveClass('border-gray-200');
+  });
+
+  test('has rounded corners', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('rounded-lg');
+  });
+
+  test('has shadow', () => {
+    const { container } = render(CardPlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('shadow');
+  });
+});
+
+describe('CardPlaceholder Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(CardPlaceholder, {
+      props: {
+        size: 'lg',
+        animate: false,
+        showAvatar: false,
+        showImage: false,
+        class: 'my-card'
+      }
+    });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('max-w-md');
+    expect(wrapper).toHaveClass('my-card');
+    expect(wrapper).not.toHaveClass('animate-pulse');
+  });
+});

package/dist/primitives/Skeleton/ImagePlaceholder.spec.d.ts

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

package/dist/primitives/Skeleton/ImagePlaceholder.spec.d.ts.map

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

package/dist/primitives/Skeleton/ImagePlaceholder.spec.js

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ImagePlaceholder from './ImagePlaceholder.svelte';
+
+describe('ImagePlaceholder Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(ImagePlaceholder);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('has role status', () => {
+    const { container } = render(ImagePlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has aria-label for accessibility', () => {
+    const { container } = render(ImagePlaceholder);
+    const wrapper = container.querySelector('[aria-label="Loading image"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('has sr-only loading text', () => {
+    render(ImagePlaceholder);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('renders an svg icon', () => {
+    const { container } = render(ImagePlaceholder);
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ImagePlaceholder, { props: { class: 'custom-skeleton' } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('custom-skeleton');
+  });
+});
+
+describe('ImagePlaceholder Animation', () => {
+  test('animate is true by default', () => {
+    const { container } = render(ImagePlaceholder);
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).toHaveClass('animate-pulse');
+  });
+
+  test('animate false removes pulse', () => {
+    const { container } = render(ImagePlaceholder, { props: { animate: false } });
+    const wrapper = container.querySelector('[role="status"]');
+    expect(wrapper).not.toHaveClass('animate-pulse');
+  });
+});
+
+describe('ImagePlaceholder Size', () => {
+  test('default size is md (h-48)', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-48');
+  });
+
+  test('size sm applies h-32', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: 'sm' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-32');
+  });
+
+  test('size lg applies h-64', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: 'lg' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-64');
+  });
+
+  test('size xl applies h-80', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: 'xl' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-80');
+  });
+
+  test('size 2xl applies h-96', () => {
+    const { container } = render(ImagePlaceholder, { props: { size: '2xl' } });
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('h-96');
+  });
+});
+
+describe('ImagePlaceholder ShowText', () => {
+  test('showText is false by default', () => {
+    const { container } = render(ImagePlaceholder);
+    // Count placeholder text bars - should only have the sr-only one
+    const textBars = container.querySelectorAll('.rounded-full.bg-gray-200');
+    expect(textBars.length).toBe(0);
+  });
+
+  test('showText true shows text placeholder bars', () => {
+    const { container } = render(ImagePlaceholder, { props: { showText: true } });
+    // Should have multiple text placeholder bars
+    const textBars = container.querySelectorAll('.rounded-full');
+    expect(textBars.length).toBeGreaterThan(0);
+  });
+});
+
+describe('ImagePlaceholder Styling', () => {
+  test('image container has gray background', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('bg-gray-300');
+  });
+
+  test('image container has rounded corners', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('rounded-lg');
+  });
+
+  test('image container has full width', () => {
+    const { container } = render(ImagePlaceholder);
+    const imageContainer = container.querySelector('.flex.items-center.justify-center');
+    expect(imageContainer).toHaveClass('w-full');
+  });
+});

package/dist/primitives/Skeleton/ListPlaceholder.spec.d.ts

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

package/dist/primitives/Skeleton/ListPlaceholder.spec.d.ts.map

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