fix(migrations): fix regexp for else and then in cf migration (#53257)

thePunderWoman · dylhunn · commit 72d22ba7eea8 · 2023-11-30T09:19:43.000-08:00
The regexp for then and else did not ignore alphanumeric characters prior to the then and else. So if a string contained then, for example Authentication, it would incorrectly match as a then clause. fixes: #53252 PR Close #53257
diff --git a/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts b/packages/core/schematics/ng-generate/control-flow-migration/ifs.ts
@@ -68,8 +68,8 @@ export function migrateIf(template: string):
 }
 
 function migrateNgIf(etm: ElementToMigrate, tmpl: string, offset: number): Result {
-  const matchThen = etm.attr.value.match(/;?\s*then/gm);
-  const matchElse = etm.attr.value.match(/;?\s*else/gm);
+  const matchThen = etm.attr.value.match(/[^\w\d];?\s*then/gm);
+  const matchElse = etm.attr.value.match(/[^\w\d];?\s*else/gm);
 
   if (etm.thenAttr !== undefined || etm.elseAttr !== undefined) {
     // bound if then / if then else
diff --git a/packages/core/schematics/test/control_flow_migration_spec.ts b/packages/core/schematics/test/control_flow_migration_spec.ts
@@ -425,6 +425,37 @@ describe('control flow migration', () => {
       ].join('\n'));
     });
 
+    it('should migrate an if else case with condition that has `then` in the string', async () => {
+      writeFile('/comp.ts', `
+        import {Component} from '@angular/core';
+        import {NgIf,NgIfElse} from '@angular/common';
+
+        @Component({
+          templateUrl: './comp.html'
+        })
+        class Comp {
+          show = false;
+        }
+      `);
+
+      writeFile('/comp.html', [
+        `<div *ngIf="!(isAuthenticated$ | async) && !reauthRequired">`,
+        `  Hello!`,
+        `</div>`,
+      ].join('\n'));
+
+      await runMigration();
+      const content = tree.readContent('/comp.html');
+
+      expect(content).toBe([
+        `@if (!(isAuthenticated$ | async) && !reauthRequired) {`,
+        `  <div>`,
+        `    Hello!`,
+        `  </div>`,
+        `}`,
+      ].join('\n'));
+    });
+
     it('should migrate an if case on a container', async () => {
       writeFile('/comp.ts', `
         import {Component} from '@angular/core';

Original file line number	Diff line number	Diff line change
`@@ -68,8 +68,8 @@ export function migrateIf(template: string):`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`function migrateNgIf(etm: ElementToMigrate, tmpl: string, offset: number): Result {`
`71`		`- const matchThen = etm.attr.value.match(/;?\s*then/gm);`
`72`		`- const matchElse = etm.attr.value.match(/;?\s*else/gm);`
	`71`	`+ const matchThen = etm.attr.value.match(/[^\w\d];?\s*then/gm);`
	`72`	`+ const matchElse = etm.attr.value.match(/[^\w\d];?\s*else/gm);`
`73`	`73`
`74`	`74`	`if (etm.thenAttr !== undefined \|\| etm.elseAttr !== undefined) {`
`75`	`75`	`// bound if then / if then else`