Angular 标签 *ngIf 隐藏 karma debugelement 查询的元素，即使布尔值为 true

Question

我想测试一个组件，我现在已将 HTML 简化为：

<div>
  <div *ngIf="getTrue()">
    <h4>Teststuff</h4>
  </div>
</div>

在我的组件中，我有方法 getTrue():

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'testforkarma',
    templateUrl: './testforkarma.component.html',
})

export class TestForKarma implements OnInit {

    constructor(
    ) { }

    public getTrue(): boolean {
        return true;
    }

    public ngOnInit(): void {
        console.info('ngOnInit');
    }

}

那么我的测试代码是：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CommonModule } from '@angular/common';
import { BrowserModule, By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { TestForKarma } from './testforkarma.component';


describe('TestForKarmaComponent', () => {

    beforeEach(async () => {

        await TestBed.configureTestingModule({
            declarations: [
            ],
            imports: [
                CommonModule,
                BrowserModule
            ],
            providers: [
            ]
        })
            .compileComponents();
    });


    it('find something', () => {

        let component: TestForKarma;
        let fixture: ComponentFixture<TestForKarma>;
        let el: DebugElement;
        let queryResult: DebugElement;


        fixture = TestBed.createComponent(TestForKarma);
        component = fixture.componentInstance;
        el = fixture.debugElement;
        fixture.detectChanges();

        fixture.whenStable().then(
            () => {
                queryResult = el.query(By.css('h4'));
                console.info('done query');
                expect(queryResult).not.toBeNull();
            }
        );

    });
});

当我调试测试查询结果为空。 当我从 html 中删除 *ngIf="getTrue()" 时，再次调试测试，queryResult 已填充。

我在控制台中收到此消息：

NG0303：无法绑定到“ngIf”，因为它不是“div”的已知属性（在“TestForKarma”组件模板中使用）。 如果“ngIf”是 Angular 控制流指令，请确保“NgIf”指令或“CommonModule”是声明此组件的 @NgModule 的一部分。

但我认为我包括了 CommonModule..？

我完全迷失了，现在花了好几个小时看着代码。我做错了什么？

Answer 1

在尝试了一些事情之后，我很抱歉也错误地更新了问题中的代码（当然现在它是正确的或实际上是错误的）我发现我做错了什么：没有在声明中包含组件！

declarations: [
    TestForKarmaComponent
]

对于有同样问题的人来说，这是完整的工作代码：

html:

<div>
  <div *ngIf="getTrue()">
    <h4>Teststuff</h4>
  </div>
</div>

组件的打字稿：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'testforkarma',
    templateUrl: './testforkarma.component.html',
})

export class TestForKarmaComponent implements OnInit {

    constructor(
    ) {
        console.info('constructor');
    }

    public getTrue(): boolean {
        return true;
    }

    public ngOnInit(): void {
        console.info('ngOnInit');
    }

}

现在正在进行的业力测试：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { TestForKarmaComponent } from './testforkarma.component';


describe('TestForKarmaComponent', () => {

    beforeEach(async () => {

        await TestBed.configureTestingModule({
            declarations: [
                TestForKarmaComponent
            ],
            imports: [
            ],
            providers: [
            ]
        })
            .compileComponents();
    });


    it('test to find something in the html', () => {

        const fixture = TestBed.createComponent(TestForKarmaComponent);
        const component = fixture.componentInstance;
        const el = fixture.debugElement;
        let queryResult: DebugElement;

        fixture.detectChanges();

        fixture.whenStable().then(
            () => {
                queryResult = el.query(By.css('h4'));
                console.info('done query');
                expect(queryResult).not.toBeNull();
            }
        );

    });
});