frontend-app-ora-grading/src/containers/ResponseDisplay/index.test.jsx

import { render, screen } from '@testing-library/react';
import { fileUploadResponseOptions } from 'data/services/lms/constants';
import { selectors } from 'data/redux';
import { ResponseDisplay, mapStateToProps } from '.';

jest.mock('data/redux', () => ({
  selectors: {
    grading: {
      selected: {
        response: jest.fn((state) => state.response || { text: [], files: [] }),
      },
    },
    app: {
      ora: {
        fileUploadResponseConfig: jest.fn((state) => state.fileUploadResponseConfig || 'optional'),
        prompts: jest.fn((state) => state.prompts || ['prompt']),
      },
    },
  },
}));

jest.mock('./PromptDisplay', () => jest.fn(({ prompt }) => (
  <div data-testid="prompt-display">Prompt: {prompt}</div>
)));

jest.mock('./SubmissionFiles', () => jest.fn(({ files }) => (
  <div data-testid="submission-files">Files: {files.length}</div>
)));

jest.mock('./PreviewDisplay', () => jest.fn(({ files }) => (
  <div data-testid="preview-display">Preview: {files.length}</div>
)));

jest.mock('dompurify', () => () => ({
  sanitize: (text) => text,
}));

jest.mock('html-react-parser', () => (text) => text);

describe('ResponseDisplay', () => {
  const defaultProps = {
    response: {
      text: ['some text response here', 'another text response'],
      files: [
        {
          name: 'some file name.jpg',
          description: 'description for the file',
          downloadURL: '/valid-url-wink-wink',
        },
        {
          name: 'file number 2.jpg',
          description: 'description for this file',
          downloadURL: '/url-2',
        },
      ],
    },
    fileUploadResponseConfig: 'optional',
    prompts: ['prompt one', 'prompt two'],
  };

  beforeAll(() => {
    global.window = {};
  });

  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('behavior', () => {
    it('renders response display container', () => {
      const { container } = render(<ResponseDisplay {...defaultProps} />);
      const responseDisplay = container.querySelector('.response-display');
      expect(responseDisplay).toBeInTheDocument();
    });

    it('displays text content in cards', () => {
      const { container } = render(<ResponseDisplay {...defaultProps} />);
      const textContents = container.querySelectorAll('.response-display-text-content');
      expect(textContents).toHaveLength(defaultProps.response.text.length);
      expect(textContents[0]).toHaveTextContent('some text response here');
      expect(textContents[1]).toHaveTextContent('another text response');
    });

    it('displays submission files when file upload is allowed', () => {
      render(<ResponseDisplay {...defaultProps} />);
      const submissionFiles = screen.getByTestId('submission-files');
      expect(submissionFiles).toBeInTheDocument();
      expect(submissionFiles).toHaveTextContent('Files: 2');
    });

    it('displays preview display when file upload is allowed', () => {
      render(<ResponseDisplay {...defaultProps} />);
      const previewDisplay = screen.getByTestId('preview-display');
      expect(previewDisplay).toBeInTheDocument();
      expect(previewDisplay).toHaveTextContent('Preview: 2');
    });

    it('does not display file components when file upload is disabled', () => {
      render(<ResponseDisplay {...defaultProps} fileUploadResponseConfig={fileUploadResponseOptions.none} />);
      expect(screen.queryByTestId('submission-files')).not.toBeInTheDocument();
      expect(screen.queryByTestId('preview-display')).not.toBeInTheDocument();
    });

    it('renders empty content when no text response provided', () => {
      const { container } = render(<ResponseDisplay {...defaultProps} response={{ text: [], files: [] }} />);
      const textContents = container.querySelectorAll('.response-display-text-content');
      expect(textContents).toHaveLength(0);
    });

    it('displays single prompt when only one prompt', () => {
      render(<ResponseDisplay {...defaultProps} prompts={['only one prompt']} />);
      expect(screen.queryAllByTestId('prompt-display')).toHaveLength(1);
    });

    it('displays multiple prompts when there are multiple prompts', () => {
      render(<ResponseDisplay {...defaultProps} />);
      expect(screen.queryAllByTestId('prompt-display')).toHaveLength(2);
    });
  });

  describe('mapStateToProps', () => {
    const testState = {
      response: {
        text: ['test text'],
        files: ['file1', 'file2'],
      },
      fileUploadResponseConfig: 'required',
      prompts: ['prompt'],
    };

    it('maps response from grading.selected.response selector', () => {
      const mapped = mapStateToProps(testState);
      expect(mapped.response).toEqual(selectors.grading.selected.response(testState));
    });

    it('maps fileUploadResponseConfig from app.ora.fileUploadResponseConfig selector', () => {
      const mapped = mapStateToProps(testState);
      expect(mapped.fileUploadResponseConfig).toEqual(selectors.app.ora.fileUploadResponseConfig(testState));
    });

    it('maps prompts from app.ora.prompts selector', () => {
      const mapped = mapStateToProps(testState);
      expect(mapped.prompts).toEqual(selectors.app.ora.prompts(testState));
    });
  });
});