Как сделать модульный тест углового компонента, который имеет TemplateRef в качестве входных данных?

Question

Я пытаюсь написать модульные тесты для компонента Angular, который может скрыть / показать некоторое содержимое, переданное в качестве входных данных для самого компонента.Ожидаемые входные данные определены как TemplateRef.

my-component.component.ts

@Component({
    selector: "my-component",
    templateUrl: "./my-component.component.html",
    styleUrls: ["./my-component.component.scss"],
    exportAs: "mycomponent"
})
export class MyComponent {
    private _expanded = false;

    @Input()
    set expanded(value: boolean) {
        this._expanded = value;
    }

    @Input()
    body: TemplateRef<any>;
    @Input()
    handler: TemplateRef<any>;

    constructor() {}

    toggleView() {
        this.expanded = !this._expanded;
    }
}

my-component.component.html

<div class="wrap">
    <!-- Header -->
    <main #header>
        <header (click)="toggleAccordion()">
            <div class="handler">
                <ng-container [ngTemplateOutlet]="handler">
                </ng-container>
            </div>
            <i class="icon icon-expand" [ngClass]="{ 'icon-expand': _expanded, 'icon-collapse': !_expanded }"></i>
        </header>
    </main>
    <!-- Body -->
    <div class="body" *ngIf="_expanded">
        <ng-container [ngTemplateOutlet]="body"></ng-container>
    </div>
</div>

Что я хочу проверить, является ли содержимое, пропущенное через входное «тело», видимым или нет, но я не могу понять, как создать экземпляр в «жасмине» «my-component» с TemplateRefinput.

Документация Angular объясняет, как передать входные данные в скрипт модульного теста, но так как я не могу создать экземпляр объекта TemplateRef, потому что TemplateRef является абстрактным классом, я незнаете, как с этим справиться.

my-component.component.spec.ts

...

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        component.body = /* What should I put here? */;
        fixture.detectChanges();
    });

....

Answer 1

Я постараюсь дать вам демонстрационный код, который вы можете расширить далее

По сути, вам нужно проверить это по-другому.Поскольку вы не можете создать свой компонент без использования TemplateRef другого компонента, вам необходимо создать компонент-оболочку и протестировать его, написав контрольный пример для WrapperComponent

@Component({
  template: `
    <ng-template #div1>Something here</ng-template>
    <ng-template #div2>Many things here</ng-template>
    <my-component [expanded]="expandedVal" [body]="div1" [handler]="div2"> </my-component>
  `,
})
class WrapperComponent {
     @ViewChild(MyComponent) appComponentRef: MyComponent;
     public expandedVal = true;
}

describe('MyComponent', () => {
  let app: MyComponent;
  let fixture: ComponentFixture<WrapperComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [WrapperComponent, MyComponent],
    }).compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(WrapperComponent);
    const wrapperComponent = fixture.debugElement.componentInstance;
    app = wrapperComponent.appComponentRef; // this is where you get "MyComponent" component for testing
    fixture.detectChanges();
  });
  it('should create the app', async(() => {
    expect(app).toBeDefined();
  }));
});