Karma/Jasmine：无法使用 detectChanges() 检测到 @Input 属性的更改

Question

我正在尝试更改组件的@Input 属性并基于新属性，尝试检查按钮是否启用/禁用。参考代码here

我正在遵循此链接中描述的确切程序，但无法正常工作。我正在使用 detectChanges() 更改值，但它没有按预期给出结果。

HTML：

<form>
    <label>Email</label>
    <input type="email"
           #email>
    <label>Password</label>
    <input type="password"
           #password>
    <button type="button" 
            (click)="login(email.value, password.value)"
            [disabled]="!enabled">Login
    </button>
  </form>

组件：

@Input() enabled = true;

规格：

describe('testing app component', () => {
  let component;
  let service;
  let fixture;
  let element;
  let atag;
  let loginEl;
  let passwordEl;
  let submitEl;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers: [
        AppService
      ]
    }).compileComponents();

    // create component fixture
    fixture = TestBed.createComponent(AppComponent);

    // get component's instance for testing
    component = fixture.debugElement.componentInstance;

    // getting service instance from tets bed
    service = TestBed.get(AppService);

    // getting button element
    fixture.detectChanges();
    element = fixture.debugElement.query(By.css('button'));
    atag = fixture.debugElement.query(By.css('a'));

    submitEl = fixture.debugElement.query(By.css('button'));
    loginEl = fixture.debugElement.query(By.css('input[type=email]'));
    passwordEl = fixture.debugElement.query(By.css('input[type=password]'));
  });

  it('testing input property: @Input enabled', () => {
    expect(component.enabled).toBe(true);
    expect(submitEl.nativeElement.disabled).toBeFalsy();
    component.enabled = false;
    fixture.detectChanges();
    expect(submitEl.nativeElement.disabled).toBeTruthy();
  });
});

但是这个规范会抛出一个错误：Error: Expected false to be truthy.

Answer 1

编辑：

您创建组件的方式也不正确。应该是

component = fixture.componentInstance;

DEMO

原创

您应该在视图更新后再次获取您的dom 元素（即在调用detectChanges() 之后）。如果您不这样做，那么您的测试将根据更新前存在的视图进行验证。

submitEl = fixture.debugElement.query(By.css('button'));

- 测试规范

it('testing input property: @Input enabled', () => {
    expect(component.enabled).toBe(true);
    expect(submitEl.nativeElement.disabled).toBeFalsy();
    component.enabled = false;
    fixture.detectChanges();

     // fetch dom element again
    submitEl = fixture.debugElement.query(By.css('button'));
    expect(submitEl.nativeElement.disabled).toBeTruthy();
});