@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.spec.js

@@ -1,300 +1,300 @@
-import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
-import { render, fireEvent, waitFor, cleanup } from '@testing-library/svelte';
-
-// Mock the config
-vi.mock('../../lib/config.js', () => ({
-  PUBLIC_GOOGLE_MAPS_API_KEY: 'mock-api-key',
-}));
-
-// Mock Google Maps API
-const mockAutocompleteSessionToken = vi.fn().mockImplementation(() => ({}));
-const mockFetchAutocompleteSuggestions = vi.fn().mockResolvedValue({
-  suggestions: [
-    {
-      placePrediction: {
-        text: { toString: () => 'Los Angeles, CA, USA' },
-        types: ['locality', 'political'],
-        toPlace: vi.fn().mockReturnValue({
-          fetchFields: vi.fn().mockResolvedValue({}),
-          toJSON: vi.fn().mockReturnValue({
-            text: 'Los Angeles, CA, USA',
-            formattedAddress: '123 Main St, Los Angeles, CA 90012',
-          }),
-        }),
-      },
-    },
-    {
-      placePrediction: {
-        text: { toString: () => 'Long Beach, CA, USA' },
-        types: ['locality', 'political'],
-        toPlace: vi.fn().mockReturnValue({
-          fetchFields: vi.fn().mockResolvedValue({}),
-          toJSON: vi.fn().mockReturnValue({
-            text: 'Long Beach, CA, USA',
-            formattedAddress: '456 Beach St, Long Beach, CA 90801',
-          }),
-        }),
-      },
-    },
-  ],
-});
-
-vi.mock('@googlemaps/js-api-loader', () => ({
-  Loader: vi.fn().mockImplementation(() => ({
-    importLibrary: vi.fn().mockResolvedValue({
-      AutocompleteSessionToken: mockAutocompleteSessionToken,
-      AutocompleteSuggestion: {
-        fetchAutocompleteSuggestions: mockFetchAutocompleteSuggestions,
-      },
-    }),
-  })),
-}));
-
-describe('PlaceAutocomplete', () => {
-  let PlaceAutocomplete;
-
-  beforeAll(async () => {
-    vi.resetModules();
-    PlaceAutocomplete = (await import('./PlaceAutocomplete.svelte')).default;
-  }, 60000);
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe('Basic Rendering', () => {
-    it('renders the component', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-wrapper')).toBeDefined();
-    });
-
-    it('renders with default placeholder', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-      expect(input?.placeholder).toContain('Search');
-    });
-
-    it('renders with custom placeholder', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { placeholder: 'Enter address' },
-      });
-      const input = container.querySelector('input');
-      expect(input?.placeholder).toBe('Enter address');
-    });
-
-    it('renders search icon', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('svg')).toBeDefined();
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts initialValue prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { initialValue: 'New York, NY' },
-      });
-      const input = container.querySelector('input');
-      expect(input?.value).toBe('New York, NY');
-    });
-
-    it('accepts disabled prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { disabled: true },
-      });
-      const input = container.querySelector('input');
-      expect(input?.disabled).toBe(true);
-    });
-
-    it('accepts mode prop for cityState', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { mode: 'cityState' },
-      });
-      const input = container.querySelector('input');
-      expect(input?.placeholder).toContain('city, state');
-    });
-
-    it('accepts animateFocus prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { animateFocus: false },
-      });
-      expect(container.querySelector('.place-animate-focus')).toBeNull();
-    });
-
-    it('accepts autocomplete prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { autocomplete: 'off' },
-      });
-      const input = container.querySelector('input');
-      expect(input?.autocomplete).toBe('off');
-    });
-  });
-
-  describe('Input Interaction', () => {
-    it('updates value on input', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-
-      await fireEvent.input(input, { target: { value: 'Los' } });
-      expect(input?.value).toBe('Los');
-    });
-
-    it('clears results on empty input', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-
-      await fireEvent.input(input, { target: { value: 'Los' } });
-      await fireEvent.input(input, { target: { value: '' } });
-      expect(input?.value).toBe('');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('handles Escape key', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-
-      await fireEvent.keyDown(input, { key: 'Escape' });
-      expect(container).toBeDefined();
-    });
-
-    it('handles ArrowDown key with no results', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-
-      await fireEvent.keyDown(input, { key: 'ArrowDown' });
-      expect(container).toBeDefined();
-    });
-
-    it('handles ArrowUp key with no results', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-
-      await fireEvent.keyDown(input, { key: 'ArrowUp' });
-      expect(container).toBeDefined();
-    });
-
-    it('handles Enter key with no selection', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-
-      await fireEvent.keyDown(input, { key: 'Enter' });
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Callbacks', () => {
-    it('calls onResponse when provided', async () => {
-      const onResponse = vi.fn();
-      const { container } = render(PlaceAutocomplete, {
-        props: { onResponse },
-      });
-      expect(container).toBeDefined();
-    });
-
-    it('calls onError when provided', async () => {
-      const onError = vi.fn();
-      const { container } = render(PlaceAutocomplete, {
-        props: { onError },
-      });
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Styling', () => {
-    it('has correct wrapper class', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-wrapper')).toBeDefined();
-    });
-
-    it('has correct container class', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-container')).toBeDefined();
-    });
-
-    it('has correct input class', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-input')).toBeDefined();
-    });
-
-    it('applies animate focus class when enabled', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { animateFocus: true, disabled: false },
-      });
-      expect(container.querySelector('.place-animate-focus')).toBeDefined();
-    });
-
-    it('does not apply animate focus class when disabled', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { animateFocus: true, disabled: true },
-      });
-      expect(container.querySelector('.place-animate-focus')).toBeNull();
-    });
-  });
-
-  describe('Mode: cityState', () => {
-    it('filters results to only localities', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { mode: 'cityState' },
-      });
-      expect(container).toBeDefined();
-    });
-
-    it('updates placeholder for cityState mode', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { mode: 'cityState' },
-      });
-      const input = container.querySelector('input');
-      expect(input?.placeholder).toContain('city, state');
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('handles missing API key gracefully', async () => {
-      const onError = vi.fn();
-      const { container } = render(PlaceAutocomplete, {
-        props: { onError },
-      });
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Click Outside', () => {
-    it('handles click outside to close dropdown', async () => {
-      const { container } = render(PlaceAutocomplete);
-      
-      // Simulate click outside
-      document.body.click();
-      
-      await waitFor(() => {
-        expect(container.querySelector('.place-dropdown')).toBeNull();
-      });
-    });
-  });
-
-  describe('Initial Value', () => {
-    it('sets initial value on mount', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { initialValue: 'San Francisco, CA' },
-      });
-      
-      const input = container.querySelector('input');
-      expect(input?.value).toBe('San Francisco, CA');
-    });
-
-    it('initializes only once', async () => {
-      const { container, rerender } = render(PlaceAutocomplete, {
-        props: { initialValue: 'San Francisco, CA' },
-      });
-
-      await rerender({ initialValue: 'Los Angeles, CA' });
-      
-      // Value should remain the initial value
-      const input = container.querySelector('input');
-      expect(input).toBeDefined();
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach, beforeAll, afterEach } from 'vitest';
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/svelte';
+
+// Mock the config
+vi.mock('../../lib/config.js', () => ({
+  PUBLIC_GOOGLE_MAPS_API_KEY: 'mock-api-key',
+}));
+
+// Mock Google Maps API
+const mockAutocompleteSessionToken = vi.fn().mockImplementation(() => ({}));
+const mockFetchAutocompleteSuggestions = vi.fn().mockResolvedValue({
+  suggestions: [
+    {
+      placePrediction: {
+        text: { toString: () => 'Los Angeles, CA, USA' },
+        types: ['locality', 'political'],
+        toPlace: vi.fn().mockReturnValue({
+          fetchFields: vi.fn().mockResolvedValue({}),
+          toJSON: vi.fn().mockReturnValue({
+            text: 'Los Angeles, CA, USA',
+            formattedAddress: '123 Main St, Los Angeles, CA 90012',
+          }),
+        }),
+      },
+    },
+    {
+      placePrediction: {
+        text: { toString: () => 'Long Beach, CA, USA' },
+        types: ['locality', 'political'],
+        toPlace: vi.fn().mockReturnValue({
+          fetchFields: vi.fn().mockResolvedValue({}),
+          toJSON: vi.fn().mockReturnValue({
+            text: 'Long Beach, CA, USA',
+            formattedAddress: '456 Beach St, Long Beach, CA 90801',
+          }),
+        }),
+      },
+    },
+  ],
+});
+
+vi.mock('@googlemaps/js-api-loader', () => ({
+  Loader: vi.fn().mockImplementation(() => ({
+    importLibrary: vi.fn().mockResolvedValue({
+      AutocompleteSessionToken: mockAutocompleteSessionToken,
+      AutocompleteSuggestion: {
+        fetchAutocompleteSuggestions: mockFetchAutocompleteSuggestions,
+      },
+    }),
+  })),
+}));
+
+describe('PlaceAutocomplete', () => {
+  let PlaceAutocomplete;
+
+  beforeAll(async () => {
+    vi.resetModules();
+    PlaceAutocomplete = (await import('./PlaceAutocomplete.svelte')).default;
+  }, 60000);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders the component', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-wrapper')).toBeDefined();
+    });
+
+    it('renders with default placeholder', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toContain('Search');
+    });
+
+    it('renders with custom placeholder', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { placeholder: 'Enter address' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toBe('Enter address');
+    });
+
+    it('renders search icon', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('svg')).toBeDefined();
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts initialValue prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { initialValue: 'New York, NY' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.value).toBe('New York, NY');
+    });
+
+    it('accepts disabled prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { disabled: true },
+      });
+      const input = container.querySelector('input');
+      expect(input?.disabled).toBe(true);
+    });
+
+    it('accepts mode prop for cityState', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { mode: 'cityState' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toContain('city, state');
+    });
+
+    it('accepts animateFocus prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { animateFocus: false },
+      });
+      expect(container.querySelector('.place-animate-focus')).toBeNull();
+    });
+
+    it('accepts autocomplete prop', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { autocomplete: 'off' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.autocomplete).toBe('off');
+    });
+  });
+
+  describe('Input Interaction', () => {
+    it('updates value on input', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.input(input, { target: { value: 'Los' } });
+      expect(input?.value).toBe('Los');
+    });
+
+    it('clears results on empty input', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.input(input, { target: { value: 'Los' } });
+      await fireEvent.input(input, { target: { value: '' } });
+      expect(input?.value).toBe('');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('handles Escape key', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'Escape' });
+      expect(container).toBeDefined();
+    });
+
+    it('handles ArrowDown key with no results', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      expect(container).toBeDefined();
+    });
+
+    it('handles ArrowUp key with no results', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'ArrowUp' });
+      expect(container).toBeDefined();
+    });
+
+    it('handles Enter key with no selection', async () => {
+      const { container } = render(PlaceAutocomplete);
+      const input = container.querySelector('input');
+
+      await fireEvent.keyDown(input, { key: 'Enter' });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('calls onResponse when provided', async () => {
+      const onResponse = vi.fn();
+      const { container } = render(PlaceAutocomplete, {
+        props: { onResponse },
+      });
+      expect(container).toBeDefined();
+    });
+
+    it('calls onError when provided', async () => {
+      const onError = vi.fn();
+      const { container } = render(PlaceAutocomplete, {
+        props: { onError },
+      });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Styling', () => {
+    it('has correct wrapper class', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-wrapper')).toBeDefined();
+    });
+
+    it('has correct container class', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-container')).toBeDefined();
+    });
+
+    it('has correct input class', async () => {
+      const { container } = render(PlaceAutocomplete);
+      expect(container.querySelector('.place-input')).toBeDefined();
+    });
+
+    it('applies animate focus class when enabled', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { animateFocus: true, disabled: false },
+      });
+      expect(container.querySelector('.place-animate-focus')).toBeDefined();
+    });
+
+    it('does not apply animate focus class when disabled', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { animateFocus: true, disabled: true },
+      });
+      expect(container.querySelector('.place-animate-focus')).toBeNull();
+    });
+  });
+
+  describe('Mode: cityState', () => {
+    it('filters results to only localities', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { mode: 'cityState' },
+      });
+      expect(container).toBeDefined();
+    });
+
+    it('updates placeholder for cityState mode', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { mode: 'cityState' },
+      });
+      const input = container.querySelector('input');
+      expect(input?.placeholder).toContain('city, state');
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing API key gracefully', async () => {
+      const onError = vi.fn();
+      const { container } = render(PlaceAutocomplete, {
+        props: { onError },
+      });
+      expect(container).toBeDefined();
+    });
+  });
+
+  describe('Click Outside', () => {
+    it('handles click outside to close dropdown', async () => {
+      const { container } = render(PlaceAutocomplete);
+      
+      // Simulate click outside
+      document.body.click();
+      
+      await waitFor(() => {
+        expect(container.querySelector('.place-dropdown')).toBeNull();
+      });
+    });
+  });
+
+  describe('Initial Value', () => {
+    it('sets initial value on mount', async () => {
+      const { container } = render(PlaceAutocomplete, {
+        props: { initialValue: 'San Francisco, CA' },
+      });
+      
+      const input = container.querySelector('input');
+      expect(input?.value).toBe('San Francisco, CA');
+    });
+
+    it('initializes only once', async () => {
+      const { container, rerender } = render(PlaceAutocomplete, {
+        props: { initialValue: 'San Francisco, CA' },
+      });
+
+      await rerender({ initialValue: 'Los Angeles, CA' });
+      
+      // Value should remain the initial value
+      const input = container.querySelector('input');
+      expect(input).toBeDefined();
+    });
+  });
+});