import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { WidgetContainer } from '../WidgetContainer';

describe('OptaMatchStatsGraphs WidgetContainer styles', () => {
  it('renders default styles and structure', () => {
    const { container } = render(
      <WidgetContainer isApp={false}>
        <div className="Opta-Nav">
          <ul>
            <li>
              <a href="#">Tab 1</a>
            </li>
            <li className="Opta-On">
              <a href="#">Tab 2</a>
            </li>
          </ul>
        </div>
        <div className="Opta-Stats-Bars-Text">Shots</div>
        <div className="Opta-Stats-Bars">
          <table>
            <tbody>
              <tr>
                <td className="Opta-Outer Opta-Outer-bigger">H</td>
                <td>
                  <div className="Opta-Bars-Full">
                    <div
                      className="Opta-Percent Opta-Home"
                      style={{ width: '70%' }}
                    />
                    <div
                      className="Opta-Percent Opta-Away"
                      style={{ width: '30%' }}
                    />
                  </div>
                </td>
                <td className="Opta-Outer Opta-Outer-bigger">A</td>
              </tr>
            </tbody>
          </table>
        </div>
      </WidgetContainer>
    );
    expect(container.querySelector('.Opta-Nav')).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-Stats-Bars-Text')
    ).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-Percent.Opta-Home')
    ).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-Percent.Opta-Away')
    ).toBeInTheDocument();
    expect(
      container.querySelector('.Opta-Outer.Opta-Outer-bigger')
    ).toBeInTheDocument();
  });

  it('renders app styles supporting dark mode', () => {
    const { container } = render(
      <WidgetContainer isApp={true}>
        <div className="Opta-Cf Opta-js-main" />
        <div className="Opta-Nav">
          <ul>
            <li>
              <a href="#">Tab</a>
            </li>
          </ul>
        </div>
        <div className="Opta-Stats-Bars-Text">Passes</div>
        <div className="Opta-Stats-Bars">
          <table>
            <tbody>
              <tr>
                <td className="Opta-Outer Opta-Outer-bigger">H</td>
                <td>
                  <div className="Opta-Bars-Full">
                    <div
                      className="Opta-Percent Opta-Home"
                      style={{ width: '40%' }}
                    />
                    <div
                      className="Opta-Percent Opta-Away"
                      style={{ width: '60%' }}
                    />
                  </div>
                </td>
                <td className="Opta-Outer Opta-Outer-bigger">A</td>
              </tr>
            </tbody>
          </table>
        </div>
      </WidgetContainer>
    );

    expect(
      container.querySelector('.Opta-Cf.Opta-js-main')
    ).toBeInTheDocument();
    expect(container.querySelector('.Opta-Nav')).toBeInTheDocument();
    expect(container.querySelectorAll('.Opta-Percent').length).toBe(2);
    expect(
      container.querySelectorAll('.Opta-Outer.Opta-Outer-bigger').length
    ).toBe(2);
  });
});