fix(migrations): Fix empty switch case offset bug in cf migration (#53839)

thePunderWoman · atscott · commit e92c86b77ff7 · 2024-01-09T12:09:41.000-08:00
This addresses the offset issue caused when a switch case was empty with no spaces or children being affected by the markers that were added, but not accounted for in offset. The markers are not needed for empty content and can be safely removed in this case. fixes: #53779 PR Close #53839
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -541,7 +541,7 @@ export function getMainBlock(etm: ElementToMigrate, tmpl: string, offset: number
       const {childStart, childEnd} = etm.getChildSpan(offset);
       middle = tmpl.slice(childStart, childEnd);
     } else {
-      middle = startMarker + endMarker;
+      middle = '';
     }
     return {start: '', middle, end: ''};
   } else if (isI18nTemplate(etm, i18nAttr)) {
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -3497,6 +3497,78 @@ describe('control flow migration', () => {
 
       expect(content).toBe(result);
     });
+
+    it('should handle empty cases safely without offset issues', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf} from '@angular/common';
+
+        @Component({
+          selector: 'declare-comp',
+          templateUrl: 'comp.html',
+        })
+        class DeclareComp {}
+      `);
+
+      writeFile('/comp.html', [
+        `<ng-container *ngIf="generic; else specific">`,
+        `  <ng-container [ngSwitch]="dueWhen">`,
+        `    <ng-container *ngSwitchCase="due.NOW">`,
+        `      <p>Now></p>`,
+        `    </ng-container>`,
+        `    <ng-container *ngSwitchCase="due.SOON">`,
+        `      <p>Soon></p>`,
+        `    </ng-container>`,
+        `    <ng-container *ngSwitchDefault></ng-container>`,
+        `  </ng-container>`,
+        `</ng-container>`,
+        `<ng-template #specific>`,
+        `  <ng-container [ngSwitch]="dueWhen">`,
+        `    <ng-container *ngSwitchCase="due.NOW">`,
+        `      <p>Now></p>`,
+        `    </ng-container>`,
+        `    <ng-container *ngSwitchCase="due.SOON">`,
+        `      <p>Soon></p>`,
+        `    </ng-container>`,
+        `    <ng-container *ngSwitchDefault>`,
+        `      <p>Default></p>`,
+        `    </ng-container>`,
+        `  </ng-container>`,
+        `</ng-template>`,
+      ].join('\n'));
+
+      await runMigration();
+      const actual = tree.readContent('/comp.html');
+
+      const expected = [
+        `@if (generic) {`,
+        `  @switch (dueWhen) {`,
+        `    @case (due.NOW) {`,
+        `      <p>Now></p>`,
+        `    }`,
+        `    @case (due.SOON) {`,
+        `      <p>Soon></p>`,
+        `    }`,
+        `    @default {`,
+        `    }`,
+        `  }`,
+        `} @else {`,
+        `  @switch (dueWhen) {`,
+        `    @case (due.NOW) {`,
+        `      <p>Now></p>`,
+        `    }`,
+        `    @case (due.SOON) {`,
+        `      <p>Soon></p>`,
+        `    }`,
+        `    @default {`,
+        `      <p>Default></p>`,
+        `    }`,
+        `  }`,
+        `}\n`,
+      ].join('\n');
+
+      expect(actual).toBe(expected);
+    });
   });
 
   describe('error handling', () => {

Original file line number	Diff line number	Diff line change
`@@ -541,7 +541,7 @@ export function getMainBlock(etm: ElementToMigrate, tmpl: string, offset: number`
`541`	`541`	`const {childStart, childEnd} = etm.getChildSpan(offset);`
`542`	`542`	`middle = tmpl.slice(childStart, childEnd);`
`543`	`543`	`} else {`
`544`		`- middle = startMarker + endMarker;`
	`544`	`+ middle = '';`
`545`	`545`	`}`
`546`	`546`	`return {start: '', middle, end: ''};`
`547`	`547`	`} else if (isI18nTemplate(etm, i18nAttr)) {`