test(compiler-cli): clarify source-map expectations in compliance tests

The compliance tests can check source-map segments against expectations encoded into the expectation files. Previously, the encoding of the expected segment was only delimited by whitespace, but this made it difficult to identify segments that started or ended with whitespace. Now these segment expectations are wrapped in double-quotes which makes it easier to read and understand the expectation files.
petebacondarwin · Jun 30, 2021 · May 20, 2021 · May 19, 2021 · May 12, 2021 · Jul 1, 2021
commit 7b1048f4a3865bbb2f508f1128ab5dbcd54382d7
diff --git a/packages/compiler-cli/test/compliance/README.md b/packages/compiler-cli/test/compliance/README.md
@@ -131,7 +131,7 @@ are intelligently matched to check whether they are equivalent.
 To check a mapping, add a `// SOURCE:` comment to the end of a line in an expectation file:
 
 ```
-<generated code> // SOURCE: "<source-url>" <source code>
+<generated code> // SOURCE: "<source-url>" "<source code>"
 ```
 
 The generated code, stripped of the `// SOURCE: ` comment, will still be checked as normal by the
@@ -144,6 +144,7 @@ Note:
   to be `/`.
 * Whitespace is important and will be included when comparing the segments.
 * There is a single space character between each part of the line.
+* Double quotes in the mapping must be escaped.
 * Newlines within a mapping must be escaped since the mapping and comment must all appear on a
   single line of this file.
 

diff --git a/...ompiler-cli/test/compliance/test_cases/source_mapping/external_templates/escaped_chars.js b/...ompiler-cli/test/compliance/test_cases/source_mapping/external_templates/escaped_chars.js
@@ -1,6 +1,6 @@
-i0.ɵɵelementStart(0, "div") // SOURCE: "/escaped_chars.html" <div>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/escaped_chars.html" "<div>"
 …
 // NOTE: the `\\r\\n` at the end of the next line will be unescaped to `\r\n`. If it was just `\r\n` it would get unescaped to the actual characters.
-i0.ɵɵtext(1, " Some Message Encoded character: \uD83D\uDE80\\n") // SOURCE: "/escaped_chars.html" Some Message\r\n  Encoded character: 🚀\\r\\n
+i0.ɵɵtext(1, " Some Message Encoded character: \uD83D\uDE80\\n") // SOURCE: "/escaped_chars.html" "Some Message\r\n  Encoded character: 🚀\r\n"
 …
-i0.ɵɵelementEnd() // SOURCE: "/escaped_chars.html" </div>
+i0.ɵɵelementEnd() // SOURCE: "/escaped_chars.html" "</div>"
diff --git a/...cli/test/compliance/test_cases/source_mapping/external_templates/escaped_chars_partial.js b/...cli/test/compliance/test_cases/source_mapping/external_templates/escaped_chars_partial.js
@@ -1,6 +1,5 @@
-.ɵɵelementStart(0, "div") // SOURCE: "/escaped_chars.html" <div>\r\n  
+.ɵɵelementStart(0, "div") // SOURCE: "/escaped_chars.html" "<div>\r\n  "
 …
-// NOTE: the `\\r\\n` at the end of the next line will be unescaped to `\r\n`. If it was just `\r\n` it would get unescaped to the actual characters.
-.ɵɵtext(1, " Some Message Encoded character: \uD83D\uDE80\\n") // SOURCE: "/escaped_chars.html" Some Message\r\n  Encoded character: 🚀\\r\\n
+.ɵɵtext(1, " Some Message Encoded character: \uD83D\uDE80\\n") // SOURCE: "/escaped_chars.html" "Some Message\r\n  Encoded character: 🚀\r\n"
 …
