Question

我有一个简单的角度组件，我根据条件在html标签中添加一个类：

<td><i ngClass="{{ iconType }}" aria-hidden="true" ></td>

它工作正常，我在浏览器中渲染页面时可以看到预期的图标。但是，当我尝试编写测试时，我不能没有任何课程。这是我的测试：

describe('TableRowComponent', () => {
let tableRowFixture: ComponentFixture<TableRowComponent>;
let component: TableRowComponent;

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            FlipperModule.forRoot({
                provide: 'flippers',
                useValue: []
            }),
            MomentModule
        ],
        declarations: [
            TableRowComponent
        ],
        schemas: [
            CUSTOM_ELEMENTS_SCHEMA
        ],
        providers: [
            {
                provide: FlipperService,
                useValue: {
                    isOn: () => true,
                    isOff: () => false
                }
            }
        ]
    });

    tableRowFixture = TestBed.createComponent(TableRowComponent);
    component = tableRowFixture.componentInstance;
    const twoDays = 172800000;
    component.deployable = {
        'name': 'ems-event-segmentation-staging',
        'lastDeployDate': '2017-06-02T15:05:09Z',
        'type': 'service',
        'syncDelay': twoDays,
        'commitLag': 2
    };
});

    it('should display the expected icon based on the iconType property', () => {
        const icon: DebugElement = tableRowFixture.debugElement.query(By.css('i'));
        console.log(icon.nativeElement);

});

}）;

我的日志输出是：

LOG: <i _ngcontent-c30="" aria-hidden="true"></i>

为什么这里的类属性不可见？

Answer 1

由于类是ngClass指令接受表达式，因此在组件编译后它将不可用。

  tableRowFixture.detectChanges();

应该在对debug元素执行查询之前执行。

测试角度4组件

1 个答案: