import React from 'react';
import { customRender } from 'test-utils';
import Sidebar from '.';
import { SIDEBAR_WIDTH } from '../../styles/constants';

describe('<Sidebar>', () => {
  it('should render correctly', () => {
    const { container, getByText } = customRender(<Sidebar>Hello World</Sidebar>);
    const sidebarWrapper = container.firstChild;
    const children = getByText('Hello World');

    expect(sidebarWrapper).toHaveStyle(`
      width: ${SIDEBAR_WIDTH}px;
      background-color: #232a3b;
   `);
    expect(sidebarWrapper).toContainElement(children);
  });

  it('should allow to pass any props', () => {
    const { container } = customRender(<Sidebar data-foo="bar">Hello World</Sidebar>);

    expect(container.querySelector('[data-foo="bar"]')).toBeInTheDocument();
  });
});