-.ɵɵelementEnd() // SOURCE: "/escaped_chars.html" </div>
+.ɵɵelementEnd() // SOURCE: "/escaped_chars.html" "</div>"
diff --git a/...ler-cli/test/compliance/test_cases/source_mapping/external_templates/external_template.js b/...ler-cli/test/compliance/test_cases/source_mapping/external_templates/external_template.js
@@ -1,13 +1,13 @@
-i0.ɵɵelementStart(0, "div") // SOURCE: "/dir/test.html" <div>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/dir/test.html" "<div>"
 …
-i0.ɵɵtext(1, "this is a test") // SOURCE: "/dir/test.html" this is a test
+i0.ɵɵtext(1, "this is a test") // SOURCE: "/dir/test.html" "this is a test"
 …
-i0.ɵɵelementEnd() // SOURCE: "/dir/test.html" </div>
+i0.ɵɵelementEnd() // SOURCE: "/dir/test.html" "</div>"
 …
-i0.ɵɵelementStart(2, "div") // SOURCE: "/dir/test.html" <div>
+i0.ɵɵelementStart(2, "div") // SOURCE: "/dir/test.html" "<div>"
 …
-i0.ɵɵtext(3) // SOURCE: "/dir/test.html" {{ 1 + 2 }}
+i0.ɵɵtext(3) // SOURCE: "/dir/test.html" "{{ 1 + 2 }}"
 …
-i0.ɵɵelementEnd() // SOURCE: "/dir/test.html" </div>
+i0.ɵɵelementEnd() // SOURCE: "/dir/test.html" "</div>"
 …
-i0.ɵɵtextInterpolate(1 + 2) // SOURCE: "/dir/test.html" {{ 1 + 2 }}
+i0.ɵɵtextInterpolate(1 + 2) // SOURCE: "/dir/test.html" "{{ 1 + 2 }}"
diff --git a/...test/compliance/test_cases/source_mapping/external_templates/external_template_partial.js b/...test/compliance/test_cases/source_mapping/external_templates/external_template_partial.js
@@ -1,14 +1,14 @@
-.ɵɵelementStart(0, "div") // SOURCE: "/dir/test.html" <div>
+.ɵɵelementStart(0, "div") // SOURCE: "/dir/test.html" "<div>"
 …
-.ɵɵtext(1, "this is a test") // SOURCE: "/dir/test.html" this is a test
+.ɵɵtext(1, "this is a test") // SOURCE: "/dir/test.html" "this is a test"
 …
-.ɵɵelementEnd() // SOURCE: "/dir/test.html" </div>\n
+.ɵɵelementEnd() // SOURCE: "/dir/test.html" "</div>\n"
 …
-.ɵɵelementStart(2, "div") // SOURCE: "/dir/test.html" <div>
+.ɵɵelementStart(2, "div") // SOURCE: "/dir/test.html" "<div>"
 …
-.ɵɵtext(3) // SOURCE: "/dir/test.html" {{ 1 + 2 }}
+.ɵɵtext(3) // SOURCE: "/dir/test.html" "{{ 1 + 2 }}"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵelementEnd() // SOURCE: "/dir/test.html" </div>
+.ɵɵelementEnd() // SOURCE: "/dir/test.html" "</div>"
 …
-.ɵɵtextInterpolate(1 + 2) // SOURCE: "/dir/test.html" {{ 1 + 2 }}
+.ɵɵtextInterpolate(1 + 2) // SOURCE: "/dir/test.html" "{{ 1 + 2 }}"
diff --git a/...mpiler-cli/test/compliance/test_cases/source_mapping/external_templates/extra_root_dir.js b/...mpiler-cli/test/compliance/test_cases/source_mapping/external_templates/extra_root_dir.js
@@ -1,13 +1,13 @@
-i0.ɵɵelementStart(0, "div") // SOURCE: "/extraRootDir/dir/extra.html" <div>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/extraRootDir/dir/extra.html" "<div>"
 …
-i0.ɵɵtext(1, "this is a test") // SOURCE: "/extraRootDir/dir/extra.html" this is a test
+i0.ɵɵtext(1, "this is a test") // SOURCE: "/extraRootDir/dir/extra.html" "this is a test"
 …
