Jasmine 没有检测到输入的变化，可能是错误的测试错误的策略

Question

我正在尝试单元测试（Karma/Jasmine Angular 9.15）当输入被填充（非空或空）时，选择的禁用属性从 true 变为 false。 Jasmine 似乎没有检测到 de 变化，因为当我模拟输入的值变化时，我没有通过处理布尔值“禁用”的函数。

所以我想知道为什么它没有检测到更改，并且由于我没有找到有效的解决方案，所以我质疑我的测试策略：我做对了吗？

代码如下：

filter.spec.ts

  fdescribe('FilterComponent', () => {
    let component: FilterComponent;
    let fixture: ComponentFixture<FilterComponent>;

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

    beforeEach(() => {
      fixture = TestBed.createComponent(FilterComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });



   it('should able the select when input is filled', () => {
    let inputFilter = fixture.debugElement.nativeElement.querySelector('#my-filter');
    inputFilter.value = "testing";
    inputFilter.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(fix=>{
      expect(fixture.debugElement.nativeElement.querySelector('#my- 
      select').disabled).toBeFalse();
    });
  });

filter.component.html

    <!-- Filter -->
    <div class="flex-container-h flex-align-center flex-nowrap mlm">
        <label class="mt-label txtc-15 mrs" for="my-filter">Contract number</label>
        <div class="flex-item-fluid">
            <input [(ngModel)]="contractFilter" id="my-filter" type="text"
                class="form-control">
        </div>
    </div>

    <!-- Filtre select-->
    <div class="flex-container-h flex-align-center flex-nowrap mlm">
        <label class="mt-label txtc-15 mrs" for="my-select">Statut</label>
        <div class="flex-item-fluid">
            <select id="my-select" name="statuts" [disabled]="isSelectDisabled()">
                <option value="" selected disabled hidden>Select an option</option>
                <option *ngFor="let status of statusesList" [value]="status.code">{{status.libelle}}</option>
            </select>
        </div>
    </div>

filter.component.ts

   public isSelectDisabled(): boolean {
    return (!this.contractFilter || this.contractFilter === "");
  }

感谢阅读

Answer 1

像这样从HTML 执行此操作可能会很棘手，因为可能有asynchronous 任务更新值，您可能需要另一个fixture.whenStable()。我要做的是直接更改contractFilter，因为Angular 团队已经测试了ngModel。

import { By } from '@angular/platform-browser';
.....
it('should able the select when input is filled', () => {
    component.contractFilter = 'testing';
    fixture.detectChanges();
    // I like to query the DOM like so
    const disableSelect = fixture.debugElement.query(By.css('#my-select[disabled]'));
    const enableSelect = fixture.debugElement.query(By.css('#my-select'));
    expect(disableSelect).toBeFalsy();
    expect(enableSelect).toBeTruthy();
 });

我们在 DOM 中查询带有 disabled 属性的 #my-select 并期望它是虚假的，我们在没有 disabled 属性的情况下查询 #my-select 的 DOM 并期望它是真实的。