angular__angular/packages/common/test/directives/ng_template_outlet_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 {CommonModule, NgTemplateOutlet} from '@angular/common';
import {
  Component,
  ContentChildren,
  Directive,
  Inject,
  Injectable,
  InjectionToken,
  Injector,
  NO_ERRORS_SCHEMA,
  OnDestroy,
  Provider,
  QueryList,
  TemplateRef,
} from '@angular/core';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {expect} from '@angular/platform-browser/testing/src/matchers';

describe('NgTemplateOutlet', () => {
  let fixture: ComponentFixture<any>;

  function setTplRef(value: any): void {
    fixture.componentInstance.currentTplRef = value;
  }

  function detectChangesAndExpectText(text: string): void {
    fixture.detectChanges();
    expect(fixture.debugElement.nativeElement).toHaveText(text);
  }

  afterEach(() => {
    fixture = null as any;
  });

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        CaptureTplRefs,
        DestroyableCmpt,
        MultiContextComponent,
        InjectValueComponent,
      ],
      imports: [CommonModule],
      providers: [DestroyedSpyService],
    });
  });

  // https://github.com/angular/angular/issues/14778
  it('should accept the component as the context', waitForAsync(() => {
    const template =
      `<ng-container *ngTemplateOutlet="tpl; context: this"></ng-container>` +
      `<ng-template #tpl>{{context.foo}}</ng-template>`;

    fixture = createTestComponent(template);
    detectChangesAndExpectText('bar');
  }));

  it('should do nothing if templateRef is `null`', waitForAsync(() => {
    const template = `<ng-container [ngTemplateOutlet]="null"></ng-container>`;
    fixture = createTestComponent(template);
    detectChangesAndExpectText('');
  }));

  it('should insert content specified by TemplateRef', waitForAsync(() => {
    const template =
      `<ng-template #tpl>foo</ng-template>` +
      `<ng-container [ngTemplateOutlet]="tpl"></ng-container>`;
    fixture = createTestComponent(template);
    detectChangesAndExpectText('foo');
  }));

  it('should clear content if TemplateRef becomes `null`', waitForAsync(() => {
    const template =
      `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template></tpl-refs>` +
      `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
    fixture = createTestComponent(template);
    fixture.detectChanges();
    const refs = fixture.debugElement.children[0].references!['refs'];

    setTplRef(refs.tplRefs.first);
    detectChangesAndExpectText('foo');

    setTplRef(null);
    detectChangesAndExpectText('');
  }));

  it('should swap content if TemplateRef changes', waitForAsync(() => {
    const template =
      `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template><ng-template>bar</ng-template></tpl-refs>` +
      `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
    fixture = createTestComponent(template);

    fixture.detectChanges();
    const refs = fixture.debugElement.children[0].references!['refs'];

    setTplRef(refs.tplRefs.first);
    detectChangesAndExpectText('foo');

    setTplRef(refs.tplRefs.last);
    detectChangesAndExpectText('bar');
  }));

  it('should display template if context is `null`', waitForAsync(() => {
    const template =
      `<ng-template #tpl>foo</ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; context: null"></ng-container>`;
    fixture = createTestComponent(template);
    detectChangesAndExpectText('foo');
  }));

  it('should reflect initial context and changes', waitForAsync(() => {
    const template =
      `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
    fixture = createTestComponent(template);

    fixture.detectChanges();
    detectChangesAndExpectText('bar');

    fixture.componentInstance.context.foo = 'alter-bar';
    detectChangesAndExpectText('alter-bar');
  }));

  it('should reflect user defined `$implicit` property in the context', waitForAsync(() => {
    const template =
      `<ng-template let-ctx #tpl>{{ctx.foo}}</ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
    fixture = createTestComponent(template);
    fixture.componentInstance.context = {$implicit: {foo: 'bra'}};
    detectChangesAndExpectText('bra');
  }));

  it('should reflect context re-binding', waitForAsync(() => {
    const template =
      `<ng-template let-shawshank="shawshank" #tpl>{{shawshank}}</ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; context: context"></ng-container>`;
    fixture = createTestComponent(template);

    fixture.componentInstance.context = {shawshank: 'brooks'};
    detectChangesAndExpectText('brooks');

    fixture.componentInstance.context = {shawshank: 'was here'};
    detectChangesAndExpectText('was here');
  }));

  it('should update but not destroy embedded view when context values change', () => {
    const template =
      `<ng-template let-foo="foo" #tpl><destroyable-cmpt></destroyable-cmpt>:{{foo}}</ng-template>` +
      `<ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{foo: value}"></ng-template>`;

    fixture = createTestComponent(template);
    const spyService = fixture.debugElement.injector.get(DestroyedSpyService);

    detectChangesAndExpectText('Content to destroy:bar');
    expect(spyService.destroyed).toBeFalsy();

    fixture.componentInstance.value = 'baz';
    detectChangesAndExpectText('Content to destroy:baz');
    expect(spyService.destroyed).toBeFalsy();
  });

  it('should update but not destroy embedded view when context shape changes', () => {
    const template =
      `<ng-template let-foo="foo" #tpl><destroyable-cmpt></destroyable-cmpt>:{{foo}}</ng-template>` +
      `<ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="context"></ng-template>`;

    fixture = createTestComponent(template);
    const spyService = fixture.debugElement.injector.get(DestroyedSpyService);

    detectChangesAndExpectText('Content to destroy:bar');
    expect(spyService.destroyed).toBeFalsy();

    fixture.componentInstance.context = {foo: 'baz', other: true};
    detectChangesAndExpectText('Content to destroy:baz');
    expect(spyService.destroyed).toBeFalsy();
  });

  it('should destroy embedded view when context value changes and templateRef becomes undefined', () => {
    const template =
      `<ng-template let-foo="foo" #tpl><destroyable-cmpt></destroyable-cmpt>:{{foo}}</ng-template>` +
      `<ng-template [ngTemplateOutlet]="value === 'bar' ? tpl : undefined" [ngTemplateOutletContext]="{foo: value}"></ng-template>`;

    fixture = createTestComponent(template);
    const spyService = fixture.debugElement.injector.get(DestroyedSpyService);

    detectChangesAndExpectText('Content to destroy:bar');
    expect(spyService.destroyed).toBeFalsy();

    fixture.componentInstance.value = 'baz';
    detectChangesAndExpectText('');
    expect(spyService.destroyed).toBeTruthy();
  });

  it('should not try to update null / undefined context when context changes but template stays the same', () => {
    const template =
      `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
      `<ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="value === 'bar' ? null : undefined"></ng-template>`;

    fixture = createTestComponent(template);
    detectChangesAndExpectText('');

    fixture.componentInstance.value = 'baz';
    detectChangesAndExpectText('');
  });

  it('should not try to update null / undefined context when template changes', () => {
    const template =
      `<ng-template let-foo="foo" #tpl1>{{foo}}</ng-template>` +
      `<ng-template let-foo="foo" #tpl2>{{foo}}</ng-template>` +
      `<ng-template [ngTemplateOutlet]="value === 'bar' ? tpl1 : tpl2" [ngTemplateOutletContext]="value === 'bar' ? null : undefined"></ng-template>`;

    fixture = createTestComponent(template);
    detectChangesAndExpectText('');

    fixture.componentInstance.value = 'baz';
    detectChangesAndExpectText('');
  });

  it('should not try to update context on undefined view', () => {
    const template =
      `<ng-template let-foo="foo" #tpl>{{foo}}</ng-template>` +
      `<ng-template [ngTemplateOutlet]="value === 'bar' ? null : undefined" [ngTemplateOutletContext]="{foo: value}"></ng-template>`;

    fixture = createTestComponent(template);
    detectChangesAndExpectText('');

    fixture.componentInstance.value = 'baz';
    detectChangesAndExpectText('');
  });

  // https://github.com/angular/angular/issues/30801
  it('should not throw if the context is left blank', () => {
    const template = `
      <ng-template #testTemplate>test</ng-template>
      <ng-template [ngTemplateOutlet]="testTemplate" [ngTemplateOutletContext]=""></ng-template>
    `;

    expect(() => {
      fixture = createTestComponent(template);
      detectChangesAndExpectText('test');
    }).not.toThrow();
  });

  it('should not throw when switching from template to null and back to template', waitForAsync(() => {
    const template =
      `<tpl-refs #refs="tplRefs"><ng-template>foo</ng-template></tpl-refs>` +
      `<ng-container [ngTemplateOutlet]="currentTplRef"></ng-container>`;
    fixture = createTestComponent(template);
    fixture.detectChanges();
    const refs = fixture.debugElement.children[0].references!['refs'];

    setTplRef(refs.tplRefs.first);
    detectChangesAndExpectText('foo');

    setTplRef(null);
    detectChangesAndExpectText('');

    expect(() => {
      setTplRef(refs.tplRefs.first);
      detectChangesAndExpectText('foo');
    }).not.toThrow();
  }));

  it('should not mutate context object if two contexts with an identical shape are swapped', () => {
    fixture = TestBed.createComponent(MultiContextComponent);
    const {componentInstance, nativeElement} = fixture;
    componentInstance.context1 = {name: 'one'};
    componentInstance.context2 = {name: 'two'};
    fixture.detectChanges();

    expect(nativeElement.textContent.trim()).toBe('one | two');
    expect(componentInstance.context1).toEqual({name: 'one'});
    expect(componentInstance.context2).toEqual({name: 'two'});

    const temp = componentInstance.context1;
    componentInstance.context1 = componentInstance.context2;
    componentInstance.context2 = temp;
    fixture.detectChanges();

    expect(nativeElement.textContent.trim()).toBe('two | one');
    expect(componentInstance.context1).toEqual({name: 'two'});
    expect(componentInstance.context2).toEqual({name: 'one'});
  });

  it('should be able to specify an injector', waitForAsync(() => {
    const template =
      `<ng-template #tpl><inject-value></inject-value></ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; injector: injector"></ng-container>`;
    fixture = createTestComponent(template);
    fixture.componentInstance.injector = Injector.create({
      providers: [{provide: templateToken, useValue: 'world'}],
    });
    detectChangesAndExpectText('Hello world');
  }));

  it('should re-render if the injector changes', waitForAsync(() => {
    const template =
      `<ng-template #tpl><inject-value></inject-value></ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; injector: injector"></ng-container>`;
    fixture = createTestComponent(template);
    fixture.componentInstance.injector = Injector.create({
      providers: [{provide: templateToken, useValue: 'world'}],
    });
    detectChangesAndExpectText('Hello world');

    fixture.componentInstance.injector = Injector.create({
      providers: [{provide: templateToken, useValue: 'there'}],
    });
    detectChangesAndExpectText('Hello there');
  }));

  it('should override providers from parent component using custom injector', waitForAsync(() => {
    const template =
      `<ng-template #tpl><inject-value></inject-value></ng-template>` +
      `<ng-container *ngTemplateOutlet="tpl; injector: injector"></ng-container>`;
    fixture = createTestComponent(template, [{provide: templateToken, useValue: 'parent'}]);
    fixture.componentInstance.injector = Injector.create({
      providers: [{provide: templateToken, useValue: 'world'}],
    });
    detectChangesAndExpectText('Hello world');
  }));

  it('should be available as a standalone directive', () => {
    @Component({
      selector: 'test-component',
      imports: [NgTemplateOutlet],
      template: `
        <ng-template #tpl>Hello World</ng-template>
        <ng-container *ngTemplateOutlet="tpl"></ng-container>
      `,
      standalone: true,
    })
    class TestComponent {}

    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('Hello World');
  });

  it('should properly bind context if context is unset initially', () => {
    @Component({
      imports: [NgTemplateOutlet],
      template: `
        <ng-template #tpl let-name>Name:{{ name }}</ng-template>
        <ng-template [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="ctx"></ng-template>
      `,
      standalone: true,
    })
    class TestComponent {
      ctx: {$implicit: string} | undefined = undefined;
    }

    const fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('Name:');

    fixture.componentInstance.ctx = {$implicit: 'Angular'};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('Name:Angular');
  });
});

