Fixes bug where UI wasn't handling an array of survey answer choices

This commit is contained in:
mabashian 2021-06-17 11:02:20 -04:00 committed by Shane McDonald
parent 560b4ebf71
commit 51abbb9464
No known key found for this signature in database
GPG Key ID: 6F374AF6E9EB9374
3 changed files with 105 additions and 5 deletions

View File

@ -1,5 +1,4 @@
import React, { useState } from 'react';
import { t } from '@lingui/macro';
import { useField } from 'formik';
import {
@ -99,7 +98,13 @@ function MultipleChoiceField({ question }) {
const id = `survey-question-${question.variable}`;
const isValid = !(meta.touched && meta.error);
const options = question.choices.split('\n');
let options = [];
if (typeof question.choices === 'string') {
options = question.choices.split('\n');
} else if (Array.isArray(question.choices)) {
options = [...question.choices];
}
return (
<FormGroup
@ -119,7 +124,6 @@ function MultipleChoiceField({ question }) {
selections={field.value}
variant={SelectVariant.single}
id={id}
isValid={isValid}
isOpen={isOpen}
placeholderText={t`Select an option`}
onClear={() => {
@ -145,6 +149,14 @@ function MultiSelectField({ question }) {
const hasActualValue = !question.required || meta.value?.length > 0;
const isValid = !meta.touched || (!meta.error && hasActualValue);
let options = [];
if (typeof question.choices === 'string') {
options = question.choices.split('\n');
} else if (Array.isArray(question.choices)) {
options = [...question.choices];
}
return (
<FormGroup
fieldId={id}
@ -176,7 +188,7 @@ function MultiSelectField({ question }) {
helpers.setValue([]);
}}
>
{question.choices.split('\n').map(opt => (
{options.map(opt => (
<SelectOption key={opt} value={opt} />
))}
</Select>

View File

@ -0,0 +1,88 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { Formik } from 'formik';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import SurveyStep from './SurveyStep';
describe('SurveyStep', () => {
test('should handle choices as a string', async () => {
let wrapper;
await act(async () => {
wrapper = mountWithContexts(
<Formik initialValues={{ job_type: 'run' }}>
<SurveyStep
surveyConfig={{
name: 'survey',
description: '',
spec: [
{
question_name: 'q1',
question_description: '',
required: true,
type: 'multiplechoice',
variable: 'q1',
min: null,
max: null,
default: '',
choices: '1\n2\n3\n4\n5\n6',
},
],
}}
/>
</Formik>
);
});
await act(async () => {
wrapper.find('SelectToggle').simulate('click');
});
wrapper.update();
const selectOptions = wrapper.find('SelectOption');
expect(selectOptions.at(0).prop('value')).toEqual('1');
expect(selectOptions.at(1).prop('value')).toEqual('2');
expect(selectOptions.at(2).prop('value')).toEqual('3');
expect(selectOptions.at(3).prop('value')).toEqual('4');
expect(selectOptions.at(4).prop('value')).toEqual('5');
expect(selectOptions.at(5).prop('value')).toEqual('6');
});
test('should handle choices as an array', async () => {
let wrapper;
await act(async () => {
wrapper = mountWithContexts(
<Formik initialValues={{ job_type: 'run' }}>
<SurveyStep
surveyConfig={{
name: 'survey',
description: '',
spec: [
{
question_name: 'q1',
question_description: '',
required: true,
type: 'multiplechoice',
variable: 'q1',
min: null,
max: null,
default: '',
choices: ['1', '2', '3', '4', '5', '6'],
},
],
}}
/>
</Formik>
);
});
await act(async () => {
wrapper.find('SelectToggle').simulate('click');
});
wrapper.update();
const selectOptions = wrapper.find('SelectOption');
expect(selectOptions.at(0).prop('value')).toEqual('1');
expect(selectOptions.at(1).prop('value')).toEqual('2');
expect(selectOptions.at(2).prop('value')).toEqual('3');
expect(selectOptions.at(3).prop('value')).toEqual('4');
expect(selectOptions.at(4).prop('value')).toEqual('5');
expect(selectOptions.at(5).prop('value')).toEqual('6');
});
});

View File

@ -348,7 +348,7 @@ export const SurveyQuestion = shape({
min: number,
max: number,
default: string,
choices: string,
choices: oneOfType([string, arrayOf(string)]),
});
export const Survey = shape({