-i0.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" </div>
+i0.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" "</div>"
 …
-i0.ɵɵelementStart(2, "div") // SOURCE: "/extraRootDir/dir/extra.html" <div>
+i0.ɵɵelementStart(2, "div") // SOURCE: "/extraRootDir/dir/extra.html" "<div>"
 …
-i0.ɵɵtext(3) // SOURCE: "/extraRootDir/dir/extra.html" {{ 1 + 2 }}
+i0.ɵɵtext(3) // SOURCE: "/extraRootDir/dir/extra.html" "{{ 1 + 2 }}"
 …
-i0.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" </div>
+i0.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" "</div>"
 …
-i0.ɵɵtextInterpolate(1 + 2) // SOURCE: "/extraRootDir/dir/extra.html" {{ 1 + 2 }}
+i0.ɵɵtextInterpolate(1 + 2) // SOURCE: "/extraRootDir/dir/extra.html" "{{ 1 + 2 }}"
diff --git a/...li/test/compliance/test_cases/source_mapping/external_templates/extra_root_dir_partial.js b/...li/test/compliance/test_cases/source_mapping/external_templates/extra_root_dir_partial.js
@@ -1,13 +1,13 @@
-.ɵɵelementStart(0, "div") // SOURCE: "/extraRootDir/dir/extra.html" <div>
+.ɵɵelementStart(0, "div") // SOURCE: "/extraRootDir/dir/extra.html" "<div>"
 …
-.ɵɵtext(1, "this is a test") // SOURCE: "/extraRootDir/dir/extra.html" this is a test
+.ɵɵtext(1, "this is a test") // SOURCE: "/extraRootDir/dir/extra.html" "this is a test"
 …
-.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" </div>\n
+.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" "</div>\n"
 …
-.ɵɵelementStart(2, "div") // SOURCE: "/extraRootDir/dir/extra.html" <div>
+.ɵɵelementStart(2, "div") // SOURCE: "/extraRootDir/dir/extra.html" "<div>"
 …
-.ɵɵtext(3) // SOURCE: "/extraRootDir/dir/extra.html" {{ 1 + 2 }}
+.ɵɵtext(3) // SOURCE: "/extraRootDir/dir/extra.html" "{{ 1 + 2 }}"
 …
-.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" </div>
+.ɵɵelementEnd() // SOURCE: "/extraRootDir/dir/extra.html" "</div>"
 …
-.ɵɵtextInterpolate(1 + 2) // SOURCE: "/extraRootDir/dir/extra.html" {{ 1 + 2 }}
+.ɵɵtextInterpolate(1 + 2) // SOURCE: "/extraRootDir/dir/extra.html" "{{ 1 + 2 }}"
diff --git a/...mpiler-cli/test/compliance/test_cases/source_mapping/inline_templates/escape_sequences.js b/...mpiler-cli/test/compliance/test_cases/source_mapping/inline_templates/escape_sequences.js
@@ -1,3 +1,3 @@
 consts: [[1, "some-class"]]
 …
-i0.ɵɵelementStart(0, "div", 0) // SOURCE: "/escape_sequences.ts" <div class=\"some-class\">
+i0.ɵɵelementStart(0, "div", 0) // SOURCE: "/escape_sequences.ts" "<div class=\\"some-class\\">"
diff --git a/...li/test/compliance/test_cases/source_mapping/inline_templates/escape_sequences_partial.js b/...li/test/compliance/test_cases/source_mapping/inline_templates/escape_sequences_partial.js
@@ -1,3 +1,3 @@
 consts: [[1, "some-class"]]
 …
