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