refactor: decouple QTI interaction descriptors from XML parsing by introducing a writable questionType state and updating interaction descriptor lookups.

Signed-off-by: Abhishek-Punhani <punhani.manavabhi@gmail.com>

Author: Abhishek-Punhani

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/__tests__/InteractionSection.spec.js

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/vue';
+import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import InteractionSection from '../index.vue';
 
@@ -25,8 +26,9 @@ describe('InteractionSection', () => {
       expect(screen.getByText('Which planet is closest to the Sun?')).toBeInTheDocument();
     });
 
-    it('renders radio buttons for a single-select choice interaction', () => {
+    it('renders radio buttons for a single-select choice interaction', async () => {
       renderSection({ interaction: interactionBlock(CHOICE_SINGLE_SELECT_XML) });
+      await nextTick();
       const radios = screen.getAllByRole('radio');
       expect(radios).toHaveLength(3);
     });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/InteractionSection/index.vue

@@ -45,15 +45,20 @@
     },
 
     props: {
-      /** The raw XML block representing an interaction and its response declarations */
+      /**
+       * The raw interaction block.
+       * Expected shape: { bodyXml: string, responseDeclarations: string[] }
+       */
       interaction: {
         type: Object,
         required: true,
+        validator: val => typeof val.bodyXml === 'string',
       },
       /** View or edit mode */
       mode: {
         type: String,
         default: 'view',
+        validator: val => ['view', 'edit'].includes(val),
       },
       /** Whether to display correct answers (used in view mode previews) */
       showAnswers: {

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/__tests__/QTIItemEditor.spec.js

@@ -2,15 +2,14 @@ import { render, screen, fireEvent } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import QTIItemEditor from '../index.vue';
 import { qtiEditorStrings } from '../../../qtiEditorStrings';
-import { QtiInteraction } from '../../../constants';
+import { AssessmentItemTypes } from '../../../constants';
 
 const { closeBtnLabel$, questionContentPlaceholder$ } = qtiEditorStrings;
 
 const defaultProps = {
   item: {
-    id: 'test-item-id',
-    type: QtiInteraction.CHOICE,
-    title: 'Test Choice Interaction',
+    assessment_id: 'test-item-id',
+    type: AssessmentItemTypes.QTI,
   },
   index: 0,
   total: 5,

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/QTIItemEditor/index.vue

@@ -61,7 +61,7 @@
 
   import { computed, ref } from 'vue';
   import { qtiEditorStrings } from '../../qtiEditorStrings';
-  import { AssessmentItemTypes, QuestionType } from '../../constants';
+  import { QuestionType } from '../../constants';
   import useQtiItem from '../../composables/useQtiItem';
   import InteractionSection from '../InteractionSection/index.vue';
 
@@ -76,7 +76,7 @@
         questionNumberAndTypeLabel$,
         closeBtnLabel$,
         questionContentPlaceholder$,
-        interactionTypeUnknown$,
+        unknownTypeLabel$,
       } = qtiEditorStrings;
 
       const { interactions } = useQtiItem(props.item.raw_data);
@@ -88,17 +88,25 @@
         }),
       );
 
