SettingCard.test.jsx

import { fireEvent, render, waitFor, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { IntlProvider } from '@edx/frontend-platform/i18n';

import SettingCard from './SettingCard';
import messages from './messages';

const setEdited = jest.fn();
const showSaveSettingsPrompt = jest.fn();
const setIsEditableState = jest.fn();
const handleBlur = jest.fn();

const settingData = {
  deprecated: false,
  help: 'This is a help message',
  displayName: 'Setting Name',
  value: 'Setting Value',
};

jest.mock('react-textarea-autosize', () =>
  jest.fn((props) => (
    <textarea
      {...props}
      onFocus={() => {}}
    />
  )));

const RootWrapper = (props = {}) => (
  <IntlProvider locale="en">
    <SettingCard
      isOn
      name="settingName"
      setEdited={setEdited}
      setIsEditableState={setIsEditableState}
      showSaveSettingsPrompt={showSaveSettingsPrompt}
      settingData={settingData}
      handleBlur={handleBlur}
      isEditableState
      saveSettingsPrompt={false}
      {...props}
    />
  </IntlProvider>
);

describe('<SettingCard />', () => {
  afterEach(() => jest.clearAllMocks());
  it('renders the setting card with the provided data', () => {
    const { getByText, getByLabelText } = render(<RootWrapper />);
    const cardTitle = getByText(/Setting Name/i);
    const input = getByLabelText(/Setting Name/i);
    expect(cardTitle).toBeInTheDocument();
    expect(input).toBeInTheDocument();
    expect(input.value).toBe(JSON.stringify(settingData.value, null, 4));
  });
  it('displays the deprecated status when the setting is deprecated', () => {
    const deprecatedSettingData = { ...settingData, deprecated: true };
    const { getByText } = render(
      <IntlProvider locale="en">
        <SettingCard
          isOn
          name="settingName"
          setEdited={setEdited}
          setIsEditableState={setIsEditableState}
          showSaveSettingsPrompt={showSaveSettingsPrompt}
          settingData={deprecatedSettingData}
          handleBlur={handleBlur}
          isEditable={false}
          saveSettingsPrompt
        />
      </IntlProvider>,
    );
    const deprecatedStatus = getByText(messages.deprecated.defaultMessage);
    expect(deprecatedStatus).toBeInTheDocument();
  });
  it('does not display the deprecated status when the setting is not deprecated', () => {
    const { queryByText } = render(<RootWrapper />);
    expect(queryByText(messages.deprecated.defaultMessage)).toBeNull();
  });
  it('calls setEdited on blur', async () => {
    const user = userEvent.setup();
    const { getByLabelText } = render(<RootWrapper />);
    const inputBox = getByLabelText(/Setting Name/i);
    fireEvent.focus(inputBox);
    await user.clear(inputBox);
    await user.type(inputBox, '3, 2, 1');
    await waitFor(() => {
      expect(inputBox).toHaveValue('3, 2, 1');
    });
    await user.tab(); // blur off of the input.
    await waitFor(() => {
      expect(setEdited).toHaveBeenCalled();
      expect(handleBlur).toHaveBeenCalled();
    });
  });
  it('renders in readOnly mode with disabled input', () => {
    render(<RootWrapper readOnly />);
    const input = screen.getByLabelText(/Setting Name/i);
    expect(input).toBeDisabled();
  });

  it('renders enabled by default when readOnly is not specified (default false)', () => {
    // readOnly defaults to false - input should be enabled
    render(<RootWrapper />);
    const input = screen.getByLabelText(/Setting Name/i);
    expect(input).not.toBeDisabled();
  });

  it('calls setIsEditableState when value changes and isEditableState is false', async () => {
    // Test for line 45: setIsEditableState(true) called when value changes
    const { getByLabelText } = render(<RootWrapper isEditableState={false} />);
    const input = getByLabelText(/Setting Name/i);
    fireEvent.change(input, { target: { value: 'new-different-value' } });
    await waitFor(() => {
      expect(setIsEditableState).toHaveBeenCalledWith(true);
    });
  });

  it('shows help popup when clicking info button', () => {
    render(<RootWrapper />);
    const helpButton = screen.getByRole('button', { name: /show help text/i });
    fireEvent.click(helpButton);
    // The help text should be visible in the popup - verify component renders help
    expect(screen.queryByText(/This is a help message/i)).toBeInTheDocument();
  });
});