test(compiler): add correct use case of ngFor in r3 ast (#35671)

The only test case for `ngFor` exercises an incorrect usage which causes
two bound attributes to be generated . This commit adds a canonical and
correct usage to show the difference between the two.

PR Close #35671

packages/compiler/test/render3/r3_ast_spans_spec.ts

@@ -225,6 +225,24 @@ describe('R3 AST source spans', () => {
   // TODO(joost): improve spans of nodes extracted from macrosyntax
   describe('inline templates', () => {
     it('is correct for attribute and bound attributes', () => {
+      // Desugared form is
+      // <ng-template ngFor [ngForOf]="items" let-item>
+      //   <div></div>
+      // </ng-template>
+      expectFromHtml('<div *ngFor="let item of items"></div>').toEqual([
+        ['Template', '0:32', '0:32', '32:38'],
+        ['TextAttribute', '5:31', '<empty>'],
+        ['BoundAttribute', '5:31', '<empty>'],
+        ['Variable', '5:31', '<empty>'],
+        ['Element', '0:38', '0:32', '32:38'],
+      ]);
+
+      // Note that this test exercises an *incorrect* usage of the ngFor
+      // directive. There is a missing 'let' in the beginning of the expression
+      // which causes the template to be desugared into
+      // <ng-template [ngFor]="item" [ngForOf]="items">
+      //   <div></div>
+      // </ng-template>
       expectFromHtml('<div *ngFor="item of items"></div>').toEqual([
         ['Template', '0:28', '0:28', '28:34'],
         ['BoundAttribute', '5:27', '<empty>'],

packages/compiler/test/render3/r3_template_transform_spec.ts

@@ -290,6 +290,24 @@ describe('R3 template transform', () => {
 
   describe('inline templates', () => {
     it('should support attribute and bound attributes', () => {
+      // Desugared form is
+      // <ng-template ngFor [ngForOf]="items" let-item>
+      //   <div></div>
+      // </ng-template>
+      expectFromHtml('<div *ngFor="let item of items"></div>').toEqual([
+        ['Template'],
+        ['TextAttribute', 'ngFor', ''],
+        ['BoundAttribute', BindingType.Property, 'ngForOf', 'items'],
+        ['Variable', 'item', '$implicit'],
+        ['Element', 'div'],
+      ]);
+
+      // Note that this test exercises an *incorrect* usage of the ngFor
+      // directive. There is a missing 'let' in the beginning of the expression
+      // which causes the template to be desugared into
+      // <ng-template [ngFor]="item" [ngForOf]="items">
+      //   <div></div>
+      // </ng-template>
       expectFromHtml('<div *ngFor="item of items"></div>').toEqual([
         ['Template'],
         ['BoundAttribute', BindingType.Property, 'ngFor', 'item'],