I am using angular with ag-grid as per documentation.
I am facing 2 problems :
1. I wrote the actual code in my vscode but i am not able to successfully reproduce it in stackblitz.
2. My grid contains 10 columns each of width 200 , when i do a ng test --code-coverage on vscode , the tests run on chrome browser and i immediately expand it to full screen. All my tests pass. But when i resize my chrome to about 30% of screen or less and rerun my tests, it shows an error that some of the columns are not defined that is it shows length of the header array to be less than 10. And the test fails.
What i am trying to say is that when i reduce the window size it is like first 5 columns are defined and the rest are not.
Is there any reason for this to happen?
Also please help me in setting up the stackblitz for the same.
NOTE : I may not be able to show it as stackblitz is not properly working, however there is a console.log statement in the second test which is what i am referring to.
If what you are testing is whether all of the columns actually appear in the DOM, then the problem is that by default, the grid virtualizes both rows and columns. That is, it only creates DOM nodes for rows and columns that are visible.
So, if your window is small enough that some of the columns are not visible in the grid's viewport, then those columns will not exist in the DOM. When you size the window larger to expose the previously missing columns (or scroll to reveal them), the DOM nodes are created at that time.
The quick fix is to turn column virtualization off (at least for the test).