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

// src/providers/AppProviders.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { AppProviders } from './AppProviders';

// Mock all the providers to avoid their side effects and isolate AppProviders logic.
// We render a simple div with a data-testid for each to verify nesting.
vi.mock('./ModalProvider', () => ({
  ModalProvider: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="modal-provider">{children}</div>
  ),
}));

vi.mock('./AuthProvider', () => ({
  AuthProvider: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="auth-provider">{children}</div>
  ),
}));

vi.mock('./FlyersProvider', () => ({
  FlyersProvider: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="flyers-provider">{children}</div>
  ),
}));

vi.mock('./MasterItemsProvider', () => ({
  MasterItemsProvider: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="master-items-provider">{children}</div>
  ),
}));

vi.mock('./UserDataProvider', () => ({
  UserDataProvider: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="user-data-provider">{children}</div>
  ),
}));

describe('AppProviders', () => {
  it('renders children correctly', () => {
    render(
      <AppProviders>
        <div data-testid="test-child">Test Child</div>
      </AppProviders>,
    );

    expect(screen.getByTestId('test-child')).toBeInTheDocument();
    expect(screen.getByText('Test Child')).toBeInTheDocument();
  });

  it('renders providers in the correct nesting order', () => {
    render(
      <AppProviders>
        <div data-testid="test-child">Test Child</div>
      </AppProviders>,
    );

    const modalProvider = screen.getByTestId('modal-provider');
    const authProvider = screen.getByTestId('auth-provider');
    const flyersProvider = screen.getByTestId('flyers-provider');
    const masterItemsProvider = screen.getByTestId('master-items-provider');
    const userDataProvider = screen.getByTestId('user-data-provider');
    const child = screen.getByTestId('test-child');

    // Verify nesting structure: Modal -> Auth -> Flyers -> MasterItems -> UserData -> Child
    expect(modalProvider).toContainElement(authProvider);
    expect(authProvider).toContainElement(flyersProvider);
    expect(flyersProvider).toContainElement(masterItemsProvider);
    expect(masterItemsProvider).toContainElement(userDataProvider);
    expect(userDataProvider).toContainElement(child);
  });
});