Angular 指令 ViewContainerRef 测试模拟

Angular中使用ViewContainerRef进行指令测试模拟

typescript
import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';
@Directive({
  selector: '[appDynamicComponent]'
})
export class DynamicComponentDirective {
  @Input() set appDynamicComponent(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
  constructor(
    private templateRef: TemplateRef,
    private viewContainer: ViewContainerRef
  ) { }
}

typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { DynamicComponentDirective } from './dynamic-component.directive';
@Component({
  template: `
    
Dynamic Content
  `
})
class TestComponent {
  condition = false;
}
describe('DynamicComponentDirective', () => {
  let fixture: ComponentFixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent, DynamicComponentDirective]
    });
    fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
  });
  it('should not display dynamic content when condition is false', () => {
    const dynamicContent = fixture.nativeElement.querySelector('div');
    expect(dynamicContent).toBeNull();
  });
  it('should display dynamic content when condition is true', () => {
    fixture.componentInstance.condition = true;
    fixture.detectChanges();
    const dynamicContent = fixture.nativeElement.querySelector('div');
    expect(dynamicContent.textContent).toContain('Dynamic Content');
  });
});