@getmicdrop/svelte-components 5.5.1 → 5.5.5

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

@@ -1,300 +1,1246 @@
-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',
-}));
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
+import PlaceAutocomplete from './PlaceAutocomplete.svelte';
 
 // 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',
-          }),
-        }),
-      },
-    },
-  ],
-});
+const mockAutocompleteSuggestion = {
+  fetchAutocompleteSuggestions: vi.fn(),
+};
 
+const mockAutocompleteSessionToken = vi.fn();
+
+const mockLoader = {
+  importLibrary: vi.fn().mockResolvedValue({
+    AutocompleteSessionToken: mockAutocompleteSessionToken,
+    AutocompleteSuggestion: mockAutocompleteSuggestion,
+  }),
+};
+
+// Mock the Google Maps Loader
 vi.mock('@googlemaps/js-api-loader', () => ({
-  Loader: vi.fn().mockImplementation(() => ({
-    importLibrary: vi.fn().mockResolvedValue({
-      AutocompleteSessionToken: mockAutocompleteSessionToken,
-      AutocompleteSuggestion: {
-        fetchAutocompleteSuggestions: mockFetchAutocompleteSuggestions,
-      },
-    }),
-  })),
+  Loader: vi.fn().mockImplementation(() => mockLoader),
 }));
 
-describe('PlaceAutocomplete', () => {
-  let PlaceAutocomplete;
+// Mock config
+vi.mock('$lib/config.js', () => ({
+  PUBLIC_GOOGLE_MAPS_API_KEY: 'test-api-key',
+}));
 
-  beforeAll(async () => {
-    vi.resetModules();
-    PlaceAutocomplete = (await import('./PlaceAutocomplete.svelte')).default;
-  }, 60000);
+function setupTest(props = {}) {
+  const user = userEvent.setup();
+  const result = render(PlaceAutocomplete, { props });
+  return { user, container: result.container };
+}
 
+describe('PlaceAutocomplete Component', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+      suggestions: [],
+    });
   });
 
   afterEach(() => {
-    cleanup();
+    vi.clearAllMocks();
   });
 