-.ɵɵelementStart(0, "div", 0) // SOURCE: "/escape_sequences.ts" <div class=\"some-class\">
+.ɵɵelementStart(0, "div", 0) // SOURCE: "/escape_sequences.ts" "<div class=\\"some-class\\">"
diff --git a/.../test/compliance/test_cases/source_mapping/inline_templates/i18n_message_container_tag.js b/.../test/compliance/test_cases/source_mapping/inline_templates/i18n_message_container_tag.js
@@ -1,13 +1,13 @@
-`Hello, ${ // SOURCE: "/i18n_message_container_tag.ts" Hello, 
+`Hello, ${ // SOURCE: "/i18n_message_container_tag.ts" "Hello, "
 …
-"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" <b>
+"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" "<b>"
 …
-}:START_BOLD_TEXT:World${ // SOURCE: "/i18n_message_container_tag.ts" World
+}:START_BOLD_TEXT:World${ // SOURCE: "/i18n_message_container_tag.ts" "World"
 …
-"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" </b>
+"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" "</b>"
 …
-}:CLOSE_BOLD_TEXT:!` // SOURCE: "/i18n_message_container_tag.ts" !
+}:CLOSE_BOLD_TEXT:!` // SOURCE: "/i18n_message_container_tag.ts" "!"
 …
-i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_container_tag.ts" <div i18n>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_container_tag.ts" "<div i18n>"
 …
-i0.ɵɵelementEnd() // SOURCE: "/i18n_message_container_tag.ts" </div>
+i0.ɵɵelementEnd() // SOURCE: "/i18n_message_container_tag.ts" "</div>"
diff --git a/...mpliance/test_cases/source_mapping/inline_templates/i18n_message_container_tag_partial.js b/...mpliance/test_cases/source_mapping/inline_templates/i18n_message_container_tag_partial.js
@@ -1,14 +1,14 @@
-$localize`Hello, ${ // SOURCE: "/i18n_message_container_tag.ts" Hello, 
+$localize`Hello, ${ // SOURCE: "/i18n_message_container_tag.ts" "Hello, "
 …
-"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" <b>
+"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" "<b>"
 …
-}:START_BOLD_TEXT:World${ // SOURCE: "/i18n_message_container_tag.ts" World
+}:START_BOLD_TEXT:World${ // SOURCE: "/i18n_message_container_tag.ts" "World"
 …
-"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" </b>
+"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_container_tag.ts" "</b>"
 …
-}:CLOSE_BOLD_TEXT:!` // SOURCE: "/i18n_message_container_tag.ts" !
+}:CLOSE_BOLD_TEXT:!` // SOURCE: "/i18n_message_container_tag.ts" "!"
 …
-.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_container_tag.ts" <div i18n>
+.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_container_tag.ts" "<div i18n>"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵelem // SOURCE: "/i18n_message_container_tag.ts" </div>'
+.ɵɵelem // SOURCE: "/i18n_message_container_tag.ts" "</div>'"
diff --git a/.../compliance/test_cases/source_mapping/inline_templates/i18n_message_element_whitespace.js b/.../compliance/test_cases/source_mapping/inline_templates/i18n_message_element_whitespace.js
@@ -1,20 +1,20 @@
-` pre-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" pre-p\\n  
+` pre-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" "pre-p\\n  "
 …
-"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" <p>\\n    
+"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" "<p>\\n    "
 …
-}:START_PARAGRAPH: in-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" in-p\\n  
+}:START_PARAGRAPH: in-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" "in-p\\n  "
 …
-"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" </p>
+"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" "</p>"
 …
-}:CLOSE_PARAGRAPH: post-p\n` // SOURCE: "/i18n_message_element_whitespace.ts" post-p\\n
+}:CLOSE_PARAGRAPH: post-p\n` // SOURCE: "/i18n_message_element_whitespace.ts" "post-p\\n"
 …
 
-i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_element_whitespace.ts" <div i18n>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_element_whitespace.ts" "<div i18n>"
 …
-i0.ɵɵi18nStart(1, 0) // SOURCE: "/i18n_message_element_whitespace.ts" <div i18n>
+i0.ɵɵi18nStart(1, 0) // SOURCE: "/i18n_message_element_whitespace.ts" "<div i18n>"
 …
