fix: remove exceeding items from cache when size is decreased (#10222)

Author: vursen

packages/component-base/src/data-provider-controller/cache.js

@@ -152,6 +152,10 @@ export class Cache {
       }
     }
 
+    if (this.items.length > size) {
+      this.items.length = size || 0;
+    }
+
     Object.keys(this.pendingRequests).forEach((page) => {
       const startIndex = parseInt(page) * this.pageSize;
       if (startIndex >= this.size || 0) {

packages/component-base/test/data-provider-controller-cache.test.js

@@ -231,6 +231,14 @@ describe('DataProviderController - Cache', () => {
       expect(cache.pendingRequests[8]).to.be.not.undefined;
       expect(cache.pendingRequests[9]).to.be.undefined;
     });
+
+    it('should remove exceeding items when decreasing size', () => {
+      cache.setPage(0, ['Item 0', 'Item 1']);
+      cache.setPage(1, ['Item 2', 'Item 3']);
+      cache.size = 1;
+      expect(cache.items).to.have.lengthOf(1);
+      expect(cache.items[0]).to.equal('Item 0');
+    });
   });
 
   describe('size with placeholder', () => {

packages/grid/test/basic.test.js

@@ -248,42 +248,42 @@ describe('basic features', () => {
     return column.renderer.getCalls().filter((call) => call.args[2].index === 0).length;
   }
 
-  it('should have rendered the first cell once', () => {
+  it('should render the first cell once during initialization', () => {
     expect(getFirstCellRenderCount()).to.equal(1);
   });
 
-  it('should re-render the cell when last row enters the viewport on resize', () => {
+  it('should re-render the first cell when last row enters the viewport on resize', () => {
     column.renderer.resetHistory();
     grid.size = 1;
-    expect(getFirstCellRenderCount()).to.equal(1);
+    expect(getFirstCellRenderCount()).to.equal(1); // once on size change
   });
 
-  it('should re-render the cell when last row leaves the viewport on resize', () => {
+  it('should re-render the first cell when last row leaves the viewport on resize', () => {
     grid.size = 1;
     column.renderer.resetHistory();
     grid.size = 1000;
-    expect(getFirstCellRenderCount()).to.equal(1);
+    expect(getFirstCellRenderCount()).to.equal(2); // once on size change and once when data provider responds
   });
 
-  it('should not re-render the cell when last row change happens outside the viewport', () => {
+  it('should not re-render the first cell when last row change happens outside the viewport', () => {
     column.renderer.resetHistory();
     grid.size = 100;
     grid.size = 200;
     expect(getFirstCellRenderCount()).to.equal(0);
   });
 
-  it('should not re-render the cell when last row change happens on other visible rows', () => {
+  it('should re-render the first cell when last row change happens inside the viewport', () => {
     column.renderer.resetHistory();
     grid.size = 2;
     grid.size = 3;
-    expect(getFirstCellRenderCount()).to.equal(0);
+    expect(getFirstCellRenderCount()).to.equal(1); // once when data provider responds
   });
 
-  it('should have rendered the first cell once on resize from 0', () => {
+  it('should re-render the first cell on resize from 0', () => {
     column.renderer.resetHistory();
     grid.size = 0;
     grid.size = 1;
-    expect(getFirstCellRenderCount()).to.equal(1);
+    expect(getFirstCellRenderCount()).to.equal(2); // once on size change and once when data provider responds
   });
 
   it('should render all items with varying row heights when all rows visible', async () => {