@getmicdrop/svelte-components 2.0.4 → 2.0.6

package/dist/components/Calendar/QuarterView.spec.js

@@ -1,394 +1,394 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import { writable, get } from 'svelte/store';
-import QuarterView from './QuarterView.svelte';
-
-// Mock date-fns functions
-vi.mock('date-fns', () => ({
-  getDay: vi.fn((date) => date.getDay()),
-  getDaysInMonth: vi.fn((date) => {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-  }),
-  startOfMonth: vi.fn((date) => new Date(date.getFullYear(), date.getMonth(), 1)),
-}));
-
-describe('QuarterView Component', () => {
-  let selectedDates;
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date(2024, 5, 15)); // June 15, 2024
-
-    selectedDates = writable([]);
-
-    // Mock navigator.vibrate for haptic feedback tests
-    Object.defineProperty(navigator, 'vibrate', {
-      value: vi.fn(),
-      writable: true,
-    });
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('renders calendar container', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const calendarContainer = container.querySelector('.calendar-container');
-    expect(calendarContainer).toBeTruthy();
-  });
-
-  it('renders day headers', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('Sun')).toBeTruthy();
-    expect(getByText('Mon')).toBeTruthy();
-    expect(getByText('Tue')).toBeTruthy();
-    expect(getByText('Wed')).toBeTruthy();
-    expect(getByText('Thu')).toBeTruthy();
-    expect(getByText('Fri')).toBeTruthy();
-    expect(getByText('Sat')).toBeTruthy();
-  });
-
-  it('renders current month name', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('June')).toBeTruthy();
-  });
-
-  it('renders current year', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('2024')).toBeTruthy();
-  });
-
-  it('renders navigation buttons', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const navButtons = container.querySelectorAll('.nav-btn');
-    expect(navButtons.length).toBe(2);
-  });
-
-  it('renders Today button', () => {
-    const { getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    expect(getByText('Today')).toBeTruthy();
-  });
-
-  it('renders day cells', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const dayCells = container.querySelectorAll('.day-cell');
-    // June 2024 has 30 days
-    expect(dayCells.length).toBe(30);
-  });
-
-  it('previous button has aria-label', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const prevButton = container.querySelector('[aria-label="Previous month"]');
-    expect(prevButton).toBeTruthy();
-  });
-
-  it('next button has aria-label', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const nextButton = container.querySelector('[aria-label="Next month"]');
-    expect(nextButton).toBeTruthy();
-  });
-
-  it('clicking next navigates to next month', async () => {
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const nextButton = container.querySelector('[aria-label="Next month"]');
-    await fireEvent.click(nextButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('July')).toBeTruthy();
-  });
-
-  it('clicking previous navigates to previous month', async () => {
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const prevButton = container.querySelector('[aria-label="Previous month"]');
-    await fireEvent.click(prevButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('May')).toBeTruthy();
-  });
-
-  it('shows save status when provided', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-        saveStatus: 'saving',
-      },
-    });
-    const saveIndicator = container.querySelector('.save-indicator-overlay');
-    expect(saveIndicator).toBeTruthy();
-  });
-
-  it('shows saved indicator', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-        saveStatus: 'saved',
-      },
-    });
-    const saveIndicator = container.querySelector('.save-indicator-overlay');
-    expect(saveIndicator).toBeTruthy();
-  });
-
-  it('disables non-event days', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-    const disabledCells = container.querySelectorAll('.day-cell.disabled');
-    // All days should be disabled when no events
-    expect(disabledCells.length).toBe(30);
-  });
-
-  it('enables event days', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    // Find the cell for day 20
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    // Day 20 (future event) should not be disabled
-    expect(day20Cell.classList.contains('disabled')).toBe(false);
-  });
-
-  it('marks selected dates', async () => {
-    selectedDates.set(['2024-06-20']);
-
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    expect(day20Cell.classList.contains('selected')).toBe(true);
-  });
-
-  it('toggles date selection on click', async () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    await fireEvent.click(day20Cell);
-
-    // Check that selectedDates store was updated
-    const dates = get(selectedDates);
-    expect(dates).toContain('2024-06-20');
-  });
-
-  it('removes date from selection on second click', async () => {
-    selectedDates.set(['2024-06-20']);
-
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    await fireEvent.click(day20Cell);
-
-    const dates = get(selectedDates);
-    expect(dates).not.toContain('2024-06-20');
-  });
-
-  it('has aria-pressed attribute on day buttons', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const dayCell = container.querySelector('.day-cell');
-    expect(dayCell.hasAttribute('aria-pressed')).toBe(true);
-  });
-
-  it('has aria-label for day buttons', () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const dayCell = container.querySelector('.day-cell');
-    expect(dayCell.getAttribute('aria-label')).toMatch(/Day \d+/);
-  });
-
-  it('handles touch swipe events', async () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    const grid = container.querySelector('.calendar-grid');
-
-    // Simulate touch swipe
-    await fireEvent.touchStart(grid, {
-      touches: [{ clientX: 200, clientY: 100 }],
-    });
-
-    await fireEvent.touchMove(grid, {
-      touches: [{ clientX: 100, clientY: 100 }],
-    });
-
-    await fireEvent.touchEnd(grid, {
-      changedTouches: [{ clientX: 50, clientY: 100 }],
-    });
-
-    vi.advanceTimersByTime(300);
-  });
-
-  it('calls haptic feedback via vibration API', async () => {
-    const { container } = render(QuarterView, {
-      props: {
-        currentevents: [{ date: '2024-06-20' }],
-        selectedDates,
-      },
-    });
-
-    const dayCells = container.querySelectorAll('.day-cell');
-    const day20Cell = Array.from(dayCells).find(
-      (cell) => cell.querySelector('.day-number')?.textContent === '20'
-    );
-
-    await fireEvent.click(day20Cell);
-
-    // vibrate should have been called
-    expect(navigator.vibrate).toHaveBeenCalled();
-  });
-
-  it('navigates months correctly across year boundary (December to January)', async () => {
-    vi.setSystemTime(new Date(2024, 11, 15)); // December 15, 2024
-
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    expect(getByText('December')).toBeTruthy();
-    expect(getByText('2024')).toBeTruthy();
-
-    const nextButton = container.querySelector('[aria-label="Next month"]');
-    await fireEvent.click(nextButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('January')).toBeTruthy();
-    expect(getByText('2025')).toBeTruthy();
-  });
-
-  it('navigates months correctly across year boundary (January to December)', async () => {
-    vi.setSystemTime(new Date(2024, 0, 15)); // January 15, 2024
-
-    const { container, getByText } = render(QuarterView, {
-      props: {
-        currentevents: [],
-        selectedDates,
-      },
-    });
-
-    expect(getByText('January')).toBeTruthy();
-    expect(getByText('2024')).toBeTruthy();
-
-    const prevButton = container.querySelector('[aria-label="Previous month"]');
-    await fireEvent.click(prevButton);
-
-    vi.advanceTimersByTime(300);
-
-    expect(getByText('December')).toBeTruthy();
-    expect(getByText('2023')).toBeTruthy();
-  });
-});
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import { writable, get } from 'svelte/store';
+import QuarterView from './QuarterView.svelte';
+
+// Mock date-fns functions
+vi.mock('date-fns', () => ({
+  getDay: vi.fn((date) => date.getDay()),
+  getDaysInMonth: vi.fn((date) => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  }),
+  startOfMonth: vi.fn((date) => new Date(date.getFullYear(), date.getMonth(), 1)),
+}));
+
+describe('QuarterView Component', () => {
+  let selectedDates;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2024, 5, 15)); // June 15, 2024
+
+    selectedDates = writable([]);
+
+    // Mock navigator.vibrate for haptic feedback tests
+    Object.defineProperty(navigator, 'vibrate', {
+      value: vi.fn(),
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders calendar container', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    const calendarContainer = container.querySelector('.calendar-container');
+    expect(calendarContainer).toBeTruthy();
+  });
+
+  it('renders day headers', () => {
+    const { getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    expect(getByText('Sun')).toBeTruthy();
+    expect(getByText('Mon')).toBeTruthy();
+    expect(getByText('Tue')).toBeTruthy();
+    expect(getByText('Wed')).toBeTruthy();
+    expect(getByText('Thu')).toBeTruthy();
+    expect(getByText('Fri')).toBeTruthy();
+    expect(getByText('Sat')).toBeTruthy();
+  });
+
+  it('renders current month name', () => {
+    const { getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    expect(getByText('June')).toBeTruthy();
+  });
+
+  it('renders current year', () => {
+    const { getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    expect(getByText('2024')).toBeTruthy();
+  });
+
+  it('renders navigation buttons', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    const navButtons = container.querySelectorAll('.nav-btn');
+    expect(navButtons.length).toBe(2);
+  });
+
+  it('renders Today button', () => {
+    const { getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    expect(getByText('Today')).toBeTruthy();
+  });
+
+  it('renders day cells', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    const dayCells = container.querySelectorAll('.day-cell');
+    // June 2024 has 30 days
+    expect(dayCells.length).toBe(30);
+  });
+
+  it('previous button has aria-label', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    expect(prevButton).toBeTruthy();
+  });
+
+  it('next button has aria-label', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    expect(nextButton).toBeTruthy();
+  });
+
+  it('clicking next navigates to next month', async () => {
+    const { container, getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+
+    vi.advanceTimersByTime(300);
+
+    expect(getByText('July')).toBeTruthy();
+  });
+
+  it('clicking previous navigates to previous month', async () => {
+    const { container, getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.click(prevButton);
+
+    vi.advanceTimersByTime(300);
+
+    expect(getByText('May')).toBeTruthy();
+  });
+
+  it('shows save status when provided', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+        saveStatus: 'saving',
+      },
+    });
+    const saveIndicator = container.querySelector('.save-indicator-overlay');
+    expect(saveIndicator).toBeTruthy();
+  });
+
+  it('shows saved indicator', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+        saveStatus: 'saved',
+      },
+    });
+    const saveIndicator = container.querySelector('.save-indicator-overlay');
+    expect(saveIndicator).toBeTruthy();
+  });
+
+  it('disables non-event days', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+    const disabledCells = container.querySelectorAll('.day-cell.disabled');
+    // All days should be disabled when no events
+    expect(disabledCells.length).toBe(30);
+  });
+
+  it('enables event days', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [{ date: '2024-06-20' }],
+        selectedDates,
+      },
+    });
+
+    const dayCells = container.querySelectorAll('.day-cell');
+    // Find the cell for day 20
+    const day20Cell = Array.from(dayCells).find(
+      (cell) => cell.querySelector('.day-number')?.textContent === '20'
+    );
+
+    // Day 20 (future event) should not be disabled
+    expect(day20Cell.classList.contains('disabled')).toBe(false);
+  });
+
+  it('marks selected dates', async () => {
+    selectedDates.set(['2024-06-20']);
+
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [{ date: '2024-06-20' }],
+        selectedDates,
+      },
+    });
+
+    const dayCells = container.querySelectorAll('.day-cell');
+    const day20Cell = Array.from(dayCells).find(
+      (cell) => cell.querySelector('.day-number')?.textContent === '20'
+    );
+
+    expect(day20Cell.classList.contains('selected')).toBe(true);
+  });
+
+  it('toggles date selection on click', async () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [{ date: '2024-06-20' }],
+        selectedDates,
+      },
+    });
+
+    const dayCells = container.querySelectorAll('.day-cell');
+    const day20Cell = Array.from(dayCells).find(
+      (cell) => cell.querySelector('.day-number')?.textContent === '20'
+    );
+
+    await fireEvent.click(day20Cell);
+
+    // Check that selectedDates store was updated
+    const dates = get(selectedDates);
+    expect(dates).toContain('2024-06-20');
+  });
+
+  it('removes date from selection on second click', async () => {
+    selectedDates.set(['2024-06-20']);
+
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [{ date: '2024-06-20' }],
+        selectedDates,
+      },
+    });
+
+    const dayCells = container.querySelectorAll('.day-cell');
+    const day20Cell = Array.from(dayCells).find(
+      (cell) => cell.querySelector('.day-number')?.textContent === '20'
+    );
+
+    await fireEvent.click(day20Cell);
+
+    const dates = get(selectedDates);
+    expect(dates).not.toContain('2024-06-20');
+  });
+
+  it('has aria-pressed attribute on day buttons', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    const dayCell = container.querySelector('.day-cell');
+    expect(dayCell.hasAttribute('aria-pressed')).toBe(true);
+  });
+
+  it('has aria-label for day buttons', () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    const dayCell = container.querySelector('.day-cell');
+    expect(dayCell.getAttribute('aria-label')).toMatch(/Day \d+/);
+  });
+
+  it('handles touch swipe events', async () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    const grid = container.querySelector('.calendar-grid');
+
+    // Simulate touch swipe
+    await fireEvent.touchStart(grid, {
+      touches: [{ clientX: 200, clientY: 100 }],
+    });
+
+    await fireEvent.touchMove(grid, {
+      touches: [{ clientX: 100, clientY: 100 }],
+    });
+
+    await fireEvent.touchEnd(grid, {
+      changedTouches: [{ clientX: 50, clientY: 100 }],
+    });
+
+    vi.advanceTimersByTime(300);
+  });
+
+  it('calls haptic feedback via vibration API', async () => {
+    const { container } = render(QuarterView, {
+      props: {
+        currentevents: [{ date: '2024-06-20' }],
+        selectedDates,
+      },
+    });
+
+    const dayCells = container.querySelectorAll('.day-cell');
+    const day20Cell = Array.from(dayCells).find(
+      (cell) => cell.querySelector('.day-number')?.textContent === '20'
+    );
+
+    await fireEvent.click(day20Cell);
+
+    // vibrate should have been called
+    expect(navigator.vibrate).toHaveBeenCalled();
+  });
+
+  it('navigates months correctly across year boundary (December to January)', async () => {
+    vi.setSystemTime(new Date(2024, 11, 15)); // December 15, 2024
+
+    const { container, getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    expect(getByText('December')).toBeTruthy();
+    expect(getByText('2024')).toBeTruthy();
+
+    const nextButton = container.querySelector('[aria-label="Next month"]');
+    await fireEvent.click(nextButton);
+
+    vi.advanceTimersByTime(300);
+
+    expect(getByText('January')).toBeTruthy();
+    expect(getByText('2025')).toBeTruthy();
+  });
+
+  it('navigates months correctly across year boundary (January to December)', async () => {
+    vi.setSystemTime(new Date(2024, 0, 15)); // January 15, 2024
+
+    const { container, getByText } = render(QuarterView, {
+      props: {
+        currentevents: [],
+        selectedDates,
+      },
+    });
+
+    expect(getByText('January')).toBeTruthy();
+    expect(getByText('2024')).toBeTruthy();
+
+    const prevButton = container.querySelector('[aria-label="Previous month"]');
+    await fireEvent.click(prevButton);
+
+    vi.advanceTimersByTime(300);
+
+    expect(getByText('December')).toBeTruthy();
+    expect(getByText('2023')).toBeTruthy();
+  });
+});