From f6a6f26e0f420e5f1004b124c848ebc1ad3d821c Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Tue, 3 Dec 2019 08:36:56 +0000
Subject: [PATCH] fix(compiler): i18n - trim whitespace from i18n custom ids
 (#34154)

Fixes #34147

PR Close #34154
---
 .../compiler/src/i18n/extractor_merger.ts     |  2 +-
 .../test/i18n/extractor_merger_spec.ts        |  6 ++
 .../compiler/test/i18n/i18n_parser_spec.ts    | 82 ++++++++++---------
 3 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/packages/compiler/src/i18n/extractor_merger.ts b/packages/compiler/src/i18n/extractor_merger.ts
index f1009cb173..0a45f6db38 100644
--- a/packages/compiler/src/i18n/extractor_merger.ts
+++ b/packages/compiler/src/i18n/extractor_merger.ts
@@ -516,5 +516,5 @@ function _parseMessageMeta(i18n?: string): {meaning: string, description: string
       [meaningAndDesc.slice(0, descIndex), meaningAndDesc.slice(descIndex + 1)] :
       ['', meaningAndDesc];
 
-  return {meaning, description, id};
+  return {meaning, description, id: id.trim()};
 }
diff --git a/packages/compiler/test/i18n/extractor_merger_spec.ts b/packages/compiler/test/i18n/extractor_merger_spec.ts
index 697d8fedae..52eec7c548 100644
--- a/packages/compiler/test/i18n/extractor_merger_spec.ts
+++ b/packages/compiler/test/i18n/extractor_merger_spec.ts
@@ -51,6 +51,12 @@ import {serializeNodes as serializeHtmlNodes} from '../ml_parser/util/util';
             ]);
       });
 
+      it('should trim whitespace from custom ids (but not meanings)', () => {
+        expect(extract('<div i18n="\n   m1|d1@@i1\n   ">test</div>')).toEqual([
+          [['test'], '\n   m1', 'd1', 'i1'],
+        ]);
+      });
+
       it('should extract from attributes without meaning and with id', () => {
         expect(
             extract(
diff --git a/packages/compiler/test/i18n/i18n_parser_spec.ts b/packages/compiler/test/i18n/i18n_parser_spec.ts
index 729cf37bc0..cc8c9dd3af 100644
--- a/packages/compiler/test/i18n/i18n_parser_spec.ts
+++ b/packages/compiler/test/i18n/i18n_parser_spec.ts
@@ -18,7 +18,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
     describe('elements', () => {
       it('should extract from elements', () => {
         expect(_humanizeMessages('<div i18n="m|d">text</div>')).toEqual([
-          [['text'], 'm', 'd'],
+          [['text'], 'm', 'd', ''],
         ]);
       });
 
@@ -29,7 +29,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
               'text',
               '<ph tag name="START_TAG_SPAN"><ph tag name="START_BOLD_TEXT">nested</ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_TAG_SPAN">'
             ],
-            'm', 'd'
+            'm', 'd', ''
           ],
         ]);
       });
@@ -46,16 +46,22 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
             [
               '<ph tag name="START_PARAGRAPH"><ph tag name="LINE_BREAK"/></ph name="CLOSE_PARAGRAPH">'
             ],
-            'm', 'd'
+            'm', 'd', ''
           ],
         ]);
       });
+
+      it('should trim whitespace from custom ids (but not meanings)', () => {
+        expect(_humanizeMessages('<div i18n="\n   m|d@@id\n   ">text</div>')).toEqual([
+          [['text'], '\n   m', 'd', 'id'],
+        ]);
+      });
     });
 
     describe('attributes', () => {
       it('should extract from attributes outside of translatable section', () => {
         expect(_humanizeMessages('<div i18n-title="m|d" title="msg"></div>')).toEqual([
-          [['msg'], 'm', 'd'],
+          [['msg'], 'm', 'd', ''],
         ]);
       });
 
@@ -66,9 +72,9 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
                 [
                   '<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'
                 ],
-                '', ''
+                '', '', ''
               ],
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
             ]);
       });
 
