@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/calendar/FAQs/FAQs.spec.d.ts

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

package/dist/calendar/FAQs/FAQs.spec.d.ts.map

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

package/dist/calendar/FAQs/FAQs.spec.js

@@ -0,0 +1,238 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import FAQs from './FAQs.svelte';
+
+describe('FAQs Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('basic rendering', () => {
+    it('renders empty state when no faqs provided', () => {
+      render(FAQs);
+      expect(screen.getByText('No FAQs available.')).toBeInTheDocument();
+    });
+
+    it('renders title by default', () => {
+      render(FAQs, { props: { faqs: [] } });
+      expect(screen.getByRole('heading', { name: 'FAQs' })).toBeInTheDocument();
+    });
+
+    it('renders custom title', () => {
+      render(FAQs, { props: { title: 'Questions', faqs: [] } });
+      expect(screen.getByRole('heading', { name: 'Questions' })).toBeInTheDocument();
+    });
+
+    it('hides title when showTitle is false', () => {
+      render(FAQs, { props: { showTitle: false, faqs: [] } });
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('simple list mode', () => {
+    const faqs = [
+      { question: 'What is this?', answer: 'This is a FAQ component.' },
+      { question: 'How does it work?', answer: 'It displays questions and answers.' },
+    ];
+
+    it('renders questions', () => {
+      render(FAQs, { props: { faqs } });
+      expect(screen.getByText('What is this?')).toBeInTheDocument();
+      expect(screen.getByText('How does it work?')).toBeInTheDocument();
+    });
+
+    it('renders answers', () => {
+      render(FAQs, { props: { faqs } });
+      expect(screen.getByText('This is a FAQ component.')).toBeInTheDocument();
+      expect(screen.getByText('It displays questions and answers.')).toBeInTheDocument();
+    });
+
+    it('handles string-only faqs', () => {
+      render(FAQs, { props: { faqs: ['Just an answer', 'Another answer'] } });
+      expect(screen.getByText('Just an answer')).toBeInTheDocument();
+      expect(screen.getByText('Another answer')).toBeInTheDocument();
+    });
+
+    it('renders faq without question', () => {
+      render(FAQs, { props: { faqs: [{ question: '', answer: 'Just the answer' }] } });
+      expect(screen.getByText('Just the answer')).toBeInTheDocument();
+    });
+  });
+
+  describe('accordion mode', () => {
+    const faqs = [
+      { question: 'First question?', answer: 'First answer.' },
+      { question: 'Second question?', answer: 'Second answer.' },
+    ];
+
+    it('renders accordion buttons', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      expect(screen.getByRole('button', { name: /First question/ })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Second question/ })).toBeInTheDocument();
+    });
+
+    it('starts with all items collapsed', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+      });
+    });
+
+    it('expands item when clicked', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /First question/ });
+
+      await fireEvent.click(button);
+
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('collapses item when clicked again', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /First question/ });
+
+      await fireEvent.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+
+      await fireEvent.click(button);
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('closes other items when new one is opened', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const firstButton = screen.getByRole('button', { name: /First question/ });
+      const secondButton = screen.getByRole('button', { name: /Second question/ });
+
+      await fireEvent.click(firstButton);
+      expect(firstButton).toHaveAttribute('aria-expanded', 'true');
+
+      await fireEvent.click(secondButton);
+      expect(firstButton).toHaveAttribute('aria-expanded', 'false');
+      expect(secondButton).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('shows answer content when expanded', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /First question/ });
+
+      // Content is hidden initially
+      const answerDiv = screen.getByText('First answer.').closest('[id^="accordion-body"]');
+      expect(answerDiv).toHaveClass('hidden');
+
+      await fireEvent.click(button);
+
+      // Content is visible after click
+      expect(answerDiv).not.toHaveClass('hidden');
+    });
+
+    it('uses fallback text for items without question', () => {
+      render(FAQs, {
+        props: {
+          faqs: [{ question: '', answer: 'Answer only' }],
+          accordion: true
+        }
+      });
+      expect(screen.getByRole('button', { name: /Item 1/ })).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    const faqs = [
+      { question: 'Question 1?', answer: 'Answer 1.' },
+      { question: 'Question 2?', answer: 'Answer 2.' },
+    ];
+
+    it('buttons have aria-controls', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach((button, index) => {
+        expect(button).toHaveAttribute('aria-controls', `accordion-body-${index}`);
+      });
+    });
+
+    it('content has aria-labelledby', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const contents = container.querySelectorAll('[id^="accordion-body-"]');
+      contents.forEach((content, index) => {
+        expect(content).toHaveAttribute('aria-labelledby', `accordion-heading-${index}`);
+      });
+    });
+  });
+
+  describe('styling', () => {
+    const faqs = [
+      { question: 'Q1?', answer: 'A1.' },
+      { question: 'Q2?', answer: 'A2.' },
+      { question: 'Q3?', answer: 'A3.' },
+    ];
+
+    it('applies rounded-t-lg to first accordion item', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      expect(buttons[0].className).toContain('rounded-t-lg');
+    });
+
+    it('applies rounded-b-lg to last accordion item when collapsed', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const buttons = screen.getAllByRole('button');
+      expect(buttons[buttons.length - 1].className).toContain('rounded-b-lg');
+    });
+
+    it('applies active styling when expanded', async () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /Q1/ });
+
+      await fireEvent.click(button);
+
+      expect(button.className).toContain('text-gray-900');
+      expect(button.className).toContain('bg-gray-100');
+    });
+
+    it('chevron rotates when expanded', async () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button', { name: /Q1/ });
+      const chevron = button.querySelector('svg');
+
+      expect(chevron.className.baseVal).not.toContain('rotate-180');
+
+      await fireEvent.click(button);
+
+      expect(chevron.className.baseVal).toContain('rotate-180');
+    });
+
+    it('accordion container has border', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const accordionDiv = container.querySelector('.border.border-gray-200');
+      expect(accordionDiv).toBeInTheDocument();
+    });
+
+    it('simple list has space-y-4 gap', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: false } });
+      const listDiv = container.querySelector('.space-y-4');
+      expect(listDiv).toBeInTheDocument();
+    });
+  });
+
+  describe('dark mode', () => {
+    const faqs = [{ question: 'Q?', answer: 'A.' }];
+
+    it('accordion has dark mode border', () => {
+      const { container } = render(FAQs, { props: { faqs, accordion: true } });
+      const accordionDiv = container.querySelector('.border');
+      expect(accordionDiv.className).toContain('dark:border-gray-700');
+    });
+
+    it('accordion buttons have dark mode hover', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('dark:hover:bg-gray-800');
+    });
+
+    it('accordion buttons have dark mode focus ring', () => {
+      render(FAQs, { props: { faqs, accordion: true } });
+      const button = screen.getByRole('button');
+      expect(button.className).toContain('dark:focus:ring-gray-800');
+    });
+  });
+});

