如何在量角器中验证多个Ag-Grid列的排序 [英] How to verify sorting of multiple ag-grid columns in Protractor

问题描述

我正在使用量角器进行e2e测试。
有一个ag-grid表，其中多列按升序排序。

I am using protractor for e2e testing. There is a ag-grid table where multiple columns are sorted in ascending order.

我该如何验证呢？

示例表格图片

推荐答案

在AgGrid中，行不一定总是按照从数据模型插入​​行的顺序显示。但是它们总是正确地分配了行索引属性，因此您可以查询该属性以识别哪些行显示在哪个索引处。

In AgGrid the rows might not always be displayed in the same order as you insert them from your data-model. But they always get assigned the attribute "row-index" correctly, so you can query for it to identify which rows are displayed at which index.

因此在E2E-测试中，您应该创建两个所谓的页面对象（视图中某个对象的选择器，与文本执行代码分离，谷歌搜索页面对象模式），如下所示：

So in your E2E-tests, you should create two so-called "page objects" (a selector fo something in your view, separated from the text-execution code, google for page object pattern) like this:

// list page object
export class AgGridList {
  constructor(private el: ElementFinder) {}

  async getAllDisplayedRows(): Promise<AgGridRow[]> {
    const rows = $('div.ag-body-container').$$('div.ag-row');
    await browser.wait(EC.presenceOf(rows.get(0)), 5000);
    const result = await rows.reduce((acc: AgGridRow[], elem) => [...acc, new AgGridArtikelRow(elem)], []);
    return await this.sortedRows(result);
  }

  private async sortedRows(rows: AgGridRow[]): Promise<AgGridRow[]> {
    const rowsWithRowsId = [];
    for (const row of rows) {
      const rowIndex = await row.getRowIndex();
      rowsWithRowsId.push({rowIndex, row});
    }
    rowsWithRowsId.sort((e1, e2) => e1.rowIndex - e2.rowIndex);
    return rowsWithRowsId.map(elem => elem.row);
  }
}

// row page object
export class AgGridRow {
  constructor(private el: ElementFinder) {}

  async getRowIndex(): Promise<number> {
    const rowIndexAsString: string = await this.el.getAttribute('row-index');
    return parseInt(rowIndexAsString, 10);
  }
}

在测试中：

it('should display rows in right order', async () => {
  const rows = await gridList.getCurrentDisplayedRows(); // gridList is your AgGridList page object, initialised in beforeEach()
  // now you can compare the displayed order to the order inside your data model
});

此代码的作用：将页面对象作为访问表的对象整体，用于访问一行中的元素。要以与视图中显示的顺序相同的顺序访问列表，您必须获取所有显示的行（在延迟加载或分页的情况下，该行应小于100，否则实现不好），从每个行中获取rowIndex，对其进行排序，然后将网格列表返回到测试执行（.spec）文件。

What this code does: you make page objects for accessing the table as a whole and for accessing elements within a row. To accessing the list in the same order as it is displayed in the view, you have to get all displayed rows (with lazy loading or pagination it should be below 100, otherwise your implementation is bad), get the rowIndex from each of them, sort by it and only then return the grid-list to the test-execution (.spec) file.

这篇关于如何在量角器中验证多个Ag-Grid列的排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！