import { screen } from '@testing-library/react'
import { Route, Routes } from 'react-router-dom'
import { describe, expect, it, vi } from 'vitest'

import MaterialBasePage from '@/pages/materials/MaterialBasePage'
import { renderWithProviders } from '@/test/render'

vi.mock ('@/components/MaterialSidebar', () => ({
  default: () => <aside>Material sidebar</aside>,
}))

describe ('MaterialBasePage', () => {
  it ('renders the material sidebar and nested route outlet', () => {
    renderWithProviders (
        <Routes>
          <Route path="/materials" element={<MaterialBasePage/>}>
            <Route index element={<div>Outlet content</div>}/>
          </Route>
        </Routes>,
        { route: '/materials' },
    )

    expect (screen.getByText ('Material sidebar')).toBeInTheDocument ()
    expect (screen.getByText ('Outlet content')).toBeInTheDocument ()
  })
})