In voiceover mode, the text is translated into its respective language. (oppia#19762)

* Translate exploration text

* fixes frontend coverage

* fixes frontend coverage

* fixes frontend coverage

* fixes frontend coverage

* fixes frontend coverage

* fixes frontend test

* fixes frontend test

* fixes frontend test

* fixes frontend statement

* fixes frontend statement

* fixes frontend statement

* fixes frontend statement

* fixes frontend statement

Author: pritam2317

core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.html

@@ -188,11 +188,11 @@ <h3 tabindex="0">Content</h3>
               </span>
             </div>
             <div class="oppia-editor-card-section" *ngIf="caContent.content._unicode">
-              <span *ngIf="!caContent.content.unicode" class="oppia-placeholder" tabindex="0">
+              <span *ngIf="!caContent.content._unicode" class="oppia-placeholder" tabindex="0">
                 {{ getEmptyContentMessage() }}
               </span>
               <span>
-                <p tabindex="0">{{ caContent.content.unicode }}</p>
+                <p tabindex="0">{{ getRequiredUnicode(caContent.content) }}</p>
               </span>
             </div>
           </div>

core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.spec.ts

@@ -110,6 +110,7 @@ describe('State translation component', () => {
   let outcomeObjectFactory: OutcomeObjectFactory;
   let stateEditorService: StateEditorService;
   let stateRecordedVoiceoversService: StateRecordedVoiceoversService;
+  let subtitledUnicodeObjectFactory: SubtitledUnicodeObjectFactory;
   let translationLanguageService: TranslationLanguageService;
   let translationTabActiveContentIdService:
     TranslationTabActiveContentIdService;
@@ -314,6 +315,8 @@ describe('State translation component', () => {
     explorationStatesService = TestBed.inject(ExplorationStatesService);
     stateRecordedVoiceoversService = TestBed.inject(
       StateRecordedVoiceoversService);
+    subtitledUnicodeObjectFactory = TestBed.inject(
+      SubtitledUnicodeObjectFactory);
     translationLanguageService = TestBed.inject(TranslationLanguageService);
     translationTabActiveContentIdService = TestBed.inject(
       TranslationTabActiveContentIdService);
@@ -605,6 +608,18 @@ describe('State translation component', () => {
         'This is the html');
     });
 
+    it('should get subtitled Unicode data translation', () => {
+      let subtitledObject = subtitledUnicodeObjectFactory.createFromBackendDict(
+        {
+          content_id: 'content_1',
+          unicode_str: 'This is the unicode'
+        });
+      expect(component.getRequiredUnicode(subtitledObject)).toBe(
+        'This is the unicode');
+      expect(component.getSubtitledContentSummary(subtitledObject)).toBe(
+        'This is the unicode');
+    });
+
     it('should get empty content message when text translations haven\'t' +
         ' been added yet', () => {
       expect(component.getEmptyContentMessage()).toBe(
@@ -1048,6 +1063,7 @@ describe('State translation component', () => {
   let explorationStatesService: ExplorationStatesService;
   let stateEditorService: StateEditorService;
   let stateRecordedVoiceoversService: StateRecordedVoiceoversService;
+  let subtitledUnicodeObjectFactory: SubtitledUnicodeObjectFactory;
   let translationLanguageService: TranslationLanguageService;
   let translationTabActiveContentIdService:
     TranslationTabActiveContentIdService;
@@ -1312,6 +1328,8 @@ describe('State translation component', () => {
     explorationStatesService = TestBed.inject(ExplorationStatesService);
     stateRecordedVoiceoversService = TestBed.inject(
       StateRecordedVoiceoversService);
+    subtitledUnicodeObjectFactory = TestBed.inject(
+      SubtitledUnicodeObjectFactory);
     translationLanguageService = TestBed.inject(TranslationLanguageService);
     translationTabActiveContentIdService = TestBed.inject(
       TranslationTabActiveContentIdService);
@@ -1444,6 +1462,17 @@ describe('State translation component', () => {
     expect(htmlData).toBe('<p>HTML data</p>');
   });
 
+  it('should return unicode when translation tab is active', () => {
+    spyOn(translationTabActiveModeService, 'isTranslationModeActive').and
+      .returnValue(true);
+    let subtitledObject = subtitledUnicodeObjectFactory.createFromBackendDict({
+      content_id: 'content_1',
+      unicode_str: 'This is the unicode'
+    });
+    const unicodeData = component.getRequiredUnicode(subtitledObject);
+    expect(unicodeData).toBe('This is the unicode');
+  });
+
   it('should return translation html when translation available', () => {
     entityTranslationsService.languageCodeToEntityTranslations.en = (
       new EntityTranslation(
@@ -1458,6 +1487,24 @@ describe('State translation component', () => {
     expect(htmlData).toBe('Translated HTML');
   });
 
+  it('should return unicode when translation is empty in voiceover mode', () =>{
+    entityTranslationsService.languageCodeToEntityTranslations.en = (
+      new EntityTranslation(
+        'entityId', 'entityType', 'entityVersion', 'hi', {
+          content_0: new TranslatedContent
+          (
+            'Translated unicode', 'unicode', true
+          )
+        })
+    );
+    let subtitledObject = subtitledUnicodeObjectFactory.createFromBackendDict({
+      content_id: 'content_1',
+      unicode_str: 'This is the unicode'
+    });
+    const unicodeData = component.getRequiredUnicode(subtitledObject);
+    expect(unicodeData).toBe('This is the unicode');
+  });
+
   it('should return translation html when translation no available', () => {
     entityTranslationsService.languageCodeToEntityTranslations.en = (
       new EntityTranslation(
@@ -1472,6 +1519,30 @@ describe('State translation component', () => {
     expect(htmlData).toBe('<p>HTML data</p>');
   });
 
+  it('should return translated unicode in voiceover mode when translation exist'
+    , () => {
+      entityTranslationsService.languageCodeToEntityTranslations.en = (
+        new EntityTranslation(
+          'entityId',
+          'entityType',
+          'entityVersion',
+          'hi',
+          {
+            content_1: new TranslatedContent
+            (
+              'Translated UNICODE', 'unicode', true
+            )
+          })
+      );
+      let subtitledObject = subtitledUnicodeObjectFactory.createFromBackendDict(
+        {
+          content_id: 'content_1',
+          unicode_str: 'This is the unicode'
+        });
+      const unicodeData = component.getRequiredUnicode(subtitledObject);
+      expect(unicodeData).toBe('Translated UNICODE');
+    });
+
   describe('when rules input tab is accessed but with no rules', () => {
     it('should throw an error when there are no rules', () => {
       spyOn(component, 'isDisabled').and.returnValue(false);

core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.ts

@@ -144,6 +144,32 @@ export class StateTranslationComponent
     return translationContent.translation as string;
   }
 
+  getRequiredUnicode(SubtitledUnicode: SubtitledUnicode): string {
+    if (this.translationTabActiveModeService.isTranslationModeActive()) {
+      return SubtitledUnicode.unicode;
+    }
+
+    let langCode = this.translationLanguageService.getActiveLanguageCode();
+    if (
+      !this.entityTranslationsService
+        .languageCodeToEntityTranslations.hasOwnProperty(langCode)
+    ) {
+      return SubtitledUnicode.unicode;
+    }
+
+    let translationContent = (
+      this.entityTranslationsService
+        .languageCodeToEntityTranslations[langCode].getWrittenTranslation(
+          SubtitledUnicode.contentId
+        )
+    );
+    if (!translationContent) {
+      return SubtitledUnicode.unicode;
+    }
+
+    return translationContent.translation as string;
+  }
+
   getEmptyContentMessage(): string {
     if (this.translationTabActiveModeService.isVoiceoverModeActive()) {
       return (