import { render, screen } from '../test-utils';
import Container from '.';

describe('Container', () => {
  const childText = 'container-child';

  const renderContainer = (props = {}) => render(<Container {...props}>{childText}</Container>);

  it('renders as a div by default', () => {
    renderContainer();
    expect(screen.getByText(childText).tagName).toBe('DIV');
  });

  it('applies the standard size class by default', () => {
    renderContainer();
    expect(screen.getByText(childText)).toHaveClass('wds-container--standard');
  });

  it.each(['fluid', 'standard', 'narrow', 'compact'] as const)(
    'applies the %s size class',
    (size) => {
      renderContainer({ size });
      expect(screen.getByText(childText)).toHaveClass(`wds-container--${size}`);
    },
  );

  it('renders as a custom element via the as prop', () => {
    renderContainer({ as: 'section' });
    expect(screen.getByText(childText).tagName).toBe('SECTION');
  });

  it('passes additional props to the element', () => {
    renderContainer({ 'data-testid': 'my-container', id: 'test-id' });
    const el = screen.getByTestId('my-container');
    expect(el).toHaveAttribute('id', 'test-id');
  });
});