-  describe('Basic Rendering', () => {
-    it('renders the component', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-wrapper')).toBeDefined();
+  describe('Rendering', () => {
+    test('renders input element', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
     });
 
-    it('renders with default placeholder', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
-      expect(input?.placeholder).toContain('Search');
+    test('renders with default placeholder', async () => {
+      setupTest();
+      await waitFor(() => {
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('placeholder', 'Search for location...');
+      });
     });
 
-    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');
+    test('renders with custom placeholder', () => {
+      setupTest({ placeholder: 'Find a venue...' });
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('placeholder', 'Find a venue...');
+    });
+
+    test('renders search icon', () => {
+      const { container } = setupTest();
+      const icon = container.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    test('applies wrapper styles correctly', () => {
+      const { container } = setupTest();
+      const wrapper = container.querySelector('.relative.rounded-lg');
+      expect(wrapper).toBeInTheDocument();
     });
 
-    it('renders search icon', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('svg')).toBeDefined();
+    test('input has correct name attribute', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('name', 'location');
     });
   });
 
-  describe('Props', () => {
-    it('accepts initialValue prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { initialValue: 'New York, NY' },
+  describe('Initial Value', () => {
+    test('displays initial value', async () => {
+      setupTest({ initialValue: 'New York, NY' });
+      await waitFor(() => {
+        const input = screen.getByRole('textbox');
+        expect(input.value).toBe('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);
+    test('does not display value when initialValue is empty', () => {
+      setupTest({ initialValue: '' });
+      const input = screen.getByRole('textbox');
+      expect(input.value).toBe('');
     });
+  });
 
-    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');
+  describe('Disabled State', () => {
+    test('input can be disabled', () => {
+      setupTest({ disabled: true });
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
     });
 
-    it('accepts animateFocus prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { animateFocus: false },
-      });
-      expect(container.querySelector('.place-animate-focus')).toBeNull();
+    test('input is enabled by default', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).not.toBeDisabled();
+    });
+
+    test('applies disabled opacity class', () => {
+      setupTest({ disabled: true });
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('disabled:opacity-50');
+    });
+  });
+
+  describe('Animation', () => {
+    test('applies animation class when animateFocus is true', () => {
+      const { container } = setupTest({ animateFocus: true });
+      const wrapper = container.querySelector('.transition-transform');
+      expect(wrapper).toBeInTheDocument();
+      expect(wrapper).toHaveClass('focus-within:scale-[1.01]');
+    });
+
+    test('does not apply animation when animateFocus is false', () => {
+      const { container } = setupTest({ animateFocus: false });
+      const wrapper = container.querySelector('.transition-transform');
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    test('does not apply animation when disabled', () => {
+      const { container } = setupTest({ animateFocus: true, disabled: true });
+      const wrapper = container.querySelector('.transition-transform');
+      expect(wrapper).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Mode Variants', () => {
+    test('default mode is full', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('placeholder', 'Search for location...');
     });
 
-    it('accepts autocomplete prop', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { autocomplete: 'off' },
+    test('cityState mode updates placeholder', async () => {
+      setupTest({ mode: 'cityState' });
+      await waitFor(() => {
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('placeholder', 'Search for city, state...');
       });
-      const input = container.querySelector('input');
-      expect(input?.autocomplete).toBe('off');
+    });
+
+    test('cityState mode with custom placeholder keeps custom value', () => {
+      setupTest({ mode: 'cityState', placeholder: 'Custom placeholder' });
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('placeholder', 'Custom placeholder');
+    });
+  });
+
+  describe('Autocomplete Attribute', () => {
+    test('has autocomplete off by default', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('autocomplete', 'off');
+    });
+
+    test('can set autocomplete to on', () => {
+      setupTest({ autocomplete: 'on' });
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('autocomplete', 'on');
+    });
+  });
+
+  describe('User Input', () => {
+    test('updates input value on typing', async () => {
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Los Angeles');
+      expect(input.value).toBe('Los Angeles');
+    });
+
+    test('clears input when empty value is typed', async () => {
+      const { user } = setupTest({ initialValue: 'Test' });
+      const input = screen.getByRole('textbox');
+
+      await user.clear(input);
+      expect(input.value).toBe('');
     });
   });
 
-  describe('Input Interaction', () => {
-    it('updates value on input', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
+  describe('Autocomplete Suggestions', () => {
+    test('displays suggestions when typing', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Los Angeles, CA, USA' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Los Angeles County, CA, USA' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
 
-      await fireEvent.input(input, { target: { value: 'Los' } });
-      expect(input?.value).toBe('Los');
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Los Angeles');
+
+      await waitFor(() => {
+        const options = screen.getByRole('list', { id: 'options' });
+        expect(options).toBeInTheDocument();
+      });
+    });
+
+    test('does not display suggestions list when results are empty', async () => {
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'xyz');
+
+      const options = screen.queryByRole('list');
+      expect(options).not.toBeInTheDocument();
+    });
+
+    test('filters cityState results correctly', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Los Angeles, CA, USA' },
+            types: ['locality', 'political'],
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'California, USA' },
+            types: ['administrative_area_level_1', 'political'],
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Van Nuys, Los Angeles, CA, USA' },
+            types: ['sublocality', 'political'],
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ mode: 'cityState' });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Los Angeles');
+
+      await waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        // Should have 2 results: Los Angeles and Van Nuys (not California)
+        expect(buttons).toHaveLength(2);
+      });
     });
 
-    it('clears results on empty input', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
+    test('formats cityState results to show first two parts', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Los Angeles, CA, USA' },
+            types: ['locality'],
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ mode: 'cityState' });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Los Angeles');
 
-      await fireEvent.input(input, { target: { value: 'Los' } });
-      await fireEvent.input(input, { target: { value: '' } });
-      expect(input?.value).toBe('');
+      await waitFor(() => {
+        const button = screen.getByText('Los Angeles, CA');
+        expect(button).toBeInTheDocument();
+      });
     });
   });
 
   describe('Keyboard Navigation', () => {
-    it('handles Escape key', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
+    beforeEach(() => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 1' },
+            toPlace: () => ({
+              fetchFields: vi.fn().mockResolvedValue({}),
+              toJSON: () => ({ text: 'Result 1' }),
+            }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 2' },
+            toPlace: () => ({
+              fetchFields: vi.fn().mockResolvedValue({}),
+              toJSON: () => ({ text: 'Result 2' }),
+            }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 3' },
+            toPlace: () => ({
+              fetchFields: vi.fn().mockResolvedValue({}),
+              toJSON: () => ({ text: 'Result 3' }),
+            }),
+          },
+        },
+      ];
 
-      await fireEvent.keyDown(input, { key: 'Escape' });
-      expect(container).toBeDefined();
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+    });
+
+    test('ArrowDown highlights first suggestion', async () => {
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+      await waitFor(() => {
+        const highlighted = container.querySelector('.bg-gray-100');
+        expect(highlighted).toBeInTheDocument();
+      });
     });
 
-    it('handles ArrowDown key with no results', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
+    test('ArrowDown cycles through suggestions', async () => {
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      // Press down three times
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
 
+      // Should cycle back to first
       await fireEvent.keyDown(input, { key: 'ArrowDown' });
-      expect(container).toBeDefined();
+
+      const highlighted = container.querySelectorAll('.bg-gray-100');
+      expect(highlighted.length).toBeGreaterThan(0);
     });
 
-    it('handles ArrowUp key with no results', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
+    test('ArrowUp highlights last suggestion when none selected', async () => {
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
 
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      await fireEvent.keyDown(input, { key: 'ArrowUp' });
+
+      const highlighted = container.querySelector('.bg-gray-100');
+      expect(highlighted).toBeInTheDocument();
+    });
+
+    test('ArrowUp moves selection upward', async () => {
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      // Go down twice, then up once
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
       await fireEvent.keyDown(input, { key: 'ArrowUp' });
-      expect(container).toBeDefined();
+
+      // Should be on first suggestion - check the li element
+      await waitFor(() => {
+        const highlighted = container.querySelector('li.bg-gray-100');
+        expect(highlighted).toBeInTheDocument();
+      });
+    });
+
+    test('Enter selects highlighted suggestion', async () => {
+      const onResponse = vi.fn();
+      const { user } = setupTest({ onResponse });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      await fireEvent.keyDown(input, { key: 'Enter' });
+
+      await waitFor(() => {
+        expect(onResponse).toHaveBeenCalled();
+      });
     });
 
-    it('handles Enter key with no selection', async () => {
-      const { container } = render(PlaceAutocomplete);
-      const input = container.querySelector('input');
+    test('Enter does nothing when no suggestion is highlighted', async () => {
+      const onResponse = vi.fn();
+      const { user } = setupTest({ onResponse });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
 
       await fireEvent.keyDown(input, { key: 'Enter' });
-      expect(container).toBeDefined();
+
+      expect(onResponse).not.toHaveBeenCalled();
+    });
+
+    test('Escape clears results', async () => {
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      await fireEvent.keyDown(input, { key: 'Escape' });
+
+      await waitFor(() => {
+        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+      });
+    });
+
+    test('keyboard navigation does nothing when no results', async () => {
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      await fireEvent.keyDown(input, { key: 'ArrowUp' });
+      await fireEvent.keyDown(input, { key: 'Enter' });
+
+      // Should not throw error
+      expect(input).toBeInTheDocument();
     });
   });
 
-  describe('Callbacks', () => {
-    it('calls onResponse when provided', async () => {
+  describe('Place Selection', () => {
+    test('clicking suggestion calls onResponse', async () => {
       const onResponse = vi.fn();
-      const { container } = render(PlaceAutocomplete, {
-        props: { onResponse },
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ formattedAddress: '123 Main St', text: 'Test Place' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ onResponse });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button', { name: /Test Place/i });
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(onResponse).toHaveBeenCalledWith(
+          expect.objectContaining({ text: 'Test Place' })
+        );
       });
-      expect(container).toBeDefined();
     });
 
-    it('calls onError when provided', async () => {
+    test('selecting place updates input value', async () => {
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Selected Place' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Selected Place' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(input.value).toBe('Selected Place');
+      });
+    });
+
+    test('selecting place clears results list', async () => {
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Selected Place' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Selected Place' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+      });
+    });
+
+    test('uses originalText for cityState mode', async () => {
+      const onResponse = vi.fn();
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Los Angeles, CA' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Los Angeles, CA, USA' },
+            types: ['locality'],
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ mode: 'cityState', onResponse });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Los Angeles');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(input.value).toBe('Los Angeles, CA');
+      });
+    });
+  });
+
+  describe('Click Outside', () => {
+    test('clicking outside clears results', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      // Click outside
+      await fireEvent.click(document.body);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+      });
+    });
+
+    test('clicking inside does not clear results', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      // Click on the input itself
+      await fireEvent.click(input);
+
+      // Results should still be visible
+      expect(screen.getByRole('list')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    test('calls onError when API request fails', async () => {
       const onError = vi.fn();
-      const { container } = render(PlaceAutocomplete, {
-        props: { onError },
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockRejectedValue(
+        new Error('API Error')
+      );
+
+      const { user } = setupTest({ onError });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith(expect.stringContaining('API Error'));
       });
-      expect(container).toBeDefined();
+    });
+
+    test('calls onError when place selection fails', async () => {
+      const onError = vi.fn();
+      const mockPlace = {
+        fetchFields: vi.fn().mockRejectedValue(new Error('Fetch Error')),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ onError });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith(expect.stringContaining('Fetch Error'));
+      });
+    });
+
+    test('handles missing API key gracefully', async () => {
+      const onError = vi.fn();
+
+      // This test verifies the component handles initialization properly
+      setupTest({ onError });
+
+      // Component should initialize without throwing
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
     });
   });
 
