InstructorsSection.test.jsx

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

import { courseDetailsMock } from '../__mocks__';
import messages from './messages';
import instructorMessages from './instructor-container/messages';
import InstructorsSection from '.';

const onChangeMock = jest.fn();
const courseIdMock = 'course-id-bar';

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

jest.mock('react-redux', () => ({
  useSelector: jest.fn(),
  useDispatch: jest.fn(),
}));

jest.mock('react-router', () => ({
  ...jest.requireActual('react-router'),
  useParams: () => ({
    courseId: courseIdMock,
  }),
}));

const RootWrapper = (props) => (
  <IntlProvider locale="en">
    <InstructorsSection {...props} />
  </IntlProvider>
);

const props = {
  instructors: courseDetailsMock.instructorInfo.instructors,
  onChange: onChangeMock,
};

describe('<InstructorsSection />', () => {
  it('renders section successfully', () => {
    render(<RootWrapper {...props} />);
    expect(screen.getByText(messages.instructorsTitle.defaultMessage)).toBeInTheDocument();
    expect(screen.getByText(messages.instructorsDescription.defaultMessage)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: messages.instructorAdd.defaultMessage })).toBeInTheDocument();
  });

  it('should create another instructor form on click Add new instructor', async () => {
    const { rerender } = render(<RootWrapper {...props} />);
    const addButton = screen.getByRole('button', { name: messages.instructorAdd.defaultMessage });
    fireEvent.click(addButton);

    const newInstructors = [
      props.instructors[0],
      {
        bio: '',
        image: '',
        name: '',
        organization: '',
        title: '',
      },
    ];
    expect(onChangeMock).toHaveBeenCalledWith({ instructors: newInstructors }, 'instructorInfo');

    rerender(<RootWrapper {...props} instructors={newInstructors} />);
    await waitFor(() => {
      const deleteButtons = screen.getAllByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
      expect(deleteButtons.length).toBe(2);
    });
  });

  it('should delete instructor form on click Delete', async () => {
    const { rerender } = render(<RootWrapper {...props} />);
    const deleteButton = screen.getByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
    fireEvent.click(deleteButton);

    expect(onChangeMock).toHaveBeenCalledWith({ instructors: [] }, 'instructorInfo');
    rerender(<RootWrapper {...props} instructors={[]} />);
    await waitFor(() => {
      const deleteButtons = screen.queryAllByRole(
        'button',
        { name: instructorMessages.instructorDelete.defaultMessage },
      );
      expect(deleteButtons.length).toBe(0);
    });
  });

  it('should call onChange if input value changed', () => {
    render(<RootWrapper {...props} />);
    const inputName = screen.getByPlaceholderText(instructorMessages.instructorNameInputPlaceholder.defaultMessage);
    fireEvent.change(inputName, { target: { value: 'abc' } });

    expect(onChangeMock).toHaveBeenCalledWith({
      instructors: [{
        bio: props.instructors[0].bio,
        image: props.instructors[0].image,
        name: 'abc',
        organization: props.instructors[0].organization,
        title: props.instructors[0].title,
      }],
    }, 'instructorInfo');
  });

  it('disables add button when isEditable is false', () => {
    render(<RootWrapper {...props} isEditable={false} />);
    expect(screen.getByRole('button', { name: messages.instructorAdd.defaultMessage })).toBeDisabled();
  });

  it('enables add button when isEditable is true', () => {
    render(<RootWrapper {...props} isEditable />);
    expect(screen.getByRole('button', { name: messages.instructorAdd.defaultMessage })).not.toBeDisabled();
  });
});