DOM Jasmine 未更新

Question

我有一个简单的组件，它带有一个按钮，可以打开和关闭段落的可见性。该按钮可在应用程序中正确切换可见性，但在我的 Jasmine 单元测试中无法正确切换（内容无法正确切换）。如果我手动单击测试浏览器中的切换按钮，它也无法正常工作。

有趣的是，我还有一个通过测试，用于测试将我的 hideContent 设置为 false 的切换方法。但是，即使 hideContent: false，我的内容也没有显示。

我的代码的相关部分：

警报按钮-component.ts:

export class AlertButtonComponent implements OnInit {

  hideContent = true;

  constructor() { }

  ngOnInit(): void {
  }

  toggle() {
    this.hideContent = !this.hideContent;
  }
}

警报-button.component.html:

<div class="content">
    <p id="content" *ngIf="hideContent">My Content</p>
    <button (click) = "toggle()" class="button">Toggle Visibility</button>
</div>

警报-button.component.spec.ts:

describe('AlertButtonComponent', () => {
  let component: AlertButtonComponent;
  let fixture: ComponentFixture<AlertButtonComponent>;
  let de: DebugElement;

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

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

 // Interestingly enough, this test works, but the content does not show up either
 it('should toggle', () => {
    expect(component.hideContent).toBeTruthy();
    component.toggle();
    expect(component.hideContent).toBeFalsy();
  });

  // returns TypeError: Cannot read property 'nativeElement' of null
  it('should show content after clicking button', () => {
    spyOn(component, 'toggle');
    const el = de.nativeElement;
    el.querySelector('button').dispatchEvent(new Event('click'));
    expect(component.toggle).toHaveBeenCalled();
    expect(de.query(By.css('#content')).nativeElement).toBeTruthy();
  });
});

如有任何帮助，我们将不胜感激！

Answer 1

我已经在评论中解释过了，看来你只需要一行就可以完成两个测试。

// Interestingly enough, this test works, but the content does not show up either
 it('should toggle', () => {
    expect(component.hideContent).toBeTruthy();
    component.toggle();
    fixture.detectChanges(); // to show the content, you have to call fixture.detectChanges() 
// for change detection to kick in to see the content. This is optional, like you said the test 
// already passses.
    expect(component.hideContent).toBeFalsy();
  });

  // returns TypeError: Cannot read property 'nativeElement' of null
  it('should show content after clicking button', () => {
    spyOn(component, 'toggle');
    const el = de.nativeElement;
    el.querySelector('button').dispatchEvent(new Event('click'));
    expect(component.toggle).toHaveBeenCalled();
    fixture.detectChanges(); // again, call fixture.detectChanges for reason stated above.
    // this time it is not optional
    expect(de.query(By.css('#content')).nativeElement).toBeTruthy();
  });

编辑

为了调试您的测试，我假设浏览器在您运行 npm run test.

时打开

当浏览器打开时，快速按 F12（或检查 dom），它应该会触发调试器点。按播放键释放调试器我认为甚至还有一个调试按钮，具体取决于您使用的 Karma 版本运行.

  it('should show content after clicking button', () => {
    spyOn(component, 'toggle');
    const el = de.nativeElement;
    el.querySelector('button').dispatchEvent(new Event('click'));
    expect(component.toggle).toHaveBeenCalled();
    debugger; // you shouldn't see the p tag
    fixture.detectChanges(); // again, call fixture.detectChanges for reason stated above.
    // this time it is not optional
    expect(de.query(By.css('#content')).nativeElement).toBeTruthy();
    debugger; // you should see the p tag, maybe even go through the DOM tree to see it
  });

另一个注意事项是第一个 beforeEach 中的第一个 fixture.detectChanges 调用 ngOnInit 因此需要它。后面的其他fixture.detectChanges是会根据状态的变化改变视图的。

DOM Jasmine 未更新

DOM not updating in Jasmine

jasmine

angular