如何在 Angular2 中测试嵌入（ng-content）？答案

【问题标题】：How to test transclusion (ng-content) in Angular2?如何在 Angular2 中测试嵌入（ng-content）？
【发布时间】：2017-07-15 09:11:32
【问题描述】：

我有一个组件要测试如下：

import {Component, OnInit, Input} from "@angular/core";

@Component({
    selector: 'column',
    template: '<ng-content></ng-content>',
    host: {
        '[class]': '"col col-" + width'
    }
})
export class ColumnComponent implements OnInit {

    @Input() public width: number;

    ngOnInit() {
        if (!this.width || this.width > 12 || this.width < 1) {
            this.width = 12;
        }
    }

}

我找不到测试<ng-content> 的优雅方法。检查了文档，但找不到好方法。

我认为拥有一个测试包装器组件会有所帮助。但是 comp 不是使用的 TestContainerComponent 所以测试失败

  @Component({
        selector: 'test-container',
        template: `<column width="12">Hello</column>`
    })
    export class TestContainerComponent {
    }

    fdescribe(`Column`, () => {
        let comp: ColumnComponent;
        let fixture: ComponentFixture<ColumnComponent>;

        let testContainerComp: TestContainerComponent;
        let testContainerFixture: ComponentFixture<TestContainerComponent>;
        let testContainerDe: DebugElement;
        let testContainerEl: HTMLElement;

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

        beforeEach(() => {
            fixture = TestBed.createComponent(ColumnComponent);
            testContainerFixture = TestBed.createComponent(TestContainerComponent);
            comp = fixture.componentInstance;

            testContainerComp = testContainerFixture.componentInstance;
            testContainerDe = testContainerFixture.debugElement.query(By.css('column'));
            testContainerEl = testContainerDe.nativeElement.;

        });


        it(`Should have a width class as 'col-...' if width attribute set`, () => {
            comp.width = 6;
            testContainerFixture.detectChanges();
         expect(testContainerEl.classList.contains(`col-${comp.width}`)).toBeTruthy();
        });

    });

我想我需要一种从TestContainerComponent 获取ColumnComponent 组件的方法。

【问题讨论】：

使用ViewChild 持有对ColumnComponent 的引用怎么样？

标签： angular unit-testing testing angular2-testing

【解决方案1】：

我认为你可以在不使用包装器的情况下做到这一点，因为有办法通过调用来获取宿主元素：

fixture.elementRef.nativeElement;

所以这里是可能的测试：

fdescribe(`Column`, () => {
  let comp: ColumnComponent;
  let fixture: ComponentFixture<ColumnComponent>;

  let testContainerDe: DebugElement;
  let testContainerEl: HTMLElement;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(ColumnComponent);
    comp = fixture.componentInstance;
    testContainerEl = fixture.elementRef.nativeElement;
  });

  it(`Should have a width class as 'col-...' if width attribute set`, () => {
    comp.width = 6;
    fixture.detectChanges();
    expect(testContainerEl.classList.contains(`col-${comp.width}`)).toBeTruthy();
  });
});

Plunker Example

【讨论】：

我不知道fixture 有elementRef。谢谢:)