import React from 'react';
import { render } from '@testing-library/react';
import 'jest-styled-components';

import { WidgetContainer } from '../styles';

describe('OptaFixturesTicker styles', () => {
  it('suppresses native tap highlight on fixture cards', () => {
    const { container } = render(<WidgetContainer />);
    const widgetContainer = container.firstChild;

    expect(widgetContainer).toHaveStyleRule(
      '-webkit-tap-highlight-color',
      'transparent',
      {
        modifier: '.Opta-fixture'
      }
    );
  });

  it('limits fixture hover backgrounds to hover-capable pointers', () => {
    const { container } = render(<WidgetContainer />);
    const widgetContainer = container.firstChild;

    expect(widgetContainer).toHaveStyleRule(
      'background-color',
      '#E4EDE8 !important',
      {
        modifier: '.Opta-fixture.Opta-result:hover > div',
        media: '(hover: hover) and (pointer: fine)'
      }
    );

    expect(widgetContainer).toHaveStyleRule(
      'background-color',
      '#016D38 !important',
      {
        modifier: '.Opta-fixture.Opta-result.fixture-selected:hover > div',
        media: '(hover: hover) and (pointer: fine)'
      }
    );

    expect(widgetContainer).not.toHaveStyleRule(
      'background-color',
      '#E4EDE8 !important',
      {
        modifier: '.Opta-fixture.Opta-result:hover > div'
      }
    );
  });
});