@nucel/ui 0.10.0 → 0.12.0

package/src/lib/components/IconButton.test.ts

@@ -1,139 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import IconButton, { iconButtonVariants } from './IconButton.svelte';
-
-/** A trivial snippet to pass as the icon child. */
-const icon = createRawSnippet(() => ({
-	render: () => `<svg data-testid="icon"></svg>`,
-}));
-
-describe('IconButton', () => {
-	it('renders as a <button> by default', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Notifications', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]');
-		expect(el).toBeInTheDocument();
-		expect(el?.tagName).toBe('BUTTON');
-		expect(el).toHaveAttribute('type', 'button');
-	});
-
-	it('renders as an <a> when href is set', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Go home', href: '/home', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]');
-		expect(el?.tagName).toBe('A');
-		expect(el).toHaveAttribute('href', '/home');
-	});
-
-	it('exposes the required aria-label on the control', () => {
-		const { getByLabelText } = render(IconButton, {
-			props: { 'aria-label': 'Search', children: icon },
-		});
-		expect(getByLabelText('Search')).toBeInTheDocument();
-	});
-
-	it('renders the icon child', () => {
-		const { getByTestId } = render(IconButton, {
-			props: { 'aria-label': 'Add', children: icon },
-		});
-		expect(getByTestId('icon')).toBeInTheDocument();
-	});
-
-	it('applies the default variant (ghost) and default size classes', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Default', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		// ghost variant => muted-foreground; default size => size-9
-		expect(el.className).toContain('text-muted-foreground');
-		expect(el.className).toContain('size-9');
-	});
-
-	it('applies the tap size (44px / size-11) for mobile hit targets', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Tap', size: 'tap', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain('size-11');
-	});
-
-	it.each([
-		['sm', 'size-8'],
-		['default', 'size-9'],
-		['lg', 'size-10'],
-		['tap', 'size-11'],
-	] as const)('applies the %s size class %s', (size, expectedClass) => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Sized', size, children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain(expectedClass);
-	});
-
-	it.each([
-		['ghost', 'text-muted-foreground'],
-		['outline', 'border'],
-		['default', 'bg-primary'],
-		['secondary', 'bg-secondary'],
-		['destructive', 'text-destructive'],
-	] as const)('applies the %s variant classes', (variant, expectedClass) => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Variant', variant, children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain(expectedClass);
-	});
-
-	it('disables the native button when disabled', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Disabled', disabled: true, children: icon },
-		});
-		const el = container.querySelector('button')!;
-		expect(el).toBeDisabled();
-	});
-
-	it('disables the anchor variant via aria-disabled and drops href', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Disabled link', href: '/x', disabled: true, children: icon },
-		});
-		const el = container.querySelector('a')!;
-		expect(el).toHaveAttribute('aria-disabled', 'true');
-		expect(el).not.toHaveAttribute('href');
-		expect(el).toHaveAttribute('role', 'link');
-		expect(el).toHaveAttribute('tabindex', '-1');
-	});
-
-	it('merges a custom class with the variant classes', () => {
-		const { container } = render(IconButton, {
-			props: { 'aria-label': 'Custom', class: 'my-custom-class', children: icon },
-		});
-		const el = container.querySelector('[data-slot="icon-button"]')!;
-		expect(el.className).toContain('my-custom-class');
-		expect(el.className).toContain('size-9');
-	});
-
-	it('forwards arbitrary props (e.g. data-testid) to the element', () => {
-		const { getByTestId } = render(IconButton, {
-			props: { 'aria-label': 'Forwarded', 'data-testid': 'fwd', children: icon },
-		});
-		expect(getByTestId('fwd').tagName).toBe('BUTTON');
-	});
-});
-
-describe('iconButtonVariants', () => {
-	it('returns base classes plus default variant/size', () => {
-		const cls = iconButtonVariants();
-		expect(cls).toContain('inline-grid');
-		expect(cls).toContain('text-muted-foreground'); // ghost default
-		expect(cls).toContain('size-9'); // default size
-	});
-
-	it('honours explicit variant + size args', () => {
-		const cls = iconButtonVariants({ variant: 'destructive', size: 'tap' });
-		expect(cls).toContain('text-destructive');
-		expect(cls).toContain('size-11');
-	});
-});