如何用量角器测试农业网格？

Question

在我的应用程序中，我使用 ag-grid 来显示数据。我不确定如何 select 网格中的字段，以便我可以测试它是否存在。我发现的许多例子都没有多大帮助。如果有人能指导我正确的方向，那就太好了！:) 这是我的 HTML 代码：

  <div style="height: 90%; text-align: left">
<ag-grid-angular enableColResize groupHeaders style="width: 100%; height: 100%;" [gridOptions]="gridOptions" (gridReady)="onGridReady($event)"
  class="ag-theme-blue" [rowData]="rowData" [columnDefs]= "columnDefs" [enableSorting]="true"
  [animateRows]="true" [rowSelection]="rowSelection">
</ag-grid-angular>

这是我如何在组件中创建数据的示例 class。我知道我必须 select 输出 mt 数据的数组，但我似乎无法弄清楚如何 select 数组。如果我调用 class ag-theme-blue，我最接近 selecting 字段的方法。但这并没有多大帮助，因为它只是 select 特定用户，没有灵活性。谢谢！

 columnDefs = [

        { headerName: 'First Name', field: 'FirstName' },

    ];

编辑：好的，所以我取得了一些进展！这不是解决方案，而是朝着正确方向迈出的一步:)。这行代码，select是 ag-grid 中的第一列。

return element(by.css('div.ag-body-container > [role="row"]'))

这里的这一行，允许我select一个特定的索引。

 return element.all(by.css('div.ag-body-container > [role="row"]')).get(2);

此处的这一行允许我 select 具有给定数据的行。例如，在这里我要查找包含名称 "TestName" 的行。现在我可以通过检查是否显示包含 TestName 的字段来测试是否添加了新字段。为了使这个测试更好，我可以为我的测试分配一个非常不同的名称，以确保它不存在于数据库中。

return element.all(by.cssContainingText('div.ag-body-container > [role="row"]', 'TestName'))

本网站上的这张图片就是我的网格的样子。

http://www.adaptabletools.com/ag_Grid_implementation_available.html

编辑 2：更新了功能规范：

  it('should select name field', () => {




  findRow(page.rows, "TestName").then(row => {

    row.getText().then(rowText => {
      expect(rowText).toContain('TestName')

Answer 1

嗯，并不完美，这似乎可以解决问题：

return element.all(by.cssContainingText('div.ag-body-container > [role="row"]', 'TestName'))

现在我只需要弄清楚如何从字段中检索数据。

Answer 2

我想我已经很好地掌握了您现在要做的事情。

您可以使用

获取网格中所有行的列表

let rows = element.all(by.css('div.ag-body-container > [role="row"]'));

然后从这里您可以使用 .filter() 找到包含您要查找的数据的行。可能最好创建一个通用函数，允许您传入要查找的行和字符串，然后在找到元素后 return 元素。

findRow(elements, matcher) {
  const relevantRow = elements.filter(element => {
    return element.getText().then(text => {
      return text.includes(matcher);
    });
  })
  .first()

  return relevantRow;
}

您可以从您的测试中调用它：const row = findRow(rows, 'Some Text') 然后一旦您找到了您正在寻找的行，您就可以从那里做任何您需要的事情。

编辑：下面举个例子比较清楚

// in your page object
public rows = element.all(by.css('div.ag-body-container > [role="row"]'));

// in some helper class
function findRow(rows, matcher) {
  return elements.filter(element => {
    return element.getText().then(text => {
      return text.includes(matcher);
    });
  })
  .first()
}

//in your test
helper.findRow(somePage.rows, 'Some Text').then(row => {
  row.getText().then(rowText => {
    expect(rowText).toContain('Some Text');
  });
});

如果你用的是async/await会是这样

function async findRow(rows, matcher) {
  const relevantRow = await rows.filter(row => {
    return row.getText().then(text => {
      return text.includes(matcher);
    });
  }).first();

  return relevantRow;
}

//in spec
const row = await helper.findRow(somePage.rows, 'Some Text');
expect(await row.getText()).toContain('Some Text');

如何用量角器测试农业网格？

How to test ag-grid with protractor?

automated-tests

protractor

ag-grid

angular