-i0.ɵɵelement(2, "p") // SOURCE: "/i18n_message_element_whitespace.ts" <p>\\n    
+i0.ɵɵelement(2, "p") // SOURCE: "/i18n_message_element_whitespace.ts" "<p>\\n    "
 …
-i0.ɵɵi18nEnd() // SOURCE: "/i18n_message_element_whitespace.ts" </div>
+i0.ɵɵi18nEnd() // SOURCE: "/i18n_message_element_whitespace.ts" "</div>"
 …
-i0.ɵɵelementEnd() // SOURCE: "/i18n_message_element_whitespace.ts" </div>
+i0.ɵɵelementEnd() // SOURCE: "/i18n_message_element_whitespace.ts" "</div>"
diff --git a/...nce/test_cases/source_mapping/inline_templates/i18n_message_element_whitespace_partial.js b/...nce/test_cases/source_mapping/inline_templates/i18n_message_element_whitespace_partial.js
@@ -1,21 +1,21 @@
-$localize` pre-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" pre-p\\n  
+$localize` pre-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" "pre-p\\n  "
 …
-"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" <p>\\n    
+"\uFFFD#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" "<p>\\n    "
 …
-}:START_PARAGRAPH: in-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" in-p\\n  
+}:START_PARAGRAPH: in-p ${ // SOURCE: "/i18n_message_element_whitespace.ts" "in-p\\n  "
 …
-"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" </p>\\n  
+"\uFFFD/#2\uFFFD" // SOURCE: "/i18n_message_element_whitespace.ts" "</p>\\n  "
 …
-}:CLOSE_PARAGRAPH: post-p\n` // SOURCE: "/i18n_message_element_whitespace.ts" post-p\\n
+}:CLOSE_PARAGRAPH: post-p\n` // SOURCE: "/i18n_message_element_whitespace.ts" "post-p\\n"
 …
 
-.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_element_whitespace.ts" <div i18n>\\n  
+.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_element_whitespace.ts" "<div i18n>\\n  "
 …
-.ɵɵi18nStart(1, 0) // SOURCE: "/i18n_message_element_whitespace.ts" <div i18n>\\n  
+.ɵɵi18nStart(1, 0) // SOURCE: "/i18n_message_element_whitespace.ts" "<div i18n>\\n  "
 …
-.ɵɵelement(2, "p") // SOURCE: "/i18n_message_element_whitespace.ts" <p>\\n    
+.ɵɵelement(2, "p") // SOURCE: "/i18n_message_element_whitespace.ts" "<p>\\n    "
 …
-.ɵɵi18nEnd() // SOURCE: "/i18n_message_element_whitespace.ts" </div>'
+.ɵɵi18nEnd() // SOURCE: "/i18n_message_element_whitespace.ts" "</div>'"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵelem // SOURCE: "/i18n_message_element_whitespace.ts" </div>'
+.ɵɵelem // SOURCE: "/i18n_message_element_whitespace.ts" "</div>'"
diff --git a/...iance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js b/...iance/test_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace.js
@@ -1,11 +1,11 @@
 $localize `  pre-title ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{titleValue}}
-}:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-title
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" "{{titleValue}}"
+}:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts" "  post-title"
 …
 $localize ` pre-body ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{bodyValue}}
-}:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-body
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" "{{bodyValue}}"
+}:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts" "  post-body"
 …
-i0.ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" <div i18n title="
+i0.ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" "<div i18n title=\""
 …
