如何使用 Angular 测试库测试 ng-select？

问题描述

我在 ng-select 中填充了以下公司列表：

<div class="input-group">
    <ng-select role="company" id="company" class="form-control" #Company
               formControlName="company">
        <ng-option *ngFor="let c of companies" [value]="c.id">
            {{c.name}}
        </ng-option>
    </ng-select>
</div>

我正在使用 Jest 和 Angular 测试库来执行所需的单元测试。 ng-select 是一个可搜索的下拉菜单，用户可以在其中输入关键字。我需要能够输入一些文本并按 enter 或单击下拉列表中的第一个选项以选择第一个选项。

我目前正在尝试以下但不起作用：

userEvent.type(screen.getByRole('company'),companyName);

是否有合适的方式访问 ng-select？我的代码适用于文本框 - 它只有 ng-select 有问题。

解决方法

https://www.w3.org/TR/html-aria/#index-aria-combobox

Don't override default roles

你应该能够得到你的选择字段

const selectField = screen.queryByRole('combobox');

然后使用

获取选项

const options = screen.queryAllByRole('checkbox');

如果您需要在选择中显示不同的选项，您可以将 ng-template 与 ng-multi-label-tmp 或 ng-option 一起使用，并将 data-testid="example" 传递给您在 ng-template 中包装的任何内容然后查询该特定选项 const optionA = screen.queryByTestId('example');

在此处查看有关如何使用 ng-template 的文档，但您可能不需要它。

您通常不应仅仅为了测试而覆盖角色。 ARIA 角色旨在帮助实现可访问性（例如屏幕阅读器等）。