fix: update dataProvider when grid is set (#3558) (#3579)

* fix: update dataProvider when grid is set * simplify logic and add tests * revert changes to __createDataProviderProxy * add test for passing data provider when initializing with custom grid Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com> Co-authored-by: Manuel Carrasco Moñino <manolo@vaadin.com> Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Mar 17, 2022 · 004325f · 004325f
1 parent 4ff4dca
commit 004325f
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 24 deletions.
diff --git a/packages/crud/src/vaadin-crud.js b/packages/crud/src/vaadin-crud.js
@@ -887,6 +887,9 @@ class Crud extends SlotMixin(ControllerMixin(ElementMixin(ThemableMixin(PolymerE
       old.removeEventListener('edit', this.__editListener);
       old.removeEventListener('size-changed', this.__gridSizeListener);
     }
+    if (this.dataProvider) {
+      this.__onDataProviderChange(this.dataProvider);
+    }
     if (this.items) {
       this.__onItemsChange(this.items);
     }

diff --git a/packages/crud/test/crud.test.js b/packages/crud/test/crud.test.js
@@ -121,35 +121,90 @@ describe('crud', () => {
   describe('dataProvider', () => {
     const items = [{ foo: 'bar' }];
 
-    beforeEach(async () => {
-      crud = fixtureSync('<vaadin-crud style="width: 300px;"></vaadin-crud>');
-      crud.dataProvider = (_, callback) => callback(items, items.length);
-      await nextRender(crud);
-      [btnSave, btnCancel, btnDelete] = crud.querySelectorAll('vaadin-button');
-    });
+    describe('passing to grid', () => {
+      let customGrid;
 
-    it('should save a new item', (done) => {
-      listenOnce(crud, 'save', (e) => {
-        expect(e.detail.item.foo).to.be.equal('baz');
-        done();
+      beforeEach(() => {
+        crud = document.createElement('vaadin-crud');
+        customGrid = fixtureSync(`
+          <vaadin-grid>
+            <vaadin-grid-column path="foo"></vaadin-grid-column>
+          </vaadin-grid>
+        `);
+        customGrid.setAttribute('slot', 'grid');
+      });
+
+      afterEach(() => {
+        crud.remove();
+      });
+
+      it('should apply data provider when setting data provider before initializing the grid', async () => {
+        // Set data provider before `ready` is called, which means the grid is not initialized yet
+        crud.dataProvider = (_, callback) => callback(items, items.length);
+        // This should initialize the grid and pass the data provider
+        document.body.appendChild(crud);
+        // Verify item from data provider is rendered
+        await nextRender(crud);
+        flushGrid(crud._grid);
+        expect(getBodyCellContent(crud._grid, 0, 0).textContent).to.be.equal('bar');
+      });
+
+      it('should apply data provider when initializing with a custom grid', async () => {
+        // Add a custom grid, set data provider, add CRUD to DOM
+        crud.appendChild(customGrid);
+        crud.dataProvider = (_, callback) => callback(items, items.length);
+        document.body.appendChild(crud);
+
+        // Verify item from data provider is rendered
+        await nextRender(crud);
+        flushGrid(customGrid);
+        expect(getBodyCellContent(customGrid, 0, 0).textContent).to.be.equal('bar');
+      });
+
+      it('should apply data provider when replacing the grid', async () => {
+        document.body.appendChild(crud);
+        // Set data provider
+        crud.dataProvider = (_, callback) => callback(items, items.length);
+        // Replace default grid with custom one after setting the data provider
+        crud.appendChild(customGrid);
+        // Verify item from data provider is rendered
+        await nextRender(crud);
+        flushGrid(customGrid);
+        expect(getBodyCellContent(customGrid, 0, 0).textContent).to.be.equal('bar');
       });
-      crud.$.new.click();
-      crud._form._fields[0].value = 'baz';
-      change(crud._form);
-      btnSave.click();
-      expect(crud.editedItem.foo).to.be.equal('baz');
     });
 
-    it('should save an edited item', (done) => {
-      listenOnce(crud, 'save', (e) => {
-        expect(e.detail.item.foo).to.be.equal('baz');
-        done();
+    describe('create and edit', () => {
+      beforeEach(async () => {
+        crud = fixtureSync('<vaadin-crud style="width: 300px;"></vaadin-crud>');
+        crud.dataProvider = (_, callback) => callback(items, items.length);
+        await nextRender(crud);
+        [btnSave, btnCancel, btnDelete] = crud.querySelectorAll('vaadin-button');
+      });
+
+      it('should save a new item', (done) => {
+        listenOnce(crud, 'save', (e) => {
+          expect(e.detail.item.foo).to.be.equal('baz');
+          done();
+        });
+        crud.$.new.click();
+        crud._form._fields[0].value = 'baz';
+        change(crud._form);
+        btnSave.click();
+        expect(crud.editedItem.foo).to.be.equal('baz');
+      });
+
+      it('should save an edited item', (done) => {
+        listenOnce(crud, 'save', (e) => {
+          expect(e.detail.item.foo).to.be.equal('baz');
+          done();
+        });
+        edit(items[0]);
+        crud._form._fields[0].value = 'baz';
+        change(crud._form);
+        btnSave.click();
+        expect(crud.editedItem.foo).to.be.equal('baz');
       });
-      edit(items[0]);
-      crud._form._fields[0].value = 'baz';
-      change(crud._form);
-      btnSave.click();
-      expect(crud.editedItem.foo).to.be.equal('baz');
     });
   });