执行ngx-微调单元测试

Question

我在我的组件上使用ngx-spinner在一些远程调用进程的页面上显示一个加载指示器。在我的组件上，我有以下ngx微调器的代码：

<ngx-spinner [fullScreen]="true" type="ball-clip-rotate" size="medium" bdColor="rgba(51,51,51,0.1)" color="grey">
</ngx-spinner>

在init上的组件中，当页面加载时，我显示的微调器如下所示：“

  constructor(
    private spinner: NgxSpinnerService) {

  }

  ngOnInit() {

    this.spinner.show();

在此之后，我将远程调用服务器，当这项工作完成后，我将隐藏旋转器。

我的目标是为相同的页面创建单元测试，即当页面加载时，我需要确保微调控件显示在页面上。为此，我编写了以下测试用例：

  it('should show loading indicator if the page is not loaded', () => {

    // pageLoaded should be try because the form will be loaded only when that is true based on ng if

    const element = getElementByTag('ngx-spinner');

    //What to write here?

  });

我在我的测试中获得了元素，但我无法检测它是否可见。我尝试了element.nativeElement.visible，但它返回为null。

Answer 1

我首先要说的是，在单元测试的上下文中，一般的经验法则是每个组件都应该单独测试。这意味着您不需要检查微调器本身是否已显示，只需检查是否调用了show()方法。你可以通过监视NgxSpinnerService来实现这一点：

  it('should show loading indicator if the page is not loaded', () => {
    const spinnerSpy = spyOn(TestBed.get(NgxSpinnerService), "show");
    expect(spinnerSpy).toHaveBeenCalled();
  });

话虽如此，我注意到在显示微调器时，在<ngx-spinner></ngx-spinner>标记中插入了一个div。因此，如果它的子对象的长度为1，则可以看出它正在显示：

  it('should show loading indicator if the page is not loaded', () => {
    // pageLoaded should be try because the form will be loaded only when that is true based on ng if
    const element = getElementByTag('ngx-spinner');
    //What to write here?
    expect(element.children.size).toBe(1);
  });