Merge pull request #6059 from Abhishek-Punhani/question-selector

feat: add AnswerSettings and QuestionSettingsHeader components

Author: AlexVelezLl

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

@@ -1,15 +1,24 @@
-import { render, screen } from '@testing-library/vue';
+import { render, screen, fireEvent, within } from '@testing-library/vue';
 import { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import InteractionSection from '../index.vue';
+import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
 
 import {
   CHOICE_SINGLE_SELECT_XML,
+  CHOICE_MULTI_SELECT_XML,
   UNKNOWN_INTERACTION_XML,
   mockInteractionBlock as interactionBlock,
 } from '../../../utils/testingFixtures';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
 
 const renderSection = (props = {}) =>
   render(InteractionSection, {
@@ -36,12 +45,72 @@ describe('InteractionSection', () => {
       expect(screen.getByText('Mercury')).toBeInTheDocument();
       expect(screen.getByText('Venus')).toBeInTheDocument();
     });
+
+    it('teleports answer settings into the question type selector header', async () => {
+      renderSection({ interaction: interactionBlock(CHOICE_MULTI_SELECT_XML) });
+      await nextTick();
+      const targetDiv = document.querySelector('.answer-settings-group');
+      expect(targetDiv).toBeInTheDocument();
+      expect(
+        within(targetDiv).getByRole('checkbox', { name: tr.$tr('shuffleAnswersLabel') }),
+      ).toBeInTheDocument();
+    });
   });
 
   describe('parse error handling', () => {
     it('shows a parse error when XML is malformed', () => {
       renderSection({ interaction: interactionBlock('not-xml<{{') });
-      expect(screen.getByText('This question could not be loaded')).toBeInTheDocument();
+      expect(screen.getByText(tr.$tr('errorParsingQuestion'))).toBeInTheDocument();
+    });
+  });
+
+  describe('type switching', () => {
+    it('preserves the prompt but resets choices when switching from choice to text-entry', async () => {
+      const Wrapper = {
+        components: { InteractionSection },
+        template: `
+          <InteractionSection
+            mode="edit"
+            :interaction="interactionBlock"
+            @update:interaction="onUpdate"
+          />
+        `,
+        data() {
+          return {
+            interactionBlock: {
+              bodyXml: CHOICE_SINGLE_SELECT_XML,
+              responseDeclarations: [],
+            },
+          };
+        },
+        methods: {
+          onUpdate(val) {
+            this.interactionBlock = val;
+            this.$emit('wrapper-update', val);
+          },
+        },
+      };
+
+      const { emitted } = render(Wrapper, {
+        routes: new VueRouter(),
+      });
+
+      await nextTick();
+
+      const selectedOption = screen.getAllByText(tr.$tr('singleSelectLabel'))[0];
+      await fireEvent.click(selectedOption);
+
+      const textEntryOption = screen.getByText(tr.$tr('textEntryLabel'));
+      await fireEvent.click(textEntryOption);
+
+      await nextTick();
+
+      const emits = emitted()['wrapper-update'];
+      const switchXml = emits.at(-1)[0].bodyXml;
+
+      expect(switchXml).toContain('Which planet is closest to the Sun?');
+      expect(switchXml).toContain('<qti-text-entry-interaction');
+      expect(switchXml).not.toContain('Mercury');
     });
   });
 

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

@@ -7,16 +7,25 @@
     >
       {{ parseError }}
     </p>
-    <component
-      :is="descriptor.editorComponent"
-      v-else
-      :key="descriptor.type"
-      :questionType="questionType"
-      :interaction="interaction"
-      :mode="mode"
-      :showAnswers="showAnswers"
-      @update:interaction="interaction => $emit('update:interaction', interaction)"
-    />
+    <div v-else>
+      <QuestionTypeSelector
+        v-if="mode === 'edit'"
+        :questionType="questionType"
+        :settingsTargetId="settingsTargetId"
+        @update:questionType="onUpdateQuestionType"
+      />
+
+      <component
+        :is="descriptor.editorComponent"
+        :key="descriptor.type"
+        :questionType="questionType"
+        :interaction="interaction"
+        :mode="mode"
+        :showAnswers="showAnswers"
+        :teleportTargetId="settingsTargetId"
+        @update:interaction="onUpdateInteraction"
+      />
+    </div>
   </div>
 
 </template>
@@ -26,10 +35,17 @@
 
   import { computed, watch } from 'vue';
   import useInteractionDescriptor from '../../composables/useInteractionDescriptor';
+  import QuestionTypeSelector from '../QuestionTypeSelector/index.vue';
+  import { generateRandomSlug } from '../../utils/generateRandomSlug';
+  import { descriptors } from '../../interactions';
 
   export default {
     name: 'InteractionSection',
 
+    components: {
+      QuestionTypeSelector,
+    },
+
     setup(props, { emit }) {
       const interactionRef = computed(() => props.interaction);
       const { descriptor, questionType, parseError } = useInteractionDescriptor(interactionRef);
@@ -42,7 +58,37 @@
         { immediate: true },
       );
 
-      return { descriptor, questionType, parseError };
+      const onUpdateQuestionType = newType => {
+        const newDescriptor = descriptors.find(d => d.questionTypes.includes(newType));
+        if (newDescriptor && newDescriptor !== descriptor.value) {
+          const oldState = descriptor.value.parse(
+            props.interaction.bodyXml,
+            props.interaction.responseDeclarations,
+          );
+          const freshState = newDescriptor.parse('', []);
+          const withPrompt = { ...freshState, prompt: oldState.prompt ?? '' };
+          const newInteraction = newDescriptor.buildXML(withPrompt, newType);
+          emit('update:interaction', newInteraction);
+        }
+
+        questionType.value = newType;
+        emit('update:questionType', newType);
+      };
+
+      const onUpdateInteraction = updatedInteraction => {
+        emit('update:interaction', updatedInteraction);
+      };
+
+      const settingsTargetId = generateRandomSlug('answer-settings');
+
+      return {
+        descriptor,
+        questionType,
+        parseError,
+        onUpdateQuestionType,
+        onUpdateInteraction,
+        settingsTargetId,
+      };
     },
 
     props: {

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

@@ -5,6 +5,13 @@ import { qtiEditorStrings } from '../../../qtiEditorStrings';
 import { AssessmentItemTypes } from '../../../constants';
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
 
 const { closeBtnLabel$, questionContentPlaceholder$ } = qtiEditorStrings;
 

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

@@ -29,7 +29,7 @@
     <div class="question-card-body">
       <InteractionSection
         v-if="interactions.length > 0"
-        :interaction="interactions[0]"
+        :interaction="currentInteraction"
         :mode="mode"
         :showAnswers="showAnswers"
         @update:questionType="type => (currentQuestionType = type)"
@@ -103,6 +103,11 @@
         currentResponseDeclarations.value = interactions.value[0].responseDeclarations;
       }
 
+      const currentInteraction = computed(() => ({
+        bodyXml: currentBodyXml.value,
+        responseDeclarations: currentResponseDeclarations.value,
+      }));
+
       const questionNumberLabel = computed(() =>
         questionNumberLabel$({
           number: props.index + 1,
@@ -155,6 +160,7 @@
       return {
         currentQuestionType,
         interactions,
+        currentInteraction,
         questionNumberLabel,
         questionNumberAndTypeLabel,
         closeBtnLabel$,

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

@@ -0,0 +1,69 @@
+import { render, screen, fireEvent, within } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import QuestionTypeSelector from '../index.vue';
+import { QuestionType } from '../../../constants';
+import { qtiEditorStrings as tr } from '../../../qtiEditorStrings';
+
+const defaultProps = {
+  questionType: QuestionType.SINGLE_SELECT,
+  settingsTargetId: 'test-settings-target',
+};
+
+const renderHeader = (props = {}) =>
+  render(QuestionTypeSelector, {
+    props: { ...defaultProps, ...props },
+    routes: new VueRouter(),
+  });
+
+describe('QuestionTypeSelector', () => {
+  it('renders the type meta-label in edit mode', () => {
+    renderHeader();
+    expect(screen.getByText(tr.$tr('typeLabel'))).toBeInTheDocument();
+  });
+
+  it('renders a KSelect with the selected option label (not raw enum)', () => {
+    renderHeader();
+    expect(screen.getByText(tr.$tr('singleSelectLabel'))).toBeInTheDocument();
+    expect(screen.queryByText(QuestionType.SINGLE_SELECT)).not.toBeInTheDocument();
+  });
+
+  it('renders the selected type label inside the type group', () => {
+    renderHeader();
+    const group = screen.getByRole('group', { name: tr.$tr('typeLabel') });
+    expect(within(group).getByText(tr.$tr('singleSelectLabel'))).toBeInTheDocument();
+  });
+
+  it('opens type info modal when info button clicked', async () => {
+    renderHeader();
+
+    const helpButton = screen.getByRole('button', { name: tr.$tr('responseTypeInfoTitle') });
+    await fireEvent.click(helpButton);
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('singleChoiceDescription'))).toBeInTheDocument();
+    expect(screen.getByText(tr.$tr('multipleSelectionDescription'))).toBeInTheDocument();
+  });
+
+  it('closes type info modal when Close button clicked', async () => {
+    renderHeader();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('responseTypeInfoTitle') }));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+    await fireEvent.click(screen.getByRole('button', { name: tr.$tr('closeBtnLabel') }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('emits update:questionType when a new type is selected', async () => {
+    const { emitted } = renderHeader();
+
+    // Click the currently selected option to open the dropdown
+    await fireEvent.click(screen.getByText(tr.$tr('singleSelectLabel')));
+
+    // Click the new option from the dropdown menu
+    await fireEvent.click(screen.getByText(tr.$tr('multiSelectLabel')));
+
+    expect(emitted()['update:questionType']).toBeTruthy();
+    expect(emitted()['update:questionType'][0]).toEqual([QuestionType.MULTI_SELECT]);
+  });
+});