@jmruthers/pace-core 0.5.186 → 0.5.188

package/src/components/AddressField/AddressField.test.tsx

@@ -0,0 +1,411 @@
+/**
+ * @file AddressField Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/AddressField/__tests__
+ * @since 0.1.0
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { AddressField } from './AddressField';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import * as googlePlacesUtils from '../../utils/google-places';
+
+// Mock scrollIntoView for tests
+Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+  value: vi.fn(),
+  writable: true,
+});
+
+// Mock the Google Places utilities
+vi.mock('../../utils/google-places', () => ({
+  fetchPlaceAutocomplete: vi.fn(),
+  fetchPlaceDetails: vi.fn(),
+  createAddressFromPlaceResult: vi.fn(),
+  getAddressByPlaceId: vi.fn(),
+}));
+
+// Mock useAddressAutocomplete hook
+vi.mock('../../hooks/useAddressAutocomplete', () => ({
+  useAddressAutocomplete: vi.fn(),
+}));
+
+import { useAddressAutocomplete } from '../../hooks/useAddressAutocomplete';
+
+describe('AddressField Component', () => {
+  const mockApiKey = 'test-api-key';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useAddressAutocomplete).mockReturnValue({
+      suggestions: [],
+      isLoading: false,
+      error: null,
+      selectAddress: vi.fn(),
+      getAddressByPlaceId: vi.fn(),
+      clearSuggestions: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<AddressField apiKey={mockApiKey} />);
+      const input = screen.getByRole('combobox');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('renders with placeholder', () => {
+      renderWithProviders(<AddressField apiKey={mockApiKey} placeholder="Enter address" />);
+      expect(screen.getByPlaceholderText('Enter address')).toBeInTheDocument();
+    });
+
+    it('renders with controlled value', () => {
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123 Main St" />);
+      expect(screen.getByDisplayValue('123 Main St')).toBeInTheDocument();
+    });
+
+    it('renders with defaultValue', () => {
+      renderWithProviders(<AddressField apiKey={mockApiKey} defaultValue="123 Main St" />);
+      expect(screen.getByDisplayValue('123 Main St')).toBeInTheDocument();
+    });
+
+    it('renders with error state', () => {
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: [],
+        isLoading: false,
+        error: new Error('API error'),
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} />);
+      expect(screen.getByText('API error')).toBeInTheDocument();
+    });
+
+    it('renders loading spinner when loading', () => {
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: [],
+        isLoading: true,
+        error: null,
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} />);
+      // Loading spinner should be present (check by test id or class)
+      const input = screen.getByRole('combobox');
+      expect(input).toBeInTheDocument();
+    });
+  });
+
+  describe('Input interactions', () => {
+    it('calls onInputChange when input value changes', async () => {
+      const user = userEvent.setup();
+      const onInputChange = vi.fn();
+
+      renderWithProviders(
+        <AddressField apiKey={mockApiKey} onInputChange={onInputChange} />
+      );
+
+      const input = screen.getByRole('combobox');
+      await user.type(input, '123 Main');
+
+      expect(onInputChange).toHaveBeenCalled();
+    });
+
+    it('handles focus and blur events', async () => {
+      const user = userEvent.setup();
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} />);
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+      expect(input).toHaveFocus();
+
+      await user.tab();
+      // Input should blur
+    });
+  });
+
+  describe('Suggestions display', () => {
+    it('displays suggestions when available', async () => {
+      const user = userEvent.setup();
+      const mockSuggestions = [
+        {
+          description: '123 Main St, Melbourne VIC, Australia',
+          place_id: 'ChIJ123',
+          structured_formatting: {
+            main_text: '123 Main St',
+            secondary_text: 'Melbourne VIC, Australia',
+          },
+        },
+        {
+          description: '456 High St, Melbourne VIC, Australia',
+          place_id: 'ChIJ456',
+          structured_formatting: {
+            main_text: '456 High St',
+            secondary_text: 'Melbourne VIC, Australia',
+          },
+        },
+      ];
+
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: mockSuggestions,
+        isLoading: false,
+        error: null,
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123 Main" />);
+
+      // Focus the input to trigger suggestions display
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+
+      await waitFor(
+        () => {
+          expect(screen.getByTestId('address-suggestions')).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
+
+      expect(screen.getByText('123 Main St')).toBeInTheDocument();
+      expect(screen.getByText('456 High St')).toBeInTheDocument();
+    });
+
+    it('hides suggestions when input is empty', () => {
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: [
+          { description: '123 Main St', place_id: 'ChIJ123' },
+        ],
+        isLoading: false,
+        error: null,
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="" />);
+
+      expect(screen.queryByTestId('address-suggestions')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Keyboard navigation', () => {
+    it('navigates suggestions with arrow keys', async () => {
+      const user = userEvent.setup();
+      const mockSuggestions = [
+        { description: '123 Main St', place_id: 'ChIJ123' },
+        { description: '456 High St', place_id: 'ChIJ456' },
+      ];
+
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: mockSuggestions,
+        isLoading: false,
+        error: null,
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123" />);
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('address-suggestions')).toBeInTheDocument();
+      });
+
+      // Press ArrowDown
+      await user.keyboard('{ArrowDown}');
+      const firstItem = screen.getByTestId('address-suggestion-0');
+      expect(firstItem).toHaveAttribute('aria-selected', 'true');
+
+      // Press ArrowDown again
+      await user.keyboard('{ArrowDown}');
+      const secondItem = screen.getByTestId('address-suggestion-1');
+      expect(secondItem).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('selects suggestion with Enter key', async () => {
+      const user = userEvent.setup();
+      const selectAddress = vi.fn().mockResolvedValue({
+        place_id: 'ChIJ123',
+        full_address: '123 Main St',
+        street_number: null,
+        route: null,
+        suburb: null,
+        state: null,
+        postcode: null,
+        country: null,
+        lat: null,
+        lng: null,
+      });
+
+      const mockSuggestions = [
+        { description: '123 Main St', place_id: 'ChIJ123' },
+      ];
+
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: mockSuggestions,
+        isLoading: false,
+        error: null,
+        selectAddress,
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123" />);
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('address-suggestions')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{ArrowDown}{Enter}');
+
+      expect(selectAddress).toHaveBeenCalledWith('ChIJ123');
+    });
+
+    it('closes suggestions with Escape key', async () => {
+      const user = userEvent.setup();
+      const mockSuggestions = [
+        { description: '123 Main St', place_id: 'ChIJ123' },
+      ];
+
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: mockSuggestions,
+        isLoading: false,
+        error: null,
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123" />);
+
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('address-suggestions')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('address-suggestions')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Address selection', () => {
+    it('calls onChange when address is selected', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      const selectAddress = vi.fn().mockResolvedValue({
+        place_id: 'ChIJ123',
+        full_address: '123 Main St, Melbourne VIC 3000, Australia',
+        street_number: '123',
+        route: 'Main Street',
+        suburb: 'Melbourne',
+        state: 'VIC',
+        postcode: '3000',
+        country: 'AU',
+        lat: -37.8136,
+        lng: 144.9631,
+      });
+
+      const mockSuggestions = [
+        { description: '123 Main St', place_id: 'ChIJ123' },
+      ];
+
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: mockSuggestions,
+        isLoading: false,
+        error: null,
+        selectAddress,
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123" onChange={onChange} />);
+
+      // Focus the input to trigger suggestions display
+      const input = screen.getByRole('combobox');
+      await user.click(input);
+
+      await waitFor(
+        () => {
+          expect(screen.getByTestId('address-suggestions')).toBeInTheDocument();
+        },
+        { timeout: 1000 }
+      );
+
+      const suggestion = screen.getByTestId('address-suggestion-0');
+      await user.click(suggestion);
+
+      await waitFor(() => {
+        expect(selectAddress).toHaveBeenCalledWith('ChIJ123');
+      });
+
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<AddressField apiKey={mockApiKey} />);
+
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+      expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+    });
+
+    it('updates aria-expanded when suggestions are open', async () => {
+      const mockSuggestions = [
+        { description: '123 Main St', place_id: 'ChIJ123' },
+      ];
+
+      vi.mocked(useAddressAutocomplete).mockReturnValue({
+        suggestions: mockSuggestions,
+        isLoading: false,
+        error: null,
+        selectAddress: vi.fn(),
+        getAddressByPlaceId: vi.fn(),
+        clearSuggestions: vi.fn(),
+      });
+
+      renderWithProviders(<AddressField apiKey={mockApiKey} value="123" />);
+
+      // Focus the input to trigger suggestions display
+      const input = screen.getByRole('combobox');
+      await userEvent.click(input);
+
+      await waitFor(
+        () => {
+          const inputElement = screen.getByRole('combobox');
+          expect(inputElement).toHaveAttribute('aria-expanded', 'true');
+        },
+        { timeout: 1000 }
+      );
+    });
+  });
+});
+