Fix oppia#19975: Ensure misconception feedback option state is saved correctly (oppia#22032)

* resolve bug with misconception feedback checkbox not saving state

* refactor question misconception editor to manage feedback and update test

* refactor question misconception editor to manage feedback and update test

* refactor question misconception editor to manage feedback and update test

* update test

* update test

* refactor question misconception editor to manage feedback and update test

* refactor question misconception editor to manage feedback and update test

Author: ojasvi004

core/templates/components/question-directives/question-misconception-editor/question-misconception-editor.component.spec.ts

@@ -120,9 +120,57 @@ describe('Question Misconception Editor Component', () => {
     );
   });
 
-  it('should use feedback by default', () => {
+  it('should initialize feedbackIsUsed to true if no previous state exists', () => {
+    component.previousFeedbackIsUsed = null;
+    component.ngOnInit();
+
+    expect(component.feedbackIsUsed).toBeTrue();
+  });
+
+  it('should initialize feedbackIsUsed to true if previous state was true', () => {
+    component.previousFeedbackIsUsed = true;
+    component.ngOnInit();
+
     expect(component.feedbackIsUsed).toBeTrue();
-    expect(component.misconceptionsBySkill).toEqual(mockMisconceptionObject);
+  });
+
+  it('should initialize feedbackIsUsed to false if previous state was false', () => {
+    component.previousFeedbackIsUsed = false;
+    component.ngOnInit();
+
+    expect(component.feedbackIsUsed).toBeFalse();
+  });
+
+  it('should update feedbackIsUsed and store the previous state', () => {
+    component.feedbackIsUsed = true;
+
+    const updatedValues = {
+      misconception: mockMisconceptionObject.abc[1],
+      skillId: 'id',
+      feedbackIsUsed: false,
+    };
+    component.updateValues(updatedValues);
+
+    expect(component.feedbackIsUsed).toBeFalse();
+    expect(component.previousFeedbackIsUsed).toBeTrue();
+  });
+
+  it('should clear outcome feedback if feedbackIsUsed is false and feedback matches misconception feedback', () => {
+    component.selectedMisconception = mockMisconceptionObject.abc[0];
+    component.selectedMisconceptionSkillId = 'abc';
+    component.feedbackIsUsed = false;
+    component.outcome.feedback.html =
+      mockMisconceptionObject.abc[0].getFeedback();
+
+    const saveAnswerGroupFeedbackSpy = spyOn(
+      component.saveAnswerGroupFeedback,
+      'emit'
+    );
+
+    component.updateMisconception();
+
+    const emittedOutcome = saveAnswerGroupFeedbackSpy.calls.first().args[0];
+    expect(emittedOutcome.feedback.html).toEqual('');
   });
 
   it('should enable edit mode correctly', () => {

core/templates/components/question-directives/question-misconception-editor/question-misconception-editor.component.ts

@@ -65,6 +65,7 @@ export class QuestionMisconceptionEditorComponent implements OnInit {
   selectedMisconceptionSkillId!: string;
   feedbackIsUsed: boolean = false;
   misconceptionEditorIsOpen: boolean = false;
+  previousFeedbackIsUsed: boolean | null = null;
   directiveSubscriptions = new Subscription();
 
   constructor(
@@ -95,8 +96,12 @@ export class QuestionMisconceptionEditorComponent implements OnInit {
           this.initValues();
         })
       );
+      if (this.previousFeedbackIsUsed !== null) {
+        this.feedbackIsUsed = this.previousFeedbackIsUsed;
+      } else {
+        this.feedbackIsUsed = true;
+      }
     }
-    this.feedbackIsUsed = true;
   }
 
   initValues(): void {
@@ -115,6 +120,11 @@ export class QuestionMisconceptionEditorComponent implements OnInit {
             this.misconceptionName = misconceptions[i].getName();
             this.selectedMisconception = misconceptions[i];
             this.selectedMisconceptionSkillId = skillId;
+            if (this.previousFeedbackIsUsed === null) {
+              this.feedbackIsUsed =
+                this.outcome.feedback.html.trim() ===
+                misconceptions[i].getFeedback().trim();
+            }
           }
         }
       } else {
@@ -149,9 +159,12 @@ export class QuestionMisconceptionEditorComponent implements OnInit {
   }
 
   updateValues(newValues: MisconceptionUpdatedValues): void {
+    if (this.feedbackIsUsed !== newValues.feedbackIsUsed) {
+      this.previousFeedbackIsUsed = this.feedbackIsUsed;
+      this.feedbackIsUsed = newValues.feedbackIsUsed;
+    }
     this.selectedMisconception = newValues.misconception;
     this.selectedMisconceptionSkillId = newValues.skillId;
-    this.feedbackIsUsed = newValues.feedbackIsUsed;
   }
 
   tagAnswerGroupWithMisconception(): void {
@@ -190,9 +203,14 @@ export class QuestionMisconceptionEditorComponent implements OnInit {
     let outcome = cloneDeep(this.outcome);
     if (this.feedbackIsUsed) {
       outcome.feedback.html = this.selectedMisconception.getFeedback();
-      this.saveAnswerGroupFeedback.emit(outcome);
-      this.externalSaveService.onExternalSave.emit();
+    } else {
+      if (outcome.feedback.html === this.selectedMisconception.getFeedback()) {
+        outcome.feedback.html = '';
+      }
     }
+
+    this.saveAnswerGroupFeedback.emit(outcome);
+    this.externalSaveService.onExternalSave.emit();
     this.misconceptionEditorIsOpen = false;
   }
 

core/templates/components/question-directives/question-misconception-selector/question-misconception-selector.component.ts

@@ -50,7 +50,9 @@ export class QuestionMisconceptionSelectorComponent implements OnInit {
   constructor(private stateEditorService: StateEditorService) {}
 
   ngOnInit(): void {
-    this.misconceptionFeedbackIsUsed = true;
+    if (this.misconceptionFeedbackIsUsed !== false) {
+      this.misconceptionFeedbackIsUsed = true;
+    }
     this.misconceptionsBySkill =
       this.stateEditorService.getMisconceptionsBySkill();
   }