import { Search } from '@transferwise/icons';

import { Field } from '../field/Field';
import { mockResizeObserver, render, screen } from '../test-utils';
import { Input } from './Input';
import { InputGroup } from './InputGroup';
import Button from '../button';

mockResizeObserver();

describe('InputGroup', () => {
  it('supports `Field` for labeling', () => {
    render(
      <Field label="Search…">
        <InputGroup
          addonStart={{
            content: <Search size={24} />,
            initialContentWidth: 24,
          }}
          addonEnd={{
            content: <Button>Go</Button>,
            interactive: true,
          }}
        >
          <Input />
        </InputGroup>
      </Field>,
    );
    expect(screen.getByLabelText(/Search…/)).toHaveRole('textbox');
  });
});