-i0.ɵɵelementEnd() // SOURCE: "/i18n_message_interpolation_whitespace.ts" </div>
+i0.ɵɵelementEnd() // SOURCE: "/i18n_message_interpolation_whitespace.ts" "</div>"
diff --git a/...st_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js b/...st_cases/source_mapping/inline_templates/i18n_message_interpolation_whitespace_partial.js
@@ -1,12 +1,12 @@
 $localize `  pre-title ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{titleValue}}
-}:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-title" i18n-title>
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" "{{titleValue}}"
+}:INTERPOLATION:  post-title` // SOURCE: "/i18n_message_interpolation_whitespace.ts" "  post-title\" i18n-title>"
 …
 $localize ` pre-body ${
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" {{bodyValue}}
-}:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts"   post-body
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_interpolation_whitespace.ts" "{{bodyValue}}"
+}:INTERPOLATION: post-body` // SOURCE: "/i18n_message_interpolation_whitespace.ts" "  post-body"
 …
-.ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" <div i18n title="
+.ɵɵelementStart(0, "div", 0) // SOURCE: "/i18n_message_interpolation_whitespace.ts" "<div i18n title=\""
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵelementEnd() // SOURCE: "/i18n_message_interpolation_whitespace.ts" </div>'
+.ɵɵelementEnd() // SOURCE: "/i18n_message_interpolation_whitespace.ts" "</div>'"
diff --git a/...li/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.js b/...li/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder.js
@@ -1,9 +1,9 @@
-`Hello, ${ // SOURCE: "/i18n_message_placeholder.ts" Hello, 
+`Hello, ${ // SOURCE: "/i18n_message_placeholder.ts" "Hello, "
 …
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_placeholder.ts" {{name}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_placeholder.ts" "{{name}}"
 …
-}:INTERPOLATION:!` // SOURCE: "/i18n_message_placeholder.ts" !
+}:INTERPOLATION:!` // SOURCE: "/i18n_message_placeholder.ts" "!"
 …
-i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_placeholder.ts" <div i18n>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_placeholder.ts" "<div i18n>"
 …
-i0.ɵɵelementEnd() // SOURCE: "/i18n_message_placeholder.ts" </div>
+i0.ɵɵelementEnd() // SOURCE: "/i18n_message_placeholder.ts" "</div>"
diff --git a/...compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder_partial.js b/...compliance/test_cases/source_mapping/inline_templates/i18n_message_placeholder_partial.js
@@ -1,9 +1,9 @@
-$localize`Hello, ${ // SOURCE: "/i18n_message_placeholder.ts" Hello, 
+$localize`Hello, ${ // SOURCE: "/i18n_message_placeholder.ts" "Hello, "
 …
-"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_placeholder.ts" {{name}}
+"\uFFFD0\uFFFD" // SOURCE: "/i18n_message_placeholder.ts" "{{name}}"
 …
-}:INTERPOLATION:!` // SOURCE: "/i18n_message_placeholder.ts" !
+}:INTERPOLATION:!` // SOURCE: "/i18n_message_placeholder.ts" "!"
 …
-.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_placeholder.ts" <div i18n>
+.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_placeholder.ts" "<div i18n>"
 …
-.ɵɵelementEnd() // SOURCE: "/i18n_message_placeholder.ts" </div>'
+.ɵɵelementEnd() // SOURCE: "/i18n_message_placeholder.ts" "</div>'"
diff --git a/...ler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_simple.js b/...ler-cli/test/compliance/test_cases/source_mapping/inline_templates/i18n_message_simple.js
@@ -1,3 +1,3 @@
-`Hello, World!` // SOURCE: "/i18n_message_simple.ts" Hello, World!
+`Hello, World!` // SOURCE: "/i18n_message_simple.ts" "Hello, World!"
 …
-i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_simple.ts" <div i18n>
+i0.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_simple.ts" "<div i18n>"
diff --git a/...test/compliance/test_cases/source_mapping/inline_templates/i18n_message_simple_partial.js b/...test/compliance/test_cases/source_mapping/inline_templates/i18n_message_simple_partial.js
@@ -1,3 +1,3 @@
-$localize`Hello, World!` // SOURCE: "/i18n_message_simple.ts" Hello, World!
+$localize`Hello, World!` // SOURCE: "/i18n_message_simple.ts" "Hello, World!"
 …
