refactor: reduce virtualizer physical element count (#2912)

vaadin · Oct 22, 2021 · 4bce680 · 4bce680
1 parent 12a40b1
commit 4bce680
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/packages/combo-box/test/filtering.test.js b/packages/combo-box/test/filtering.test.js
@@ -372,9 +372,9 @@ describe('filtering items', () => {
 
     it('should properly display all items in the selector', () => {
       comboBox.open();
-      comboBox.filteredItems = Array.apply(null, Array(20)).map((_, i) => `item${i}`);
+      comboBox.filteredItems = Array.apply(null, Array(10)).map((_, i) => `item${i}`);
       flush();
-      expect(getAllItems(comboBox).length).to.equal(20);
+      expect(getAllItems(comboBox).length).to.equal(10);
     });
   });
 });

diff --git a/packages/component-base/src/virtualizer-iron-list-adapter.js b/packages/component-base/src/virtualizer-iron-list-adapter.js
@@ -17,6 +17,8 @@ export class IronListAdapter {
     this.scrollContainer = scrollContainer;
     this.elementsContainer = elementsContainer || scrollContainer;
     this.reorderElements = reorderElements;
+    // Iron-list uses this value to determine how many pages of elements to render
+    this._maxPages = 1.3;
 
     this.__safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 

diff --git a/packages/component-base/test/virtualizer-reorder-elements.test.js b/packages/component-base/test/virtualizer-reorder-elements.test.js
@@ -27,7 +27,7 @@ describe('reorder elements', () => {
         resolve(mutations.flatMap((record) => [...record.removedNodes]));
       }).observe(elementsContainer, { childList: true });
 
-      virtualizer.scrollToIndex(Math.ceil(elementsContainer.childElementCount / 2));
+      virtualizer.scrollToIndex(Math.ceil(elementsContainer.childElementCount / 3));
 
       if (!skipFlush) {
         virtualizer.flush();

diff --git a/packages/component-base/test/virtualizer.test.js b/packages/component-base/test/virtualizer.test.js
@@ -198,7 +198,7 @@ describe('virtualizer', () => {
 
     // Decrease the size so that we end up at the top of the list
     updateElement.resetHistory();
-    virtualizer.size = 10;
+    virtualizer.size = 5;
     const postResizeUpdatedIndexes = updateElement.getCalls().map((call) => call.args[1]);
 
     expect(postResizeUpdatedIndexes).not.to.include.members(updatedIndexes);
@@ -241,6 +241,14 @@ describe('virtualizer', () => {
     expect(elementsContainer.childElementCount).to.equal(initialCount);
   });
 
+  it('should initially have a decent amount of physical elements', () => {
+    const initialCount = elementsContainer.childElementCount;
+    const viewportHeight = scrollTarget.offsetHeight;
+    const itemHeight = elementsContainer.querySelector('#item-0').offsetHeight;
+    const expectedCount = Math.ceil((viewportHeight / itemHeight) * 1.3) + 1;
+    expect(initialCount).not.to.be.above(expectedCount);
+  });
+
   describe('lazy rendering', () => {
     let render = false;
 

diff --git a/packages/grid/test/filtering.test.js b/packages/grid/test/filtering.test.js
@@ -144,7 +144,7 @@ describe('filtering', () => {
     grid._filters[0].value = '';
   });
 
-  it('should filter display all filtered items', () => {
+  it('should display all filtered items', () => {
     flushFilters(grid);
     grid._filters[0].value = '';
     grid._filters[1].value = '';
@@ -159,7 +159,7 @@ describe('filtering', () => {
     grid._filters[0].value = '99';
     flushFilters(grid);
     flushGrid(grid);
-    expect(grid.$.items.querySelectorAll('tr:not([hidden])')).to.have.length(19);
+    expect(grid.$.items.querySelectorAll('tr:not([hidden])')).to.have.length(18);
   });
 
   it('should not overflow filter text field', () => {