angular__angular/packages/common/test/directives/ng_component_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} from '@angular/common';
import {NgComponentOutlet} from '@angular/common/src/directives/ng_component_outlet';
import {Compiler, Component, ComponentRef, Inject, InjectionToken, Injector, Input, NgModule, NgModuleFactory, NO_ERRORS_SCHEMA, Optional, QueryList, TemplateRef, Type, ViewChild, ViewChildren, ViewContainerRef} from '@angular/core';
import {TestBed, waitForAsync} from '@angular/core/testing';
import {expect} from '@angular/platform-browser/testing/src/matchers';

describe('insert/remove', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({imports: [TestModule]});
  });

  it('should do nothing if component is null', waitForAsync(() => {
       const template = `<ng-template *ngComponentOutlet="currentComponent"></ng-template>`;
       TestBed.overrideComponent(TestComponent, {set: {template: template}});
       let fixture = TestBed.createComponent(TestComponent);

       fixture.componentInstance.currentComponent = null;
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('');
     }));

  it('should insert content specified by a component', waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.currentComponent = InjectedComponent;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('foo');
     }));

  it('should emit a ComponentRef once a component was created', waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.cmpRef = undefined;
       fixture.componentInstance.currentComponent = InjectedComponent;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('foo');
       expect(fixture.componentInstance.cmpRef).toBeInstanceOf(ComponentRef);
       expect(fixture.componentInstance.cmpRef!.instance).toBeInstanceOf(InjectedComponent);
     }));


  it('should clear view if component becomes null', waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.currentComponent = InjectedComponent;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('foo');

       fixture.componentInstance.currentComponent = null;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');
     }));


  it('should swap content if component changes', waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.currentComponent = InjectedComponent;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('foo');

       fixture.componentInstance.currentComponent = InjectedComponentAgain;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('bar');
     }));

  it('should use the injector, if one supplied', waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       const uniqueValue = {};
       fixture.componentInstance.currentComponent = InjectedComponent;
       fixture.componentInstance.injector = Injector.create({
         providers: [{provide: TEST_TOKEN, useValue: uniqueValue}],
         parent: fixture.componentRef.injector,
       });

       fixture.detectChanges();
       let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef!;
       expect(cmpRef).toBeInstanceOf(ComponentRef);
       expect(cmpRef.instance).toBeInstanceOf(InjectedComponent);
       expect(cmpRef.instance.testToken).toBe(uniqueValue);
     }));


  it('should resolve with an injector', waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       // We are accessing a ViewChild (ngComponentOutlet) before change detection has run
       fixture.componentInstance.cmpRef = undefined;
       fixture.componentInstance.currentComponent = InjectedComponent;
       fixture.detectChanges();
       let cmpRef: ComponentRef<InjectedComponent> = fixture.componentInstance.cmpRef!;
       expect(cmpRef).toBeInstanceOf(ComponentRef);
       expect(cmpRef.instance).toBeInstanceOf(InjectedComponent);
       expect(cmpRef.instance.testToken).toBeNull();
     }));

  it('should render projectable nodes, if supplied', waitForAsync(() => {
       const template = `<ng-template>projected foo</ng-template>${TEST_CMP_TEMPLATE}`;
       TestBed.overrideComponent(TestComponent, {set: {template: template}})
           .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]});

       TestBed.overrideComponent(InjectedComponent, {set: {template: `<ng-content></ng-content>`}})
           .configureTestingModule({schemas: [NO_ERRORS_SCHEMA]});

       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.currentComponent = InjectedComponent;
       fixture.componentInstance.projectables =
           [fixture.componentInstance.vcRef
                .createEmbeddedView(fixture.componentInstance.tplRefs.first)
                .rootNodes];


       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('projected foo');
     }));

  it('should resolve components from other modules, if supplied as an NgModuleFactory',
     waitForAsync(() => {
       const compiler = TestBed.inject(Compiler);
       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.ngModuleFactory = compiler.compileModuleSync(TestModule2);
       fixture.componentInstance.currentComponent = Module2InjectedComponent;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('baz');
     }));

  it('should resolve components from other modules, if supplied as an NgModule class reference',
     waitForAsync(() => {
       let fixture = TestBed.createComponent(TestComponent);

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('');

       fixture.componentInstance.ngModule = TestModule2;
       fixture.componentInstance.currentComponent = Module2InjectedComponent;

       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('baz');
     }));


  it('should clean up moduleRef, if supplied as an NgModuleFactory', waitForAsync(() => {
       const compiler = TestBed.inject(Compiler);
       const fixture = TestBed.createComponent(TestComponent);
       fixture.componentInstance.ngModuleFactory = compiler.compileModuleSync(TestModule2);
       fixture.componentInstance.currentComponent = Module2InjectedComponent;
       fixture.detectChanges();

       const moduleRef = fixture.componentInstance.ngComponentOutlet?.['_moduleRef']!;
       spyOn(moduleRef, 'destroy').and.callThrough();

       expect(moduleRef.destroy).not.toHaveBeenCalled();
       fixture.destroy();
       expect(moduleRef.destroy).toHaveBeenCalled();
     }));

  it('should clean up moduleRef, if supplied as an NgModule class reference', waitForAsync(() => {
       const fixture = TestBed.createComponent(TestComponent);
       fixture.componentInstance.ngModule = TestModule2;
       fixture.componentInstance.currentComponent = Module2InjectedComponent;
       fixture.detectChanges();

       const moduleRef = fixture.componentInstance.ngComponentOutlet?.['_moduleRef']!;
       spyOn(moduleRef, 'destroy').and.callThrough();

       expect(moduleRef.destroy).not.toHaveBeenCalled();
       fixture.destroy();
       expect(moduleRef.destroy).toHaveBeenCalled();
     }));

  it('should not re-create moduleRef when it didn\'t actually change', waitForAsync(() => {
       const compiler = TestBed.inject(Compiler);
       const fixture = TestBed.createComponent(TestComponent);

       fixture.componentInstance.ngModuleFactory = compiler.compileModuleSync(TestModule2);
       fixture.componentInstance.currentComponent = Module2InjectedComponent;
       fixture.detectChanges();
       expect(fixture.nativeElement).toHaveText('baz');
       const moduleRef = fixture.componentInstance.ngComponentOutlet?.['_moduleRef'];

       fixture.componentInstance.currentComponent = Module2InjectedComponent2;
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('baz2');
       expect(moduleRef).toBe(fixture.componentInstance.ngComponentOutlet?.['_moduleRef']);
     }));

  it('should re-create moduleRef when changed (NgModuleFactory)', waitForAsync(() => {
       const compiler = TestBed.inject(Compiler);
       const fixture = TestBed.createComponent(TestComponent);
       fixture.componentInstance.ngModuleFactory = compiler.compileModuleSync(TestModule2);
       fixture.componentInstance.currentComponent = Module2InjectedComponent;
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('baz');

       fixture.componentInstance.ngModuleFactory = compiler.compileModuleSync(TestModule3);
       fixture.componentInstance.currentComponent = Module3InjectedComponent;
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('bat');
     }));

  it('should re-create moduleRef when changed (NgModule class reference)', waitForAsync(() => {
       const fixture = TestBed.createComponent(TestComponent);
       fixture.componentInstance.ngModule = TestModule2;
       fixture.componentInstance.currentComponent = Module2InjectedComponent;
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('baz');

       fixture.componentInstance.ngModule = TestModule3;
       fixture.componentInstance.currentComponent = Module3InjectedComponent;
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('bat');
     }));

  it('should override providers from parent component using custom injector', waitForAsync(() => {
       TestBed.overrideComponent(InjectedComponent, {set: {template: 'Value: {{testToken}}'}});
       TestBed.overrideComponent(
           TestComponent, {set: {providers: [{provide: TEST_TOKEN, useValue: 'parent'}]}});
       const fixture = TestBed.createComponent(TestComponent);
       fixture.componentInstance.currentComponent = InjectedComponent;
       fixture.componentInstance.injector = Injector.create({
         providers: [{provide: TEST_TOKEN, useValue: 'child'}],
         parent: fixture.componentInstance.vcRef.injector
       });
       fixture.detectChanges();

       expect(fixture.nativeElement).toHaveText('Value: child');
     }));

  it('should be available as a standalone directive', () => {
    @Component({
      standalone: true,
      template: 'Hello World',
    })
    class HelloWorldComp {
    }

    @Component({
      selector: 'test-component',
      imports: [NgComponentOutlet],
      template: `
        <ng-container *ngComponentOutlet="component"></ng-container>
      `,
      standalone: true,
    })
    class TestComponent {
      component = HelloWorldComp;
    }

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

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

describe('inputs', () => {
  it('should be binding the component input', () => {
    const fixture = TestBed.createComponent(TestInputsComponent);
    fixture.componentInstance.currentComponent = ComponentWithInputs;
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');

    fixture.componentInstance.inputs = {};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');

    fixture.componentInstance.inputs = {foo: 'Foo', bar: 'Bar'};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: Bar, baz: Baz');

    fixture.componentInstance.inputs = {foo: 'Foo'};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: , baz: Baz');

    fixture.componentInstance.inputs = {foo: 'Foo', baz: null};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: , baz: ');

    fixture.componentInstance.inputs = undefined;
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: ');
  });

  it('should be binding the component input (with mutable inputs)', () => {
    const fixture = TestBed.createComponent(TestInputsComponent);
    fixture.componentInstance.currentComponent = ComponentWithInputs;
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: , bar: , baz: Baz');

    fixture.componentInstance.inputs = {foo: 'Hello', bar: 'World'};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: Hello, bar: World, baz: Baz');

    fixture.componentInstance.inputs['bar'] = 'Angular';
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: Hello, bar: Angular, baz: Baz');

    delete fixture.componentInstance.inputs['foo'];
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: , bar: Angular, baz: Baz');
  });

  it('should be binding the component input (with component type change)', () => {
    const fixture = TestBed.createComponent(TestInputsComponent);
    fixture.componentInstance.currentComponent = ComponentWithInputs;
    fixture.componentInstance.inputs = {foo: 'Foo', bar: 'Bar'};
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('foo: Foo, bar: Bar, baz: Baz');

    fixture.componentInstance.currentComponent = AnotherComponentWithInputs;
    fixture.detectChanges();

    expect(fixture.nativeElement.textContent).toBe('[ANOTHER] foo: Foo, bar: Bar, baz: Baz');
  });
});

const TEST_TOKEN = new InjectionToken('TestToken');
@Component({selector: 'injected-component', template: 'foo'})
class InjectedComponent {
  constructor(@Optional() @Inject(TEST_TOKEN) public testToken: any) {}
}

@Component({selector: 'injected-component-again', template: 'bar'})
class InjectedComponentAgain {
}

const TEST_CMP_TEMPLATE = `<ng-template *ngComponentOutlet="
      currentComponent;
      injector: injector;
      inputs: inputs;
      content: projectables;
      ngModule: ngModule;
      ngModuleFactory: ngModuleFactory;
    "></ng-template>`;
@Component({selector: 'test-cmp', template: TEST_CMP_TEMPLATE})
class TestComponent {
  currentComponent: Type<unknown>|null = null;
  injector?: Injector;
  inputs?: Record<string, unknown>;
  projectables?: any[][];
  ngModule?: Type<unknown>;
  ngModuleFactory?: NgModuleFactory<unknown>;

  get cmpRef(): ComponentRef<any>|undefined {
    return this.ngComponentOutlet?.['_componentRef'];
  }
  set cmpRef(value: ComponentRef<any>|undefined) {
    if (this.ngComponentOutlet) {
      this.ngComponentOutlet['_componentRef'] = value;
    }
  }

  @ViewChildren(TemplateRef) tplRefs: QueryList<TemplateRef<any>> = new QueryList();
  @ViewChild(NgComponentOutlet, {static: true}) ngComponentOutlet?: NgComponentOutlet;

  constructor(public vcRef: ViewContainerRef) {}
}

@NgModule({
  imports: [CommonModule],
  declarations: [TestComponent, InjectedComponent, InjectedComponentAgain],
  exports: [TestComponent, InjectedComponent, InjectedComponentAgain]
})
export class TestModule {
}

@Component({selector: 'module-2-injected-component', template: 'baz'})
class Module2InjectedComponent {
}

@Component({selector: 'module-2-injected-component-2', template: 'baz2'})
class Module2InjectedComponent2 {
}

@NgModule({
  imports: [CommonModule],
  declarations: [Module2InjectedComponent, Module2InjectedComponent2],
  exports: [Module2InjectedComponent, Module2InjectedComponent2]
})
export class TestModule2 {
}

@Component({selector: 'module-3-injected-component', template: 'bat'})
class Module3InjectedComponent {
}

@NgModule({
  imports: [CommonModule],
  declarations: [Module3InjectedComponent],
  exports: [Module3InjectedComponent]
})
export class TestModule3 {
}

@Component({
  selector: 'cmp-with-inputs',
  standalone: true,
  template: `foo: {{ foo }}, bar: {{ bar }}, baz: {{ baz }}`
})
class ComponentWithInputs {
  @Input() foo?: any;
  @Input() bar?: any;
  @Input() baz?: any = 'Baz';
}

@Component({
  selector: 'another-cmp-with-inputs',
  standalone: true,
  template: `[ANOTHER] foo: {{ foo }}, bar: {{ bar }}, baz: {{ baz }}`
})
class AnotherComponentWithInputs {
  @Input() foo?: any;
  @Input() bar?: any;
  @Input() baz?: any = 'Baz';
}

@Component({
  selector: 'test-cmp',
  standalone: true,
  imports: [NgComponentOutlet],
  template: `<ng-template *ngComponentOutlet="currentComponent; inputs: inputs;"></ng-template>`
})
class TestInputsComponent {
  currentComponent: Type<unknown>|null = null;
  inputs?: Record<string, unknown>;
}