package/dist/calendar/MonthSwitcher/MonthSwitcher.spec.d.ts

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

package/dist/calendar/MonthSwitcher/MonthSwitcher.spec.d.ts.map

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

package/dist/calendar/MonthSwitcher/MonthSwitcher.spec.js

@@ -0,0 +1,420 @@
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { expect, describe, test, vi, beforeEach } from 'vitest';
+import MonthSwitcher from './MonthSwitcher.svelte';
+
+describe('MonthSwitcher Component', () => {
+  test('renders a header element', () => {
+    const { container } = render(MonthSwitcher);
+    expect(container.querySelector('header')).toBeInTheDocument();
+  });
+
+  test('renders the month name', () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2024 }
+    });
+    expect(screen.getByText('January')).toBeInTheDocument();
+  });
+
+  test('renders three navigation buttons', () => {
+    const { container } = render(MonthSwitcher);
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(3);
+  });
+
+  test('has Today button', () => {
+    render(MonthSwitcher);
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Accessibility', () => {
+  test('prev button has aria-label', () => {
+    const { container } = render(MonthSwitcher);
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).toBeInTheDocument();
+  });
+
+  test('next button has aria-label', () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    expect(nextButton).toBeInTheDocument();
+  });
+
+  test('today button has aria-label', () => {
+    const { container } = render(MonthSwitcher);
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    expect(todayButton).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Month Display', () => {
+  test('displays February correctly', () => {
+    render(MonthSwitcher, {
+      props: { currentMonth: 1, currentYear: 2024 }
+    });
+    expect(screen.getByText('February')).toBeInTheDocument();
+  });
+
+  test('displays December correctly', () => {
+    render(MonthSwitcher, {
+      props: { currentMonth: 11, currentYear: 2024 }
+    });
+    expect(screen.getByText('December')).toBeInTheDocument();
+  });
+
+  test('displays June correctly', () => {
+    render(MonthSwitcher, {
+      props: { currentMonth: 5, currentYear: 2024 }
+    });
+    expect(screen.getByText('June')).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Navigation Callbacks', () => {
+  test('calls handleNext when next button clicked', async () => {
+    const handleNext = vi.fn();
+    const { container } = render(MonthSwitcher, {
+      props: { handleNext }
+    });
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(handleNext).toHaveBeenCalled();
+  });
+
+  test('calls handlePrev when prev button clicked', async () => {
+    const handlePrev = vi.fn();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        handlePrev,
+        disablePastNavigation: false
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.click(prevButton);
+    expect(handlePrev).toHaveBeenCalled();
+  });
+
+  test('calls handleToday when today button clicked', async () => {
+    const handleToday = vi.fn();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        handleToday,
+        currentMonth: 0,
+        currentYear: 2020
+      }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.click(todayButton);
+    expect(handleToday).toHaveBeenCalled();
+  });
+});
+
+describe('MonthSwitcher Disable Past Navigation', () => {
+  test('prev button disabled at current month by default', () => {
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear(),
+        disablePastNavigation: true
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).toBeDisabled();
+  });
+
+  test('prev button enabled when not at current month', () => {
+    const today = new Date();
+    const futureMonth = (today.getMonth() + 3) % 12;
+    const futureYear = today.getMonth() + 3 > 11 ? today.getFullYear() + 1 : today.getFullYear();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: futureMonth,
+        currentYear: futureYear,
+        disablePastNavigation: true
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  test('prev button enabled when disablePastNavigation is false', () => {
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear(),
+        disablePastNavigation: false
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).not.toBeDisabled();
+  });
+
+  test('does not call handlePrev when disabled', async () => {
+    const handlePrev = vi.fn();
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        handlePrev,
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear(),
+        disablePastNavigation: true
+      }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.click(prevButton);
+    expect(handlePrev).not.toHaveBeenCalled();
+  });
+});
+
+describe('MonthSwitcher Today Button State', () => {
+  test('today button disabled at current month', () => {
+    const today = new Date();
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: today.getMonth(),
+        currentYear: today.getFullYear()
+      }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    expect(todayButton).toBeDisabled();
+  });
+
+  test('today button enabled when not at current month', () => {
+    const { container } = render(MonthSwitcher, {
+      props: {
+        currentMonth: 0,
+        currentYear: 2020
+      }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    expect(todayButton).not.toBeDisabled();
+  });
+});
+
+describe('MonthSwitcher Styling', () => {
+  test('header has flex layout', () => {
+    const { container } = render(MonthSwitcher);
+    const header = container.querySelector('header');
+    expect(header).toHaveClass('flex');
+    expect(header).toHaveClass('items-center');
+    expect(header).toHaveClass('justify-between');
+  });
+
+  test('navigation buttons container has flex and gap', () => {
+    const { container } = render(MonthSwitcher);
+    const buttonContainer = container.querySelector('.flex.items-center.gap-2');
+    expect(buttonContainer).toBeInTheDocument();
+  });
+});
+
+describe('MonthSwitcher Mouse Events', () => {
+  test('prev button responds to mousedown', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.mouseDown(prevButton);
+    // Button should have scale-90 class when pressed
+    expect(prevButton.className).toContain('scale-90');
+  });
+
+  test('prev button responds to mouseup', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.mouseDown(prevButton);
+    await fireEvent.mouseUp(prevButton);
+    // Button should not have scale-90 class after mouseup
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('prev button responds to mouseleave', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.mouseDown(prevButton);
+    await fireEvent.mouseLeave(prevButton);
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to mousedown', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.mouseDown(nextButton);
+    expect(nextButton.className).toContain('scale-90');
+  });
+
+  test('next button responds to mouseup', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.mouseDown(nextButton);
+    await fireEvent.mouseUp(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to mouseleave', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.mouseDown(nextButton);
+    await fireEvent.mouseLeave(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('today button responds to mousedown', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.mouseDown(todayButton);
+    expect(todayButton.className).toContain('scale-95');
+  });
+
+  test('today button responds to mouseup', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.mouseDown(todayButton);
+    await fireEvent.mouseUp(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+
+  test('today button responds to mouseleave', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.mouseDown(todayButton);
+    await fireEvent.mouseLeave(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+});
+
+describe('MonthSwitcher Touch Events', () => {
+  test('prev button responds to touchstart', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.touchStart(prevButton);
+    expect(prevButton.className).toContain('scale-90');
+  });
+
+  test('prev button responds to touchend', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.touchStart(prevButton);
+    await fireEvent.touchEnd(prevButton);
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('prev button responds to touchcancel', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { disablePastNavigation: false }
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.touchStart(prevButton);
+    await fireEvent.touchCancel(prevButton);
+    expect(prevButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to touchstart', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.touchStart(nextButton);
+    expect(nextButton.className).toContain('scale-90');
+  });
+
+  test('next button responds to touchend', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.touchStart(nextButton);
+    await fireEvent.touchEnd(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('next button responds to touchcancel', async () => {
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.touchStart(nextButton);
+    await fireEvent.touchCancel(nextButton);
+    expect(nextButton.className).not.toContain('scale-90');
+  });
+
+  test('today button responds to touchstart', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.touchStart(todayButton);
+    expect(todayButton.className).toContain('scale-95');
+  });
+
+  test('today button responds to touchend', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.touchStart(todayButton);
+    await fireEvent.touchEnd(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+
+  test('today button responds to touchcancel', async () => {
+    const { container } = render(MonthSwitcher, {
+      props: { currentMonth: 0, currentYear: 2020 }
+    });
+    const todayButton = container.querySelector('[aria-label="Go to current month"]');
+    await fireEvent.touchStart(todayButton);
+    await fireEvent.touchCancel(todayButton);
+    expect(todayButton.className).not.toContain('scale-95');
+  });
+});
+
+describe('MonthSwitcher Haptic Feedback', () => {
+  beforeEach(() => {
+    // Clean up window mocks
+    delete window.webkit;
+    delete window.TapticEngine;
+    if (navigator.vibrate) {
+      vi.spyOn(navigator, 'vibrate').mockImplementation(() => true);
+    }
+  });
+
+  test('triggers webkit haptic when available', async () => {
+    const postMessage = vi.fn();
+    window.webkit = {
+      messageHandlers: {
+        haptic: { postMessage }
+      }
+    };
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(postMessage).toHaveBeenCalledWith('light');
+  });
+
+  test('triggers TapticEngine when available', async () => {
+    const impact = vi.fn();
+    window.TapticEngine = { impact };
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(impact).toHaveBeenCalledWith({ style: 'light' });
+  });
+
+  test('triggers navigator.vibrate as fallback', async () => {
+    // Add vibrate to navigator if it doesn't exist
+    navigator.vibrate = vi.fn().mockReturnValue(true);
+    const { container } = render(MonthSwitcher);
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+    expect(navigator.vibrate).toHaveBeenCalledWith(10);
+  });
+});

package/dist/calendar/OrderSummary/OrderSummary.spec.d.ts

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

package/dist/calendar/OrderSummary/OrderSummary.spec.d.ts.map

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