[#12578] @ sign is shown as @ when viewing essay question sub…

…mission page (#13142) * Add decoding html entity functionality * Add unit tests --------- Co-authored-by: domoberzin <[email protected]>
TEAMMATES · Jul 7, 2024 · 836f637 · 836f637
1 parent f604c11
commit 836f637
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/...ts/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html b/...ts/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html
@@ -1,5 +1,5 @@
 <div class="plain-text-area" *ngIf="!questionDetails.shouldAllowRichText">
-  <textarea [ngModel]="responseDetails.answer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
+  <textarea [ngModel]="decodedAnswer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
 </div>
 <tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" role="textbox" [attr.aria-label]="getAriaLabel()" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
 <div class="margin-top-7px text-secondary text-end">

diff --git a/...question-types/question-edit-answer-form/text-question-edit-answer-form.component.spec.ts b/...question-types/question-edit-answer-form/text-question-edit-answer-form.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { FormsModule } from '@angular/forms';
 import { TextQuestionEditAnswerFormComponent } from './text-question-edit-answer-form.component';
+import { FeedbackQuestionType } from '../../../../types/api-request';
 import { RichTextEditorModule } from '../../rich-text-editor/rich-text-editor.module';
 
 describe('TextQuestionEditAnswerFormComponent', () => {
@@ -22,10 +23,33 @@ describe('TextQuestionEditAnswerFormComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TextQuestionEditAnswerFormComponent);
     component = fixture.componentInstance;
+    component.questionDetails = {
+      shouldAllowRichText: false,
+      questionType: FeedbackQuestionType.TEXT,
+      questionText: 'Sample question',
+      recommendedLength: 50,
+    };
+    component.responseDetails = { answer: '', questionType: FeedbackQuestionType.TEXT };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should decode HTML entities for @ sign in plain-text mode', () => {
+    component.questionDetails.shouldAllowRichText = false;
+    component.responseDetails.answer = 'Test &#64; symbol';
+    fixture.detectChanges();
+
+    expect(component.decodedAnswer).toBe('Test @ symbol');
+  });
+
+  it('should decode HTML entities for apostrophe in plain-text mode', () => {
+    component.questionDetails.shouldAllowRichText = false;
+    component.responseDetails.answer = 'It&#39;s a test';
+    fixture.detectChanges();
+
+    expect(component.decodedAnswer).toBe("It's a test");
+  });
 });
diff --git a/...ents/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts b/...ents/question-types/question-edit-answer-form/text-question-edit-answer-form.component.ts
@@ -26,6 +26,12 @@ export class TextQuestionEditAnswerFormComponent
     super(DEFAULT_TEXT_QUESTION_DETAILS(), DEFAULT_TEXT_RESPONSE_DETAILS());
   }
 
+  decodeHtml(html: string): string {
+    const txt = document.createElement('textarea');
+    txt.innerHTML = html;
+    return txt.value;
+  }
+
   get wordCount(): number {
     return this.responseDetails.answer.split(/\s/g)
         .filter((item: string) => item.match(/\w/)).length;
@@ -41,4 +47,8 @@ export class TextQuestionEditAnswerFormComponent
 
     return this.wordCount > lowerLimit && this.wordCount < upperLimit;
   }
+
+  get decodedAnswer(): string {
+    return this.decodeHtml(this.responseDetails.answer);
+  }
 }