const templateToken = new InjectionToken<string>('templateToken');

@Injectable()
class DestroyedSpyService {
  destroyed = false;
}

@Component({selector: 'destroyable-cmpt', template: 'Content to destroy'})
class DestroyableCmpt implements OnDestroy {
  constructor(private _spyService: DestroyedSpyService) {}

  ngOnDestroy(): void {
    this._spyService.destroyed = true;
  }
}

@Directive({selector: 'tpl-refs', exportAs: 'tplRefs'})
class CaptureTplRefs {
  @ContentChildren(TemplateRef) tplRefs?: QueryList<TemplateRef<any>>;
}

@Component({selector: 'test-cmp', template: ''})
class TestComponent {
  currentTplRef?: TemplateRef<any>;
  context: any = {foo: 'bar'};
  value = 'bar';
  injector: Injector | null = null;
}

@Component({
  selector: 'inject-value',
  template: 'Hello {{tokenValue}}',
})
class InjectValueComponent {
  constructor(@Inject(templateToken) public tokenValue: string) {}
}

@Component({
  template: `
    <ng-template #template let-name="name">{{ name }}</ng-template>
    <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="context1"></ng-template>
    |
    <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="context2"></ng-template>
  `,
})
class MultiContextComponent {
  context1: {name: string} | undefined;
  context2: {name: string} | undefined;
}

function createTestComponent(
  template: string,
  providers: Provider[] = [],
): ComponentFixture<TestComponent> {
  return TestBed.overrideComponent(TestComponent, {set: {template: template, providers}})
    .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
    .createComponent(TestComponent);
}