Find Nested Harnesses Angular Material

Viewed 362

I am working on a project where our tests are with Harnesses for Angular, extending ComponentHarness class. I am testing a table and would like to scope some elements based on the row. For example I would like to extract the buttons from the first row. I couldn't find a way to get all the buttons scoping only into the first row. Here what I got so far

export class ProductComponentHarness extends ComponentHarness {
  static readonly hostSelector = 'my-selector-component';

  private readonly table = this.locatorFor(MatTableHarness);

  async getRows(): Promise<MatRowHarness[]> {
    const tableResolved = await this.table();
    return tableResolved.getRows();
  }

  async getAllButtonsFromFirstRow(): Promise<void> {
   const firstRow = (await this.getRows())[0];

   // Stuck here, how to scope?
   this.locatorForAll(firstReleaseRow, MattButtonHarness); // My logic pointed me here first time
   this.locatorForAll(MatButtonHarness.with({ ancestor: firstRow })); //Not working
  }
}

Maybe the approach is not correct? I could not find much more about nested Harnesses with Material Angular. Worst case scenario I just extract all the buttons and I examine from there, but I would like to learn how to properly scope if at any point I find similar scenarios

0 Answers
Related