fix(migrations): cf migration fix migrating empty switch default (#53237)

thePunderWoman · pkozlowski-opensource · commit fadfee43247a · 2023-11-29T15:15:50.000+01:00
This should address cases when using ng-containers with ngSwitchCase / ngSwitchDefault and migrating them safely when they are empty. fixes: #53235 PR Close #53237
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/util.ts b/packages/core/schematics/ng-generate/control-flow-migration/util.ts
@@ -432,8 +432,12 @@ export function getMainBlock(etm: ElementToMigrate, tmpl: string, offset: number
   // removable containers are ng-templates or ng-containers that no longer need to exist
   // post migration
   if (isRemovableContainer(etm)) {
-    const {childStart, childEnd} = etm.getChildSpan(offset);
-    return {start: '', middle: tmpl.slice(childStart, childEnd), end: ''};
+    let middle = '';
+    if (etm.hasChildren()) {
+      const {childStart, childEnd} = etm.getChildSpan(offset);
+      middle = tmpl.slice(childStart, childEnd);
+    }
+    return {start: '', middle, end: ''};
   } else if (isI18nTemplate(etm, i18nAttr)) {
     // here we're removing an ng-template used for control flow and i18n and
     // converting it to an ng-container with i18n
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -2391,6 +2391,45 @@ describe('control flow migration', () => {
           'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> } @default { <p>Option 3</p> }}</div>');
     });
 
+    it('should handle empty default cases', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {ngSwitch, ngSwitchCase} from '@angular/common';
+
+        @Component({
+          templateUrl: './comp.html'
+        })
+        class Comp {
+          testOpts = "1";
+        }
+      `);
+
+      writeFile('/comp.html', [
+        `<ng-container [ngSwitch]="type">`,
+        `<ng-container *ngSwitchCase="'foo'"> Foo </ng-container>`,
+        `<ng-container *ngSwitchCase="'bar'"> Bar </ng-container>`,
+        `<ng-container *ngSwitchDefault></ng-container>`,
+        `</ng-container>`,
+      ].join('\n'));
+
+      await runMigration();
+      const actual = tree.readContent('/comp.html');
+      const expected = [
+        `\n@switch (type) {`,
+        `  @case ('foo') {`,
+        `    Foo`,
+        `  }`,
+        `  @case ('bar') {`,
+        `    Bar`,
+        `  }`,
+        `  @default {`,
+        `  }`,
+        `}\n`,
+      ].join('\n');
+
+      expect(actual).toBe(expected);
+    });
+
     it('should migrate a nested class', async () => {
       writeFile(
           '/comp.ts',