-      const currentQuestionType = ref(props.item.type || AssessmentItemTypes.QTI);
-
-      const interactionTypeLabel = computed(() => {
-        if (currentQuestionType.value === QuestionType.SINGLE_SELECT) {
-          return qtiEditorStrings.interactionTypeSingleChoice$();
-        }
-        if (currentQuestionType.value === QuestionType.MULTI_SELECT) {
-          return qtiEditorStrings.interactionTypeMultipleChoice$();
-        }
-        return interactionTypeUnknown$();
-      });
+      /**
+       * Tracks the current question type (a QuestionType value).
+       * Initialized to null — populated via the update:questionType event
+       * emitted by InteractionSection once the XML is parsed on mount.
+       */
+      const currentQuestionType = ref(null);
+
+      /**
+       * Maps each QuestionType to its localized display label.
+       * Add new entries here as more question types are introduced.
+       */
+      const QUESTION_TYPE_LABELS = {
+        [QuestionType.SINGLE_SELECT]: () => qtiEditorStrings.singleChoiceLabel$(),
+        [QuestionType.MULTI_SELECT]: () => qtiEditorStrings.multipleChoiceLabel$(),
+      };
+
+      const interactionTypeLabel = computed(
+        () => QUESTION_TYPE_LABELS[currentQuestionType.value]?.() ?? unknownTypeLabel$(),
+      );
 
       const questionNumberAndTypeLabel = computed(() =>
         questionNumberAndTypeLabel$({

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/__tests__/useInteractionDescriptor.spec.js

@@ -11,9 +11,9 @@ import {
 } from '../../utils/testingFixtures';
 
 // ---------------------------------------------------------------------------
-// Helper: renders a wrapper component that runs the composable inside setup()
-// Returns { result, bodyXmlRef } — result holds the reactive return value,
-// bodyXmlRef can be mutated to test reactivity.
+// Helper: renders a wrapper component that runs the composable inside setup().
+// Because questionType is now set on mount (not as a computed), we must wait
+// for the component to mount before checking reactive values.
 // ---------------------------------------------------------------------------
 
 function renderDescriptor(initialXml = null) {
@@ -38,94 +38,97 @@ function renderDescriptor(initialXml = null) {
 
 describe('useInteractionDescriptor', () => {
   describe('with a valid choice interaction', () => {
-    it('resolves the Choice descriptor by its type', () => {
+    it('resolves the Choice descriptor by its type', async () => {
       const { result } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
+      await nextTick();
       expect(result.descriptor.value.type).toBe(QtiInteraction.CHOICE);
     });
 
-    it('resolves questionType as singleSelect when max-choices is 1', () => {
+    it('resolves questionType as singleSelect when max-choices is 1', async () => {
       const { result } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
+      await nextTick();
       expect(result.questionType.value).toBe(QuestionType.SINGLE_SELECT);
     });
 
-    it('resolves questionType as multiSelect when max-choices > 1', () => {
+    it('resolves questionType as multiSelect when max-choices > 1', async () => {
       const { result } = renderDescriptor(CHOICE_MULTI_SELECT_XML);
+      await nextTick();
       expect(result.questionType.value).toBe(QuestionType.MULTI_SELECT);
     });
 
-    it('returns null parseError for valid XML', () => {
+    it('returns null parseError for valid XML', async () => {
       const { result } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
+      await nextTick();
       expect(result.parseError.value).toBeNull();
     });
   });
 
   describe('with an unrecognized interaction type', () => {
-    it('falls back to the default descriptor without a parse error', () => {
+    it('falls back to the default descriptor without a parse error', async () => {
       const { result } = renderDescriptor(UNKNOWN_INTERACTION_XML);
+      await nextTick();
       expect(result.parseError.value).toBeNull();
     });
 
-    it('still returns a defined fallback descriptor', () => {
+    it('still returns a defined fallback descriptor', async () => {
       const { result } = renderDescriptor(UNKNOWN_INTERACTION_XML);
+      await nextTick();
       expect(result.descriptor.value).toBeDefined();
       expect(typeof result.descriptor.value.matches).toBe('function');
     });
   });
 
   describe('with a null or empty bodyXmlRef', () => {
-    it('returns a defined descriptor when bodyXmlRef is null', () => {
+    it('returns the default descriptor when bodyXmlRef is null', async () => {
       const { result } = renderDescriptor(null);
+      await nextTick();
       expect(result.descriptor.value).toBeDefined();
       expect(result.parseError.value).toBeNull();
     });
 
-    it('returns null questionType when bodyXmlRef is null', () => {
+    it('returns null questionType when bodyXmlRef is null', async () => {
       const { result } = renderDescriptor(null);
+      await nextTick();
       expect(result.questionType.value).toBeNull();
     });
 
-    it('returns a defined descriptor when bodyXmlRef is an empty string', () => {
+    it('returns the default descriptor when bodyXmlRef is an empty string', async () => {
       const { result } = renderDescriptor('');
+      await nextTick();
       expect(result.descriptor.value).toBeDefined();
       expect(result.parseError.value).toBeNull();
     });
   });
 
   describe('with malformed XML', () => {
-    it('returns a non-null parseError', () => {
+    it('returns a non-null parseError', async () => {
       const { result } = renderDescriptor('<unclosed');
+      await nextTick();
       expect(result.parseError.value).not.toBeNull();
       expect(typeof result.parseError.value).toBe('string');
     });
 
-    it('still returns a defined fallback descriptor on parse error', () => {
+    it('still returns a defined fallback descriptor on parse error', async () => {
       const { result } = renderDescriptor('<bad xml!!{');
+      await nextTick();
       expect(result.descriptor.value).toBeDefined();
     });
   });
 
-  describe('reactivity', () => {
-    it('recomputes questionType when bodyXmlRef changes from null to single-select', async () => {
-      const { result, bodyXmlRef } = renderDescriptor(null);
-      await nextTick();
-
-      expect(result.questionType.value).toBeNull();
-
-      bodyXmlRef.value = CHOICE_SINGLE_SELECT_XML;
-      await nextTick();
-
-      expect(result.questionType.value).toBe(QuestionType.SINGLE_SELECT);
-    });
-
-    it('recomputes questionType when switching from single-select to multi-select', async () => {
-      const { result, bodyXmlRef } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
+  describe('questionType as a writable ref', () => {
+    it('descriptor recomputes when questionType is changed directly', async () => {
+      const { result } = renderDescriptor(CHOICE_SINGLE_SELECT_XML);
       await nextTick();
 
       expect(result.questionType.value).toBe(QuestionType.SINGLE_SELECT);
+      expect(result.descriptor.value.type).toBe(QtiInteraction.CHOICE);
 
-      bodyXmlRef.value = CHOICE_MULTI_SELECT_XML;
+      // Simulate user switching question type via the selector
+      result.questionType.value = QuestionType.MULTI_SELECT;
       await nextTick();
 
+      // Still the same descriptor (choice handles both), but questionType changed
+      expect(result.descriptor.value.type).toBe(QtiInteraction.CHOICE);
       expect(result.questionType.value).toBe(QuestionType.MULTI_SELECT);
     });
   });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/composables/useInteractionDescriptor.js

@@ -1,49 +1,71 @@
-import { computed } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { parseXML } from '../serialization/parseItem';
 import { descriptors, registry, DEFAULT_INTERACTION } from '../interactions/index';
 
 /**
- * Composable that analyzes a QTI interaction block's XML and resolves the
- * appropriate plugin descriptor and sub-question type.
+ * Composable that manages the question type and descriptor for a single
+ * interaction block.
  *
- * @param {import('vue').Ref<string>} bodyXmlRef Ref to interaction's bodyXml string
+ * Design rationale (three separate type concepts):
+ *  - The XML is parsed **once on mount** to infer the initial questionType.
+ *  - `questionType` is a writable `ref` so the type-selector UI can change it
+ *    without triggering a re-parse of the XML.
+ *  - `descriptor` is a `computed` derived from `questionType`, using each
+ *    descriptor's `questionTypes` array for the lookup.  This means the
+ *    rendered editor component reacts to user selections, not to XML changes.
+ *
+ * @param {import('vue').Ref<string|null>} bodyXmlRef  Ref to interaction bodyXml string.
  */
 export default function useInteractionDescriptor(bodyXmlRef) {
-  const parsed = computed(() => {
-    if (!bodyXmlRef.value) {
-      return {
-        error: null,
-        descriptor: registry[DEFAULT_INTERACTION],
-        questionType: null,
-      };
-    }
+  /** Writable question type — set from XML on mount, then driven by UI selections. */
+  const questionType = ref(null);
+  /** Any parse error message from the initial XML parse; null when clean. */
+  const parseError = ref(null);
 
+  /**
+   * Parses bodyXml and returns { descriptor, questionType } without touching
+   * any reactive state — pure helper used only on mount.
+   */
+  function inferFromXml(xml) {
+    if (!xml) {
+      return { descriptor: registry[DEFAULT_INTERACTION], questionType: null, error: null };
+    }
     try {
-      // bodyXml is the full <qti-*-interaction> element — its root IS the interaction.
-      const doc = parseXML(bodyXmlRef.value);
+      const doc = parseXML(xml);
       const interactionEl = doc.documentElement;
-
-      const descriptor =
-        descriptors.find(d => d.matches(interactionEl)) ?? registry[DEFAULT_INTERACTION];
-      const questionType = descriptor.getQuestionType(interactionEl) ?? null;
-
+      const desc = descriptors.find(d => d.matches(interactionEl)) ?? registry[DEFAULT_INTERACTION];
       return {
+        descriptor: desc,
+        questionType: desc.getQuestionType(interactionEl) ?? null,
         error: null,
-        descriptor,
-        questionType,
       };
     } catch (e) {
       return {
-        error: e.message,
         descriptor: registry[DEFAULT_INTERACTION],
         questionType: null,
+        error: e.message,
       };
     }
+  }
+
+  /** Parse XML once when the host component mounts to set the initial state. */
+  onMounted(() => {
+    const inferred = inferFromXml(bodyXmlRef.value);
+    questionType.value = inferred.questionType;
+    parseError.value = inferred.error;
   });
 
-  return {
-    descriptor: computed(() => parsed.value.descriptor),
-    questionType: computed(() => parsed.value.questionType),
-    parseError: computed(() => parsed.value.error),
-  };
+  /**
+   * Descriptor is derived from the current questionType ref.
+   * Uses each descriptor's `questionTypes` array so the lookup stays accurate
+   * when the user changes the question type via the selector.
+   * Falls back to the default descriptor when no match is found.
+   */
+  const descriptor = computed(
+    () =>
+      descriptors.find(d => d.questionTypes.includes(questionType.value)) ??
+      registry[DEFAULT_INTERACTION],
+  );
+
+  return { descriptor, questionType, parseError };
 }

contentcuration/contentcuration/frontend/shared/views/QTIEditor/constants.js

@@ -54,17 +54,22 @@ export const QtiInteraction = Object.freeze({
 
 export const QTI_INTERACTION_TAGS = Object.freeze(Object.values(QtiInteraction));
 
+/**
+ * Assessment item types as stored in the database.
+ * Within the QTI Editor, all authored items will have type QTI.
+ * The other legacy values are kept here for reference but are handled
+ * by the broader Studio assessment system, not by this editor.
+ */
 export const AssessmentItemTypes = Object.freeze({
-  SINGLE_SELECTION: 'single_selection',
-  MULTIPLE_SELECTION: 'multiple_selection',
-  TRUE_FALSE: 'true_false',
-  INPUT_QUESTION: 'input_question',
-  PERSEUS_QUESTION: 'perseus_question',
-  FREE_RESPONSE: 'free_response',
   QTI: 'qti',
 });
 
+/**
+ * UI-facing question type values — what the type selector shows to authors.
+ * These are distinct from AssessmentItemTypes (database) and QtiInteraction (XML tags).
+ * One QtiInteraction can map to multiple QuestionTypes (e.g. choice → singleSelect | multiSelect).
+ */
 export const QuestionType = Object.freeze({
-  SINGLE_SELECT: 'single_selection',
-  MULTI_SELECT: 'multiple_selection',
+  SINGLE_SELECT: 'singleSelect',
+  MULTI_SELECT: 'multiSelect',
 });

contentcuration/contentcuration/frontend/shared/views/QTIEditor/interactions/__tests__/defineInteraction.spec.js

@@ -4,6 +4,7 @@ import defineInteraction from '../defineInteraction';
 const makeValidDescriptor = (overrides = {}) => ({
   type: 'test',
   placement: 'block',
+  questionTypes: [],
   editorComponent: {},
   convertsFrom: [],
   matches: () => false,
@@ -22,6 +23,7 @@ describe('defineInteraction', () => {
   const REQUIRED_KEYS = [
     'type',
     'placement',
+    'questionTypes',
     'editorComponent',
     'convertsFrom',
     'matches',