Merge pull request #5949 from Abhishek-Punhani/Issue5913

Update AnswersEditor layout and answer option structure

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js

@@ -7,6 +7,13 @@ import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vu
 
 jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');
 
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  return function useKResponsiveWindow() {
+    const { ref } = require('vue');
+    return { windowIsSmall: ref(false) };
+  };
+});
+
 const clickNewAnswerBtn = async wrapper => {
   await wrapper.findComponent('[data-test="newAnswerBtn"]').trigger('click');
 };
@@ -16,7 +23,7 @@ const rendersNewAnswerBtn = wrapper => {
 };
 
 const clickAnswer = async (wrapper, answerIdx) => {
-  await wrapper.findAllComponents('[data-test="answer"]').at(answerIdx).trigger('click');
+  await wrapper.findAll('[data-test="answer"]').at(answerIdx).trigger('click');
 };
 
 const clickMoveAnswerUp = async (wrapper, answerIdx) => {
@@ -59,6 +66,24 @@ describe('AnswersEditor', () => {
     expect(wrapper.html()).toContain('Question has no answer options');
   });
 
+  describe('answers label', () => {
+    it.each([
+      [AssessmentItemTypes.SINGLE_SELECTION, AnswersEditor.$trs.answersLabelSingleChoice],
+      [AssessmentItemTypes.TRUE_FALSE, AnswersEditor.$trs.answersLabelSingleChoice],
+      [AssessmentItemTypes.MULTIPLE_SELECTION, AnswersEditor.$trs.answersLabelMultipleChoice],
+      [AssessmentItemTypes.INPUT_QUESTION, AnswersEditor.$trs.answersLabelNumeric],
+    ])('renders the correct label for %s questions', (questionKind, expectedLabel) => {
+      wrapper = shallowMount(AnswersEditor, {
+        propsData: {
+          questionKind,
+          answers: [],
+        },
+      });
+
+      expect(wrapper.text()).toContain(expectedLabel);
+    });
+  });
+
   describe('for a single selection question', () => {
     beforeEach(() => {
       wrapper = mount(AnswersEditor, {
@@ -72,7 +97,7 @@ describe('AnswersEditor', () => {
       });
     });
 
-    it('renders answers as radio selects', () => {
+    it('renders answers as radio controls', () => {
       const inputs = wrapper.findAll('input');
 
       expect(inputs.length).toBe(2);
@@ -88,8 +113,38 @@ describe('AnswersEditor', () => {
       expect(inputs.at(1).element.checked).toBe(false);
     });
 
+    it('marks correct answer rows with the selected visual state', () => {
+      const answerRows = wrapper.findAll('[data-test="answer"]');
+
+      // Correct row has both border-color and background-color applied
+      expect(answerRows.at(0).attributes('style')).toContain('border-color');
+      expect(answerRows.at(0).attributes('style')).toContain('background-color');
+      // Incorrect row has border-color but no inline background-color (null omits it)
+      expect(answerRows.at(1).attributes('style')).toContain('border-color');
+      expect(answerRows.at(1).attributes('style')).not.toContain('background-color');
+    });
+
+    it('renders all possible answers', () => {
+      // First answer is open by default (openAnswerIdx=0) — edit mode TipTapEditor
+      // Second answer is closed — view mode TipTapEditor
+      const editors = wrapper.findAllComponents(TipTapEditor);
+
+      // Closed answer uses view mode to safely render rich text
+      const viewEditor = editors.filter(e => e.props('mode') === 'view').at(0);
+      expect(viewEditor.exists()).toBe(true);
+      expect(viewEditor.props('value')).toBe('Peanut butter');
+
+      // Open answer uses edit mode
+      const editEditor = editors.filter(e => e.props('mode') === 'edit').at(0);
+      expect(editEditor.exists()).toBe(true);
+      expect(editEditor.props('value')).toBe('Mayonnaise (I mean you can, but...)');
+    });
+
     it('renders new answer button', () => {
       expect(rendersNewAnswerBtn(wrapper)).toBe(true);
+      expect(wrapper.findComponent('[data-test="newAnswerBtn"]').text()).toContain(
+        AnswersEditor.$trs.addOptionBtnLabel,
+      );
     });
 
     describe('on new answer button click', () => {
@@ -140,8 +195,26 @@ describe('AnswersEditor', () => {
       expect(inputs.at(2).element.checked).toBe(true);
     });
 
+    it('renders all possible answers', () => {
+      // First answer is open by default (openAnswerIdx=0) — edit mode TipTapEditor
+      // Remaining answers are closed — each gets a view mode TipTapEditor
+      const editors = wrapper.findAllComponents(TipTapEditor);
+
+      const viewEditors = editors.filter(e => e.props('mode') === 'view');
+      expect(viewEditors.length).toBe(2);
+      expect(viewEditors.at(0).props('value')).toBe('Peanut butter');
+      expect(viewEditors.at(1).props('value')).toBe('Jelly');
+
+      const editEditor = editors.filter(e => e.props('mode') === 'edit').at(0);
+      expect(editEditor.exists()).toBe(true);
+      expect(editEditor.props('value')).toBe('Mayonnaise (I mean you can, but...)');
+    });
+
     it('renders new answer button', () => {
       expect(rendersNewAnswerBtn(wrapper)).toBe(true);
+      expect(wrapper.findComponent('[data-test="newAnswerBtn"]').text()).toContain(
+        AnswersEditor.$trs.addOptionBtnLabel,
+      );
     });
 
     describe('on new answer button click', () => {
@@ -175,7 +248,7 @@ describe('AnswersEditor', () => {
       });
     });
 
-    it('renders answers as radio selects', () => {
+    it('renders answers as radio controls', () => {
       const inputs = wrapper.findAll('input');
 
       expect(inputs.length).toBe(2);
@@ -202,31 +275,24 @@ describe('AnswersEditor', () => {
         propsData: {
           questionKind: AssessmentItemTypes.INPUT_QUESTION,
           answers: [
-            { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-            { answer: 'Peanut butter', correct: true, order: 2 },
+            { answer: '1.5', correct: true, order: 1 },
+            { answer: '2', correct: true, order: 2 },
           ],
         },
       });
     });
 
-    it('renders all possible answers', () => {
-      // The answer text won't render when `mount()` is used so we override
-      // and use shallowMount here
-      wrapper = shallowMount(AnswersEditor, {
-        propsData: {
-          questionKind: AssessmentItemTypes.INPUT_QUESTION,
-          answers: [
-            { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-            { answer: 'Peanut butter', correct: true, order: 2 },
-          ],
-        },
-      });
-      expect(wrapper.html()).toContain('Mayonnaise (I mean you can, but...)');
-      expect(wrapper.html()).toContain('Peanut butter');
+    it('renders open answer as a number input and closed answer as plain text', () => {
+      expect(wrapper.find('input[type="number"]').element.value).toBe('1.5');
+
+      expect(wrapper.html()).toContain('2');
     });
 
     it('renders new answer button', () => {
       expect(rendersNewAnswerBtn(wrapper)).toBe(true);
+      expect(wrapper.findComponent('[data-test="newAnswerBtn"]').text()).toContain(
+        AnswersEditor.$trs.newAnswerBtnLabel,
+      );
     });
 
     describe('on new answer button click', () => {
@@ -238,8 +304,8 @@ describe('AnswersEditor', () => {
         expect(wrapper.emitted().update).toBeTruthy();
         expect(wrapper.emitted().update.length).toBe(1);
         expect(wrapper.emitted().update[0][0]).toEqual([
-          { answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
-          { answer: 'Peanut butter', correct: true, order: 2 },
+          { answer: '1.5', correct: true, order: 1 },
+          { answer: '2', correct: true, order: 2 },
           { answer: '', correct: true, order: 3 },
         ]);
       });
@@ -260,14 +326,12 @@ describe('AnswersEditor', () => {
       });
     });
 
-    it('passes autofocus=true to the open answer editor', () => {
-      const editors = wrapper.findAllComponents(TipTapEditor);
-      expect(editors.at(1).props('autofocus')).toBe(true);
-    });
-
-    it('passes autofocus=false to closed answer editors', () => {
+    it('passes autofocus=true to the open (edit-mode) answer editor', () => {
+      // A single TipTapEditor per answer switches mode reactively.
+      // The editor for openAnswerIdx has mode='edit' and autofocus=true.
       const editors = wrapper.findAllComponents(TipTapEditor);
-      expect(editors.at(0).props('autofocus')).toBe(false);
+      const editModeEditor = editors.filter(e => e.props('mode') === 'edit').at(0);
+      expect(editModeEditor.props('autofocus')).toBe(true);
     });
   });
 
@@ -373,7 +437,7 @@ describe('AnswersEditor', () => {
       });
 
       await wrapper.vm.$nextTick();
-      await wrapper.findAll('input[type="radio"]').at(1).setChecked();
+      await wrapper.findAll('.answer-selection input[type="radio"]').at(1).trigger('click');
     });
 
     it('emits update event with a payload containing updated answers', () => {