Как проверить сортировку нескольких столбцов ag-grid в Protractor - PullRequest
Новая
       17

Как проверить сортировку нескольких столбцов ag-grid в Protractor

0 голосов
/ 02 мая 2018

Я использую транспортир для тестирования e2e. Существует таблица ag-grid, в которой несколько столбцов отсортированы в порядке возрастания.

Как мне проверить это?
Изображение таблицы образцов

1 Ответ

0 голосов
/ 03 мая 2018

В AgGrid строки могут не всегда отображаться в том же порядке, в котором вы их вставляете из своей модели данных. Но им всегда присваивается атрибут «индекс строки» правильно, поэтому вы можете запросить его, чтобы определить, какие строки отображаются в каком индексе.

Таким образом, в ваших E2E-тестах вы должны создать два так называемых «объекта страницы» (селектор для чего-либо в вашем представлении, отделенный от кода выполнения текста, google для шаблона объекта страницы) следующим образом: 

// 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).

...