@@ -76,12 +82,12 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
         expect(_humanizeMessages(
                    '<!-- i18n --><p><b i18n-title="m|d" title="msg"></b></p><!-- /i18n -->'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
               [
                 [
                   '<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'
                 ],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
@@ -91,12 +97,12 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
             _humanizeMessages(
                 '<!-- i18n -->{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}<!-- /i18n -->'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
               [
                 [
                   '{count, plural, =0 {[<ph tag name="START_PARAGRAPH"><ph tag name="START_BOLD_TEXT"></ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">]}}'
                 ],
-                '', ''
+                '', '', ''
               ],
             ]);
       });
@@ -105,7 +111,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
         expect(
             _humanizeMessages('{count, plural, =0 {<p><b i18n-title="m|d" title="msg"></b></p>}}'))
             .toEqual([
-              [['msg'], 'm', 'd'],
+              [['msg'], 'm', 'd', ''],
             ]);
       });
 
@@ -116,20 +122,20 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
     describe('interpolation', () => {
       it('should replace interpolation with placeholder', () => {
         expect(_humanizeMessages('<div i18n="m|d">before{{ exp }}after</div>')).toEqual([
-          [['[before, <ph name="INTERPOLATION"> exp </ph>, after]'], 'm', 'd'],
+          [['[before, <ph name="INTERPOLATION"> exp </ph>, after]'], 'm', 'd', ''],
         ]);
       });
 
       it('should support named interpolation', () => {
         expect(_humanizeMessages('<div i18n="m|d">before{{ exp //i18n(ph="teSt") }}after</div>'))
             .toEqual([
-              [['[before, <ph name="TEST"> exp //i18n(ph="teSt") </ph>, after]'], 'm', 'd'],
+              [['[before, <ph name="TEST"> exp //i18n(ph="teSt") </ph>, after]'], 'm', 'd', ''],
             ]);
 
         expect(
             _humanizeMessages('<div i18n=\'m|d\'>before{{ exp //i18n(ph=\'teSt\') }}after</div>'))
             .toEqual([
-              [[`[before, <ph name="TEST"> exp //i18n(ph='teSt') </ph>, after]`], 'm', 'd'],
+              [[`[before, <ph name="TEST"> exp //i18n(ph='teSt') </ph>, after]`], 'm', 'd', ''],
             ]);
       });
     });
