@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Toggle.spec.js

@@ -1,158 +1,158 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import Toggle from './Toggle.svelte';
-
-describe('Toggle Component', () => {
-  it('renders a toggle button', () => {
-    const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button).toBeTruthy();
-    expect(button.getAttribute('role')).toBe('switch');
-  });
-
-  it('has aria-checked false by default', () => {
-    const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('has aria-checked true when checked', () => {
-    const { container } = render(Toggle, { props: { checked: true } });
-    const button = container.querySelector('button');
-    expect(button.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('toggles checked state on click', async () => {
-    const { container, component } = render(Toggle);
-    const button = container.querySelector('button');
-
-    let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
-    });
-
-    await fireEvent.click(button);
-
-    expect(changeEvent).toBeTruthy();
-    expect(changeEvent.detail.checked).toBe(true);
-    expect(button.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('toggles from checked to unchecked on click', async () => {
-    const { container, component } = render(Toggle, { props: { checked: true } });
-    const button = container.querySelector('button');
-
-    let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
-    });
-
-    await fireEvent.click(button);
-
-    expect(changeEvent.detail.checked).toBe(false);
-    expect(button.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('does not toggle when disabled', async () => {
-    const { container, component } = render(Toggle, { props: { disabled: true } });
-    const button = container.querySelector('button');
-
-    let changeEventCalled = false;
-    component.$on('change', () => {
-      changeEventCalled = true;
-    });
-
-    await fireEvent.click(button);
-
-    expect(changeEventCalled).toBe(false);
-    expect(button.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('has toggle-checked class when checked', () => {
-    const { container } = render(Toggle, { props: { checked: true } });
-    const button = container.querySelector('button');
-    expect(button.classList.contains('toggle-checked')).toBe(true);
-  });
-
-  it('does not have toggle-checked class when unchecked', () => {
-    const { container } = render(Toggle, { props: { checked: false } });
-    const button = container.querySelector('button');
-    expect(button.classList.contains('toggle-checked')).toBe(false);
-  });
-
-  it('has toggle-disabled class when disabled', () => {
-    const { container } = render(Toggle, { props: { disabled: true } });
-    const button = container.querySelector('button');
-    expect(button.classList.contains('toggle-disabled')).toBe(true);
-  });
-
-  it('has toggle-thumb element', () => {
-    const { container } = render(Toggle);
-    const thumb = container.querySelector('.toggle-thumb');
-    expect(thumb).toBeTruthy();
-  });
-
-  it('toggles on Enter key press', async () => {
-    const { container, component } = render(Toggle);
-    const button = container.querySelector('button');
-
-    let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
-    });
-
-    await fireEvent.keyDown(button, { key: 'Enter' });
-
-    expect(changeEvent).toBeTruthy();
-    expect(changeEvent.detail.checked).toBe(true);
-  });
-
-  it('toggles on Space key press', async () => {
-    const { container, component } = render(Toggle);
-    const button = container.querySelector('button');
-
-    let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
-    });
-
-    await fireEvent.keyDown(button, { key: ' ' });
-
-    expect(changeEvent).toBeTruthy();
-    expect(changeEvent.detail.checked).toBe(true);
-  });
-
-  it('does not toggle on other key press', async () => {
-    const { container, component } = render(Toggle);
-    const button = container.querySelector('button');
-
-    let changeEventCalled = false;
-    component.$on('change', () => {
-      changeEventCalled = true;
-    });
-
-    await fireEvent.keyDown(button, { key: 'Tab' });
-
-    expect(changeEventCalled).toBe(false);
-  });
-
-  it('does not toggle on keypress when disabled', async () => {
-    const { container, component } = render(Toggle, { props: { disabled: true } });
-    const button = container.querySelector('button');
-
-    let changeEventCalled = false;
-    component.$on('change', () => {
-      changeEventCalled = true;
-    });
-
-    await fireEvent.keyDown(button, { key: 'Enter' });
-
-    expect(changeEventCalled).toBe(false);
-  });
-
-  it('has type="button" attribute', () => {
-    const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button.getAttribute('type')).toBe('button');
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Toggle from './Toggle.svelte';
+
+describe('Toggle Component', () => {
+  it('renders a toggle button', () => {
+    const { container } = render(Toggle);
+    const button = container.querySelector('button');
+    expect(button).toBeTruthy();
+    expect(button.getAttribute('role')).toBe('switch');
+  });
+
+  it('has aria-checked false by default', () => {
+    const { container } = render(Toggle);
+    const button = container.querySelector('button');
+    expect(button.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('has aria-checked true when checked', () => {
+    const { container } = render(Toggle, { props: { checked: true } });
+    const button = container.querySelector('button');
+    expect(button.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('toggles checked state on click', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.click(button);
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.detail.checked).toBe(true);
+    expect(button.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('toggles from checked to unchecked on click', async () => {
+    const { container, component } = render(Toggle, { props: { checked: true } });
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.click(button);
+
+    expect(changeEvent.detail.checked).toBe(false);
+    expect(button.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('does not toggle when disabled', async () => {
+    const { container, component } = render(Toggle, { props: { disabled: true } });
+    const button = container.querySelector('button');
+
+    let changeEventCalled = false;
+    component.$on('change', () => {
+      changeEventCalled = true;
+    });
+
+    await fireEvent.click(button);
+
+    expect(changeEventCalled).toBe(false);
+    expect(button.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('has toggle-checked class when checked', () => {
+    const { container } = render(Toggle, { props: { checked: true } });
+    const button = container.querySelector('button');
+    expect(button.classList.contains('toggle-checked')).toBe(true);
+  });
+
+  it('does not have toggle-checked class when unchecked', () => {
+    const { container } = render(Toggle, { props: { checked: false } });
+    const button = container.querySelector('button');
+    expect(button.classList.contains('toggle-checked')).toBe(false);
+  });
+
+  it('has toggle-disabled class when disabled', () => {
+    const { container } = render(Toggle, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button.classList.contains('toggle-disabled')).toBe(true);
+  });
+
+  it('has toggle-thumb element', () => {
+    const { container } = render(Toggle);
+    const thumb = container.querySelector('.toggle-thumb');
+    expect(thumb).toBeTruthy();
+  });
+
+  it('toggles on Enter key press', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.keyDown(button, { key: 'Enter' });
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.detail.checked).toBe(true);
+  });
+
+  it('toggles on Space key press', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEvent = null;
+    component.$on('change', (e) => {
+      changeEvent = e;
+    });
+
+    await fireEvent.keyDown(button, { key: ' ' });
+
+    expect(changeEvent).toBeTruthy();
+    expect(changeEvent.detail.checked).toBe(true);
+  });
+
+  it('does not toggle on other key press', async () => {
+    const { container, component } = render(Toggle);
+    const button = container.querySelector('button');
+
+    let changeEventCalled = false;
+    component.$on('change', () => {
+      changeEventCalled = true;
+    });
+
+    await fireEvent.keyDown(button, { key: 'Tab' });
+
+    expect(changeEventCalled).toBe(false);
+  });
+
+  it('does not toggle on keypress when disabled', async () => {
+    const { container, component } = render(Toggle, { props: { disabled: true } });
+    const button = container.querySelector('button');
+
+    let changeEventCalled = false;
+    component.$on('change', () => {
+      changeEventCalled = true;
+    });
+
+    await fireEvent.keyDown(button, { key: 'Enter' });
+
+    expect(changeEventCalled).toBe(false);
+  });
+
+  it('has type="button" attribute', () => {
+    const { container } = render(Toggle);
+    const button = container.querySelector('button');
+    expect(button.getAttribute('type')).toBe('button');
+  });
+});

package/dist/components/ValidationError.spec.js

@@ -1,79 +1,79 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import ValidationError from './ValidationError.svelte';
-
-describe('ValidationError Component', () => {
-  it('renders error message when error prop is provided', () => {
-    const { container, getByText } = render(ValidationError, {
-      props: { error: 'This field is required' },
-    });
-    expect(getByText('This field is required')).toBeTruthy();
-  });
-
-  it('does not render when error is empty', () => {
-    const { container } = render(ValidationError, {
-      props: { error: '' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when show is false', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', show: false },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('has role="alert" attribute', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-
-  it('has red text styling', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('text-red-500')).toBe(true);
-  });
-
-  it('renders WarningIcon', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    // The WarningIcon should render an SVG
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('renders error text in a paragraph', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Custom error text' },
-    });
-    const paragraph = container.querySelector('p');
-    expect(paragraph).toBeTruthy();
-    expect(paragraph.textContent).toBe('Custom error text');
-  });
-
-  it('shows when show is true and error exists', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', show: true },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-
-  it('renders with flex layout', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('flex')).toBe(true);
-    expect(alert.classList.contains('items-center')).toBe(true);
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ValidationError from './ValidationError.svelte';
+
+describe('ValidationError Component', () => {
+  it('renders error message when error prop is provided', () => {
+    const { container, getByText } = render(ValidationError, {
+      props: { error: 'This field is required' },
+    });
+    expect(getByText('This field is required')).toBeTruthy();
+  });
+
+  it('does not render when error is empty', () => {
+    const { container } = render(ValidationError, {
+      props: { error: '' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: false },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('has role="alert" attribute', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('has red text styling', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('text-red-500')).toBe(true);
+  });
+
+  it('renders WarningIcon', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    // The WarningIcon should render an SVG
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('renders error text in a paragraph', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Custom error text' },
+    });
+    const paragraph = container.querySelector('p');
+    expect(paragraph).toBeTruthy();
+    expect(paragraph.textContent).toBe('Custom error text');
+  });
+
+  it('shows when show is true and error exists', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: true },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('flex')).toBe(true);
+    expect(alert.classList.contains('items-center')).toBe(true);
+  });
+});