control_flow_migration_spec.ts

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {getSystemPath, logging, normalize, virtualFs} from '@angular-devkit/core';
import {TempScopedNodeJsSyncHost} from '@angular-devkit/core/node/testing';
import {HostTree} from '@angular-devkit/schematics';
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
import {runfiles} from '@bazel/runfiles';
import shx from 'shelljs';

describe('control flow migration', () => {
  let runner: SchematicTestRunner;
  let host: TempScopedNodeJsSyncHost;
  let tree: UnitTestTree;
  let tmpDirPath: string;
  let previousWorkingDir: string;
  let errorOutput: string[] = [];
  let warnOutput: string[] = [];

  function writeFile(filePath: string, contents: string) {
    host.sync.write(normalize(filePath), virtualFs.stringToFileBuffer(contents));
  }

  function runMigration(path: string|undefined = undefined, format: boolean = true) {
    return runner.runSchematic('control-flow-migration', {path, format}, tree);
  }

  beforeEach(() => {
    runner = new SchematicTestRunner('test', runfiles.resolvePackageRelative('../collection.json'));
    host = new TempScopedNodeJsSyncHost();
    tree = new UnitTestTree(new HostTree(host));

    errorOutput = [];
    warnOutput = [];
    runner.logger.subscribe((e: logging.LogEntry) => {
      if (e.level === 'error') {
        errorOutput.push(e.message);
      } else if (e.level === 'warn') {
        warnOutput.push(e.message);
      }
    });

    writeFile('/tsconfig.json', '{}');
    writeFile('/angular.json', JSON.stringify({
      version: 1,
      projects: {t: {root: '', architect: {build: {options: {tsConfig: './tsconfig.json'}}}}}
    }));

    previousWorkingDir = shx.pwd();
    tmpDirPath = getSystemPath(host.root);

    // Switch into the temporary directory path. This allows us to run
    // the schematic against our custom unit test tree.
    shx.cd(tmpDirPath);
  });

  afterEach(() => {
    shx.cd(previousWorkingDir);
    shx.rm('-r', tmpDirPath);
  });

  describe('path', () => {
    it('should throw an error if no files match the passed-in path', async () => {
      let error: string|null = null;

      writeFile('dir.ts', `
        import {Directive} from '@angular/core';

        @Directive({selector: '[dir]'})
        export class MyDir {}
      `);

      try {
        await runMigration('./foo');
      } catch (e: any) {
        error = e.message;
      }

      expect(error).toMatch(
          /Could not find any files to migrate under the path .*\/foo\. Cannot run the control flow migration/);
    });

    it('should throw an error if a path outside of the project is passed in', async () => {
      let error: string|null = null;

      writeFile('dir.ts', `
        import {Directive} from '@angular/core';

        @Directive({selector: '[dir]'})
        export class MyDir {}
      `);

      try {
        await runMigration('../foo');
      } catch (e: any) {
        error = e.message;
      }
      expect(error).toBe('Cannot run control flow migration outside of the current project.');
    });

    it('should only migrate the paths that were passed in', async () => {
      writeFile('comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf, NgFor,NgSwitch,NgSwitchCase ,NgSwitchDefault],
          template: \`<div><span *ngIf="toggle">This should be hidden</span></div>\`
        })
        class Comp {
          toggle = false;
        }
      `);

      writeFile('skip.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div *ngIf="show">Show me</div>\`
        })
        class Comp {
          show = false;
        }
      `);

      await runMigration('./comp.ts');
      const migratedContent = tree.readContent('/comp.ts');
      const skippedContent = tree.readContent('/skip.ts');

      expect(migratedContent)
          .toContain('template: `<div>@if (toggle) {<span>This should be hidden</span>}</div>`');
      expect(migratedContent).toContain('imports: []');
      expect(migratedContent).not.toContain(`import {NgIf} from '@angular/common';`);
      expect(skippedContent).toContain('template: `<div *ngIf="show">Show me</div>`');
      expect(skippedContent).toContain('imports: [NgIf]');
      expect(skippedContent).toContain(`import {NgIf} from '@angular/common';`);
    });
  });

  describe('ngIf', () => {
    it('should migrate an inline template', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div><span *ngIf="toggle">This should be hidden</span></div>\`
        })
        class Comp {
          toggle = false;
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@if (toggle) {<span>This should be hidden</span>}</div>`');
    });

    it('should migrate multiple inline templates in the same file', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div><span *ngIf="toggle">This should be hidden</span></div>\`
        })
        class Comp {
          toggle = false;
        }

        @Component({
          template: \`<article *ngIf="show === 5">An Article</article>\`
        })
        class OtherComp {
          show = 5
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@if (toggle) {<span>This should be hidden</span>}</div>`');
      expect(content).toContain('template: `@if (show === 5) {<article>An Article</article>}`');
    });

    it('should migrate an external template', 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', [
        `<div>`,
        `<span *ngIf="show">Content here</span>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a template referenced by multiple components', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          templateUrl: './comp.html'
        })
        class Comp {}
      `);

      writeFile('/other-comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          templateUrl: './comp.html'
        })
        class OtherComp {}
      `);

      writeFile('/comp.html', [
        `<div>`,
        `<span *ngIf="show">Content here</span>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case with no star', 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', [
        `<div>`,
        `<span ngIf="show">Content here</span>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case as a binding', 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', [
        `<div>`,
        `<span [ngIf]="show">Content here</span>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if else case as bindings', 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>`,
        `<ng-template [ngIf]="show" [ngIfElse]="tmplName"><span>Content here</span></ng-template>`,
        `</div>`,
        `<ng-template #tmplName><p>Stuff</p></ng-template>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  } @else {`,
        `    <p>Stuff</p>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if then else case as bindings', 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>`,
        `<ng-template [ngIf]="show" [ngIfElse]="elseTmpl" [ngIfThenElse]="thenTmpl">Ignore Me</ng-template>`,
        `</div>`,
        `<ng-template #elseTmpl><p>Stuff</p></ng-template>`,
        `<ng-template #thenTmpl><span>Content here</span></ng-template>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  } @else {`,
        `    <p>Stuff</p>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case on a container', 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', [
        `<div>`,
        `<ng-container *ngIf="show"><span>Content here</span></ng-container>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case with an ng-template with i18n', 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', [
        `<div>`,
        `<ng-template *ngIf="show" i18n="@@something"><span>Content here</span></ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <ng-container i18n="@@something"><span>Content here</span></ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case with an ng-template with empty i18n', 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', [
        `<div>`,
        `<ng-template *ngIf="show" i18n><span>Content here</span></ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <ng-container i18n><span>Content here</span></ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case with an ng-container with i18n', 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', [
        `<div>`,
        `<ng-container *ngIf="show" i18n="@@something"><span>Content here</span></ng-container>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <ng-container i18n="@@something"><span>Content here</span></ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if case with an ng-container with empty i18n', 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', [
        `<div>`,
        `<ng-container *ngIf="show" i18n><span>Content here</span></ng-container>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <ng-container i18n><span>Content here</span></ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a bound NgIfThenElse case with ng-templates with i18n', 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', [
        `<div>`,
        `<ng-template [ngIf]="show" [ngIfThenElse]="thenTmpl" [ngIfElse]="elseTmpl">ignored</ng-template>`,
        `</div>`,
        `<ng-template #thenTmpl i18n="@@something"><span>Content here</span></ng-template>`,
        `<ng-template #elseTmpl i18n="@@somethingElse"><p>other</p></ng-template>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <ng-container i18n="@@something"><span>Content here</span></ng-container>`,
        `  } @else {`,
        `    <ng-container i18n="@@somethingElse"><p>other</p></ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a bound NgIfElse case with ng-templates with i18n', 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', [
        `<div>`,
        `<ng-template [ngIf]="show" [ngIfElse]="elseTmpl" i18n="@@something"><span>Content here</span></ng-template>`,
        `</div>`,
        `<ng-template #elseTmpl i18n="@@somethingElse"><p>other</p></ng-template>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <ng-container i18n="@@something"><span>Content here</span></ng-container>`,
        `  } @else {`,
        `    <ng-container i18n="@@somethingElse"><p>other</p></ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if else case', 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', [
        `<div>`,
        `<span *ngIf="show; else elseBlock">Content here</span>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if else case with no space after ;', 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', [
        `<div>`,
        `<span *ngIf="show;else elseBlock">Content here</span>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if then else case with no spaces before ;', 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', [
        `<div>`,
        `<span *ngIf="show;then thenBlock;else elseBlock">Ignored</span>`,
        `<ng-template #thenBlock><div>THEN Stuff</div></ng-template>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <div>THEN Stuff</div>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if else case when the template is above the block', 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', [
        `<div>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `<span *ngIf="show; else elseBlock">Content here</span>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <span>Content here</span>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if then else case', 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', [
        `<div>`,
        `<span *ngIf="show; then thenBlock; else elseBlock">Ignored</span>`,
        `<ng-template #thenBlock><div>THEN Stuff</div></ng-template>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <div>THEN Stuff</div>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate an if then else case with templates in odd places', 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', [
        `<div>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `<span *ngIf="show; then thenBlock; else elseBlock">Ignored</span>`,
        `<ng-template #thenBlock><div>THEN Stuff</div></ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <div>THEN Stuff</div>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a complex if then else case on ng-containers', 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>`,
        `  <ng-container`,
        `    *ngIf="loading; then loadingTmpl; else showTmpl"`,
        `  >`,
        `  </ng-container>`,
        `<ng-template #showTmpl>`,
        `  <ng-container`,
        `    *ngIf="selected; else emptyTmpl"`,
        `  >`,
        `    <div></div>`,
        `  </ng-container>`,
        `</ng-template>`,
        `<ng-template #emptyTmpl>`,
        `  Empty`,
        `</ng-template>`,
        `</ng-container>`,
        `<ng-template #loadingTmpl>`,
        `  <p>Loading</p>`,
        `</ng-template>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<ng-container>`,
        `  @if (loading) {`,
        `    <p>Loading</p>`,
        `  } @else {`,
        `    @if (selected) {`,
        `      <div></div>`,
        `    } @else {`,
        `      Empty`,
        `    }`,
        `  }`,
        `</ng-container>`,
      ].join('\n'));
    });

    it('should migrate but not remove ng-templates when referenced elsewhere', 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', [
        `<div>`,
        `<span *ngIf="show; then thenBlock; else elseBlock">Ignored</span>`,
        `<ng-template #thenBlock><div>THEN Stuff</div></ng-template>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
        `<ng-container *ngTemplateOutlet="elseBlock"></ng-container>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (show) {`,
        `    <div>THEN Stuff</div>`,
        `  } @else {`,
        `    Else Content`,
        `  }`,
        `  <ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
        `<ng-container *ngTemplateOutlet="elseBlock"></ng-container>`,
      ].join('\n'));
    });

    it('should not remove ng-templates used by other directives', 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-template #blockUsedElsewhere><div>Block</div></ng-template>`,
        `<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<ng-template #blockUsedElsewhere><div>Block</div></ng-template>`,
        `<ng-container *ngTemplateOutlet="blockUsedElsewhere"></ng-container>`,
      ].join('\n'));
    });

    it('should migrate if with alias', 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 *ngIf="user$ | async as user">{{ user.name }}</div>`);

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe(`@if (user$ | async; as user) {<div>{{ user.name }}</div>}`);
    });

    it('should migrate if/else with alias', 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$ | async as user; 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$ | async; as user) {`,
        `    <div>{{ user.name }}</div>`,
        `  } @else {`,
        `    No user`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate if/then/else with alias', 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>`,
        `<ng-container *ngIf="user$ | async as user; then userBlock; else noUserBlock">Ignored</ng-container>`,
        `<ng-template #userBlock>User</ng-template>`,
        `<ng-template #noUserBlock>No user</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @if (user$ | async; as user) {`,
        `    User`,
        `  } @else {`,
        `    No user`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a nested class', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        function foo() {
          @Component({
            imports: [NgIf],
            template: \`<div><span *ngIf="toggle">This should be hidden</span></div>\`
          })
          class Comp {
            toggle = false;
          }
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@if (toggle) {<span>This should be hidden</span>}</div>`');
    });

    it('should migrate a nested class', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';
        function foo() {
          @Component({
            imports: [NgIf],
            template: \`<div><span *ngIf="toggle">This should be hidden</span></div>\`
          })
          class Comp {
            toggle = false;
          }
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@if (toggle) {<span>This should be hidden</span>}</div>`');
    });
  });

  describe('ngFor', () => {
    it('should migrate an inline template', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let item of items">{{item.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (item of items; track item) {<li>{{item.text}}</li>}</ul>`');
    });

    it('should migrate multiple inline templates in the same file', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }
        const items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let item of items">{{item.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = s;
        }

        @Component({
          imports: [NgFor],
          template: \`<article><div *ngFor="let item of items">{{item.text}}</div></article>\`
        })
        class OtherComp {
          items: Item[] = s;
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (item of items; track item) {<li>{{item.text}}</li>}</ul>`');
      expect(content).toContain(
          'template: `<article>@for (item of items; track item) {<div>{{item.text}}</div>}</article>`');
    });

    it('should migrate an external template', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        interface Item {
          id: number;
          text: string;
        }
        const items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];

        @Component({
          templateUrl: './comp.html'
        })
        class Comp {
          items: Item[] = s;
        }
      `);

      writeFile('/comp.html', [
        `<ul>`,
        `<li *ngFor="let item of items">{{item.text}}</li>`,
        `</ul>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<ul>`,
        `  @for (item of items; track item) {`,
        `    <li>{{item.text}}</li>`,
        `  }`,
        `</ul>`,
      ].join('\n'));
    });

    it('should migrate a template referenced by multiple components', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        interface Item {
          id: number;
          text: string;
        }
        const items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];

        @Component({
          templateUrl: './comp.html'
        })
        class Comp {
          items: Item[] = s;
        }
      `);

      writeFile('/other-comp.ts', `
        import {Component} from '@angular/core';
        interface Item {
          id: number;
          text: string;
        }
        const items: Item[] = [{id: 3, text: 'things'},{id: 4, text: 'yup'}];

        @Component({
          templateUrl: './comp.html'
        })
        class OtherComp {
          items: Item[] = s;
        }
      `);

      writeFile('/comp.html', [
        `<ul>`,
        `<li *ngFor="let item of items">{{item.text}}</li>`,
        `</ul>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<ul>`,
        `  @for (item of items; track item) {`,
        `    <li>{{item.text}}</li>`,
        `  }`,
        `</ul>`,
      ].join('\n'));
    });

    it('should migrate with a trackBy function', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items; trackBy: trackMeFn;">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track trackMeFn($index, itm)) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with an index alias', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items; let index = index">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track itm; let index = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with a comma-separated index alias', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items, let index = index">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track itm; let index = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with an old style alias', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          templateUrl: 'comp.html',
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<tbody>`,
        `  <tr *ngFor="let row of field(); let y = index; trackBy: trackByIndex">`,
        `    <td`,
        `      *ngFor="let cell of row; let x = index; trackBy: trackByIndex"`,
        `    ></td>`,
        `  </tr>`,
        `</tbody>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<tbody>`,
        `  @for (row of field(); track trackByIndex(y, row); let y = $index) {`,
        `    <tr>`,
        `      @for (cell of row; track trackByIndex(x, cell); let x = $index) {`,
        `        <td`,
        `        ></td>`,
        `      }`,
        `    </tr>`,
        `  }`,
        `</tbody>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate an index alias after an expression containing commas', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of foo({a: 1, b: 2}, [1, 2]), let index = index">{{itm.text}}</li></ul>\`
        })
        class Comp {}
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of foo({a: 1, b: 2}, [1, 2]); track itm; let index = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with an index alias with no spaces', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items; let index=index">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track itm; let index = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with alias declared with as', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items; index as myIndex">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track itm; let myIndex = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with alias declared with a comma-separated `as` expression', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items, index as myIndex">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track itm; let myIndex = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with a trackBy function and an aliased index', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items; trackBy: trackMeFn; index as i">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track trackMeFn(i, itm); let i = $index) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should migrate with multiple aliases', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of items; let count = count; let first = first; let last = last; let ev = even; let od = odd;">{{itm.text}}</li></ul>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of items; track itm; let count = $count; let first = $first; let last = $last; let ev = $even; let od = $odd) {<li>{{itm.text}}</li>}</ul>`');
    });

    it('should remove unneeded ng-containers', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ng-container *ngFor="let item of items"><p>{{item.text}}</p></ng-container>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `@for (item of items; track item) {<p>{{item.text}}</p>}`');
    });

    it('should leave ng-containers with additional attributes', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor],
          template: \`<ng-container *ngFor="let item of items" [bindMe]="stuff"><p>{{item.text}}</p></ng-container>\`
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `@for (item of items; track item) {<ng-container [bindMe]="stuff"><p>{{item.text}}</p></ng-container>}`');
    });

    it('should migrate a nested class', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        function foo() {
          @Component({
            imports: [NgFor],
            template: \`<ul><li *ngFor="let item of items">{{item.text}}</li></ul>\`
          })
          class Comp {
            items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
          }
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (item of items; track item) {<li>{{item.text}}</li>}</ul>`');
    });

    it('should migrate a nested class', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }
        function foo() {
          @Component({
            imports: [NgFor],
            template: \`<ul><li *ngFor="let item of items">{{item.text}}</li></ul>\`
          })
          class Comp {
            items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
          }
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (item of items; track item) {<li>{{item.text}}</li>}</ul>`');
    });

    it('should migrate an ngFor with quoted semicolon in expression', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of '1;2;3'">{{itm}}</li></ul>\`
        })
        class Comp {}
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of \'1;2;3\'; track itm) {<li>{{itm}}</li>}</ul>`');
    });

    it('should migrate an ngFor with quoted semicolon in expression', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';

        @Component({
          imports: [NgFor],
          template: \`<ul><li *ngFor="let itm of '1,2,3'">{{itm}}</li></ul>\`
        })
        class Comp {}
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<ul>@for (itm of \'1,2,3\'; track itm) {<li>{{itm}}</li>}</ul>`');
    });
  });

  describe('ngForOf', () => {
    it('should migrate a basic ngForOf', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor,NgForOf],
          templateUrl: 'comp.html',
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<tbody>`,
        `  <ng-template ngFor let-rowData [ngForOf]="things">`,
        `    <tr><td>{{rowData}}</td></tr>`,
        `  </ng-template>`,
        `</tbody>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<tbody>`,
        `  @for (rowData of things; track rowData) {`,
        `    <tr><td>{{rowData}}</td></tr>`,
        `  }`,
        `</tbody>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate ngForOf with an alias', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor,NgForOf],
          templateUrl: 'comp.html',
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<tbody>`,
        `  <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="things">`,
        `    <tr><td>{{rowIndex}}</td><td>{{rowData}}</td></tr>`,
        `  </ng-template>`,
        `</tbody>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<tbody>`,
        `  @for (rowData of things; track rowData; let rowIndex = $index) {`,
        `    <tr><td>{{rowIndex}}</td><td>{{rowData}}</td></tr>`,
        `  }`,
        `</tbody>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate ngForOf with track by', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor,NgForOf],
          templateUrl: 'comp.html',
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<tbody>`,
        `  <ng-template ngFor let-rowData [ngForOf]="things" [ngForTrackBy]="trackMe">`,
        `    <tr><td>{{rowData}}</td></tr>`,
        `  </ng-template>`,
        `</tbody>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<tbody>`,
        `  @for (rowData of things; track trackMe($index, rowData)) {`,
        `    <tr><td>{{rowData}}</td></tr>`,
        `  }`,
        `</tbody>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate ngForOf with track by and alias', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor,NgForOf],
          templateUrl: 'comp.html',
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<tbody>`,
        `  <ng-template ngFor let-rowData let-rowIndex="index" [ngForOf]="things" [ngForTrackBy]="trackMe">`,
        `    <tr><td>{{rowIndex}}</td><td>{{rowData}}</td></tr>`,
        `  </ng-template>`,
        `</tbody>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<tbody>`,
        `  @for (rowData of things; track trackMe(rowIndex, rowData); let rowIndex = $index) {`,
        `    <tr><td>{{rowIndex}}</td><td>{{rowData}}</td></tr>`,
        `  }`,
        `</tbody>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate ngForOf with track by and multiple aliases', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor,NgForOf],
          templateUrl: 'comp.html',
        })
        class Comp {
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<tbody>`,
        `  <ng-template ngFor let-rowData let-rowIndex="index" let-rCount="count" [ngForOf]="things" [ngForTrackBy]="trackMe">`,
        `    <tr><td>{{rowIndex}}</td><td>{{rowData}}</td></tr>`,
        `  </ng-template>`,
        `</tbody>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<tbody>`,
        `  @for (rowData of things; track trackMe(rowIndex, rowData); let rowIndex = $index; let rCount = $count) {`,
        `    <tr><td>{{rowIndex}}</td><td>{{rowData}}</td></tr>`,
        `  }`,
        `</tbody>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });
  });

  describe('ngSwitch', () => {
    it('should migrate an inline template', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          template: \`<div [ngSwitch]="testOpts">` +
              `<p *ngSwitchCase="1">Option 1</p>` +
              `<p *ngSwitchCase="2">Option 2</p>` +
              `</div>\`
        })
        class Comp {
          testOpts = "1";
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> }}</div>');
    });

    it('should migrate multiple inline templates in the same file', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          template: \`<div [ngSwitch]="testOpts">` +
              `<p *ngSwitchCase="1">Option 1</p>` +
              `<p *ngSwitchCase="2">Option 2</p>` +
              `</div>\`
        })
        class Comp1 {
          testOpts = "1";
        }

        @Component({
          template: \`<div [ngSwitch]="choices">` +
              `<p *ngSwitchCase="A">Choice A</p>` +
              `<p *ngSwitchCase="B">Choice B</p>` +
              `<p *ngSwitchDefault>Choice Default</p>` +
              `</div>\`
        })
        class Comp2 {
          choices = "C";
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> }}</div>`');
      expect(content).toContain(
          'template: `<div>@switch (choices) { @case (A) { <p>Choice A</p> } @case (B) { <p>Choice B</p> } @default { <p>Choice Default</p> }}</div>`');
    });

    it('should migrate an external template', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';

        @Component({
          templateUrl: './comp.html'
        })
        class Comp {
          testOpts = 2;
        }
      `);

      writeFile('/comp.html', [
        `<div [ngSwitch]="testOpts">`,
        `<p *ngSwitchCase="1">Option 1</p>`,
        `<p *ngSwitchCase="2">Option 2</p>`,
        `<p *ngSwitchDefault>Option 3</p>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');
      expect(content).toBe([
        `<div>`,
        `  @switch (testOpts) {`,
        `    @case (1) {`,
        `      <p>Option 1</p>`,
        `    }`,
        `    @case (2) {`,
        `      <p>Option 2</p>`,
        `    }`,
        `    @default {`,
        `      <p>Option 3</p>`,
        `    }`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a template referenced by multiple components', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          templateUrl: './comp.html'
        })
        class Comp {
          testOpts = 2;
        }
      `);

      writeFile('/other-comp.ts', `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          templateUrl: './comp.html'
        })
        class OtherComp {
          testOpts = 1;
        }
      `);

      writeFile('/comp.html', [
        `<div [ngSwitch]="testOpts">`,
        `<p *ngSwitchCase="1">Option 1</p>`,
        `<p *ngSwitchCase="2">Option 2</p>`,
        `<p *ngSwitchDefault>Option 3</p>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @switch (testOpts) {`,
        `    @case (1) {`,
        `      <p>Option 1</p>`,
        `    }`,
        `    @case (2) {`,
        `      <p>Option 2</p>`,
        `    }`,
        `    @default {`,
        `      <p>Option 3</p>`,
        `    }`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });

    it('should remove unnecessary ng-containers', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          template: \`<div [ngSwitch]="testOpts">` +
              `<ng-container *ngSwitchCase="1"><p>Option 1</p></ng-container>` +
              `<ng-container *ngSwitchCase="2"><p>Option 2</p></ng-container>` +
              `</div>\`
        })
        class Comp {
          testOpts = "1";
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> }}</div>');
    });

    it('should remove unnecessary ng-container on ngswitch', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          template: \`<div>` +
              `<ng-container [ngSwitch]="testOpts">` +
              `<p *ngSwitchCase="1">Option 1</p>` +
              `<p *ngSwitchCase="2">Option 2</p>` +
              `</ng-container>` +
              `</div>\`
        })
        class Comp {
          testOpts = "1";
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> }}</div>');
    });

    it('should handle cases with missing star', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          template: \`<div [ngSwitch]="testOpts">` +
              `<ng-template ngSwitchCase="1"><p>Option 1</p></ng-template>` +
              `<ng-template ngSwitchCase="2"><p>Option 2</p></ng-template>` +
              `<ng-template ngSwitchDefault><p>Option 3</p></ng-template>` +
              `</div>\`
        })
        class Comp {
          testOpts = "1";
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          '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 cases with binding', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';

        @Component({
          template: \`<div [ngSwitch]="testOpts">` +
              `<ng-template [ngSwitchCase]="1"><p>Option 1</p></ng-template>` +
              `<ng-template [ngSwitchCase]="2"><p>Option 2</p></ng-template>` +
              `<ng-template ngSwitchDefault><p>Option 3</p></ng-template>` +
              `</div>\`
        })
        class Comp {
          testOpts = "1";
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> } @default { <p>Option 3</p> }}</div>');
    });

    it('should migrate a nested class', async () => {
      writeFile(
          '/comp.ts',
          `
        import {Component} from '@angular/core';
        import {ngSwitch, ngSwitchCase} from '@angular/common';
        function foo() {
          @Component({
            template: \`<div [ngSwitch]="testOpts">` +
              `<p *ngSwitchCase="1">Option 1</p>` +
              `<p *ngSwitchCase="2">Option 2</p>` +
              `</div>\`
          })
          class Comp {
            testOpts = "1";
          }
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain(
          'template: `<div>@switch (testOpts) { @case (1) { <p>Option 1</p> } @case (2) { <p>Option 2</p> }}</div>`');
    });

    it('should migrate nested switches', async () => {
      writeFile('/comp.ts', `
      import {Component} from '@angular/core';
      import {NgIf} from '@angular/common';

      @Component({
        imports: [NgFor, NgIf],
        templateUrl: './comp.html'
      })
      class Comp {
        show = false;
        nest = true;
        again = true;
        more = true;
      }`);

      writeFile('/comp.html', [
        `<div [ngSwitch]="thing">`,
        `  <div *ngSwitchCase="'item'" [ngSwitch]="anotherThing">`,
        `    <img *ngSwitchCase="'png'" src="/img.png" alt="PNG" />`,
        `    <img *ngSwitchDefault src="/default.jpg" alt="default" />`,
        `  </div>`,
        `  <img *ngSwitchDefault src="/default.jpg" alt="default" />`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `  @switch (thing) {`,
        `    @case ('item') {`,
        `      <div>`,
        `        @switch (anotherThing) {`,
        `          @case ('png') {`,
        `            <img src="/img.png" alt="PNG" />`,
        `          }`,
        `          @default {`,
        `            <img src="/default.jpg" alt="default" />`,
        `          }`,
        `        }`,
        `      </div>`,
        `    }`,
        `    @default {`,
        `      <img src="/default.jpg" alt="default" />`,
        `    }`,
        `  }`,
        `</div>`,
      ].join('\n'));
    });
  });

  describe('nested structures', () => {
    it('should migrate an inline template with nested control flow structures and no line breaks',
       async () => {
         writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
        }
      `);

         writeFile(
             '/comp.html',
             `<div *ngIf="show"><div *ngIf="nest"><span *ngIf="again">things</span><span *ngIf="more">stuff</span></div><span *ngIf="more">stuff</span></div>`,
         );

         await runMigration();
         const content = tree.readContent('/comp.html');

         expect(content).toBe(
             `@if (show) {<div>@if (nest) {<div>@if (again) {<span>things</span>}@if (more) {<span>stuff</span>}</div>}@if (more) {<span>stuff</span>}</div>}`,
         );
       });

    it('should migrate an inline template with multiple nested control flow structures',
       async () => {
         writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
        }
      `);

         writeFile('/comp.html', [
           `<div *ngIf="show">`,
           `<span>things</span>`,
           `<div *ngIf="nest">`,
           `<span>stuff</span>`,
           `</div>`,
           `</div>`,
         ].join('\n'));

         await runMigration();
         const content = tree.readContent('/comp.html');

         expect(content).toBe([
           `@if (show) {`,
           `  <div>`,
           `    <span>things</span>`,
           `    @if (nest) {`,
           `      <div>`,
           `        <span>stuff</span>`,
           `      </div>`,
           `    }`,
           `  </div>`,
           `}`,
         ].join('\n'));
       });

    it('should migrate an inline template with multiple nested control flow structures',
       async () => {
         writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
        }
      `);

         writeFile('/comp.html', [
           `<div *ngIf="show">`,
           `<span>things</span>`,
           `<div *ngIf="nest">`,
           `<span>stuff</span>`,
           `</div>`,
           `</div>`,
         ].join('\n'));

         await runMigration();
         const content = tree.readContent('/comp.html');

         expect(content).toBe([
           `@if (show) {`,
           `  <div>`,
           `    <span>things</span>`,
           `    @if (nest) {`,
           `      <div>`,
           `        <span>stuff</span>`,
           `      </div>`,
           `    }`,
           `  </div>`,
           `}`,
         ].join('\n'));
       });

    it('should migrate a simple nested case', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
        }
      `);

      writeFile('/comp.html', [
        `<div *ngIf="show">`,
        `<div *ngIf="nest">`,
        `</div>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `@if (show) {`,
        `  <div>`,
        `    @if (nest) {`,
        `      <div>`,
        `      </div>`,
        `    }`,
        `  </div>`,
        `}`,
      ].join('\n'));
    });

    it('should migrate an if and switch on the same container', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {}
      `);

      writeFile('/comp.html', [
        `<div>`,
        `  <ng-container *ngIf="thing" [ngSwitch]="value.provider">`,
        `    <cmp1 *ngSwitchCase="'value1'" />`,
        `    <cmp2 *ngSwitchCase="'value2'" />`,
        `  </ng-container>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');
      const expected = [
        `<div>`,
        `  @if (thing) {`,
        `    @switch (value.provider) {`,
        `      @case ('value1') {`,
        `        <cmp1 />`,
        `      }`,
        `      @case ('value2') {`,
        `        <cmp2 />`,
        `      }`,
        `    }`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate a switch with for inside case', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
        }
      `);

      writeFile('/comp.html', [
        `<div [formGroup]="form">`,
        `<label [attr.for]="question.key">{{question.label}}</label>`,
        `<div [ngSwitch]="question.controlType">`,
        `  <input *ngSwitchCase="'textbox'" [formControlName]="question.key"`,
        `          [id]="question.key" [type]="question.type" />`,
        `  <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">`,
        `    <option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>`,
        `  </select>`,
        `</div>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div [formGroup]="form">`,
        `  <label [attr.for]="question.key">{{question.label}}</label>`,
        `  <div>`,
        `    @switch (question.controlType) {`,
        `      @case ('textbox') {`,
        `        <input [formControlName]="question.key"`,
        `          [id]="question.key" [type]="question.type" />`,
        `      }`,
        `      @case ('dropdown') {`,
        `        <select [id]="question.key" [formControlName]="question.key">`,
        `          @for (opt of question.options; track opt) {`,
        `            <option [value]="opt.key">{{opt.value}}</option>`,
        `          }`,
        `        </select>`,
        `      }`,
        `    }`,
        `  </div>`,
        `</div>`,
      ].join('\n'));
    });

    it('should migrate a simple for inside an if', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
        }
      `);

      writeFile('/comp.html', [
        `<ul *ngIf="show">`,
        `<li *ngFor="let h of heroes" [ngValue]="h">{{h.name}} ({{h.emotion}})</li>`,
        `</ul>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `@if (show) {`,
        `  <ul>`,
        `    @for (h of heroes; track h) {`,
        `      <li [ngValue]="h">{{h.name}} ({{h.emotion}})</li>`,
        `    }`,
        `  </ul>`,
        `}`,
      ].join('\n'));
    });

    it('should migrate an if inside a for loop', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          heroes = [{name: 'cheese', emotion: 'happy'},{name: 'stuff', emotion: 'sad'}];
          show = true;
        }
      `);

      writeFile('/comp.html', [
        `<select id="hero">`,
        `<span *ngFor="let h of heroes">`,
        `<span *ngIf="show">`,
        `<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>`,
        `</span>`,
        `</span>`,
        `</select>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<select id="hero">`,
        `  @for (h of heroes; track h) {`,
        `    <span>`,
        `      @if (show) {`,
        `        <span>`,
        `          <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>`,
        `        </span>`,
        `      }`,
        `    </span>`,
        `  }`,
        `</select>`,
      ].join('\n'));
    });

    it('should migrate an if inside a for loop with ng-containers', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          heroes = [{name: 'cheese', emotion: 'happy'},{name: 'stuff', emotion: 'sad'}];
          show = true;
        }
      `);

      writeFile('/comp.html', [
        `<select id="hero">`,
        `<ng-container *ngFor="let h of heroes">`,
        `<ng-container *ngIf="show">`,
        `<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>`,
        `</ng-container>`,
        `</ng-container>`,
        `</select>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<select id="hero">`,
        `  @for (h of heroes; track h) {`,
        `    @if (show) {`,
        `      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>`,
        `    }`,
        `  }`,
        `</select>`,
      ].join('\n'));
    });

    it('should migrate an inline template with if and for loops', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf, NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<div *ngIf="show">`,
        `<ul *ngIf="nest">`,
        `<li *ngFor="let item of items">{{item.text}}</li>`,
        `</ul>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `@if (show) {`,
        `  <div>`,
        `    @if (nest) {`,
        `      <ul>`,
        `        @for (item of items; track item) {`,
        `          <li>{{item.text}}</li>`,
        `        }`,
        `      </ul>`,
        `    }`,
        `  </div>`,
        `}`,
      ].join('\n'));
    });

    it('should migrate template with if, else, and for loops', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf, NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
        }
      `);

      writeFile('/comp.html', [
        `<div *ngIf="show">`,
        `<ul *ngIf="nest; else elseTmpl">`,
        `<li *ngFor="let item of items">{{item.text}}</li>`,
        `</ul>`,
        `<ng-template #elseTmpl><p>Else content</p></ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `@if (show) {`,
        `  <div>`,
        `    @if (nest) {`,
        `      <ul>`,
        `        @for (item of items; track item) {`,
        `          <li>{{item.text}}</li>`,
        `        }`,
        `      </ul>`,
        `    } @else {`,
        `      <p>Else content</p>`,
        `    }`,
        `  </div>`,
        `}`,
      ].join('\n'));
    });

    it('should migrate an inline template with if, for loops, and switches', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf, NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
          show = false;
          nest = true;
          again = true;
          more = true;
          items: Item[] = [{id: 1, text: 'blah'},{id: 2, text: 'stuff'}];
          testOpts = 2;
        }
      `);

      writeFile('/comp.html', [
        `<div *ngIf="show">`,
        `<div *ngIf="again">`,
        `<div *ngIf="more">`,
        `<div [ngSwitch]="testOpts">`,
        `<p *ngSwitchCase="1">Option 1</p>`,
        `<p *ngSwitchCase="2">Option 2</p>`,
        `<p *ngSwitchDefault>Option 3</p>`,
        `</div>`,
        `</div>`,
        `</div>`,
        `<ul *ngIf="nest">`,
        `<li *ngFor="let item of items">{{item.text}}</li>`,
        `</ul>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `@if (show) {`,
        `  <div>`,
        `    @if (again) {`,
        `      <div>`,
        `        @if (more) {`,
        `          <div>`,
        `            <div>`,
        `              @switch (testOpts) {`,
        `                @case (1) {`,
        `                  <p>Option 1</p>`,
        `                }`,
        `                @case (2) {`,
        `                  <p>Option 2</p>`,
        `                }`,
        `                @default {`,
        `                  <p>Option 3</p>`,
        `                }`,
        `              }`,
        `            </div>`,
        `          </div>`,
        `        }`,
        `      </div>`,
        `    }`,
        `    @if (nest) {`,
        `      <ul>`,
        `        @for (item of items; track item) {`,
        `          <li>{{item.text}}</li>`,
        `        }`,
        `      </ul>`,
        `    }`,
        `  </div>`,
        `}`,
      ].join('\n'));
    });

    it('complicated case', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf, NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
        }
      `);

      writeFile('/comp.html', [
        `<div class="docs-breadcrumb" *ngFor="let breadcrumb of breadcrumbItems()">`,
        `<ng-container *ngIf="breadcrumb.path; else breadcrumbWithoutLinkTemplate">`,
        `<ng-container *ngIf="breadcrumb.isExternal; else internalLinkTemplate">`,
        `<a [href]="breadcrumb.path">{{ breadcrumb.label }}</a>`,
        `</ng-container>`,
        `<ng-template #internalLinkTemplate>`,
        `<a [routerLink]="'/' + breadcrumb.path">{{ breadcrumb.label }}</a>`,
        `</ng-template>`,
        `</ng-container>`,
        `<ng-template #breadcrumbWithoutLinkTemplate>`,
        `<span>{{ breadcrumb.label }}</span>`,
        `</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');
      const result = [
        `@for (breadcrumb of breadcrumbItems(); track breadcrumb) {`,
        `  <div class="docs-breadcrumb">`,
        `    @if (breadcrumb.path) {`,
        `      @if (breadcrumb.isExternal) {`,
        `        <a [href]="breadcrumb.path">{{ breadcrumb.label }}</a>`,
        `      } @else {`,
        `        <a [routerLink]="'/' + breadcrumb.path">{{ breadcrumb.label }}</a>`,
        `      }`,
        `    } @else {`,
        `      <span>{{ breadcrumb.label }}</span>`,
        `    }`,
        `  </div>`,
        `}`,
      ].join('\n');

      expect(content).toBe(result);
    });

    it('long file', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf, NgFor} from '@angular/common';
        interface Item {
          id: number;
          text: string;
        }

        @Component({
          imports: [NgFor, NgIf],
          templateUrl: './comp.html'
        })
        class Comp {
        }
      `);

      writeFile('/comp.html', [
        `<div class="class">`,
        `<iframe `,
        `#preview `,
        `class="special-class" `,
        `*ngIf="stuff" `,
        `></iframe>`,
        `<ng-container *ngIf="shouldDoIt">`,
        `<ng-container `,
        `*ngComponentOutlet="outletComponent; inputs: {errorMessage: errorMessage()}" `,
        `/>`,
        `</ng-container>`,
        `<div `,
        `class="what"`,
        `*ngIf="`,
        `shouldWhat`,
        `"`,
        `>`,
        `<ng-container [ngSwitch]="currentCase()">`,
        `<span `,
        `class="case-stuff"`,
        `*ngSwitchCase="A"`,
        `>`,
        `Case A`,
        `</span>`,
        `<span class="b-class" *ngSwitchCase="B">`,
        `Case B`,
        `</span>`,
        `<span `,
        `class="thing-1" `,
        `*ngSwitchCase="C" `,
        `>`,
        `Case C`,
        `</span>`,
        `<span `,
        `class="thing-2"`,
        `*ngSwitchCase="D"`,
        `>`,
        `Case D`,
        `</span>`,
        `<span `,
        `class="thing-3" `,
        `*ngSwitchCase="E" `,
        `>`,
        `Case E`,
        `</span>`,
        `</ng-container>`,
        `<progress [value]="progress()" [max]="ready"></progress>`,
        `</div>`,
        `</div>`,
      ].join('\n'));

      await runMigration();

      const content = tree.readContent('/comp.html');
      const result = [
        `<div class="class">`,
        `  @if (stuff) {`,
        `    <iframe`,
        `      #preview`,
        `      class="special-class"`,
        `    ></iframe>`,
        `  }`,
        `  @if (shouldDoIt) {`,
        `    <ng-container`,
        `      *ngComponentOutlet="outletComponent; inputs: {errorMessage: errorMessage()}"`,
        `      />`,
        `  }`,
        `  @if (`,
        `    shouldWhat`,
        `    ) {`,
        `    <div`,
        `      class="what"`,
        `      >`,
        `      @switch (currentCase()) {`,
        `        @case (A) {`,
        `          <span`,
        `            class="case-stuff"`,
        `            >`,
        `            Case A`,
        `          </span>`,
        `        }`,
        `        @case (B) {`,
        `          <span class="b-class">`,
        `            Case B`,
        `          </span>`,
        `        }`,
        `        @case (C) {`,
        `          <span`,
        `            class="thing-1"`,
        `            >`,
        `            Case C`,
        `          </span>`,
        `        }`,
        `        @case (D) {`,
        `          <span`,
        `            class="thing-2"`,
        `            >`,
        `            Case D`,
        `          </span>`,
        `        }`,
        `        @case (E) {`,
        `          <span`,
        `            class="thing-3"`,
        `            >`,
        `            Case E`,
        `          </span>`,
        `        }`,
        `      }`,
        `      <progress [value]="progress()" [max]="ready"></progress>`,
        `    </div>`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(content).toBe(result);
    });
  });

  describe('error handling', () => {
    it('should log template migration errors to the console', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div><span *ngIf="toggle">This should be hidden</span></div>\`
        })
        class Comp {
          toggle = false;
        }
      `);

      await runMigration();
      tree.readContent('/comp.ts');

      expect(warnOutput.join(' '))
          .toContain('IMPORTANT! This migration is in developer preview. Use with caution.');
    });
  });

  describe('template', () => {
    it('should migrate a root level template thats not used in control flow', 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', [
        `<div class="content">`,
        `  <ng-container *ngTemplateOutlet="navigation" />`,
        `  <ng-container *ngIf="content()">`,
        `    <div class="class-1"></div>`,
        `  </ng-container>`,
        `</div>`,
        `<ng-template #navigation>`,
        `  <div class="cont">`,
        `      <button`,
        `        *ngIf="shouldShowMe()"`,
        `        class="holy-classname-batman"`,
        `      >`,
        `        Wow...a button!`,
        `      </button>`,
        `  </div>`,
        `</ng-template>`,
      ].join('\n'));

      await runMigration();

      const content = tree.readContent('/comp.html');
      const result = [
        `<div class="content">`,
        `  <ng-container *ngTemplateOutlet="navigation" />`,
        `  @if (content()) {`,
        `    <div class="class-1"></div>`,
        `  }`,
        `</div>`,
        `<ng-template #navigation>`,
        `  <div class="cont">`,
        `    @if (shouldShowMe()) {`,
        `      <button`,
        `        class="holy-classname-batman"`,
        `        >`,
        `        Wow...a button!`,
        `      </button>`,
        `    }`,
        `  </div>`,
        `</ng-template>`,
      ].join('\n');

      expect(content).toBe(result);
    });

    it('should not remove a template thats not used in control flow', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          selector: 'declare-comp',
          template: \`
            DeclareComp({{name}})
            <ng-template #myTmpl let-greeting>
              {{greeting}} {{logName()}}!
            </ng-template>
          \`
        })
        class DeclareComp implements DoCheck, AfterViewChecked {
          @ViewChild('myTmpl') myTmpl!: TemplateRef<any>;
          name: string = 'world';
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain('<ng-template #myTmpl let-greeting>');
    });

    it('should remove a template thats only used in control flow', 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', [
        `<div class="statistics">`,
        `    <ng-container *ngIf="null !== value; else preload">`,
        `      <div class="statistics__counter"`,
        `        *ngIf="!isMoney"`,
        `      >`,
        `        {{ value | number }}`,
        `      </div>`,
        `      <div class="statistics__counter"`,
        `        *ngIf="isMoney"`,
        `      >`,
        `      {{ value | number }}$`,
        `      </div>`,
        `    </ng-container>`,
        `</div>`,
        `<ng-template #preload>`,
        `  <preload-rect`,
        `    height="2rem"`,
        `    width="6rem" />`,
        `</ng-template>`,
      ].join('\n'));

      await runMigration();
      const content = tree.readContent('/comp.html');

      const result = [
        `<div class="statistics">`,
        `  @if (null !== value) {`,
        `    @if (!isMoney) {`,
        `      <div class="statistics__counter"`,
        `        >`,
        `        {{ value | number }}`,
        `      </div>`,
        `    }`,
        `    @if (isMoney) {`,
        `      <div class="statistics__counter"`,
        `        >`,
        `        {{ value | number }}$`,
        `      </div>`,
        `    }`,
        `  } @else {`,
        `    <preload-rect`,
        `      height="2rem"`,
        `      width="6rem" />`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(content).toBe(result);
    });

    it('should move templates after they were migrated to new syntax', 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', [
        `<div>`,
        `  <ng-container *ngIf="cond; else testTpl">`,
        `    bla bla`,
        `  </ng-container>`,
        `</div>`,
        `<ng-template #testTpl>`,
        `  <div class="test" *ngFor="let item of items"></div>`,
        `</ng-template>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<div>`,
        `  @if (cond) {`,
        `    bla bla`,
        `  } @else {`,
        `    @for (item of items; track item) {`,
        `      <div class="test"></div>`,
        `    }`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should preserve i18n attribute on ng-templates in an if/else', 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', [
        `<div>`,
        `  <ng-container *ngIf="cond; else testTpl">`,
        `    bla bla`,
        `  </ng-container>`,
        `</div>`,
        `<ng-template #testTpl i18n="@@test_key">`,
        `  <div class="test" *ngFor="let item of items"></div>`,
        `</ng-template>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<div>`,
        `  @if (cond) {`,
        `    bla bla`,
        `  } @else {`,
        `    <ng-container i18n="@@test_key">`,
        `      @for (item of items; track item) {`,
        `        <div class="test"></div>`,
        `      }`,
        `    </ng-container>`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate multiple if/else using the same ng-template', 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', [
        `<div>`,
        `  <div *ngIf="hasPermission; else noPermission">presentation</div>`,
        `  <div *ngIf="someOtherPermission; else noPermission">presentation</div>`,
        `</div>`,
        `<ng-template #noPermission>`,
        `  <p>No Permissions</p>`,
        `</ng-template>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<div>`,
        `  @if (hasPermission) {`,
        `    <div>presentation</div>`,
        `  } @else {`,
        `    <p>No Permissions</p>`,
        `  }`,
        `  @if (someOtherPermission) {`,
        `    <div>presentation</div>`,
        `  } @else {`,
        `    <p>No Permissions</p>`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });
  });
  describe('formatting', () => {
    it('should reformat else if', 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', [
        `<div>`,
        `@if (stuff) {`,
        `<p>Stuff</p>`,
        `} @else if (things) {`,
        `<p>Things</p>`,
        `} @else {`,
        `<p>Huh</p>`,
        `}`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<div>`,
        `  @if (stuff) {`,
        `    <p>Stuff</p>`,
        `  } @else if (things) {`,
        `    <p>Things</p>`,
        `  } @else {`,
        `    <p>Huh</p>`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should reformat self closing tags', 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', [
        `<div>`,
        `@if (stuff) {`,
        `<img src="path.png" alt="stuff" />`,
        `} @else {`,
        `<img src="path.png"`,
        `alt="stuff" />`,
        `}`,
        `</div>`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.html');

      const expected = [
        `<div>`,
        `  @if (stuff) {`,
        `    <img src="path.png" alt="stuff" />`,
        `  } @else {`,
        `    <img src="path.png"`,
        `      alt="stuff" />`,
        `  }`,
        `</div>`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should migrate an if else case and not format', 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', [
        `<div>`,
        `<span *ngIf="show;else elseBlock">Content here</span>`,
        `<ng-template #elseBlock>Else Content</ng-template>`,
        `</div>`,
      ].join('\n'));

      await runMigration(undefined, false);
      const content = tree.readContent('/comp.html');

      expect(content).toBe([
        `<div>`,
        `@if (show) {`,
        `<span>Content here</span>`,
        `} @else {`,
        `Else Content`,
        `}`,
        `</div>`,
      ].join('\n'));
    });
  });

  describe('imports', () => {
    it('should remove common module imports post migration', async () => {
      writeFile('/comp.ts', [
        `import {Component} from '@angular/core';`,
        `import {NgIf} from '@angular/common';`,
        `@Component({`,
        `  imports: [NgIf],`,
        `  template: \`<div><span *ngIf="toggle">shrug</span></div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.ts');
      const expected = [
        `import {Component} from '@angular/core';\n`,
        `@Component({`,
        `  imports: [],`,
        `  template: \`<div>@if (toggle) {<span>shrug</span>}</div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should leave non-cf common module imports post migration', async () => {
      writeFile('/comp.ts', [
        `import {Component} from '@angular/core';`,
        `import {NgIf, AsyncPipe} from '@angular/common';\n`,
        `@Component({`,
        `  imports: [NgIf, AsyncPipe],`,
        `  template: \`<div><span *ngIf="toggle">shrug</span></div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.ts');
      const expected = [
        `import {Component} from '@angular/core';`,
        `import { AsyncPipe } from '@angular/common';\n`,
        `@Component({`,
        `  imports: [AsyncPipe],`,
        `  template: \`<div>@if (toggle) {<span>shrug</span>}</div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should remove common module post migration', async () => {
      writeFile('/comp.ts', [
        `import {Component} from '@angular/core';`,
        `import {CommonModule} from '@angular/common';`,
        `@Component({`,
        `  imports: [CommonModule],`,
        `  template: \`<div><span *ngIf="toggle">shrug</span></div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.ts');
      const expected = [
        `import {Component} from '@angular/core';\n`,
        `@Component({`,
        `  imports: [],`,
        `  template: \`<div>@if (toggle) {<span>shrug</span>}</div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n');

      expect(actual).toBe(expected);
    });

    it('should leave common module post migration if other common module deps exist', async () => {
      writeFile('/comp.ts', [
        `import {Component} from '@angular/core';`,
        `import {CommonModule} from '@angular/common';\n`,
        `@Component({`,
        `  imports: [CommonModule],`,
        `  template: \`<div><span *ngIf="toggle">{{ shrug | lowercase }}</span></div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n'));

      await runMigration();
      const actual = tree.readContent('/comp.ts');
      const expected = [
        `import {Component} from '@angular/core';`,
        `import { CommonModule } from '@angular/common';\n`,
        `@Component({`,
        `  imports: [CommonModule],`,
        `  template: \`<div>@if (toggle) {<span>{{ shrug | lowercase }}</span>}</div>\``,
        `})`,
        `class Comp {`,
        `  toggle = false;`,
        `}`,
      ].join('\n');

      expect(actual).toBe(expected);
    });
  });

  describe('no migration needed', () => {
    it('should do nothing when no control flow is present', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div><span>shrug</span></div>\`
        })
        class Comp {
          toggle = false;
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');

      expect(content).toContain('template: `<div><span>shrug</span></div>`');
    });

    it('should do nothing with already present updated control flow', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div>@if (toggle) {<span>shrug</span>}</div>\`
        })
        class Comp {
          toggle = false;
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');
      expect(content).toContain('template: `<div>@if (toggle) {<span>shrug</span>}</div>`');
    });

    it('should migrate an ngif inside a block', async () => {
      writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<div>@if (toggle) {<div><span *ngIf="show">shrug</span></div>}</div>\`
        })
        class Comp {
          toggle = false;
          show = false;
        }
      `);

      await runMigration();
      const content = tree.readContent('/comp.ts');
      expect(content).toContain(
          'template: `<div>@if (toggle) {<div>@if (show) {<span>shrug</span>}</div>}</div>`');
    });

    it('should update let value in a build if block to as value for the new control flow',
       async () => {
         writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {NgIf} from '@angular/common';

        @Component({
          imports: [NgIf],
          template: \`<ng-container *ngIf="value$ | async; let value"> {{value}} </ng-container>\`
        })
        class Comp {
          value$ = of('Rica');
        }
      `);

         await runMigration();
         const content = tree.readContent('/comp.ts');
         expect(content).toContain('template: `@if (value$ | async; as value) { {{value}} }`');
       });

    it('should update let value in a standard if else block to as value for the new control flow',
       async () => {
         writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {CommonModule} from '@angular/common';

        @Component({
          imports: [CommonModule],
          template: \`<div *ngIf="(logStatus$ | async)?.name; let userName; else loggedOut"> Hello {{ userName }} ! </div><ng-template #loggedOut></ng-template>\`
        })
        class Comp {
          logStatus$ =  of({ name: 'Robert' });
        }
      `);

         await runMigration();
         const content = tree.readContent('/comp.ts');
         expect(content).toContain(
             'template: `@if ((logStatus$ | async)?.name; as userName) {<div> Hello {{ userName }} ! </div>} @else {}`');
       });

    it('should update let value in a standard if else, then block to as value for the new control flow',
       async () => {
         writeFile('/comp.ts', `
        import {Component} from '@angular/core';
        import {CommonModule} from '@angular/common';

        @Component({
          imports: [CommonModule],
          template: \`<div *ngIf="isLoggedIn$ | async; let logIn; then loggedIn; else loggedOut"></div><ng-template #loggedIn>Log In</ng-template>
          <ng-template #loggedOut>Log Out</ng-template>\`
        })
        class Comp {
          isLoggedIn$ = of(true);
        }
      `);

         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}`');
       });
  });
});