0

我正在为我的角度测试使用测试库，并且我有一种情况，我需要从 HTML 中设置一个属性，以便能够以我想要的方式呈现组件......这个属性来自一个模块，我试图渲染通过componentProperties传递它的组件，但它不起作用......你们知道如何在我的测试中设置这个属性，以便我可以正确渲染我的组件吗？

我需要渲染 html 上的 ifMobile 属性，如下所示：

<xpto-aba-table-mobile
      *ifMobile="true"
      id="id-xpto-table-mobile"
      class="tabela"
      [tableData]="detailsTableData"
      [loading]="loading"
    >
    </xpto-aba-table-mobile>

这就是我试图测试的方式：（以这种方式测试运行，没有显示任何错误，但是，它没有渲染组件，它基本上没有改变我的组件）

  it('test', async () => {
    const { container } = await render(IfMobileModule, {
      imports: [IfMobileModule],
      template: `<xpto-aba-table-mobile id="id-ativos-escriturais-table-mobile" class="tabela" [tableData]="detailsTableData" \
      [loading]="loading" *ifMobile="true" ifMobile="true">should show when mobile</xpto-aba-table-mobile>`,
      wrapper: MyComponentDetailComponent,
      componentProperties: {
        hasMessage: false,
        detailsTableData$: myMock,
        ifMobile: true,
        // ifMobile: (): boolean => true,
      },
    });
    const element = container.querySelector("#id-xpto-table-mobile");
    expect(element).toBeInTheDocument();
  });

我也尝试过以这种方式进行测试（以这种方式我什至无法运行测试，因为它说 ifMobile 不是有效的属性）

  it('test2', async () => {
    const { container, debug } = await render(MyComponentDetailComponent, {
      imports: [IfMobileModule],
      componentProperties: {
        hasMessage: false,
        detailsTableData$: myMock,
        ifMobile: true,
      },
    });
    const element = container.querySelector("#id-xpto-table-mobile");
    expect(element).toBeInTheDocument();
  });
4

0 回答 0