import React from 'react';
import { render, cleanup } from '@testing-library/react';

import Tab from './tab';

describe('Tab component', () => {
  test(' activeTab and tabId have not same props', () => {
    const { container, getByText } = render(<Tab label="test" activeTab="2" tabId="3" />);
    expect(getByText('test')).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(1);
    expect(container.querySelectorAll('button')).toHaveLength(1);
  });

  test('activeTab and  tabId have same props', () => {
    const { container, getByText } = render(<Tab label="test2" activeTab="2" tabId="2" />);
    expect(getByText('test2'));
    expect(container.querySelector('button')).toHaveAttribute(
      'class',
      ' active  tabs-menu-gtm btn-cta'
    );
    expect(container.querySelectorAll('li')).toHaveLength(1);
    expect(container.querySelectorAll('button')).toHaveLength(1);
  });

  test('activeTab and  tabId have same props and active class name', () => {
    const { container, getByText } = render(
      <Tab label="test3" activeTab="2" tabId="2" activeTabClass="activeTabClassTest" />
    );
    expect(getByText('test3'));
    expect(container.querySelector('button')).toHaveAttribute(
      'class',
      ' activeTabClassTest  tabs-menu-gtm btn-cta'
    );
    expect(container.querySelectorAll('li')).toHaveLength(1);
    expect(container.querySelectorAll('button')).toHaveLength(1);
  });
});

afterEach(() => {
  cleanup();
});
