@instructure/quiz-interactions/src/components/ordering/common/OrderGroup/__tests__/OrderGroup.test.js

A React UI component Library for quiz interaction types.

import React from 'react'
import {v4 as uuid} from 'uuid'

import {screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import runAxeCheck from '@instructure/ui-axe-check'

import {renderWithDnd} from '../../../../../../tests/util/dndTestUtils'
import OrderGroup from '../index'
import ReorderChoiceButton from '../../ReorderChoiceButton'

const firstChoiceID = uuid()
const secondChoiceID = uuid()
const thirdChoiceID = uuid()

const props = {
  bottomLabel: 'Shorter',
  choiceOrder: [firstChoiceID, secondChoiceID, thirdChoiceID],
  choices: {
    [firstChoiceID]: {id: firstChoiceID, itemBody: 'Gollum'},
    [secondChoiceID]: {id: secondChoiceID, itemBody: 'Frodo'},
    [thirdChoiceID]: {id: thirdChoiceID, itemBody: 'Gimli'},
  },
  displayAnswersParagraph: false,
  includeLabels: true,
  readOnly: false,
  onMoveChoice: Function.prototype,
  topLabel: 'Taller',
}

const draggableActionsContent = (choiceId, isFinalChoice, isFirstChoice) => {
  return (
    <ReorderChoiceButton
      id={choiceId}
      screenReaderText="draggableActionsContent SR text"
      isFinalChoice={isFinalChoice}
      isFirstChoice={isFirstChoice}
      onMoveChoiceUp={Function.prototype}
      onMoveChoiceDown={Function.prototype}
    />
  )
}

describe('OrderGroup', () => {
  describe('rendering', () => {
    describe('Label', () => {
      it('renders top and bottom labels if includeLabels is true', () => {
        renderWithDnd(<OrderGroup {...props} />)

        expect(screen.getByText('Taller')).toBeInTheDocument()
        expect(screen.getByText('Shorter')).toBeInTheDocument()
      })

      it('does not render top and bottom labels if includeLabels is false', () => {
        renderWithDnd(<OrderGroup {...props} includeLabels={false} />)

        expect(screen.queryByText('Taller')).toBeNull()
        expect(screen.queryByText('Shorter')).toBeNull()
      })
    })

    describe('ReorderChoiceButton', () => {
      it('does not render a ReorderChoiceButton for each option if is not draggable', () => {
        renderWithDnd(<OrderGroup {...props} readOnly />)

        const reorderChoiceButtons = screen.queryAllByRole('button', {
          name: 'draggableActionsContent SR text',
        })
        expect(reorderChoiceButtons).toHaveLength(0)
      })

      it('renders a ReorderChoiceButton for each option if is draggable', () => {
        renderWithDnd(<OrderGroup {...props} actionsContent={draggableActionsContent} />)

        const reorderChoiceButtons = screen.getAllByRole('button', {
          name: 'draggableActionsContent SR text',
        })
        expect(reorderChoiceButtons).toHaveLength(3)
      })

      it('renders drag and drop menu choices correctly', async () => {
        renderWithDnd(<OrderGroup {...props} actionsContent={draggableActionsContent} />)

        const reorderChoiceButtons = screen.getAllByRole('button', {
          name: 'draggableActionsContent SR text',
        })
        for (let i = 0; i < reorderChoiceButtons.length; i++) {
          const button = reorderChoiceButtons[i]
          await userEvent.click(button)
          const moveUpLabels = screen.queryAllByLabelText('Move Up')
          const moveDownLabels = screen.queryAllByLabelText('Move Down')
          await userEvent.click(button)
          if (i === 0) {
            expect(moveUpLabels).toHaveLength(0)
            expect(moveDownLabels.length).toBeGreaterThan(0)
          } else if (i === reorderChoiceButtons.length - 1) {
            expect(moveUpLabels.length).toBeGreaterThan(0)
            expect(moveDownLabels).toHaveLength(0)
          } else {
            expect(moveUpLabels.length).toBeGreaterThan(0)
            expect(moveDownLabels.length).toBeGreaterThan(0)
          }
        }
      })
    })
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', async () => {
      renderWithDnd(
        <main>
          <OrderGroup {...props} />
        </main>,
      )

      expect(await runAxeCheck(document.body, {ignores: ['region']})).toBe(true)
    })
  })

  describe('readOnly tests', () => {
    it('should not render the Reorder Choice button as readOnly by default', () => {
      renderWithDnd(<OrderGroup {...props} />)

      const reorderChoiceButtons = screen.getAllByRole('button', {name: 'Reorder Choice'})
      expect(reorderChoiceButtons[0]).not.toBeDisabled()
    })

    it('should render the Reorder Choice button as readOnly if specified', () => {
      renderWithDnd(<OrderGroup {...props} readOnly />)

      const reorderChoiceButtons = screen.getAllByRole('button', {name: 'Reorder Choice'})
      expect(reorderChoiceButtons[0]).toBeDisabled()
    })
  })
})