Angular Ag-Grid row group empty render when querying DOM elements with angular-testing-library

Question

I have an ag-grid that contains different columns and column groups, as well as row groups.

I am trying to test the DOM elements displayed in the row group using Jest and Angular Testing Library. The problem I am having is that the DOM renderer for the test does not detect any children of that row and only shows it as a self-enclosed DIV tag with no childer. But when I check it on the web browser I can see all the group rows and the nested rows within them.

I initially thought it was due to the row virtualization, but I have set the rowBuffer to 99999 and the cell fails to render anything but an empty DIV still.

What could be the issue? all the other cells and columns are rendering correctly, but the cell that contains a row group fails to render anything.

Update: I have created a CodeSandBox app here that showcases this issue, you can see how in the browser the nested rows are visible but when rendered by JSDOM no rows are shown and the test fails on assertion. This code can be seen in lines 33-36 of app.component.spec.ts.

I have also created a GitHub issue on the testing-library repo, hoping for some clues.

Answer 1

This is working as expected. The children of groups are not rendered as DOM children inside of the group element, they are rendered on seperate div elements where each div represents a row.

You can verify this in the following example:

If you click on the button "Console log United States Group Element"

You will see the following:

<div comp-id="76" class="ag-cell-value ag-cell ag-cell-not-inline-editing ag-cell-normal-height" aria-expanded="false" aria-colindex="1" tabindex="-1" col-id="ag-Grid-AutoColumn" role="gridcell" style="left: 0px; width: 298px;">
<span class="ag-cell-wrapper ag-cell-expandable ag-row-group ag-row-group-indent-0">
<span class="ag-group-expanded ag-hidden" ref="eExpanded"><span class="ag-icon ag-icon-tree-open" unselectable="on" role="presentation"></span></span>Ï
<span class="ag-group-contracted" ref="eContracted"><span class="ag-icon ag-icon-tree-closed" unselectable="on" role="presentation"></span></span>
<span class="ag-group-checkbox ag-invisible" ref="eCheckbox"></span>
<span class="ag-group-value" ref="eValue">United States</span>
<span class="ag-group-child-count" ref="eChildCount">(1109)</span>
</span>
</div>

Notice how the children for the group element does not contain the children for that group.

If you want to also check for the children of a group, you will have to target all the div elements with the .ag-row class and query the cell you want to look at using the .ag-cell class with the col-id attribute.