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

describe('<SidebarDropdownButton />', () => {
  it('should render correctly', () => {
    // FIXME: add test cases for hover and active states
    const { container, getByText } = customRender(
      <SidebarDropdownButton>Hello World</SidebarDropdownButton>,
    );
    const shopButton = container.firstChild;
    const buttonText = getByText('Hello World');
    const chevronIcon = container.querySelector('[class*="cr-icon"]');

    expect(shopButton).toHaveStyle(`
      color: #fff;
      background-color: transparent;
    `);
    expect(shopButton).toContainElement(buttonText);
    // @ts-ignore
    expect(shopButton).toContainElement(chevronIcon);
  });

  it('should allow to pass ref', () => {
    const spy = jest.fn();
    const { container } = customRender(
      <SidebarDropdownButton ref={spy}>Hello World</SidebarDropdownButton>,
    );
    const dropdownBtn = container.firstChild;

    expect(spy).toHaveBeenCalledTimes(1);
    expect(spy).toHaveBeenCalledWith(dropdownBtn);
  });

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

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

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

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