@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/FormValidationSummary.spec.js

@@ -1,203 +1,203 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import FormValidationSummary from './FormValidationSummary.svelte';
-
-describe('FormValidationSummary Component', () => {
-  it('does not render when show is false', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: false,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when there are no errors', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {},
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when errors have empty messages', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: '', lastName: '   ' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('renders when show is true and has errors', () => {
-    const { container, getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'First name is required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-    expect(getByText('Please fix the following:')).toBeTruthy();
-  });
-
-  it('displays error field labels', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
-      },
-    });
-    expect(getByText('First Name')).toBeTruthy();
-    expect(getByText('Email Address')).toBeTruthy();
-  });
-
-  it('uses field key as label when no label provided', () => {
-    const { getByText } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: {},
-      },
-    });
-    expect(getByText('firstName')).toBeTruthy();
-  });
-
-  it('renders multiple error fields', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: {
-          firstName: 'Required',
-          lastName: 'Required',
-          email: 'Invalid format',
-        },
-        fieldLabels: {
-          firstName: 'First Name',
-          lastName: 'Last Name',
-          email: 'Email',
-        },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(3);
-  });
-
-  it('has role="alert" and aria-live="polite"', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('aria-live')).toBe('polite');
-  });
-
-  it('renders clickable buttons for each error', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', email: 'Invalid' },
-        fieldLabels: { firstName: 'First Name', email: 'Email' },
-      },
-    });
-    const buttons = container.querySelectorAll('button[type="button"]');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('calls scrollIntoView on button click', async () => {
-    // Create a mock element
-    const mockElement = document.createElement('input');
-    mockElement.id = 'firstName';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-      },
-    });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
-      behavior: 'smooth',
-      block: 'center',
-    });
-
-    // Clean up
-    document.body.removeChild(mockElement);
-  });
-
-  it('uses custom fieldIds for scrolling', async () => {
-    const mockElement = document.createElement('input');
-    mockElement.id = 'custom-first-name-input';
-    mockElement.scrollIntoView = vi.fn();
-    mockElement.focus = vi.fn();
-    document.body.appendChild(mockElement);
-
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-        fieldLabels: { firstName: 'First Name' },
-        fieldIds: { firstName: 'custom-first-name-input' },
-      },
-    });
-
-    const button = container.querySelector('button[type="button"]');
-    await fireEvent.click(button);
-
-    expect(mockElement.scrollIntoView).toHaveBeenCalled();
-
-    document.body.removeChild(mockElement);
-  });
-
-  it('has red background styling', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('bg-red-50')).toBe(true);
-    expect(alert.classList.contains('border-red-200')).toBe(true);
-  });
-
-  it('renders warning icon', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required' },
-      },
-    });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('filters out null and undefined error values', () => {
-    const { container } = render(FormValidationSummary, {
-      props: {
-        show: true,
-        errors: { firstName: 'Required', lastName: null, email: undefined },
-        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
-      },
-    });
-    const listItems = container.querySelectorAll('li');
-    expect(listItems.length).toBe(1);
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import FormValidationSummary from './FormValidationSummary.svelte';
+
+describe('FormValidationSummary Component', () => {
+  it('does not render when show is false', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: false,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when there are no errors', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: {},
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when errors have empty messages', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: '', lastName: '   ' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('renders when show is true and has errors', () => {
+    const { container, getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'First name is required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+    expect(getByText('Please fix the following:')).toBeTruthy();
+  });
+
+  it('displays error field labels', () => {
+    const { getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', email: 'Invalid' },
+        fieldLabels: { firstName: 'First Name', email: 'Email Address' },
+      },
+    });
+    expect(getByText('First Name')).toBeTruthy();
+    expect(getByText('Email Address')).toBeTruthy();
+  });
+
+  it('uses field key as label when no label provided', () => {
+    const { getByText } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: {},
+      },
+    });
+    expect(getByText('firstName')).toBeTruthy();
+  });
+
+  it('renders multiple error fields', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: {
+          firstName: 'Required',
+          lastName: 'Required',
+          email: 'Invalid format',
+        },
+        fieldLabels: {
+          firstName: 'First Name',
+          lastName: 'Last Name',
+          email: 'Email',
+        },
+      },
+    });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(3);
+  });
+
+  it('has role="alert" and aria-live="polite"', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('aria-live')).toBe('polite');
+  });
+
+  it('renders clickable buttons for each error', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', email: 'Invalid' },
+        fieldLabels: { firstName: 'First Name', email: 'Email' },
+      },
+    });
+    const buttons = container.querySelectorAll('button[type="button"]');
+    expect(buttons.length).toBe(2);
+  });
+
+  it('calls scrollIntoView on button click', async () => {
+    // Create a mock element
+    const mockElement = document.createElement('input');
+    mockElement.id = 'firstName';
+    mockElement.scrollIntoView = vi.fn();
+    mockElement.focus = vi.fn();
+    document.body.appendChild(mockElement);
+
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: { firstName: 'First Name' },
+      },
+    });
+
+    const button = container.querySelector('button[type="button"]');
+    await fireEvent.click(button);
+
+    expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block: 'center',
+    });
+
+    // Clean up
+    document.body.removeChild(mockElement);
+  });
+
+  it('uses custom fieldIds for scrolling', async () => {
+    const mockElement = document.createElement('input');
+    mockElement.id = 'custom-first-name-input';
+    mockElement.scrollIntoView = vi.fn();
+    mockElement.focus = vi.fn();
+    document.body.appendChild(mockElement);
+
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+        fieldLabels: { firstName: 'First Name' },
+        fieldIds: { firstName: 'custom-first-name-input' },
+      },
+    });
+
+    const button = container.querySelector('button[type="button"]');
+    await fireEvent.click(button);
+
+    expect(mockElement.scrollIntoView).toHaveBeenCalled();
+
+    document.body.removeChild(mockElement);
+  });
+
+  it('has red background styling', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('bg-red-50')).toBe(true);
+    expect(alert.classList.contains('border-red-200')).toBe(true);
+  });
+
+  it('renders warning icon', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required' },
+      },
+    });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('filters out null and undefined error values', () => {
+    const { container } = render(FormValidationSummary, {
+      props: {
+        show: true,
+        errors: { firstName: 'Required', lastName: null, email: undefined },
+        fieldLabels: { firstName: 'First Name', lastName: 'Last Name', email: 'Email' },
+      },
+    });
+    const listItems = container.querySelectorAll('li');
+    expect(listItems.length).toBe(1);
+  });
+});