-  describe('Styling', () => {
-    it('has correct wrapper class', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-wrapper')).toBeDefined();
+  describe('Keyboard Hints', () => {
+    test('displays keyboard hints when results are visible', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      // Check for keyboard hints
+      const hints = container.querySelectorAll('kbd');
+      expect(hints.length).toBeGreaterThan(0);
     });
 
-    it('has correct container class', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-container')).toBeDefined();
+    test('does not display hints when no results', () => {
+      const { container } = setupTest();
+      const hints = container.querySelectorAll('kbd');
+      expect(hints.length).toBe(0);
     });
+  });
+
+  describe('Fetch Fields Configuration', () => {
+    test('uses default fetch fields', async () => {
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Test' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(mockPlace.fetchFields).toHaveBeenCalledWith({
+          fields: ['formattedAddress', 'addressComponents'],
+        });
+      });
+    });
+
+    test('uses custom fetch fields', async () => {
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Test' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ fetchFields: ['location', 'displayName'] });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
 
-    it('has correct input class', async () => {
-      const { container } = render(PlaceAutocomplete);
-      expect(container.querySelector('.place-input')).toBeDefined();
+      await waitFor(() => {
+        expect(mockPlace.fetchFields).toHaveBeenCalledWith({
+          fields: ['location', 'displayName'],
+        });
+      });
     });
+  });
 
-    it('applies animate focus class when enabled', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { animateFocus: true, disabled: false },
+  describe('Language and Region', () => {
+    test('uses default language and region', async () => {
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(mockAutocompleteSuggestion.fetchAutocompleteSuggestions).toHaveBeenCalledWith(
+          expect.objectContaining({
+            language: 'en-US',
+            region: 'US',
+          })
+        );
       });
-      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 },
+    test('uses custom language and region', async () => {
+      const { user } = setupTest({ language: 'es-ES', region: 'ES' });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(mockAutocompleteSuggestion.fetchAutocompleteSuggestions).toHaveBeenCalledWith(
+          expect.objectContaining({
+            language: 'es-ES',
+            region: 'ES',
+          })
+        );
       });
-      expect(container.querySelector('.place-animate-focus')).toBeNull();
     });
   });
 
