import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import PageNotFound from './PageNotFound.js';

describe('PageNotFound Component', () => {
  test('renders without crashing', () => {
    const { container } = render(<PageNotFound />);
    expect(container).toBeDefined();
  });

  test('displays page not found text', () => {
    render(<PageNotFound />);
    expect(screen.getByText('Page not found')).toBeInTheDocument();
  });

  test('renders error icon image', () => {
    render(<PageNotFound />);
    const image = screen.getByAltText('page not found');
    expect(image).toBeInTheDocument();
  });

  test('has correct container class', () => {
    const { container } = render(<PageNotFound />);
    expect(container.querySelector('.page-not-found')).toBeInTheDocument();
  });

  test('image has correct alt text', () => {
    render(<PageNotFound />);
    const image = screen.getByAltText('page not found');
    expect(image).toHaveAttribute('alt', 'page not found');
  });

  test('renders span with text', () => {
    const { container } = render(<PageNotFound />);
    const span = container.querySelector('span');
    expect(span).toBeInTheDocument();
    expect(span).toHaveTextContent('Page not found');
  });

  test('component structure has image and span', () => {
    const { container } = render(<PageNotFound />);
    const pageNotFound = container.querySelector('.page-not-found');
    const image = pageNotFound.querySelector('img');
    const span = pageNotFound.querySelector('span');
    expect(image).toBeInTheDocument();
    expect(span).toBeInTheDocument();
  });

  test('renders as a functional component', () => {
    const { container } = render(<PageNotFound />);
    expect(container.firstChild).not.toBeNull();
  });

  test('does not have any buttons', () => {
    const { container } = render(<PageNotFound />);
    const button = container.querySelector('button');
    expect(button).not.toBeInTheDocument();
  });

  test('image src is defined', () => {
    render(<PageNotFound />);
    const image = screen.getByAltText('page not found');
    expect(image).toHaveAttribute('src');
  });
});
