import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { jest } from '@jest/globals';
import ToggleBtn from '../components/ToggleBtn.js'; 

describe('ToggleBtn Component', () => {
  it('should render the button with "Show Today\'s Data" text when showLiveData is true', () => {
    render(<ToggleBtn showLiveData onToggleData={() => {}} disabled={false} />);
    const buttonElement = screen.getByRole('button', { name: "Show Today's Data" });
    expect(buttonElement).toBeInTheDocument();
  });

  it('should render the button with "Show Live Data" text when showLiveData is false', () => {
    render(<ToggleBtn showLiveData={false} onToggleData={() => {}} disabled={false} />);
    const buttonElement = screen.getByRole('button', { name: 'Show Live Data' });
    expect(buttonElement).toBeInTheDocument();
  });

  it('should call onToggleData when the button is clicked', () => {
    const mockToggle = jest.fn();
    render(<ToggleBtn showLiveData onToggleData={mockToggle} disabled={false} />);
    const buttonElement = screen.getByRole('button', { name: "Show Today's Data" });
    fireEvent.click(buttonElement);
    expect(mockToggle).toHaveBeenCalledTimes(1);
  });

  it('should disable the button when disabled prop is true', () => {
    render(<ToggleBtn showLiveData={false} onToggleData={() => {}} disabled />);
    const buttonElement = screen.getByRole('button', { name: 'Show Live Data' });
    expect(buttonElement).toBeDisabled();
  });

  it('should enable the button when disabled prop is false', () => {
    render(<ToggleBtn showLiveData={false} onToggleData={() => {}} disabled={false} />);
    const buttonElement = screen.getByRole('button', { name: 'Show Live Data' });
    expect(buttonElement).toBeEnabled();
  });
});
