0
428
VistasRepresentación vacía del grupo de filas Ag-Grid angular al consultar elementos DOM con angular-testing-library
Tengo una cuadrícula agrícola que contiene diferentes columnas y grupos de columnas, así como grupos de filas.
Estoy tratando de probar los elementos DOM que se muestran en el grupo de filas usando Jest y Angular Testing Library. El problema que tengo es que el renderizador DOM para la prueba no detecta ningún elemento secundario de esa fila y solo lo muestra como una etiqueta DIV cerrada en sí misma sin ningún elemento secundario. Pero cuando lo reviso en el navegador web, puedo ver todas las filas del grupo y las filas anidadas dentro de ellas.
Inicialmente pensé que se debía a la virtualización de filas, pero configuré el búfer de filas en 99999 y la celda no muestra nada más que un DIV vacío.
¿Cual podría ser el problema? todas las demás celdas y columnas se muestran correctamente, pero la celda que contiene un grupo de filas no muestra nada.
Actualización: he creado una aplicación CodeSandBox aquí que muestra este problema, puede ver cómo en el navegador las filas anidadas son visibles, pero cuando JSDOM las representa, no se muestran filas y la prueba falla en la afirmación. Este código se puede ver en las líneas 33-36 de app.component.spec.ts .
También creé un problema de GitHub en el repositorio de la biblioteca de prueba , esperando algunas pistas.
1 Respuestas
Responde la pregunta0
Esto está funcionando como se esperaba. Los elementos secundarios de los grupos no se representan como elementos secundarios DOM dentro del elemento del grupo, se representan en elementos div separados donde cada div representa una fila.
Puedes verificar esto en el siguiente ejemplo :
Si hace clic en el botón "Console log United States Group Element"
Verá lo siguiente:
<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>Observe cómo los elementos secundarios del elemento de grupo no contienen los elementos secundarios de ese grupo.
Si también desea verificar los elementos secundarios de un grupo, deberá apuntar a todos los elementos div con la clase .ag-row y consultar la celda que desea ver usando la clase .ag-cell con el col-id atributo.