Angular 禁用按钮的单元测试

我正在尝试为已禁用分配给布尔值的按钮编写单元测试

html看起来像：

<button *ngIf="!data" id="createBtn" mat-button color="primary" (click)="submitNewCase()" [disabled]="disableCreate">{{ 'ACTIONS.create' | translate }}</button>

我的第二个单元测试成功了，而我的第一个单元测试没有成功。我得到的是一个“预期中的虚假是真实的”。我找不到失败的地方和原因

---

任何帮助都将不胜感激。

因此，在我的头撞在桌子上稍长一点后，看起来我选择的按钮不正确。使用querySelector for button使我的测试成功。另外，对于@Fateh Mohamed的注释设置组件，需要将.data设置为null，因为按钮上的数据有ngIf

beforeEach(() => {
 fixture = TestBed.createComponent(CaseComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
 submitEl = fixture.debugElement
});

it('DisableCreate set to true disables the submit button', () => {
 component.disableCreate = true;
 component.data = null;
 fixture.detectChanges();
 expect(submitEl.nativeElement.querySelector('button').disabled).toBeTruthy();
});

it('DisableCreate set to false enables the submit button', () => {
 component.disableCreate = false;
 component.data = null;
 fixture.detectChanges();
 expect(submitEl.nativeElement.querySelector('button').disabled).toBeFalsy();
});

找到了另一条路

在HTML中，将id添加到按钮，即

<button id="myButtonId" [disabled]="someCondition">/<button>

---

关于数据，我看到*ngIf=“！data”您必须将数据设置为false，可能是button元素未被创建。我通过在fixture.detectChanges（）之前添加“component.data=null”进行了尝试，但第一次测试仍然会出现相同的错误。您可以显示configureTestingModule部分吗，因为我对[disabled]有问题Karma tests=>中的属性无法绑定到“disabled”，因为它不是“th”@Deunz的已知属性，因为您使用的是th元素，所以最有可能准确。这是针对一个按钮元素的，该元素本机支持禁用的属性。=>对于输入，我只是缺少MatSortModule，导入它解决了以下问题：）MattTableModule不够，您必须导入SortModule。必须在Beforeach（）内部定义

submitEl=fixture.debugElement

，或者在其内部定义它是否安全（）？如果没有，那么有什么区别。我理解在beforeach（）中定义submitEl意味着我不必在使用submitEl的每个it（）中定义submitEl。

<button id="myButtonId" [disabled]="someCondition">/<button>

const addButton = fixture.debugElement.nativeElement.querySelector('#myButtonId');
expect(addButton.attributes.getNamedItem('ng-reflect-disabled').value).toBeTruthy();