标签: angular-testing-library

我正在尝试用我的 ID 添加index值。但出现错误：

Can't bind to 'testid' since it isn't a known property of 'input'.

这是我的模板：

<td *ngFor="let col of columns; let i = index"  [ngClass]="col.class" data-testid="form-create-td-{{i}}">

我的代码有什么问题吗？有人帮助我吗？

我喜欢testing-library，在 React 项目中使用了很多，我现在正尝试在 Angular 项目中使用它 - 但我一直在努力解决巨大的错误输出，包括渲染的 HTML 文本。这不仅通常没有帮助（我找不到一个元素，这是它不是的 HTML ）；但如果您在调试模式下运行，它通常会在有趣的行之前被截断。

我只是将它作为一个库添加到标准的 Angular Karma+Jasmine 设置旁边。

如果 HTML 输出导致我的控制台窗口假脱机很长时间，我敢肯定你会说我正在测试的组件太大了，但是我在量角器中有很多集成测试，而且它们太慢了:(。

在我的 Angular 应用程序中，我绑定了<select>一个反应式表单，如下所示：

<form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [value]="value" *ngFor="let value of mySelectValues">{{ value }}</option>
  </select>
</form>

在这个阶段，mySelectValues是一个字符串数组。

我像这样进行组件 dom 测试：

it('the select should reflect the form value"', () => {

  // I somehow change the form value to 'ABC' here 
  // and I want to check if the select is correctly showing the change

  const select = fixture.nativeElement.querySelector('#my-select');
  expect(select.value).toEqual('ABC');
});

这很好用。然而，在某些时候，在某些选择中，我需要将对象作为值，而不是在某些地方使用纯字符串/数字。

所以我改变了我的 HTML 代码来[ngValue]使用[value]：

<option [ngValue]="value" ...

此时，在我的测试中， 的值 …

我只是在尝试这个库，似乎无法通过他们的 ARIA 角色访问元素。

我使用 angular 10.0.6、jest 26.2.1 以及 jest-preset-angular 8.2.1 和 @testing-library/angular 10.0.1。我相信已经按照https://www.npmjs.com/package/jest-preset-angular和https://testing-library.com/docs/angular-testing-library/intro 中的描述设置了项目

这是我要测试的组件：

<h1>{{title}}</h1>
<img src="../assets/chuck-norris-logo.jpg" alt="Chuck Norris Approves!">
<p role="status">{{jokeText}}</p>
<button (click)="refreshJoke()">Refresh</button>

以及一些测试的相关部分：

test('refreshes joke on click', async () => {
    const component = await render(AppComponent);

    const button = component.getByRole('button');
    fireEvent.click(button);
  });

但是，我收到一条错误消息，指出找不到该角色。

TestingLibraryElementError: Unable to find an accessible element with the role "button"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then …

我正在尝试使用 Kent C Dodds 的@testing-library/angular 来测试角度分量。我的组件依赖于 Angular 服务。我在 api 文档中没有看到有关如何注入模拟服务来为我的单元测试提供模拟数据的信息。

    export class ItemCounterComponent implements OnInit {
  public availableTodoCount: number;

  constructor(private todoProviderService: TodoProviderService) {
    this.todoProviderService.getTodos().subscribe(todos => {
      this.availableTodoCount = todos.filter(todo => !todo.completed).length;
    });
  }

  ngOnInit() {
  }

}

    describe('ItemCounterComponent', () => {

  it('shows the count correctly', async () => {
    const { getByText } = await render(ItemCounterComponent, { componentProperties: { availableTodoCount: 5 } });

    expect (getByText('5 items left'));
  });
});
````````````