-  describe('Mode: cityState', () => {
-    it('filters results to only localities', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { mode: 'cityState' },
+  describe('Input Styling', () => {
+    test('has correct base classes', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('block');
+      expect(input).toHaveClass('w-full');
+      expect(input).toHaveClass('rounded-lg');
+      expect(input).toHaveClass('bg-gray-50');
+      expect(input).toHaveClass('border');
+      expect(input).toHaveClass('border-gray-300');
+    });
+
+    test('has focus styles', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('focus:ring-blue-500');
+      expect(input).toHaveClass('focus:border-blue-500');
+    });
+
+    test('has hover styles', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveClass('hover:border-blue-500');
+    });
+
+    test('icon has correct positioning', () => {
+      const { container } = setupTest();
+      const iconContainer = container.querySelector('.pointer-events-none.absolute');
+      expect(iconContainer).toBeInTheDocument();
+      expect(iconContainer).toHaveClass('inset-y-0');
+      expect(iconContainer).toHaveClass('left-0');
+    });
+  });
+
+  describe('Results List Styling', () => {
+    test('results list has correct styling', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        const list = screen.getByRole('list');
+        expect(list).toHaveClass('absolute');
+        expect(list).toHaveClass('top-full');
+        expect(list).toHaveClass('rounded-lg');
+        expect(list).toHaveClass('shadow-lg');
+        expect(list).toHaveClass('bg-white');
       });
-      expect(container).toBeDefined();
     });
 
