import React from 'react';
import { customRender } from 'test-utils';
import SidebarShopButton from '.';
import {
  COLOR_SIDEBAR_SECONDARY_BUTTON_BG,
  COLOR_SIDEBAR_SECONDARY_BUTTON_BG_ACTIVE,
} from '../../styles/constants';

describe('<SidebarShopButton />', () => {
  it('should render correctly', () => {
    // FIXME: add test cases for hover and active states
    const { container, getByText } = customRender(<SidebarShopButton>Children</SidebarShopButton>);
    const shopButton = container.firstChild;
    const children = getByText('Children');

    expect(shopButton).toHaveStyle(`
      color: #fff;
      background-color: ${COLOR_SIDEBAR_SECONDARY_BUTTON_BG};
    `);
    expect(shopButton).toContainElement(children);
  });

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

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

  describe('when passing active', () => {
    it('should render correctly', () => {
      const { container } = customRender(<SidebarShopButton active>Hello World</SidebarShopButton>);
      const shopButton = container.firstChild;

      expect(shopButton).toHaveStyle(
        `background-color: ${COLOR_SIDEBAR_SECONDARY_BUTTON_BG_ACTIVE}`,
      );
    });
  });
});