diff --git a/packages/crud/src/vaadin-crud.js b/packages/crud/src/vaadin-crud.js index a5b9a8a25b..4e9023aea7 100644 --- 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 index 638781146f..4ab8c85435 100644 --- 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(''); - 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(` + + + + `); + 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(''); + 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'); }); });