-    it('updates placeholder for cityState mode', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { mode: 'cityState' },
+    test('result items have hover styling', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        const listItem = container.querySelector('li');
+        expect(listItem).toHaveClass('cursor-pointer');
+        expect(listItem).toHaveClass('transition-colors');
       });
-      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 },
+  describe('Multiple Suggestions', () => {
+    test('displays all suggestions', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 1' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 2' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 3' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 4' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 5' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(5);
+      });
+    });
+
+    test('each suggestion has correct id attribute', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 1' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 2' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user, container } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(container.querySelector('#option-1')).toBeInTheDocument();
+        expect(container.querySelector('#option-2')).toBeInTheDocument();
       });
-      expect(container).toBeDefined();
     });
   });
 
-  describe('Click Outside', () => {
-    it('handles click outside to close dropdown', async () => {
-      const { container } = render(PlaceAutocomplete);
-      
-      // Simulate click outside
-      document.body.click();
-      
+  describe('Integration Tests', () => {
+    test('complete flow: type, navigate, select', async () => {
+      const onResponse = vi.fn();
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Final Selection', formattedAddress: '123 Main St' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 1' },
+            toPlace: () => mockPlace,
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Final Selection' },
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ onResponse });
+      const input = screen.getByRole('textbox');
+
+      // Type to get suggestions
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        expect(screen.getByRole('list')).toBeInTheDocument();
+      });
+
+      // Navigate down to second item
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+      await fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+      // Select with Enter
+      await fireEvent.keyDown(input, { key: 'Enter' });
+
       await waitFor(() => {
-        expect(container.querySelector('.place-dropdown')).toBeNull();
+        expect(onResponse).toHaveBeenCalledWith(
+          expect.objectContaining({ text: 'Final Selection' })
+        );
+        expect(input.value).toBe('Final Selection');
+        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+      });
+    });
+
+    test('complete flow with cityState mode', async () => {
+      const onResponse = vi.fn();
+      const mockPlace = {
+        fetchFields: vi.fn().mockResolvedValue({}),
+        toJSON: () => ({ text: 'Los Angeles, CA' }),
+      };
+
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Los Angeles, CA, USA' },
+            types: ['locality'],
+            toPlace: () => mockPlace,
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest({ mode: 'cityState', onResponse });
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Los Angeles');
+
+      await waitFor(() => {
+        expect(screen.getByText('Los Angeles, CA')).toBeInTheDocument();
+      });
+
+      const button = screen.getByRole('button');
+      await fireEvent.click(button);
+
+      await waitFor(() => {
+        expect(input.value).toBe('Los Angeles, CA');
+        expect(onResponse).toHaveBeenCalled();
       });
     });
   });
 
-  describe('Initial Value', () => {
-    it('sets initial value on mount', async () => {
-      const { container } = render(PlaceAutocomplete, {
-        props: { initialValue: 'San Francisco, CA' },
+  describe('Accessibility', () => {
+    test('input has aria-controls attribute', () => {
+      setupTest();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-controls', 'options');
+    });
+
+    test('results list has correct id', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Test Place' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
+      });
+
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        const list = screen.getByRole('list');
+        expect(list).toHaveAttribute('id', 'options');
       });
-      
-      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' },
+    test('suggestion buttons have correct tabindex', async () => {
+      const mockSuggestions = [
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 1' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+        {
+          placePrediction: {
+            text: { toString: () => 'Result 2' },
+            toPlace: () => ({ fetchFields: vi.fn() }),
+          },
+        },
+      ];
+
+      mockAutocompleteSuggestion.fetchAutocompleteSuggestions.mockResolvedValue({
+        suggestions: mockSuggestions,
       });
 
-      await rerender({ initialValue: 'Los Angeles, CA' });
-      
-      // Value should remain the initial value
-      const input = container.querySelector('input');
-      expect(input).toBeDefined();
+      const { user } = setupTest();
+      const input = screen.getByRole('textbox');
+
+      await user.type(input, 'Test');
+
+      await waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        expect(buttons[0]).toHaveAttribute('tabindex', '1');
+        expect(buttons[1]).toHaveAttribute('tabindex', '2');
+      });
     });
   });
 });