mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 10:00:01 -03:30
Fixes bug where UI wasn't handling an array of survey answer choices
This commit is contained in:
parent
560b4ebf71
commit
51abbb9464
@ -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>
|
||||
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
@ -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({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user