testinglibrary不能设置只有getter的[object object]的属性错误 &g

Question

我正在一个Angular应用程序中工作，我正在使用test -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;
}

正如你所看到的，我需要渲染我的组件的属性(error, loading和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]属性错误**

所以我的问题是，我怎么能设置这些属性在我的组件，并能够在我的测试中正确渲染组件使用测试库?

Answer 1

你的属性是得到的，因此分配新的值不起作用。

但仍然有一个解决方案，可能对你有用。你的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 } }
}]
})

这会影响您的get only属性的结果->

error: false,
loading: false,
hasInvestment: true