0

我有以下公司列表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.

4

1 回答 1

2

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-templateorng-multi-label-tmp并将ng-optiona 传递data-testid="example"给您在 ng-template 中包装的任何内容，然后使用查询该特定选项 const optionA = screen.queryByTestId('example');

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

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

于 2021-07-30T14:12:47.543 回答