@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
172 lines (161 loc) • 6.51 kB
JavaScript
import React from 'react'
import {screen} from '@testing-library/react'
import runAxeCheck from '@instructure/ui-axe-check'
import {renderWithDnd} from '../../../../../tests/util/dndTestUtils'
import FillBlankShow from '../index'
describe('FillBlank Show', () => {
const props = {
interactionData: {
stemItems: [
{id: 'stem_uuid-1', position: 1, type: 'text', value: ' '},
{id: 'stem_uuid0', position: 2, type: 'blank', blankId: 'fitb_uuid1'},
{id: 'stem_uuid1', position: 3, type: 'text', value: ' Columbus sailed in '},
{id: 'stem_uuid2', position: 4, type: 'blank', blankId: 'fitb_uuid2'},
{id: 'stem_uuid3', position: 5, type: 'text', value: ' from the country of '},
{id: 'stem_uuid4', position: 6, type: 'blank', blankId: 'fitb_uuid3'},
{id: 'stem_uuid5', position: 7, type: 'text', value: ' on the continent of '},
{id: 'stem_uuid6', position: 8, type: 'blank', blankId: 'fitb_uuid4'},
{id: 'stem_uuid7', position: 9, type: 'text', value: ' across the '},
{id: 'stem_uuid8', position: 10, type: 'blank', blankId: 'fitb_uuid5'},
{id: 'stem_uuid9', position: 11, type: 'text', value: ' and found '},
{id: 'stem_uuid10', position: 12, type: 'blank', blankId: 'fitb_uuid6'},
{id: 'stem_uuid11', position: 13, type: 'text', value: '.'},
{id: 'stem_uuid12', position: 14, type: 'text', value: ' Where the people were '},
{id: 'stem_uuid13', position: 15, type: 'blank', blankId: 'fitb_uuid7'},
{id: 'stem_uuid14', position: 16, type: 'text', value: '.'},
],
blanks: [
{
id: 'fitb_uuid1',
answerType: 'openEntry',
},
{
id: 'fitb_uuid2',
answerType: 'openEntry',
},
{
id: 'fitb_uuid3',
answerType: 'openEntry',
},
{
id: 'fitb_uuid4',
answerType: 'openEntry',
},
{
id: 'fitb_uuid5',
answerType: 'openEntry',
},
{
id: 'fitb_uuid6',
answerType: 'wordbank',
choices: [
{id: 'choice_uuid11_brazil', position: 1, itemBody: 'Brazil'},
{id: 'choice_uuid12_austria', position: 2, itemBody: 'Austria'},
{id: 'choice_uuid13_america', position: 3, itemBody: 'America'},
],
},
{
id: 'fitb_uuid7',
answerType: 'dropdown',
choices: [
{id: 'choice_uuid11_peaceful', position: 1, itemBody: 'peaceful'},
{id: 'choice_uuid12_war-torn', position: 2, itemBody: 'war-torn'},
{id: 'choice_uuid13_confused', position: 3, itemBody: 'confused'},
],
},
],
},
scoringData: {
value: [
{
id: 'fitb_uuid1',
scoringAlgorithm: 'TextRegex',
scoringData: {value: '.*Christopher', blankText: 'Christopher'},
},
{
id: 'fitb_uuid2',
scoringAlgorithm: 'TextCloseEnough',
scoringData: {value: '1492', editDistance: 1, blankText: '1492'},
},
{
id: 'fitb_uuid3',
scoringAlgorithm: 'TextInChoices',
scoringData: {value: ['Spain', 'Espana', 'Kingdom of Spain'], blankText: 'Spain'},
},
{
id: 'fitb_uuid4',
scoringAlgorithm: 'TextEquivalence',
scoringData: {value: 'Europe', blankText: 'Europe'},
},
{
id: 'fitb_uuid5',
scoringAlgorithm: 'TextContainsAnswer',
scoringData: {value: 'Atlantic', blankText: 'Atlantic'},
},
{
id: 'fitb_uuid6',
scoringAlgorithm: 'Equivalence',
scoringData: {value: 'choice_uuid13_america', blankText: 'America'},
},
{
id: 'fitb_uuid7',
scoringAlgorithm: 'Equivalence',
scoringData: {value: 'choice_uuid13_confused', blankText: 'Confused'},
},
],
},
}
it('should render', () => {
renderWithDnd(<FillBlankShow {...props} />)
expect(document.body.textContent).toBeDefined()
})
describe('rendering', () => {
it('renders FillBlankTake', () => {
renderWithDnd(<FillBlankShow {...props} />)
// Verify that FillBlankTake is rendered by checking for its content
expect(screen.getByText(/Columbus sailed in/)).toBeInTheDocument()
expect(screen.getByText(/from the country of/)).toBeInTheDocument()
expect(screen.getByText(/across the/)).toBeInTheDocument()
// Check that multiple input fields are rendered (5 openEntry blanks)
const textboxes = screen.getAllByRole('textbox')
expect(textboxes.length).toBeGreaterThanOrEqual(5)
})
it('passes props to FillBlankTake', () => {
renderWithDnd(<FillBlankShow {...props} />)
// Verify interactionData is passed by checking rendered text content
expect(screen.getByText(/Columbus sailed in/)).toBeInTheDocument()
expect(screen.getByText(/Where the people were/)).toBeInTheDocument()
// Verify userResponse is passed by checking that values from scoringData are displayed
expect(screen.getByDisplayValue(/Christopher/i)).toBeInTheDocument()
expect(screen.getByDisplayValue(/1492/i)).toBeInTheDocument()
expect(screen.getByDisplayValue(/Spain/i)).toBeInTheDocument()
expect(screen.getByDisplayValue(/Europe/i)).toBeInTheDocument()
expect(screen.getByDisplayValue(/Atlantic/i)).toBeInTheDocument()
})
it('passes the right props to FillBlankTake', () => {
renderWithDnd(<FillBlankShow {...props} />)
// Verify readOnly prop is passed by checking that inputs are readonly
const textboxes = screen.getAllByRole('textbox')
textboxes.forEach(input => {
expect(input).toHaveAttribute('readonly')
})
// Verify that the inputs have the correct pre-filled values
expect(screen.getByDisplayValue(/Christopher/i)).toBeInTheDocument()
expect(screen.getByDisplayValue(/1492/i)).toBeInTheDocument()
})
})
describe('a11y tests', () => {
it('should meet a11y standards', async () => {
renderWithDnd(<FillBlankShow {...props} />)
expect(
await runAxeCheck(document.body, {
ignores: [
'aria-allowed-role', // TODO: remove this when instui fixes Select
'label', // FIXME: false positive?
'region',
],
}),
).toBe(true)
})
})
})