如何用量角器測試農業網格？

Question

在我的應用程序中，我使用ag-grid來顯示數據。 我不確定如何選擇網格中的字段，以便可以測試該字段是否存在。 我發現的許多示例並沒有太大幫助。 如果有人可以指導我正確的方向，那就太好了！:)這是我的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>

這是我如何在組件類中創建數據的示例。 我知道我必須選擇要輸出mt數據的數組，但似乎無法弄清楚如何選擇數組。 如果我將類稱為ag-theme-blue，則與選擇字段最接近。 但這並沒有太大幫助，因為它僅選擇特定用戶，因此沒有靈活性。 謝謝！

 columnDefs = [

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

    ];

編輯：好的，所以我取得了一些進步！ 這不是解決方案，而是朝着正確方向邁出的一步：）。 此行代碼選擇ag-grid中的第一列。

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

這行允許我選擇一個特定的索引。

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

這行使我可以選擇具有給定數據的行。 例如，在這里我要查找包含名稱“ 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

我想我對您現在想做的事情有很好的把握。

您可以使用來獲取網格中所有行的列表

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

然后從這里可以找到一行，該行包含使用.filter()查找的數據。 最好創建一個通用函數，該函數允許您傳遞要查找的行和字符串，並在找到元素后返回它。

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');
  });
});

如果您使用異步/等待，它將是這樣

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');

Answer 2

太不完美了，這似乎可以解決問題：

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

現在，我只需要弄清楚如何從字段中檢索數據。