import { render, screen } from '@testing-library/react';
  import userEvent from '@testing-library/user-event';
  import App from './App';

  const BUTTON = 'button';
  const CHECKBOX = 'checkbox';

  test('button has correct initial color', () => {
    render(<App />);

    // Find an element with a role of button and text 'Change to blue'
    const colorButton = screen.getByRole(BUTTON, { name: 'Change to blue'})  // name = displayed text

    // Expect the background color to be red
    expect(colorButton).toHaveStyle({ backgroundColor: 'red'})

    // Click the button
    userEvent.click(colorButton);

    // Expect the background color to be blue
    expect(colorButton).toHaveStyle({ backgroundColor: 'blue'})

    // Expect the button text to be 'Change to red'
    expect(colorButton.toHaveTextContent).toBe('Change to red');
  });

  test('Initial conditions', () => {
    render(<App />);

    // Check that the button starts out enabled
    const colorButton = screen.getByRole(BUTTON, { name: 'Change to blue'});
    expect(colorButton).toBeEnabled();

    // Check that the checkbox starts unchecked
    const checkbox = screen.getByRole(CHECKBOX);
    expect(checkbox).not.toBeChecked();
  });

  test('Checkbox disables button on first click and enables on second click', () => {
    render(<App />);

    // Checks when checkbox is checked, button is disabled
    const checkbox = screen.getByRole(CHECKBOX, { name: 'Disable button' });
    const colorButton = screen.getByRole(BUTTON, { name: 'Change to blue' });

    userEvent.click(checkbox);
    expect(colorButton).toBeDisabled();

    // Checks when checkbox is unchecked, button is enabled
    userEvent.click(checkbox);
    expect(colorButton).toBeEnabled();
  });

  import { useState } from 'react';
  import './App.css';

  function App() {
    const [buttonDisabled, setButtonDisabled] = useState(false);
    const [buttonColor, setButtonColor] = useState('red');  
    const newButtonColor = buttonColor === 'red' ? 'blue' : 'red';

    return (
       <div>

         <div>
           <button 
            onClick={() => setButtonColor(newButtonColor)} 
            style={{backgroundColor: buttonColor}}
            disabled={buttonDisabled}
          >
            Change to {newButtonColor}
           </button>        
         </div>

         <div>
           <input 
            type="checkbox" 
            id="disable-button-checkbox"
            defaultChecked={buttonDisabled}
            aria-checked={buttonDisabled}   // used for screen readers
            onChange={(e) => setButtonDisabled(e.target.checked)} />
           <label htmlFor="disable-button-checkbox">Disable button </label>          
         </div>

       </div>
    );
  }

  export default App;

  // Group of tests
  describe('spaces before camel-case capital letters', () => {
    test('Works for no inner capital letters', () => {
      expect(replaceCamelWithSpaces('Red')).toBe('Red');
    });

    test('Works for one inner capital letter', () => {
      expect(replaceCamelWithSpaces('MidnightBlue')).toBe('Midnight Blue');
    });

    test('Works for multiple capital letters', () => {
      expect(replaceCamelWithSpaces('MediumVioletRed')).toBe('Medium Violet Red');
    });
  });

  export const replaceCamelWithSpaces = (colorName: string) => {
    return colorName.replace(/\B([A-Z])\B/g, ' $1'); // replace each capital letter in the middle of the word by space and the letter
    // Example: MediumVioletRed --> Medium Violet Red
  }