Remove code duplication for calculating answer choices (#5779)

* de duplicate code * Added tests
oppia · Oct 27, 2018 · b4da477 · b4da477
1 parent 44f4b61
commit b4da477
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 77 deletions.
diff --git a/.../templates/dev/head/pages/exploration_editor/translation_tab/StateTranslationDirective.js b/.../templates/dev/head/pages/exploration_editor/translation_tab/StateTranslationDirective.js
@@ -287,44 +287,8 @@ oppia.directive('stateTranslation', [
 
             var currentCustomizationArgs = ExplorationStatesService
               .getInteractionCustomizationArgsMemento(stateName);
-            var interactionId = $scope.stateInteractionId;
-            if (interactionId) {
-              // Special cases for multiple choice input and image click input.
-              if (interactionId === 'MultipleChoiceInput') {
-                $scope.answerChoices =
-                  currentCustomizationArgs.choices.value.map(
-                    function(val, ind) {
-                      return {
-                        val: ind,
-                        label: val
-                      };
-                    }
-                  );
-              } else if (interactionId === 'ImageClickInput') {
-                var _answerChoices = [];
-                var imageWithRegions =
-                  currentCustomizationArgs.imageAndRegions.value;
-                for (
-                  var j = 0; j < imageWithRegions.labeledRegions.length; j++) {
-                  _answerChoices.push({
-                    val: imageWithRegions.labeledRegions[j].label,
-                    label: imageWithRegions.labeledRegions[j].label
-                  });
-                }
-                $scope.answerChoices = _answerChoices;
-              } else if (interactionId === 'ItemSelectionInput' ||
-                  interactionId === 'DragAndDropSortInput') {
-                $scope.answerChoices =
-                  currentCustomizationArgs.choices.value.map(function(val) {
-                    return {
-                      val: val,
-                      label: val
-                    };
-                  });
-              } else {
-                $scope.answerChoices = null;
-              }
-            }
+            $scope.answerChoices = StateEditorService.getAnswerChoices(
+              $scope.stateInteractionId, currentCustomizationArgs);
             $scope.onTabClick($scope.TAB_ID_CONTENT);
           };
 

diff --git a/core/templates/dev/head/pages/state_editor/StateEditorService.js b/core/templates/dev/head/pages/state_editor/StateEditorService.js
@@ -73,6 +73,44 @@ oppia.factory('StateEditorService', [
       getInteraction: function() {
         return interaction;
       },
+      getAnswerChoices: function(interactionId, customizationArgs) {
+        if (!interactionId) {
+          return null;
+        }
+        // Special cases for multiple choice input and image click input.
+        if (interactionId === 'MultipleChoiceInput') {
+          return customizationArgs.choices.value.map(
+            function(val, ind) {
+              return {
+                val: ind,
+                label: val
+              };
+            }
+          );
+        } else if (interactionId === 'ImageClickInput') {
+          var _answerChoices = [];
+          var imageWithRegions =
+            customizationArgs.imageAndRegions.value;
+          for (
+            var j = 0; j < imageWithRegions.labeledRegions.length; j++) {
+            _answerChoices.push({
+              val: imageWithRegions.labeledRegions[j].label,
+              label: imageWithRegions.labeledRegions[j].label
+            });
+          }
+          return _answerChoices;
+        } else if (interactionId === 'ItemSelectionInput' ||
+            interactionId === 'DragAndDropSortInput') {
+          return customizationArgs.choices.value.map(function(val) {
+            return {
+              val: val,
+              label: val
+            };
+          });
+        } else {
+          return null;
+        }
+      },
       setInQuestionMode: function(newModeValue) {
         inQuestionMode = newModeValue;
       },

diff --git a/core/templates/dev/head/pages/state_editor/StateEditorServiceSpec.js b/core/templates/dev/head/pages/state_editor/StateEditorServiceSpec.js
@@ -38,5 +38,73 @@ describe('Editor state service', function() {
       ecs.setActiveStateName(null);
       expect(ecs.getActiveStateName()).toBeNull();
     });
+
+    it('should correctly return answer choices for interaction', function() {
+      var customizationArgs = {
+        choices: {
+          value: [
+            'Choice 1',
+            'Choice 2'
+          ]
+        }
+      };
+      expect(
+        ecs.getAnswerChoices('MultipleChoiceInput', customizationArgs)
+      ).toEqual([{
+        val: 0,
+        label: 'Choice 1',
+      }, {
+        val: 1,
+        label: 'Choice 2',
+      }]);
+
+      customizationArgs = {
+        imageAndRegions: {
+          value: {
+            labeledRegions: [{
+              label: 'Label 1'
+            }, {
+              label: 'Label 2'
+            }]
+          }
+        }
+      };
+      expect(
+        ecs.getAnswerChoices('ImageClickInput', customizationArgs)
+      ).toEqual([{
+        val: 'Label 1',
+        label: 'Label 1',
+      }, {
+        val: 'Label 2',
+        label: 'Label 2',
+      }]);
+
+      customizationArgs = {
+        choices: {
+          value: [
+            'Choice 1',
+            'Choice 2'
+          ]
+        }
+      };
+      expect(
+        ecs.getAnswerChoices('ItemSelectionInput', customizationArgs)
+      ).toEqual([{
+        val: 'Choice 1',
+        label: 'Choice 1',
+      }, {
+        val: 'Choice 2',
+        label: 'Choice 2',
+      }]);
+      expect(
+        ecs.getAnswerChoices('DragAndDropSortInput', customizationArgs)
+      ).toEqual([{
+        val: 'Choice 1',
+        label: 'Choice 1',
+      }, {
+        val: 'Choice 2',
+        label: 'Choice 2',
+      }]);
+    });
   });
 });
