fix(migrations): Fix cf migration let condition semicolon order (#56913)

In rare cases people may put let statements before else statements and omit semicolons, causing migration issues.

PR Close #56913
This commit is contained in:
Jessica Janiuk 2024-07-09 10:59:26 -04:00 committed by Pawel Kozlowski
parent 2f8bf933f4
commit 5f97d6aec2
2 changed files with 54 additions and 1 deletions

View file

@ -150,8 +150,19 @@ export class ElementToMigrate {
this.aliasAttrs = aliasAttrs;
}
normalizeConditionString(value: string): string {
value = this.insertSemicolon(value, value.indexOf(' else '));
value = this.insertSemicolon(value, value.indexOf(' then '));
value = this.insertSemicolon(value, value.indexOf(' let '));
return value.replace(';;', ';');
}
insertSemicolon(str: string, ix: number): string {
return ix > -1 ? `${str.slice(0, ix)};${str.slice(ix)}` : str;
}
getCondition(): string {
const chunks = this.attr.value.split(';');
const chunks = this.normalizeConditionString(this.attr.value).split(';');
let condition = chunks[0];
// checks for case of no usage of `;` in if else / if then else

View file

@ -1674,6 +1674,48 @@ describe('control flow migration', () => {
);
});
it('should migrate if/else with let variable in wrong place with no semicolons', async () => {
writeFile(
'/comp.ts',
`
import {Component} from '@angular/core';
import {NgIf} from '@angular/common';
@Component({
templateUrl: './comp.html'
})
class Comp {
user$ = of({ name: 'Jane' }})
}
`,
);
writeFile(
'/comp.html',
[
`<div>`,
`<div *ngIf="user of users; let tooltipContent else noUserBlock">{{ user.name }}</div>`,
`<ng-template #noUserBlock>No user</ng-template>`,
`</div>`,
].join('\n'),
);
await runMigration();
const content = tree.readContent('/comp.html');
expect(content).toBe(
[
`<div>`,
` @if (user of users; as tooltipContent) {`,
` <div>{{ user.name }}</div>`,
` } @else {`,
` No user`,
` }`,
`</div>`,
].join('\n'),
);
});
it('should migrate if/then/else with alias', async () => {
writeFile(
'/comp.ts',