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

Question

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

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

这是代码：

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();
 });

我们用 disabled 属性查询 DOM 的 #my-select 并期望它是假的，我们查询 DOM 的 #my-select 没有 disabled 属性并期望它是真实的。

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

Jasmine not detecting changes on input, maybe bad testing bad strategy

testing

jasmine

angular