@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
251 lines (218 loc) • 8.49 kB
JavaScript
import {expect} from '@instructure/ui-test-utils'
import shouldRenderComponent from '../../../../../tests/util/render-checks'
import {IconCheckLine, IconXLine} from '@instructure/ui-icons'
import {FeedbackWrapper} from '@instructure/quiz-results-feedback'
import CategorizationResult from '../index'
import {ReactTestbed} from '../../../../../tests/util/react-testbed'
const props = {
itemBody: 'Match the name of the celestial body on the left with its correct classification:',
interactionData: {
categoryOrder: ['category_uuid1', 'category_uuid2'],
categories: {
category_uuid1: {id: 'category_uuid1', itemBody: 'Planet'},
category_uuid2: {id: 'category_uuid2', itemBody: 'Moon'},
},
distractors: {
answer_uuid3: {id: 'answer_uuid3', itemBody: 'Mars'},
answer_uuid4: {id: 'answer_uuid4', itemBody: 'Europa'},
answer_uuid5: {id: 'answer_uuid5', itemBody: 'Venus'},
answer_uuid6: {id: 'answer_uuid6', itemBody: 'Phobos'},
answer_uuid7: {id: 'answer_uuid7', itemBody: 'Deimos'},
answer_uuid8: {id: 'answer_uuid8', itemBody: 'Jupiter'},
answer_uuid9: {id: 'answer_uuid9', itemBody: 'America'},
answer_uuid10: {id: 'answer_uuid10', itemBody: 'Asia'},
},
},
scoredData: {
correct: false,
value: {
category_uuid1: {
value: {
answer_uuid3: {resultScore: 1, userResponded: false},
answer_uuid5: {resultScore: 1, userResponded: true},
answer_uuid8: {resultScore: 1, userResponded: false},
answer_uuid7: {resultScore: 0, userResponded: true},
},
},
category_uuid2: {
value: {
answer_uuid4: {resultScore: 1, userResponded: true},
answer_uuid6: {resultScore: 1, userResponded: true},
answer_uuid7: {resultScore: 1, userResponded: false},
answer_uuid8: {resultScore: 0, userResponded: true},
answer_uuid9: {resultScore: 0, userResponded: true},
},
},
},
uncategorized: {
answer_uuid9: {resultScore: 1, userResponded: false},
answer_uuid10: {resultScore: 1, userResponded: true},
},
},
}
describe('Categorization Result', () => {
const testbed = new ReactTestbed(CategorizationResult, props)
shouldRenderComponent(testbed, {}, CategorizationResult)
describe('rendering', () => {
describe('Category', () => {
it('renders category container for each category plus uncategorized', () => {
testbed.render()
const items = testbed.findChildrenByClass('categoryBody')
expect(items.length).to.be.equal(3)
})
it('renders category name', () => {
testbed.render()
const text = testbed.getText()
Object.values(props.interactionData.categories).forEach(item =>
expect(text).to.include(item.itemBody),
)
})
it('renders the correct number of answers inside each category', () => {
testbed.render()
const category = testbed.findChildrenByClass('categoryBody')
// category 1
expect(category[0].children.length).to.be.equal(2)
// category 2
expect(category[1].children.length).to.be.equal(4)
// uncategorized
expect(category[2].children.length).to.be.equal(2)
})
})
describe('Answers', () => {
it('renders a feedback wrapper for each answer', () => {
testbed.render()
const answers = testbed.findChildrenByType(FeedbackWrapper)
expect(answers.length).to.be.equal(8)
})
it('renders correct answers', () => {
testbed.render()
const correct = testbed.findChildrenByType(IconCheckLine)
expect(correct.length).to.be.equal(4)
})
it('renders wrong answers', () => {
testbed.render()
const incorrect = testbed.findChildrenByType(IconXLine)
expect(incorrect.length).to.be.equal(4)
})
it('renders unanswered answers', () => {
testbed.render()
const unanswered = testbed.findChildrenByClass('categoryBody')[0].children
expect(unanswered.length).to.be.equal(2)
})
it('passes the correct props to the FeedbackWrapper', () => {
testbed.render()
const feedbackWrappers = testbed.findChildrenByType(FeedbackWrapper)
// category 1
expect(feedbackWrappers[0].props.status).to.be.equal('correct')
expect(feedbackWrappers[1].props.status).to.be.equal('incorrect')
expect(feedbackWrappers[2].props.status).to.be.equal('correct')
expect(feedbackWrappers[3].props.status).to.be.equal('correct')
// category 2
expect(feedbackWrappers[4].props.status).to.be.equal('incorrect')
expect(feedbackWrappers[4].props.correctAnswer).to.be.equal('Planet')
expect(feedbackWrappers[5].props.status).to.be.equal('incorrect')
expect(feedbackWrappers[5].props.correctAnswer).to.be.equal('No Category')
// uncategorized
expect(feedbackWrappers[6].props.status).to.be.equal('incorrect')
expect(feedbackWrappers[6].props.correctAnswer).to.be.equal('Planet')
expect(feedbackWrappers[7].props.status).to.be.equal('correct')
})
it('renders with unknown formatting', () => {
testbed.render({
scoredData: {
value: {
category_uuid1: {
value: {
answer_uuid3: {userResponded: false},
answer_uuid5: {userResponded: true},
answer_uuid8: {userResponded: false},
answer_uuid7: {userResponded: true},
},
},
category_uuid2: {
value: {
answer_uuid4: {userResponded: true},
answer_uuid6: {userResponded: true},
answer_uuid7: {userResponded: false},
answer_uuid8: {userResponded: true},
answer_uuid9: {userResponded: true},
},
},
},
},
})
const wrappers = testbed.findChildrenByType(FeedbackWrapper)
const statuses = wrappers.map(wrapper => wrapper.props.status).filter(x => x != 'unknown')
expect(statuses).to.eql([])
})
})
})
describe('with uncategorized scoredData attribute', () => {
describe('when answer is left uncategorized correctly', () => {
const scoredData = {
correct: false,
value: {
category_uuid1: {},
category_uuid2: {},
},
uncategorized: {
answer_uuid10: {resultScore: 1, userResponded: true},
},
}
it('displays a correct answer', () => {
testbed.render({scoredData})
expect(testbed.getText()).to.match(/correct answer:asia/i)
})
})
describe('when answer is left uncategorized incorrectly', () => {
const scoredData = {
correct: false,
value: {
category_uuid1: {},
category_uuid2: {},
},
uncategorized: {
answer_uuid5: {resultScore: 0, userResponded: true},
},
}
it('displays an incorrect answer', () => {
testbed.render({scoredData})
expect(testbed.getText()).to.match(/incorrect answer:venus/i)
})
it('does not display the correct answer', () => {
testbed.render({scoredData})
expect(testbed.getText()).not.to.match(/incorrect answer:venus ?correct answer:planet/i)
})
})
describe('when answer should have been left uncategorized', () => {
const scoredData = {
correct: false,
value: {
category_uuid1: {
value: {
answer_uuid10: {resultScore: 0, userResponded: true},
},
},
category_uuid2: {},
},
uncategorized: {
answer_uuid10: {resultScore: 1, userResponded: false},
},
}
it('displays an incorrect answer', () => {
testbed.render({scoredData})
expect(testbed.getText()).to.match(/incorrect answer:asia/i)
})
it('displays "No Category" feedback', () => {
testbed.render({scoredData})
expect(testbed.getText()).to.match(/incorrect answer:asia ?correct answer:no category/i)
})
})
})
describe('a11y tests', () => {
it('should meet a11y standards', async () => {
testbed.render()
await testbed.checkA11yStandards()
})
})
})