@instructure/quiz-interactions/src/components/file_upload/Show/__tests__/Show.test.js

A React UI component Library for quiz interaction types.

import React from 'react'
import {render, screen} from '@testing-library/react'
import runAxeCheck from '@instructure/ui-axe-check'

import FileUploadShow from '../index'

describe('FileUpload Show', () => {
  const props = {
    itemBody: 'Provide two examples of tortoises',
    interactionData: {
      restrictCount: true,
      filesCount: '2',
    },
    properties: {
      restrictTypes: true,
      allowedTypes: '',
    },
  }

  it('should render', () => {
    render(<FileUploadShow {...props} />)
    expect(document.body.textContent).toBeDefined()
  })

  describe('rendering', () => {
    it('renders FileUploadTake', () => {
      render(<FileUploadShow {...props} />)
      // FileUploadShow renders FileUploadTake which shows the item body
      expect(screen.getByText(/Provide two examples of tortoises/)).toBeInTheDocument()
    })

    it('passes props to FileUploadTake', () => {
      render(<FileUploadShow {...props} />)
      // Verify the item body text is rendered
      expect(screen.getByText(/Provide two examples of tortoises/)).toBeInTheDocument()
    })

    it('renders in read-only mode', () => {
      const {container} = render(<FileUploadShow {...props} />)
      // FileUploadShow passes readOnly to FileUploadTake
      // Verify it renders without file upload controls being active
      expect(container.firstChild).toBeInTheDocument()
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      render(<FileUploadShow {...props} />)
      expect(await runAxeCheck(document.body, {ignores: ['region']})).toBe(true)
    })
  })
})