tesseract/categories/web/blob/react/src/components/FileSelectBox/FileSelectBox.test.tsx

import * as React from 'react';
import {
	render,
	screen,
	cleanup,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {
	vi,
	describe,
	it,
	expect,
	afterEach,
} from 'vitest';
import matchers from '@testing-library/jest-dom/matchers';
import {
	FileSelectBox,
	FileSelectBoxDerivedElement,
} from '.';

expect.extend(matchers);

describe('FileSelectBox', () => {
	afterEach(() => {
		cleanup();
	});

	it('renders a file input', () => {
		render(
			<FileSelectBox />,
		);

		const input = screen.getByTestId('input');
		expect(input).toBeInTheDocument();
	});

	it('renders a border', () => {
    render(
      <FileSelectBox
        border
      />,
    );
    const border = screen.getByTestId('border');
    expect(border).toBeInTheDocument();
  });

  it('renders a label', () => {
    render(
      <FileSelectBox
        label="foo"
      />,
    );
    const textbox = screen.getByLabelText('foo');
    expect(textbox).toBeInTheDocument();
    const label = screen.getByTestId('label');
    expect(label).toHaveTextContent('foo');
  });

  it('renders a hidden label', () => {
    render(
      <FileSelectBox
        label="foo"
        hiddenLabel
      />,
    );
    const textbox = screen.getByLabelText('foo');
    expect(textbox).toBeInTheDocument();
    const label = screen.queryByTestId('label');
    expect(label).toBeInTheDocument();
    expect(label).toHaveClass('sr-only');
  });

	describe('enhanced', () => {
		it('renders a hint', () => {
			render(
				<FileSelectBox
					enhanced
					hint="foo"
				/>,
			);
			const hint = screen.getByTestId('hint');
			expect(hint).toBeInTheDocument();
		});
	});
});