当我在 jasmine 单元测试中更改其模型时，mat-checkbox 不会更新选中状态

Question

我为 material 复选框编写了单元测试。我使用 [(ngModule)] 将复选框绑定到模型。第一个测试用例没问题，单击复选框将更新模型，但是当我在下一个单元测试中更改模型时，它不会发生。也就是说，当我设置enabled为true时，checked状态并没有变为true！我怎样才能通过最后的单元测试？代码上传到github

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html'
})
export class CheckboxComponent implements OnInit {
  enabled = false;

  constructor() { }

  ngOnInit(): void {
  }

}


describe('CheckboxComponent', () => {
  let component: CheckboxComponent;
  let fixture: ComponentFixture<CheckboxComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CheckboxComponent ],
      imports: [
        MatCheckboxModule,
        BrowserAnimationsModule,
        BrowserModule,
        FormsModule
      ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('click checkbox changes enabled', () => {
    const checkBox = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
    expect(component.enabled).toBeFalse();
    checkBox.click();
    expect(component.enabled).toBeTruthy();
  });

  it('changing enabled will alter checkbox state', (done) => {
    const checkBox = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
    component.enabled = true;
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(checkBox.checked).toBeTrue();
      done();
    });
  });
});

<mat-checkbox [(ngModel)]="enabled">Check me!</mat-checkbox>

Answer 1

您很可能需要对 DOM/HTML 的新引用。 checkbox指的是fixture.detectChanges()之前的旧DOM。

试试这个：

it('changing enabled will alter checkbox state', (done) => {
    const checkBox = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
    component.enabled = true;
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      const newCheckbox = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; // grab new reference
      expect(newCheckbox.checked).toBeTrue();
      done();
    });
  });

Answer 2

我通过在 whenStable() 中添加另一个 detectChanges() 来解决它

it('changing enabled will alter checkbox state', (done) => {
const checkBox = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
component.enabled = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
  fixture.detectChanges(); // <--- this line
  expect(checkBox.checked).toBeTrue();
  done();
});
});

当我在 jasmine 单元测试中更改其模型时，mat-checkbox 不会更新选中状态

mat-checkbox does not update checked state when I change its model in jasmine unit tests

unit-testing

jasmine

angular-material

angular