fix(migrations): fix off by one issue with template removal in CF migration (#53255)

When ng-templates are removed, an extra space was being added when it was unnecessary. This resulted in malformed html if there was no space afterwards.

fixes: #53248

PR Close #53255
This commit is contained in:
Jessica Janiuk 2023-11-29 10:44:01 -05:00 committed by Pawel Kozlowski
parent fadfee4324
commit 6291c8db09
2 changed files with 55 additions and 3 deletions

View file

@ -218,7 +218,7 @@ export class Template {
}
generateContents(tmpl: string) {
this.contents = tmpl.slice(this.el.sourceSpan.start.offset, this.el.sourceSpan.end.offset + 1);
this.contents = tmpl.slice(this.el.sourceSpan.start.offset, this.el.sourceSpan.end.offset);
this.children = '';
if (this.el.children.length > 0) {
this.children = tmpl.slice(

View file

@ -3685,7 +3685,59 @@ describe('control flow migration', () => {
expect(actual).toBe(expected);
});
it('should remove a template with no overlap with following elements', async () => {
writeFile('/comp.ts', `
import {Component} from '@angular/core';
import {NgIf} from '@angular/common';
@Component({
templateUrl: './comp.html'
})
class Comp {
show = false;
}
`);
writeFile('/comp.html', [
`<ng-container *ngIf="stuff">`,
` <div>`,
` <ul>`,
` <li>`,
` <span>`,
` <ng-container *ngIf="things; else elseTmpl">`,
` <p>Hmm</p>`,
` </ng-container>`,
` <ng-template #elseTmpl> 0 </ng-template></span>`,
` </li>`,
` </ul>`,
` </div>`,
`</ng-container>`,
].join('\n'));
await runMigration();
const content = tree.readContent('/comp.html');
expect(content).toBe([
`@if (stuff) {`,
` <div>`,
` <ul>`,
` <li>`,
` <span>`,
` @if (things) {`,
` <p>Hmm</p>`,
` } @else {`,
` 0`,
` }`,
` </span>`,
` </li>`,
` </ul>`,
` </div>`,
`}`,
].join('\n'));
});
});
describe('formatting', () => {
it('should reformat else if', async () => {
writeFile('/comp.ts', `
@ -4052,7 +4104,7 @@ describe('control flow migration', () => {
`<span>Content here</span>`,
`} @else {`,
`Else Content`,
`}`,
`}\n`,
`</div>`,
].join('\n'));
});
@ -4396,7 +4448,7 @@ describe('control flow migration', () => {
await runMigration();
const content = tree.readContent('/comp.ts');
expect(content).toContain(
'template: `@if (isLoggedIn$ | async; as logIn) {\n Log In\n} @else {\n Log Out\n}`');
'template: `@if (isLoggedIn$ | async; as logIn) {\n Log In\n} @else {\n Log Out\n}\n`');
});
});
});