1

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.

This is what it shows as when the test renders

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.

Zaid Shawahin
  • 355
  • 2
  • 18

1 Answers1

0

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.

Shuheb
  • 2,012
  • 1
  • 4
  • 6
  • But in your snippet, the DIV contains children which are SPANs. My problem is that the DIV is not rendering anything inside it, I want to be able to click on the expand row group arrow but I cannot since in my example it is rendering as an enclosed DIV. – Zaid Shawahin May 11 '22 at 11:40
  • Please update your original question with snippets of code you are using to select the DIV element and click on it. – Shuheb May 12 '22 at 08:03
  • updated, you can find it here as well https://github.com/testing-library/angular-testing-library/issues/293 – Zaid Shawahin Jun 01 '22 at 19:09