@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/NumberInput/NumberInput.spec.js

@@ -0,0 +1,235 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import NumberInput from './NumberInput.svelte';
+
+describe('NumberInput Component', () => {
+  test('renders a container div', () => {
+    const { container } = render(NumberInput);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('renders increment and decrement buttons', () => {
+    const { container } = render(NumberInput);
+    expect(container.querySelector('[aria-label="Decrease quantity"]')).toBeInTheDocument();
+    expect(container.querySelector('[aria-label="Increase quantity"]')).toBeInTheDocument();
+  });
+
+  test('displays the current value', () => {
+    render(NumberInput, { props: { value: 5 } });
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(NumberInput, { props: { class: 'custom-number-input' } });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('custom-number-input');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(NumberInput, { props: { 'data-testid': 'my-number-input' } });
+    expect(container.querySelector('[data-testid="my-number-input"]')).toBeInTheDocument();
+  });
+});
+
+describe('NumberInput Props', () => {
+  test('value defaults to 0', () => {
+    render(NumberInput);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  test('min defaults to 0', () => {
+    const { container } = render(NumberInput, { props: { value: 0 } });
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toBeDisabled();
+  });
+
+  test('max defaults to Infinity', () => {
+    const { container } = render(NumberInput, { props: { value: 9999 } });
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).not.toBeDisabled();
+  });
+
+  test('disabled prop disables both buttons', () => {
+    const { container } = render(NumberInput, { props: { disabled: true, value: 5 } });
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(decrementBtn).toBeDisabled();
+    expect(incrementBtn).toBeDisabled();
+  });
+});
+
+describe('NumberInput Increment/Decrement', () => {
+  test('clicking increment calls onchange with value + 1', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 5, onchange } });
+
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    await user.click(incrementBtn);
+    expect(onchange).toHaveBeenCalledWith(6);
+  });
+
+  test('clicking decrement calls onchange with value - 1', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 5, onchange } });
+
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    await user.click(decrementBtn);
+    expect(onchange).toHaveBeenCalledWith(4);
+  });
+
+  test('decrement is disabled at min value', () => {
+    const { container } = render(NumberInput, { props: { value: 0, min: 0 } });
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toBeDisabled();
+  });
+
+  test('increment is disabled at max value', () => {
+    const { container } = render(NumberInput, { props: { value: 10, max: 10 } });
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).toBeDisabled();
+  });
+
+  test('does not increment past max', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 10, max: 10, onchange } });
+
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    await user.click(incrementBtn);
+    expect(onchange).not.toHaveBeenCalled();
+  });
+
+  test('does not decrement below min', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 0, min: 0, onchange } });
+
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    await user.click(decrementBtn);
+    expect(onchange).not.toHaveBeenCalled();
+  });
+});
+
+describe('NumberInput Styling', () => {
+  test('container has inline-flex class', () => {
+    const { container } = render(NumberInput);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('inline-flex');
+  });
+
+  test('container has items-center class', () => {
+    const { container } = render(NumberInput);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('items-center');
+  });
+
+  test('buttons have type="button"', () => {
+    const { container } = render(NumberInput);
+    const buttons = container.querySelectorAll('button');
+    buttons.forEach(btn => {
+      expect(btn).toHaveAttribute('type', 'button');
+    });
+  });
+
+  test('decrement button has rounded-l-lg', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('rounded-l-lg');
+  });
+
+  test('increment button has rounded-r-lg', () => {
+    const { container } = render(NumberInput);
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).toHaveClass('rounded-r-lg');
+  });
+
+  test('buttons have bg-gray-100 background', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('bg-gray-100');
+  });
+
+  test('buttons have border-gray-300 border', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('border-gray-300');
+  });
+
+  test('display has bg-gray-50 background', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('bg-gray-50');
+  });
+
+  test('display has text-gray-500 color', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('text-gray-500');
+  });
+});
+
+describe('NumberInput Dark Mode', () => {
+  test('buttons have dark mode background', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('buttons have dark mode border', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('dark:border-gray-600');
+  });
+
+  test('display has dark mode background', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('dark:bg-gray-800');
+  });
+
+  test('display has dark mode text color', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('dark:text-gray-400');
+  });
+});
+
+describe('NumberInput Icons', () => {
+  test('decrement button has minus icon', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('increment button has plus icon', () => {
+    const { container } = render(NumberInput);
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('icons have w-3 h-3 size', () => {
+    const { container } = render(NumberInput);
+    const svgs = container.querySelectorAll('svg');
+    svgs.forEach(svg => {
+      expect(svg).toHaveClass('w-3');
+      expect(svg).toHaveClass('h-3');
+    });
+  });
+});
+
+describe('NumberInput Accessibility', () => {
+  test('decrement button has aria-label', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveAttribute('aria-label', 'Decrease quantity');
+  });
+
+  test('increment button has aria-label', () => {
+    const { container } = render(NumberInput);
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).toHaveAttribute('aria-label', 'Increase quantity');
+  });
+});

package/dist/primitives/Pagination/Pagination.spec.d.ts

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

package/dist/primitives/Pagination/Pagination.spec.d.ts.map

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

package/dist/primitives/Pagination/Pagination.spec.js

@@ -0,0 +1,266 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import Pagination from './Pagination.svelte';
+
+describe('Pagination Component', () => {
+  test('renders navigation element', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+  });
+
+  test('has aria-label="Pagination"', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    const nav = container.querySelector('nav');
+    expect(nav).toHaveAttribute('aria-label', 'Pagination');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, class: 'custom-pagination' } });
+    const nav = container.querySelector('nav');
+    expect(nav).toHaveClass('custom-pagination');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, 'data-testid': 'my-pagination' } });
+    const nav = container.querySelector('[data-testid="my-pagination"]');
+    expect(nav).toBeInTheDocument();
+  });
+});
+
+describe('Pagination Page Numbers', () => {
+  test('renders correct number of page buttons', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 1 } });
+    const pageButtons = container.querySelectorAll('button');
+    // 5 pages + prev + next = 7 buttons
+    expect(pageButtons.length).toBe(7);
+  });
+
+  test('currentPage button has aria-current="page"', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 2 } });
+    const currentButton = container.querySelector('[aria-current="page"]');
+    expect(currentButton).toBeInTheDocument();
+    expect(currentButton).toHaveTextContent('2');
+  });
+
+  test('first page is shown by default', () => {
+    render(Pagination, { props: { totalPages: 5 } });
+    expect(screen.getByRole('button', { name: '1' })).toBeInTheDocument();
+  });
+});
+
+describe('Pagination Navigation Buttons', () => {
+  test('shows prev/next buttons by default', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    expect(container.querySelector('[aria-label="Previous page"]')).toBeInTheDocument();
+    expect(container.querySelector('[aria-label="Next page"]')).toBeInTheDocument();
+  });
+
+  test('hides prev/next when showPrevNext is false', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, showPrevNext: false } });
+    expect(container.querySelector('[aria-label="Previous page"]')).not.toBeInTheDocument();
+    expect(container.querySelector('[aria-label="Next page"]')).not.toBeInTheDocument();
+  });
+
+  test('previous button is disabled on first page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 1 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).toBeDisabled();
+  });
+
+  test('next button is disabled on last page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 5 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).toBeDisabled();
+  });
+
+  test('previous button is enabled when not on first page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 3 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  test('next button is enabled when not on last page', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 3 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).not.toBeDisabled();
+  });
+});
+
+describe('Pagination Click Events', () => {
+  test('calls onchange when page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    render(Pagination, { props: { totalPages: 5, currentPage: 1, onchange } });
+
+    await user.click(screen.getByRole('button', { name: '3' }));
+    expect(onchange).toHaveBeenCalledWith({ page: 3 });
+  });
+
+  test('calls onPageChange when page button is clicked', async () => {
+    const user = userEvent.setup();
+    const onPageChange = vi.fn();
+    render(Pagination, { props: { totalPages: 5, currentPage: 1, onPageChange } });
+
+    await user.click(screen.getByRole('button', { name: '2' }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  test('clicking next moves to next page', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 2, onchange } });
+
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    await user.click(nextButton);
+    expect(onchange).toHaveBeenCalledWith({ page: 3 });
+  });
+
+  test('clicking previous moves to previous page', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 3, onchange } });
+
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    await user.click(prevButton);
+    expect(onchange).toHaveBeenCalledWith({ page: 2 });
+  });
+});
+
+describe('Pagination Sizes', () => {
+  test('sm size applies correct classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, size: 'sm' } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('h-8');
+    expect(button).toHaveClass('text-sm');
+  });
+
+  test('md size applies correct classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, size: 'md' } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('h-9');
+  });
+
+  test('lg size applies correct classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, size: 'lg' } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('h-10');
+  });
+});
+
+describe('Pagination Variant', () => {
+  test('table variant renders with entries text', () => {
+    const { container } = render(Pagination, { props: {
+      variant: 'table',
+      totalPages: 5,
+      totalItems: 50,
+      perPage: 10,
+      currentPage: 1
+    } });
+    // Check that the component renders in table variant mode
+    const wrapper = container.querySelector('div.flex.flex-col');
+    expect(wrapper).toBeInTheDocument();
+    expect(container.textContent).toContain('entries');
+  });
+
+  test('table variant shows nav element', () => {
+    const { container } = render(Pagination, { props: {
+      variant: 'table',
+      totalPages: 5,
+      totalItems: 50,
+      perPage: 10,
+      currentPage: 1
+    } });
+    expect(container.querySelector('nav')).toBeInTheDocument();
+  });
+
+  test('default variant has inline-flex class', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5 } });
+    const nav = container.querySelector('nav');
+    expect(nav).toHaveClass('inline-flex');
+  });
+});
+
+describe('Pagination Button Styling', () => {
+  test('buttons have flex and items-center classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('flex');
+    expect(button).toHaveClass('items-center');
+  });
+
+  test('buttons have border classes', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const button = container.querySelector('[aria-label="Previous page"]');
+    expect(button).toHaveClass('border');
+    expect(button).toHaveClass('border-gray-300');
+  });
+
+  test('buttons have bg-white background', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 1 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).toHaveClass('bg-white');
+  });
+
+  test('prev button has rounded-s-lg', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).toHaveClass('rounded-s-lg');
+  });
+
+  test('next button has rounded-e-lg', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3 } });
+    const nextButton = container.querySelector('[aria-label="Next page"]');
+    expect(nextButton).toHaveClass('rounded-e-lg');
+  });
+
+  test('active page has bg-blue-50', () => {
+    const { container } = render(Pagination, { props: { totalPages: 3, currentPage: 2 } });
+    const activeButton = container.querySelector('[aria-current="page"]');
+    expect(activeButton).toHaveClass('bg-blue-50');
+    expect(activeButton).toHaveClass('text-blue-600');
+  });
+
+  test('disabled buttons have opacity-50', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, currentPage: 1 } });
+    const prevButton = container.querySelector('[aria-label="Previous page"]');
+    expect(prevButton).toHaveClass('opacity-50');
+  });
+});
+
+describe('Pagination Ellipsis', () => {
+  test('shows ellipsis when needed', () => {
+    const { container } = render(Pagination, { props: { totalPages: 10, currentPage: 8, maxVisible: 3 } });
+    const ellipses = container.querySelectorAll('.cursor-default');
+    expect(ellipses.length).toBeGreaterThan(0);
+  });
+
+  test('shows page 1 with ellipsis when not in visible range', () => {
+    render(Pagination, { props: { totalPages: 10, currentPage: 8, maxVisible: 3 } });
+    expect(screen.getByRole('button', { name: '1' })).toBeInTheDocument();
+  });
+});
+
+describe('Pagination Props', () => {
+  test('maxVisible controls visible page count', () => {
+    const { container } = render(Pagination, { props: { totalPages: 10, maxVisible: 3, currentPage: 5 } });
+    // Should have 3 visible pages plus ellipsis buttons plus prev/next
+    const pageButtons = container.querySelectorAll('button');
+    expect(pageButtons.length).toBeGreaterThan(3);
+  });
+
+  test('showIcons prop works as alias for showPrevNext', () => {
+    const { container } = render(Pagination, { props: { totalPages: 5, showIcons: false } });
+    expect(container.querySelector('[aria-label="Previous page"]')).not.toBeInTheDocument();
+  });
+
+  test('previousLabel replaces chevron icon', () => {
+    render(Pagination, { props: { totalPages: 5, previousLabel: 'Back' } });
+    expect(screen.getByText('Back')).toBeInTheDocument();
+  });
+
+  test('nextLabel replaces chevron icon', () => {
+    render(Pagination, { props: { totalPages: 5, nextLabel: 'Forward' } });
+    expect(screen.getByText('Forward')).toBeInTheDocument();
+  });
+});

package/dist/primitives/Radio/Radio.spec.d.ts

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

package/dist/primitives/Radio/Radio.spec.d.ts.map

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