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

【问题标题】：How to test ng-select using Angular testing library?如何使用 Angular 测试库测试 ng-select？
【发布时间】：2021-10-02 10:12:04
【问题描述】：

我在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 存在问题。

【问题讨论】：

标签： angular typescript angular-testing-library

【解决方案1】：

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 角色旨在帮助提高可访问性（例如屏幕阅读器等）。

【讨论】：