flyer-crawler.projectium.com/src/providers/ApiProvider.test.tsx

// src/providers/ApiProvider.test.tsx
import React, { useContext } from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { ApiProvider } from './ApiProvider';
import { ApiContext } from '../contexts/ApiContext';
import * as apiClient from '../services/apiClient';

// The apiClient is mocked globally in `src/tests/setup/globalApiMock.ts`.
// This test verifies that the ApiProvider correctly provides this mocked module.

describe('ApiProvider & ApiContext', () => {
  const TestConsumer = () => {
    const contextValue = useContext(ApiContext);
    // We check if the context value is strictly equal to the imported module
    return (
      <div>
        <span data-testid="value-check">
          {contextValue === apiClient ? 'Matches apiClient' : 'Does not match'}
        </span>
      </div>
    );
  };

  it('renders children correctly', () => {
    render(
      <ApiProvider>
        <div data-testid="child">Child Content</div>
      </ApiProvider>
    );
    expect(screen.getByTestId('child')).toBeInTheDocument();
    expect(screen.getByText('Child Content')).toBeInTheDocument();
  });

  it('provides the apiClient module via context', () => {
    render(
      <ApiProvider>
        <TestConsumer />
      </ApiProvider>
    );
    expect(screen.getByTestId('value-check')).toHaveTextContent('Matches apiClient');
  });

  it('ApiContext has apiClient as the default value (when no provider is present)', () => {
    // This verifies the logic in ApiContext.tsx: createContext(apiClient)
    render(<TestConsumer />);
    expect(screen.getByTestId('value-check')).toHaveTextContent('Matches apiClient');
  });
});