-.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_simple.ts" <div i18n>
+.ɵɵelementStart(0, "div") // SOURCE: "/i18n_message_simple.ts" "<div i18n>"
diff --git a/...ler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.js b/...ler-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_class.js
@@ -1,7 +1,7 @@
-i0.ɵɵelementStart(0, "div") // SOURCE: "/input_binding_class.ts" <div 
+i0.ɵɵelementStart(0, "div") // SOURCE: "/input_binding_class.ts" "<div "
 …
-i0.ɵɵtext(1, "Message") // SOURCE: "/input_binding_class.ts" Message
+i0.ɵɵtext(1, "Message") // SOURCE: "/input_binding_class.ts" "Message"
 …
-i0.ɵɵelementEnd() // SOURCE: "/input_binding_class.ts" </div>
+i0.ɵɵelementEnd() // SOURCE: "/input_binding_class.ts" "</div>"
 …
-i0.ɵɵclassProp("initial", ctx.isInitial) // SOURCE: "/input_binding_class.ts" [class.initial]="isInitial"
+i0.ɵɵclassProp("initial", ctx.isInitial) // SOURCE: "/input_binding_class.ts" "[class.initial]=\"isInitial\""
diff --git a/...test/compliance/test_cases/source_mapping/inline_templates/input_binding_class_partial.js b/...test/compliance/test_cases/source_mapping/inline_templates/input_binding_class_partial.js
@@ -1,7 +1,7 @@
-.ɵɵelementStart(0, "div") // SOURCE: "/input_binding_class.ts" <div 
+.ɵɵelementStart(0, "div") // SOURCE: "/input_binding_class.ts" "<div "
 …
-.ɵɵtext(1, "Message") // SOURCE: "/input_binding_class.ts" Message
+.ɵɵtext(1, "Message") // SOURCE: "/input_binding_class.ts" "Message"
 …
-.ɵɵelem // SOURCE: "/input_binding_class.ts" </div>'
+.ɵɵelem // SOURCE: "/input_binding_class.ts" "</div>'"
 …
-.ɵɵclassProp("initial", ctx.isInitial) // SOURCE: "/input_binding_class.ts" [class.initial]="isInitial">
+.ɵɵclassProp("initial", ctx.isInitial) // SOURCE: "/input_binding_class.ts" "[class.initial]=\"isInitial\">"
diff --git a/...r-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js b/...r-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_complex.js
@@ -1,3 +1,3 @@
-i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" <div 
+i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" "<div "
 …
-i0.ɵɵproperty("title", ctx.greeting + ctx.name) // SOURCE: "/input_binding_complex.ts" [title]="greeting + name"
+i0.ɵɵproperty("title", ctx.greeting + ctx.name) // SOURCE: "/input_binding_complex.ts" "[title]=\"greeting + name\""
diff --git a/...st/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js b/...st/compliance/test_cases/source_mapping/inline_templates/input_binding_complex_partial.js
@@ -1,4 +1,4 @@
-.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" <div 
+.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_complex.ts" "<div "
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵproperty("title", ctx.greeting // SOURCE: "/input_binding_complex.ts" [title]="greeting + name"></div>'
+.ɵɵproperty("title", ctx.greeting // SOURCE: "/input_binding_complex.ts" "[title]=\"greeting + name\"></div>'"
diff --git a/...-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js b/...-cli/test/compliance/test_cases/source_mapping/inline_templates/input_binding_longhand.js
@@ -1,3 +1,3 @@
-i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_longhand.ts" <div 
+i0.ɵɵelement(0, "div", 0) // SOURCE: "/input_binding_longhand.ts" "<div "
 …
-i0.ɵɵproperty("title", ctx.name) // SOURCE: "/input_binding_longhand.ts" bind-title="name"
+i0.ɵɵproperty("title", ctx.name) // SOURCE: "/input_binding_longhand.ts" "bind-title=\"name\""