Repository: thenewboston-developers/Website
File: src/components/Tabs/Tabs.test.tsx (TypeScript)

Code before:
    expect(tabs).toHaveClass('Tabs');
  });

  test('renders with Download__latest-version', () => {
    render(<Tabs tabs={TestTabs} latestReleaseNumber={1} />);
    const version = screen.getByTestId('Download__latest-version');
    expect(version).toHaveClass('Download__latest-version');
    expect(screen.getByText('Latest Version: 1.0.0-alpha.1')).toBeTruthy();
  });

  test('renders active Tab', () => {
    render(<Tabs tabs={TestTabs} latestReleaseNumber={1} />);
    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[0]).toHaveClass('Tabs__tab');
    expect(tabs[0]).toHaveClass('Tabs__tab--active');
    expect(tabs[0]).toHaveTextContent('FirstTab');
  });

  test('renders secondary Tab', () => {
    render(<Tabs tabs={TestTabs} latestReleaseNumber={1} />);
    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[1]).toHaveClass('Tabs__tab');
    expect(tabs[1]).toHaveTextContent('SecondTab');
  });

  test('renders activeTab as lastTab', () => {
    render(<Tabs tabs={TestTabs} defaultTab={1} latestReleaseNumber={1} />);
    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[1]).toHaveClass('Tabs__tab');
    expect(tabs[1]).toHaveClass('Tabs__tab--active');
  });

  test('check firstTab is inActive if lastTab is Active', () => {
    render(<Tabs tabs={TestTabs} defaultTab={1} latestReleaseNumber={1} />);
    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[0]).toHaveClass('Tabs__tab');
    expect(tabs[0].classList.contains('Tabs__tab--active')).toBeFalsy();
  });

  test('check activeTab changes when selecting inactive SecondTab', () => {
    render(<Tabs tabs={TestTabs} latestReleaseNumber={1} />);
    const tabs = screen.getAllByTestId('Tabs__tab');

    expect(tabs[1]).toHaveTextContent('SecondTab');
    expect(tabs[1].classList.contains('Tabs__tab--active')).toBeFalsy();

    fireEvent.click(tabs[1]);

    expect(tabs[1]).toHaveClass('Tabs__tab--active');
  });
});

Review comment (bug):
Also, try to make these strings more meaningful. 

This could be "renders a different tab as active when defaultTab passed in". Something in this fashion.

This goes for all the tests. When running tests, if something fails, I should know immediately what went wrong. 

Also, try to use lowercase. Use camelCase when you are talking about a prop like -> className. 

Code after:
    expect(tabs).toBeTruthy();
  });

  test('renders with default className', () => {
    render(<Tabs {...baseProps} />);

    const tabs = screen.getByTestId('Tabs');
    expect(tabs).toHaveClass('Tabs');
  });

  test('renders latest version text correctly', () => {
    render(<Tabs {...baseProps} />);

    const version = screen.getByTestId('Download__latest-version');
    expect(version).toHaveClass('Download__latest-version');
    expect(version).toHaveTextContent('Latest Version: 1.0.0-alpha.1');
  });

  test('renders first tab as active by default', () => {
    render(<Tabs {...baseProps} />);

    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[0]).toHaveClass('Tabs__tab');
    expect(tabs[0]).toHaveClass('Tabs__tab--active');
    expect(tabs[0]).toHaveTextContent('FirstTab');
  });

  test('renders other tabs as inactive', () => {
    render(<Tabs {...baseProps} />);

    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[1]).toHaveClass('Tabs__tab');
    expect(tabs[1]).toHaveTextContent('SecondTab');
  });

  test('renders a defaultTab as active', () => {
    const props = {...baseProps, defaultTab: 1};
    render(<Tabs {...props} />);

    const tabs = screen.getAllByTestId('Tabs__tab');
    expect(tabs[1]).toHaveClass('Tabs__tab');
    expect(tabs[1]).toHaveClass('Tabs__tab--active');
    expect(tabs[0]).toHaveClass('Tabs__tab');
    expect(tabs[0]).not.toHaveClass('Tabs__tab--active');
  });

  test('renders selected tab as active when pressed', () => {
    render(<Tabs {...baseProps} />);
    const tabs = screen.getAllByTestId('Tabs__tab');

    expect(tabs[1]).toHaveTextContent('SecondTab');