1

我正在使用 Angular 应用程序，并且正在使用 testing-library 进行测试，这就是这种情况：

我有这个组件：

<div class="inner-card" *ngIf="!error && !loading && hasInv">
  <div class="chart-xpto">
    <abc-port-chart-donut
      *ngIf="dadosChart"
      [legenda]="true"
      [dataset]="dadosChart"
      [largura]="donutHeight"
      [altura]="donutWidth"
      identifier="chart-xpto-abc"
    ></abc-port-chart-donut>
  </div>

这是组件的 .ts：（如您所见，它扩展了 BaseComponent）

export class XptoComponent extends XptoBaseComponent implements OnInit {

这是基本组件：

export class XptoBaseComponent extends XptoCommonComponent implements OnInit {
[...]
  get error(): boolean {
    if (
      this.service.response.responseStatus === HTTP_STATUS_CODE.BAD_REQUEST ||
      this.service.response.responseStatus === HTTP_STATUS_CODE.NOT_FOUND
    ) {
      return true;
    }
    return false;
  }

  get loading(): boolean {
    return !this.service.response.responseStatus && !this.service.response.responseError;
  }

  get hasInv(): boolean {
    if (this.service.response.responseStatus === HTTP_STATUS_CODE.NO_CONTENT) {
      return false;
    }

    return true;
  }

如您所见，我需要渲染组件（错误、加载和 hasInv）的属性只是 getter，它们来自基本组件......

这就是我尝试进行测试的方式：

it('teste render', async () => {
  const {container} = await render(XptoComponent, {
    componentProperties: {
      error: false,
      loading: false,
      hasInvestment: true
    }
  })
  const abc = container.querySelector(".inner-card");
  expect(abc).toBeInTheDocument();
});

但是当我尝试以这种方式进行测试时，我

** TypeError：无法设置只有 getter 的 [object Object] 的属性错误**

所以我的问题是，如何在我的组件上设置这些属性并能够使用测试库在我的测试中正确呈现组件？

4

1 回答 1

0

您的属性只能获得，因此分配新值将不起作用。

但是仍然有一个解决方案，它可能对您有用。您的 get 属性依赖于注入的服务this.service.response.responseStatus：

get error(): boolean {
    if (
      // this service can be mocked
      this.service.response.responseStatus === HTTP_STATUS_CODE.BAD_REQUEST ||
      this.service.response.responseStatus === HTTP_STATUS_CODE.NOT_FOUND
    ) {
      return true;
    }
    return false;
  }

因此，不要像这里那样使用 componentProperties 设置状态：

componentProperties: {
      error: false,
      loading: false,
      hasInvestment: true
    }

您可以像这里一样提供您的服务的模拟版本：

 const {container} = await render(XptoComponent, {
    providers: [{
       provide: YourServiceType,
       useValue: { response: { responseStatus: HTTP_STATUS_CODE.NO_CONTENT } }
     }]
  })

这会影响您以所需方式获取属性的结果->

error: false,
loading: false,
hasInvestment: true
于 2021-03-03T14:09:12.540 回答