diff --git a/core/templates/dev/head/pages/state_editor/StateInteractionEditorDirective.js b/core/templates/dev/head/pages/state_editor/StateInteractionEditorDirective.js
@@ -39,7 +39,7 @@ oppia.directive('stateInteractionEditor', [
         '/pages/state_editor/state_interaction_editor_directive.html'),
       controller: [
         '$scope', '$http', '$rootScope', '$uibModal', '$injector', '$filter',
-        'AlertsService', 'HtmlEscaperService',
+        'AlertsService', 'HtmlEscaperService', 'StateEditorService',
         'INTERACTION_SPECS', 'StateInteractionIdService',
         'StateCustomizationArgsService', 'EditabilityService',
         'InteractionDetailsCacheService', 'UrlInterpolationService',
@@ -48,7 +48,7 @@ oppia.directive('stateInteractionEditor', [
         'StateSolutionService', 'StateHintsService',
         'StateContentService', function(
             $scope, $http, $rootScope, $uibModal, $injector, $filter,
-            AlertsService, HtmlEscaperService,
+            AlertsService, HtmlEscaperService, StateEditorService,
             INTERACTION_SPECS, StateInteractionIdService,
             StateCustomizationArgsService, EditabilityService,
             InteractionDetailsCacheService, UrlInterpolationService,
@@ -418,43 +418,10 @@ oppia.directive('stateInteractionEditor', [
             $scope.interactionPreviewHtml = _getInteractionPreviewTag(
               currentCustomizationArgs);
 
-            // Special cases for multiple choice input and image click input.
-            if ($scope.interactionId === 'MultipleChoiceInput') {
-              $rootScope.$broadcast(
-                'updateAnswerChoices',
-                currentCustomizationArgs.choices.value.map(function(val, ind) {
-                  return {
-                    val: ind,
-                    label: val
-                  };
-                })
-              );
-            } else if ($scope.interactionId === 'ImageClickInput') {
-              var _answerChoices = [];
-              var imageWithRegions =
-                currentCustomizationArgs.imageAndRegions.value;
-              for (var j = 0; j < imageWithRegions.labeledRegions.length; j++) {
-                _answerChoices.push({
-                  val: imageWithRegions.labeledRegions[j].label,
-                  label: imageWithRegions.labeledRegions[j].label
-                });
-              }
-
-              $rootScope.$broadcast('updateAnswerChoices', _answerChoices);
-            } else if ($scope.interactionId === 'ItemSelectionInput' ||
-                $scope.interactionId === 'DragAndDropSortInput') {
-              $rootScope.$broadcast(
-                'updateAnswerChoices',
-                currentCustomizationArgs.choices.value.map(function(val) {
-                  return {
-                    val: val,
-                    label: val
-                  };
-                })
-              );
-            } else {
-              $rootScope.$broadcast('updateAnswerChoices', null);
-            }
+            $rootScope.$broadcast(
+              'updateAnswerChoices',
+              StateEditorService.getAnswerChoices(
+                $scope.interactionId, currentCustomizationArgs));
           };
         }
       ]