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

import OverlayHeader from '.';
import AvatarView from '../avatarView';

mockMatchMedia();

describe('OverlayHeader', () => {
  const props = {
    avatar: <AvatarView profileName="Tim Morris" />,
    logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
    onClose: jest.fn(),
  };

  it('renders separator only if avatar and onClose are provided', () => {
    const { container } = render(<OverlayHeader {...props} />);
    expect(container.querySelector('span.m-x-1')).toBeInTheDocument();
  });

  it("doesn't render separator if avatar or onClose are not provided", () => {
    const { container, rerender } = render(<OverlayHeader {...props} onClose={undefined} />);
    expect(container.querySelector('.separator')).not.toBeInTheDocument();
    rerender(<OverlayHeader {...props} avatar={null} />);
    expect(container.querySelector('.separator')).not.toBeInTheDocument();
  });
});