@@ -140,9 +146,9 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
          <!-- i18n: desc2 -->message2<!-- /i18n -->
          <!-- i18n -->message3<!-- /i18n -->`))
             .toEqual([
-              [['message1'], 'meaning1', 'desc1'],
-              [['message2'], '', 'desc2'],
-              [['message3'], '', ''],
+              [['message1'], 'meaning1', 'desc1', ''],
+              [['message2'], '', 'desc2', ''],
+              [['message3'], '', '', ''],
             ]);
       });
 
@@ -153,7 +159,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
               'text',
               '<ph tag name="START_PARAGRAPH">html, <ph tag name="START_BOLD_TEXT">nested</ph name="CLOSE_BOLD_TEXT"></ph name="CLOSE_PARAGRAPH">'
             ],
-            '', ''
+            '', '', ''
           ],
         ]);
       });
@@ -162,36 +168,36 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
     describe('ICU messages', () => {
       it('should extract as ICU when single child of an element', () => {
         expect(_humanizeMessages('<div i18n="m|d">{count, plural, =0 {zero}}</div>')).toEqual([
-          [['{count, plural, =0 {[zero]}}'], 'm', 'd'],
+          [['{count, plural, =0 {[zero]}}'], 'm', 'd', ''],
         ]);
       });
 
       it('should extract as ICU + ph when not single child of an element', () => {
         expect(_humanizeMessages('<div i18n="m|d">b{count, plural, =0 {zero}}a</div>')).toEqual([
-          [['b', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', 'a'], 'm', 'd'],
-          [['{count, plural, =0 {[zero]}}'], '', ''],
+          [['b', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', 'a'], 'm', 'd', ''],
+          [['{count, plural, =0 {[zero]}}'], '', '', ''],
         ]);
       });
 
       it('should extract as ICU + ph when wrapped in whitespace in an element', () => {
         expect(_humanizeMessages('<div i18n="m|d"> {count, plural, =0 {zero}} </div>')).toEqual([
-          [[' ', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', ' '], 'm', 'd'],
-          [['{count, plural, =0 {[zero]}}'], '', ''],
+          [[' ', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', ' '], 'm', 'd', ''],
+          [['{count, plural, =0 {[zero]}}'], '', '', ''],
         ]);
       });
 
       it('should extract as ICU when single child of a block', () => {
         expect(_humanizeMessages('<!-- i18n:m|d -->{count, plural, =0 {zero}}<!-- /i18n -->'))
             .toEqual([
-              [['{count, plural, =0 {[zero]}}'], 'm', 'd'],
+              [['{count, plural, =0 {[zero]}}'], 'm', 'd', ''],
             ]);
       });
 
       it('should extract as ICU + ph when not single child of a block', () => {
         expect(_humanizeMessages('<!-- i18n:m|d -->b{count, plural, =0 {zero}}a<!-- /i18n -->'))
             .toEqual([
-              [['{count, plural, =0 {[zero]}}'], '', ''],
-              [['b', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', 'a'], 'm', 'd'],
+              [['{count, plural, =0 {[zero]}}'], '', '', ''],
+              [['b', '<ph icu name="ICU">{count, plural, =0 {[zero]}}</ph>', 'a'], 'm', 'd', ''],
             ]);
       });
 
@@ -204,9 +210,9 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
                   'b', '<ph icu name="ICU">{count, plural, =0 {[{sex, select, male {[m]}}]}}</ph>',
                   'a'
                 ],
-                'm', 'd'
+                'm', 'd', ''
               ],
-              [['{count, plural, =0 {[{sex, select, male {[m]}}]}}'], '', ''],
+              [['{count, plural, =0 {[{sex, select, male {[m]}}]}}'], '', '', ''],
             ]);
       });
     });
@@ -214,7 +220,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
     describe('implicit elements', () => {
       it('should extract from implicit elements', () => {
         expect(_humanizeMessages('<b>bold</b><i>italic</i>', ['b'])).toEqual([
-          [['bold'], '', ''],
+          [['bold'], '', '', ''],
         ]);
       });
     });
@@ -224,7 +230,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
         expect(_humanizeMessages(
                    '<b title="bb">bold</b><i title="ii">italic</i>', [], {'b': ['title']}))
             .toEqual([
-              [['bb'], '', ''],
+              [['bb'], '', '', ''],
             ]);
       });
     });
@@ -239,7 +245,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
               '<ph tag name="START_PARAGRAPH">two</ph name="CLOSE_PARAGRAPH">',
               '<ph tag name="START_PARAGRAPH_1">three</ph name="CLOSE_PARAGRAPH">',
             ],
-            'm', 'd'
+            'm', 'd', ''
           ],
         ]);
 
@@ -256,7 +262,7 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
             [
               '[<ph name="INTERPOLATION"> a </ph>, <ph name="INTERPOLATION"> a </ph>, <ph name="INTERPOLATION_1"> b </ph>]'
             ],
-            'm', 'd'
+            'm', 'd', ''
           ],
         ]);
 
@@ -276,11 +282,11 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
               '<ph icu name="ICU">{count, plural, =0 {[0]}}</ph>',
               '<ph icu name="ICU_1">{count, plural, =1 {[1]}}</ph>',
             ],
-            'm', 'd'
+            'm', 'd', ''
           ],
-          [['{count, plural, =0 {[0]}}'], '', ''],
-          [['{count, plural, =0 {[0]}}'], '', ''],
-          [['{count, plural, =1 {[1]}}'], '', ''],
+          [['{count, plural, =0 {[0]}}'], '', '', ''],
+          [['{count, plural, =0 {[0]}}'], '', '', ''],
+          [['{count, plural, =1 {[1]}}'], '', '', ''],
         ]);
 
         expect(_humanizePlaceholders(html)).toEqual([
@@ -304,11 +310,11 @@ import {DEFAULT_INTERPOLATION_CONFIG} from '@angular/compiler/src/ml_parser/inte
 
 export function _humanizeMessages(
     html: string, implicitTags: string[] = [],
-    implicitAttrs: {[k: string]: string[]} = {}): [string[], string, string][] {
+    implicitAttrs: {[k: string]: string[]} = {}): [string[], string, string, string][] {
   // clang-format off
   // https://github.com/angular/clang-format/issues/35
   return _extractMessages(html, implicitTags, implicitAttrs).map(
-    message => [serializeNodes(message.nodes), message.meaning, message.description, ]) as [string[], string, string][];
+    message => [serializeNodes(message.nodes), message.meaning, message.description, message.id]) as [string[], string, string, string][];
   // clang-format on
 }