Merge pull request #3121 from ONSdigital/EAR-2412-Mutually-exclusive-…

…answers-can-be-added-to-pages-with-select-answers

EAR-2412-Mutually-exclusive-answers-can-be-added-to-pages-with-select answers

eq-author/src/components/AnswerTypeSelector/AnswerTypeButton.js

@@ -46,6 +46,7 @@ export default class AnswerTypeButton extends React.Component {
     doNotShowDR: PropTypes.bool,
     mutuallyExclusiveEnabled: PropTypes.bool,
     radioEnabled: PropTypes.bool,
+    selectEnabled: PropTypes.bool,
   };
 
   handleClick = () => {
@@ -58,6 +59,7 @@ export default class AnswerTypeButton extends React.Component {
         doNotShowDR={this.props.doNotShowDR}
         mutuallyExclusiveEnabled={this.props.mutuallyExclusiveEnabled}
         radioEnabled={this.props.radioEnabled}
+        selectEnabled={this.props.selectEnabled}
         disabled={this.props.disabled}
         iconSrc={icons[this.props.type]}
         onClick={this.handleClick}

eq-author/src/components/AnswerTypeSelector/AnswerTypeGrid.js

@@ -73,6 +73,7 @@ class AnswerTypeGrid extends React.Component {
     doNotShowDR: PropTypes.bool,
     mutuallyExclusiveEnabled: PropTypes.bool,
     radioEnabled: PropTypes.bool,
+    selectEnabled: PropTypes.bool,
   };
 
   handleSelect = (type) => {
@@ -90,6 +91,7 @@ class AnswerTypeGrid extends React.Component {
       doNotShowDR,
       mutuallyExclusiveEnabled,
       radioEnabled,
+      selectEnabled,
       ...otherProps
     } = this.props;
     return (
@@ -111,6 +113,7 @@ class AnswerTypeGrid extends React.Component {
                   doNotShowDR={doNotShowDR}
                   mutuallyExclusiveEnabled={mutuallyExclusiveEnabled}
                   radioEnabled={radioEnabled}
+                  selectEnabled={selectEnabled}
                   {...props}
                 />
               );

eq-author/src/components/AnswerTypeSelector/index.js

@@ -7,7 +7,7 @@ import IconText from "components/IconText";
 import Button from "components/buttons/Button";
 import ValidationError from "components/ValidationError";
 import { QUESTION_ANSWER_NOT_SELECTED } from "constants/validationMessages";
-import { RADIO, MUTUALLY_EXCLUSIVE } from "constants/answer-types";
+import { RADIO, MUTUALLY_EXCLUSIVE, SELECT } from "constants/answer-types";
 
 import answersHaveAnswerType from "utils/answersHaveAnswerType";
 
@@ -49,14 +49,15 @@ const ErrorContext = styled.div`
     `}
 `;
 
-const mutuallyExclusiveEnabled = (answers, hasRadioAnswer) => {
+const mutuallyExclusiveEnabled = (answers, hasRadioAnswer, hasSelectAnswer) => {
   let allowMutuallyExclusive = false;
   // Mutually exclusive button will be disabled when page has no answers, page has a radio answer, or page already has mutually exclusive answer
   // Does not need to handle date range as "Add an answer" button is disabled when page has a date range answer
   if (
     answers.length === 0 ||
     !answers ||
     hasRadioAnswer ||
+    hasSelectAnswer ||
     answersHaveAnswerType(answers, MUTUALLY_EXCLUSIVE) ||
     answers.length > 1 // TODO: (Mutually exclusive) When Runner supports multiple answers with mutually exclusive, answers.length > 1 can be removed
   ) {
@@ -101,6 +102,7 @@ class AnswerTypeSelector extends React.Component {
     let hasDateRange = false;
     let hasOtherAnswerType = false;
     let hasRadioAnswer = false;
+    let hasSelectAnswer = false;
     let hasMutuallyExclusiveAnswer = false;
 
     const answers = Array.from(this.props.page.answers);
@@ -118,6 +120,9 @@ class AnswerTypeSelector extends React.Component {
       if (answersHaveAnswerType(this.props.page.answers, RADIO)) {
         hasRadioAnswer = true;
       }
+      if (answersHaveAnswerType(this.props.page.answers, SELECT)) {
+        hasSelectAnswer = true;
+      }
       if (answersHaveAnswerType(this.props.page.answers, MUTUALLY_EXCLUSIVE)) {
         hasMutuallyExclusiveAnswer = true;
       }
@@ -159,9 +164,11 @@ class AnswerTypeSelector extends React.Component {
               doNotShowDR={hasOtherAnswerType}
               mutuallyExclusiveEnabled={mutuallyExclusiveEnabled(
                 this.props.page.answers,
-                hasRadioAnswer
+                hasRadioAnswer,
+                hasSelectAnswer
               )}
               radioEnabled={!hasMutuallyExclusiveAnswer}
+              selectEnabled={!hasMutuallyExclusiveAnswer}
             />
           </Popout>
         </ErrorContext>

eq-author/src/components/AnswerTypeSelector/index.test.js

@@ -3,6 +3,7 @@ import {
   NUMBER,
   CURRENCY,
   RADIO,
+  SELECT,
   // MUTUALLY_EXCLUSIVE,
 } from "constants/answer-types";
 
@@ -14,7 +15,6 @@ import {
 } from "tests/utils/rtl";
 
 import AnswerTypeSelector from ".";
-
 describe("Answer Type Selector", () => {
   let props;
   beforeEach(() => {
@@ -161,6 +161,17 @@ describe("Answer Type Selector", () => {
       );
     });
 
+    it("should disable mutually exclusive if there is a select answer", () => {
+      props.page.answers[0] = { type: SELECT };
+      const { getByText, getByTestId } = render(
+        <AnswerTypeSelector {...props} />
+      );
+      fireEvent.click(getByText(/Add another answer/));
+      expect(getByTestId("btn-answer-type-mutuallyexclusive")).toHaveAttribute(
+        "disabled"
+      );
+    });
+
     // TODO: (Mutually exclusive) When Runner supports multiple answers with mutually exclusive, the commented tests and MUTUALLY_EXCLUSIVE import can be uncommented
     // it("should disable radio if there is a mutually exclusive answer", () => {
     //   props.page.answers = [{ type: NUMBER }, { type: MUTUALLY_EXCLUSIVE }];

eq-author/src/components/IconGrid/IconGridButton.js

@@ -52,12 +52,14 @@ const IconGridButton = ({
   doNotShowDR,
   mutuallyExclusiveEnabled,
   radioEnabled,
+  selectEnabled,
   ...otherProps
 }) => {
   if (
     (doNotShowDR && title === "Date range") ||
     (!mutuallyExclusiveEnabled && title === "OR answer") ||
-    (!radioEnabled && title === "Radio")
+    (!radioEnabled && title === "Radio") ||
+    (!selectEnabled && title === "Select")
   ) {
     disabled = true;
   }
@@ -87,6 +89,7 @@ IconGridButton.propTypes = {
   doNotShowDR: PropTypes.bool,
   mutuallyExclusiveEnabled: PropTypes.bool,
   radioEnabled: PropTypes.bool,
+  selectEnabled: PropTypes.bool,
 };
 
 export default IconGridButton;