import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

const App = () => {
  const [apiResponse, setApiResponse] = useState('Loading...');
  const [showModal, setShowModal] = useState(false);

  // Function to handle API call and show modal
  const handleButtonClick = async () => {
    setShowModal(true); // Open modal
    setApiResponse('Loading...'); // Reset modal content

    try {
      // Example API call
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      const data = await response.json();
      setApiResponse(JSON.stringify(data, null, 2)); // Update modal with API response
    } catch (error) {
      setApiResponse('Error fetching data: ' + error.message); // Handle errors
    }
  };

  return (
    <div className="container mt-5">
      {/* Button to trigger API call and open modal */}
      <button className="btn btn-primary" onClick={handleButtonClick}>
        Make API Call and Open Modal
      </button>

      {/* Modal Dialog */}
      {showModal && (
        <div className="modal show d-block" tabIndex="-1">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">API Response</h5>
                <button
                  type="button"
                  className="btn-close"
                  onClick={() => setShowModal(false)}
                ></button>
              </div>
              <div className="modal-body">
                <pre>{apiResponse}</pre>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  onClick={() => setShowModal(false)}
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Dashboard from './Dashboard';

// Mock child components
jest.mock('./Modules/ReportGenerator', () => () => <div data-testid="ReportGenerator">Report Generator</div>);
jest.mock('./Modules/ActivateProperties', () => () => <div data-testid="ActivateProperties">Activate Properties</div>);
jest.mock('./Modules/Reservations', () => () => <div data-testid="Reservations">Reservations</div>);
jest.mock('./Layout/Header', () => () => <div data-testid="Header">Header</div>);
jest.mock('./Layout/Footer', () => () => <div data-testid="Footer">Footer</div>);

describe('Dashboard Component', () => {
  beforeEach(() => {
    // Ensure a fresh render for every test
    render(<Dashboard />);
  });

  it('renders the default dashboard view', () => {
    // Verify that the default view renders correctly
    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
    expect(screen.getByText(/See below features/i)).toBeInTheDocument();
  });

  it('renders the ReportGenerator component when the card is clicked', () => {
    const reportCard = screen.getByText(/Report Generator/i); // Replace with the correct card label
    fireEvent.click(reportCard);
    expect(screen.getByTestId('ReportGenerator')).toBeInTheDocument();
  });

  it('renders the ActivateProperties component when the card is clicked', () => {
    const propertiesCard = screen.getByText(/Activate Properties/i); // Replace with the correct card label
    fireEvent.click(propertiesCard);
    expect(screen.getByTestId('ActivateProperties')).toBeInTheDocument();
  });

  it('renders the Reservations component when the card is clicked', () => {
    const reservationsCard = screen.getByText(/Reservations/i); // Replace with the correct card label
    fireEvent.click(reservationsCard);
    expect(screen.getByTestId('Reservations')).toBeInTheDocument();
  });

  it('navigates back to the default dashboard view from ReportGenerator', () => {
    const reportCard = screen.getByText(/Report Generator/i); // Replace with the correct card label
    fireEvent.click(reportCard);
    expect(screen.getByTestId('ReportGenerator')).toBeInTheDocument();

    const backButton = screen.getByText(/Back/i); // Replace with the correct back button text
    fireEvent.click(backButton);
    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
  });

  it('navigates back to the default dashboard view from ActivateProperties', () => {
    const propertiesCard = screen.getByText(/Activate Properties/i); // Replace with the correct card label
    fireEvent.click(propertiesCard);
    expect(screen.getByTestId('ActivateProperties')).toBeInTheDocument();

    const backButton = screen.getByText(/Back/i); // Replace with the correct back button text
    fireEvent.click(backButton);
    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
  });

  it('renders a fallback component or the default dashboard view for an invalid active component', () => {
    // Directly set an invalid active component ID if possible
    render(
      <Dashboard activeComponent="invalid" /> // Replace with logic for setting invalid state
    );

    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
  });

  it('handles null or undefined activeComponent gracefully', () => {
    render(<Dashboard activeComponent={null} />);
    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
  });

  it('renders Header and Footer components', () => {
    expect(screen.getByTestId('Header')).toBeInTheDocument();
    expect(screen.getByTestId('Footer')).toBeInTheDocument();
  });
});


import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Dashboard from './Dashboard';

// Mock child components
jest.mock('./Modules/ReportGenerator', () => () => <div data-testid="ReportGenerator">Report Generator</div>);
jest.mock('./Modules/ActivateProperties', () => () => <div data-testid="ActivateProperties">Activate Properties</div>);
jest.mock('./Modules/Reservations', () => () => <div data-testid="Reservations">Reservations</div>);
jest.mock('./Layout/Header', () => () => <div data-testid="Header">Header</div>);
jest.mock('./Layout/Footer', () => () => <div data-testid="Footer">Footer</div>);

describe('Dashboard Component', () => {
  it('renders the default dashboard view', () => {
    render(<Dashboard />);
    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
    expect(screen.getByText(/See below features/i)).toBeInTheDocument();
  });

  it('renders the ReportGenerator component when its card is clicked', () => {
    render(<Dashboard />);
    const card = screen.getByText(/Report Generator/i); // Replace with the actual card name
    fireEvent.click(card);
    expect(screen.getByTestId('ReportGenerator')).toBeInTheDocument();
  });

  it('renders the ActivateProperties component when its card is clicked', () => {
    render(<Dashboard />);
    const card = screen.getByText(/Activate Properties/i); // Replace with the actual card name
    fireEvent.click(card);
    expect(screen.getByTestId('ActivateProperties')).toBeInTheDocument();
  });

  it('renders the Reservations component when its card is clicked', () => {
    render(<Dashboard />);
    const card = screen.getByText(/Reservations/i); // Replace with the actual card name
    fireEvent.click(card);
    expect(screen.getByTestId('Reservations')).toBeInTheDocument();
  });

  it('navigates back to the dashboard view when the back button is clicked', () => {
    render(<Dashboard />);
    const card = screen.getByText(/Activate Properties/i); // Replace with the actual card name
    fireEvent.click(card);
    const backButton = screen.getByText(/Back/i); // Replace with the actual back button text
    fireEvent.click(backButton);
    expect(screen.getByText(/Select Homes & Retreats Utility Tool/i)).toBeInTheDocument();
  });
});