@jmruthers/pace-core 0.5.1 → 0.5.3

package/src/components/OrganisationSelector/OrganisationSelector.test.tsx

@@ -0,0 +1,748 @@
+/**
+ * @file OrganisationSelector Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/OrganisationSelector
+ * @since 0.4.0
+ *
+ * Comprehensive test suite for the OrganisationSelector component covering all functionality,
+ * RBAC behavior, error handling, and accessibility features.
+ */
+
+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 { OrganisationSelector, OrganisationSelectorProps } from './OrganisationSelector';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import type { Organisation } from '../../types/organisation';
+
+// Mock the useOrganisations hook
+const mockUseOrganisations = vi.fn();
+vi.mock('../../providers/OrganisationProvider', () => ({
+  useOrganisations: () => mockUseOrganisations(),
+}));
+
+// Mock child components
+let mockOnValueChange: ((value: string) => void) | null = null;
+
+vi.mock('../Select', () => ({
+  Select: ({ children, value, onValueChange, disabled }: any) => {
+    // Store the onValueChange callback for SelectItem to use
+    mockOnValueChange = onValueChange;
+    return (
+      <div data-testid="select" data-value={value} data-disabled={disabled}>
+        {children}
+      </div>
+    );
+  },
+  SelectContent: ({ children }: any) => (
+    <div data-testid="select-content">{children}</div>
+  ),
+  SelectItem: ({ children, value, disabled, className }: any) => (
+    <div 
+      data-testid={`select-item-${value}`} 
+      data-disabled={disabled}
+      className={className}
+      onClick={() => !disabled && mockOnValueChange?.(value)}
+    >
+      {children}
+    </div>
+  ),
+  SelectTrigger: ({ children, className }: any) => (
+    <button data-testid="select-trigger" className={className}>
+      {children}
+    </button>
+  ),
+  SelectValue: ({ placeholder }: any) => (
+    <span data-testid="select-value">{placeholder}</span>
+  ),
+}));
+
+vi.mock('../Alert/Alert', () => ({
+  Alert: ({ children, variant }: any) => (
+    <div data-testid="alert" data-variant={variant}>
+      {children}
+    </div>
+  ),
+  AlertDescription: ({ children }: any) => (
+    <div data-testid="alert-description">{children}</div>
+  ),
+}));
+
+vi.mock('../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, variant, size, className }: any) => (
+    <button 
+      data-testid="button" 
+      onClick={onClick} 
+      disabled={disabled}
+      data-variant={variant}
+      data-size={size}
+      className={className}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('../LoadingSpinner/LoadingSpinner', () => ({
+  LoadingSpinner: ({ size }: any) => (
+    <div data-testid="loading-spinner" data-size={size}>Loading...</div>
+  ),
+}));
+
+// Test data
+const mockOrganisations: Organisation[] = [
+  {
+    id: 'org-1',
+    name: 'acme-corp',
+    display_name: 'Acme Corporation',
+    description: 'Leading technology company',
+    subscription_tier: 'premium',
+    settings: {},
+    is_active: true,
+    created_at: '2023-01-01T00:00:00Z',
+    updated_at: '2023-01-01T00:00:00Z',
+  },
+  {
+    id: 'org-2',
+    name: 'beta-inc',
+    display_name: 'Beta Inc',
+    description: 'Innovation focused startup',
+    subscription_tier: 'standard',
+    settings: {},
+    is_active: true,
+    created_at: '2023-01-02T00:00:00Z',
+    updated_at: '2023-01-02T00:00:00Z',
+  },
+  {
+    id: 'org-3',
+    name: 'gamma-ltd',
+    display_name: 'Gamma Ltd',
+    description: 'Global enterprise solutions',
+    subscription_tier: 'enterprise',
+    settings: {},
+    is_active: true,
+    created_at: '2023-01-03T00:00:00Z',
+    updated_at: '2023-01-03T00:00:00Z',
+  },
+];
+
+const mockSelectedOrganisation = mockOrganisations[0];
+
+const defaultMockContext = {
+  organisations: mockOrganisations,
+  selectedOrganisation: mockSelectedOrganisation,
+  isLoading: false,
+  error: null,
+  switchOrganisation: vi.fn().mockResolvedValue(undefined),
+  getUserRole: vi.fn().mockReturnValue('admin'),
+  validateOrganisationAccess: vi.fn().mockReturnValue(true),
+  refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+};
+
+describe('OrganisationSelector Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseOrganisations.mockReturnValue(defaultMockContext);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+      expect(screen.getByTestId('select-value')).toHaveTextContent('Select organisation');
+    });
+
+    it('renders with custom placeholder', () => {
+      renderWithProviders(<OrganisationSelector placeholder="Choose organisation..." />);
+      
+      expect(screen.getByTestId('select-value')).toHaveTextContent('Choose organisation...');
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<OrganisationSelector className="custom-selector" />);
+      
+      const container = screen.getByTestId('select').parentElement;
+      expect(container).toHaveClass('custom-selector');
+    });
+
+    it('renders with proper DOM structure', () => {
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+  });
+
+  // Loading state tests
+  describe('Loading State', () => {
+    it('renders loading state when organisations are loading', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        isLoading: true,
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.getByText('Loading organisations...')).toBeInTheDocument();
+    });
+
+    it('renders compact loading state', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        isLoading: true,
+      });
+
+      renderWithProviders(<OrganisationSelector compact={true} />);
+      
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.getAllByText('Loading...')).toHaveLength(2); // Spinner + text
+    });
+
+    it('shows loading spinner in trigger when switching organisations', () => {
+      // Test the loading state directly by mocking the loading state
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        isLoading: true,
+      });
+      
+      renderWithProviders(<OrganisationSelector />);
+      
+      // Should show loading state
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    });
+  });
+
+  // Error state tests
+  describe('Error State', () => {
+    it('renders error state when organisations fail to load', () => {
+      const error = new Error('Failed to load organisations');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('Failed to load organisations: Failed to load organisations');
+    });
+
+    it('shows retry button when showRetryButton is true', () => {
+      const error = new Error('Failed to load organisations');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector showRetryButton={true} />);
+      
+      expect(screen.getByTestId('button')).toBeInTheDocument();
+      expect(screen.getByTestId('button')).toHaveTextContent('Retry');
+    });
+
+    it('does not show retry button when showRetryButton is false', () => {
+      const error = new Error('Failed to load organisations');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector showRetryButton={false} />);
+      
+      expect(screen.queryByTestId('button')).not.toBeInTheDocument();
+    });
+
+    it('handles retry button click', async () => {
+      const user = userEvent.setup();
+      const refreshOrganisations = vi.fn().mockResolvedValue(undefined);
+      
+      const error = new Error('Failed to load organisations');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+        refreshOrganisations,
+      });
+
+      renderWithProviders(<OrganisationSelector showRetryButton={true} />);
+      
+      const retryButton = screen.getByTestId('button');
+      await user.click(retryButton);
+      
+      expect(refreshOrganisations).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // Empty state tests
+  describe('Empty State', () => {
+    it('renders no organisations message when showNoOrganisationsMessage is true', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector showNoOrganisationsMessage={true} />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('No organisations available. Please contact your administrator to be added to an organisation.');
+    });
+
+    it('shows check again button when no organisations and showRetryButton is true', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector showRetryButton={true} />);
+      
+      expect(screen.getByTestId('button')).toBeInTheDocument();
+      expect(screen.getByTestId('button')).toHaveTextContent('Check Again');
+    });
+
+    it('returns null when no organisations and showNoOrganisationsMessage is false', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        organisations: [],
+      });
+
+      const { container } = renderWithProviders(<OrganisationSelector showNoOrganisationsMessage={false} />);
+      
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  // Organisation switching tests
+  describe('Organisation Switching', () => {
+    it('renders all available organisations', () => {
+      renderWithProviders(<OrganisationSelector />);
+      
+      mockOrganisations.forEach(org => {
+        expect(screen.getByTestId(`select-item-${org.id}`)).toBeInTheDocument();
+      });
+    });
+
+    it('displays organisation names and descriptions', () => {
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByText('Acme Corporation')).toBeInTheDocument();
+      expect(screen.getByText('Leading technology company')).toBeInTheDocument();
+      expect(screen.getByText('Beta Inc')).toBeInTheDocument();
+      expect(screen.getByText('Innovation focused startup')).toBeInTheDocument();
+    });
+
+    it('handles organisation selection', async () => {
+      const user = userEvent.setup();
+      const onOrganisationChange = vi.fn();
+      const switchOrganisation = vi.fn().mockResolvedValue(undefined);
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        switchOrganisation,
+      });
+
+      renderWithProviders(
+        <OrganisationSelector onOrganisationChange={onOrganisationChange} />
+      );
+      
+      const selectItem = screen.getByTestId('select-item-org-2');
+      await user.click(selectItem);
+      
+      expect(switchOrganisation).toHaveBeenCalledWith('org-2');
+    });
+
+    it('calls onOrganisationChange callback after successful switch', async () => {
+      const user = userEvent.setup();
+      const onOrganisationChange = vi.fn();
+      const switchOrganisation = vi.fn().mockResolvedValue(undefined);
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        switchOrganisation,
+      });
+
+      renderWithProviders(
+        <OrganisationSelector onOrganisationChange={onOrganisationChange} />
+      );
+      
+      const selectItem = screen.getByTestId('select-item-org-2');
+      await user.click(selectItem);
+      
+      await waitFor(() => {
+        expect(onOrganisationChange).toHaveBeenCalledWith(mockOrganisations[1]);
+      });
+    });
+
+    it('handles organisation switch errors', () => {
+      // Test error state directly by mocking an error
+      const error = new Error('Access denied');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('Failed to load organisations: Access denied');
+    });
+
+    it('validates organisation access before switching', async () => {
+      const user = userEvent.setup();
+      const validateOrganisationAccess = vi.fn().mockReturnValue(false);
+      const switchOrganisation = vi.fn();
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        validateOrganisationAccess,
+        switchOrganisation,
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      const selectItem = screen.getByTestId('select-item-org-2');
+      await user.click(selectItem);
+      
+      expect(validateOrganisationAccess).toHaveBeenCalledWith('org-2');
+      expect(switchOrganisation).not.toHaveBeenCalled();
+    });
+  });
+
+  // RBAC and permission tests
+  describe('RBAC and Permissions', () => {
+    it('disables organisations without access', () => {
+      const validateOrganisationAccess = vi.fn((orgId: string) => orgId !== 'org-2');
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        validateOrganisationAccess,
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('select-item-org-1')).not.toHaveAttribute('data-disabled', 'true');
+      expect(screen.getByTestId('select-item-org-2')).toHaveAttribute('data-disabled', 'true');
+      expect(screen.getByTestId('select-item-org-3')).not.toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('shows user role when showRole is true', () => {
+      const getUserRole = vi.fn().mockReturnValue('admin');
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        getUserRole,
+      });
+
+      renderWithProviders(<OrganisationSelector showRole={true} />);
+      
+      // The role should be displayed in the select items
+      expect(screen.getAllByText('admin')).toHaveLength(3);
+    });
+
+    it('does not show role when showRole is false', () => {
+      const getUserRole = vi.fn().mockReturnValue('admin');
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        getUserRole,
+      });
+
+      renderWithProviders(<OrganisationSelector showRole={false} />);
+      
+      expect(screen.queryByText('admin')).not.toBeInTheDocument();
+    });
+
+    it('formats role names correctly', () => {
+      const getUserRole = vi.fn().mockReturnValue('super_admin');
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        getUserRole,
+      });
+
+      renderWithProviders(<OrganisationSelector showRole={true} />);
+      
+      expect(screen.getAllByText('super admin')).toHaveLength(3);
+    });
+  });
+
+  // Compact mode tests
+  describe('Compact Mode', () => {
+    it('hides descriptions in compact mode', () => {
+      renderWithProviders(<OrganisationSelector compact={true} />);
+      
+      expect(screen.queryByText('Leading technology company')).not.toBeInTheDocument();
+      expect(screen.queryByText('Innovation focused startup')).not.toBeInTheDocument();
+    });
+
+    it('shows descriptions when not in compact mode', () => {
+      renderWithProviders(<OrganisationSelector compact={false} />);
+      
+      expect(screen.getByText('Leading technology company')).toBeInTheDocument();
+      expect(screen.getByText('Innovation focused startup')).toBeInTheDocument();
+    });
+  });
+
+  // Disabled state tests
+  describe('Disabled State', () => {
+    it('disables the selector when disabled prop is true', () => {
+      renderWithProviders(<OrganisationSelector disabled={true} />);
+      
+      expect(screen.getByTestId('select')).toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('enables the selector when disabled prop is false', () => {
+      renderWithProviders(<OrganisationSelector disabled={false} />);
+      
+      expect(screen.getByTestId('select')).toHaveAttribute('data-disabled', 'false');
+    });
+
+    it('disables selector during loading', () => {
+      // Test the disabled state directly by mocking the loading state
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        isLoading: true,
+      });
+      
+      renderWithProviders(<OrganisationSelector />);
+      
+      // Should show loading state instead of selector
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<OrganisationSelector />);
+      
+      const select = screen.getByTestId('select');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('provides screen reader accessible content', () => {
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByText('Acme Corporation')).toBeInTheDocument();
+      expect(screen.getByText('Beta Inc')).toBeInTheDocument();
+    });
+
+    it('shows loading state to screen readers', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        isLoading: true,
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.getByText('Loading organisations...')).toBeInTheDocument();
+    });
+
+    it('announces errors to screen readers', () => {
+      const error = new Error('Failed to load organisations');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('Failed to load organisations: Failed to load organisations');
+    });
+  });
+
+  // Error handling tests
+  describe('Error Handling', () => {
+    it('handles switch errors gracefully', () => {
+      // Test error state directly by mocking an error
+      const error = new Error('Network error');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('Failed to load organisations: Network error');
+    });
+
+    it('handles retry errors gracefully', () => {
+      // Test error state directly by mocking an error
+      const error = new Error('Retry failed');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector showRetryButton={true} />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('Failed to load organisations: Retry failed');
+    });
+
+    it('clears errors on successful retry', async () => {
+      const user = userEvent.setup();
+      const refreshOrganisations = vi.fn().mockResolvedValue(undefined);
+      
+      const error = new Error('Failed to load organisations');
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        error,
+        organisations: [],
+        refreshOrganisations,
+      });
+
+      renderWithProviders(<OrganisationSelector showRetryButton={true} />);
+      
+      const retryButton = screen.getByTestId('button');
+      await user.click(retryButton);
+      
+      await waitFor(() => {
+        expect(refreshOrganisations).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  // Edge cases and prop validation tests
+  describe('Edge Cases and Prop Validation', () => {
+    it('handles empty organisations array', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        organisations: [],
+      });
+
+      renderWithProviders(<OrganisationSelector showNoOrganisationsMessage={true} />);
+      
+      expect(screen.getByTestId('alert')).toBeInTheDocument();
+      expect(screen.getByTestId('alert-description')).toHaveTextContent('No organisations available');
+    });
+
+    it('handles undefined onOrganisationChange callback', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(<OrganisationSelector />);
+      
+      const selectItem = screen.getByTestId('select-item-org-2');
+      await user.click(selectItem);
+      
+      // Should not throw error
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+
+    it('handles null selectedOrganisation gracefully', () => {
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        selectedOrganisation: null,
+        isLoading: true, // This should trigger loading state
+      });
+
+      // This should render the loading state instead of crashing
+      renderWithProviders(<OrganisationSelector />);
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    });
+
+    it('handles very long organisation names', () => {
+      const longNameOrg = {
+        ...mockOrganisations[0],
+        display_name: 'A'.repeat(1000),
+      };
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        organisations: [longNameOrg],
+      });
+
+      renderWithProviders(<OrganisationSelector />);
+      
+      expect(screen.getByText(longNameOrg.display_name)).toBeInTheDocument();
+    });
+  });
+
+  // Performance tests
+  describe('Performance', () => {
+    it('renders quickly with many organisations', () => {
+      const manyOrgs = Array.from({ length: 100 }, (_, i) => ({
+        ...mockOrganisations[0],
+        id: `org-${i}`,
+        display_name: `Organisation ${i}`,
+      }));
+      
+      mockUseOrganisations.mockReturnValue({
+        ...defaultMockContext,
+        organisations: manyOrgs,
+      });
+
+      const startTime = performance.now();
+      renderWithProviders(<OrganisationSelector />);
+      const endTime = performance.now();
+      
+      expect(endTime - startTime).toBeLessThan(100); // Should render in under 100ms
+    });
+
+    it('handles rapid organisation switches', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(<OrganisationSelector />);
+      
+      // Rapid switches
+      for (let i = 0; i < 5; i++) {
+        const selectItem = screen.getByTestId(`select-item-org-${(i % 3) + 1}`);
+        await user.click(selectItem);
+      }
+      
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+  });
+
+  // Integration tests
+  describe('Integration Scenarios', () => {
+    it('works with all props enabled', () => {
+      renderWithProviders(
+        <OrganisationSelector
+          placeholder="Choose organisation..."
+          className="custom-class"
+          showRole={true}
+          compact={false}
+          showRetryButton={true}
+          showNoOrganisationsMessage={true}
+          disabled={false}
+        />
+      );
+      
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+      expect(screen.getByText('Choose organisation...')).toBeInTheDocument();
+    });
+
+    it('works in minimal configuration', () => {
+      renderWithProviders(
+        <OrganisationSelector
+          showRole={false}
+          compact={true}
+          showRetryButton={false}
+          showNoOrganisationsMessage={false}
+        />
+      );
+      
+      expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+  });
+});