test: expect exception when using both template and renderer in grids

Author: vursen

packages/vaadin-template-renderer/test/fixtures/mock-grid-host.js

@@ -9,12 +9,6 @@ export class MockGridHost extends PolymerElement {
   static get template() {
     return html`
       <vaadin-grid id="grid" items="[[items]]">
-        <vaadin-grid-column>
-          <template class="header">header</template>
-          <template class="footer">footer</template>
-          <template class="body">[[item.title]]</template>
-        </vaadin-grid-column>
-
         <vaadin-grid-column>
           <template>
             <input class="parent-property" value="{{parentProperty::input}}" />
@@ -39,8 +33,6 @@ export class MockGridHost extends PolymerElement {
         <vaadin-grid-tree-column></vaadin-grid-tree-column>
 
         <template class="row-details">
-          row-details
-
           <div class="index">[[index]]</div>
           <input class="title" value="{{item.title::input}}" />
           <vaadin-checkbox class="selected" checked="{{selected}}" />
@@ -68,8 +60,6 @@ export class MockGridHost extends PolymerElement {
       }
     };
   }
-
-  onClick() {}
 }
 
 customElements.define('mock-grid-host', MockGridHost);

packages/vaadin-template-renderer/test/grid-body.test.js

@@ -1,11 +1,45 @@
+import sinon from 'sinon';
 import { expect } from '@esm-bundle/chai';
 import { fire, fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import '@vaadin/vaadin-grid';
 import { GridTemplatizer } from '../src/vaadin-template-renderer-grid-templatizer.js';
 
 import '../vaadin-template-renderer.js';
 
 import './fixtures/mock-grid-host.js';
 
+describe('grid body template', () => {
+  function fixtureGrid() {
+    return fixtureSync(`
+      <vaadin-grid>
+        <vaadin-grid-column>
+          <template></template>
+        </vaadin-grid-column>
+      </vaadin-grid>
+    `);
+  }
+
+  it('should process the template', () => {
+    const grid = fixtureGrid();
+    const template = grid.querySelector('template');
+
+    expect(template.__templatizer).to.be.an.instanceof(GridTemplatizer);
+  });
+
+  it('should throw when using both a template and a renderer', () => {
+    const stub = sinon.stub(window.Vaadin, 'templateRendererCallback');
+    const grid = fixtureGrid();
+    const column = grid.firstElementChild;
+    stub.restore();
+
+    column.renderer = () => {};
+
+    expect(() => window.Vaadin.templateRendererCallback(column)).to.throw(
+      /^Cannot use both a template and a renderer for <vaadin-grid-column \/>\.$/
+    );
+  });
+});
+
 describe('grid body template', () => {
   let host, grid;
 
@@ -26,63 +60,57 @@ describe('grid body template', () => {
     await nextRender(grid);
   });
 
-  it('should process the template', () => {
-    const template = grid.querySelector('template.body');
-
-    expect(template.__templatizer).to.be.an.instanceof(GridTemplatizer);
-  });
-
   it('should render parentProperty', () => {
-    const parentProperty0 = queryCellContent({ row: 0, col: 2 }, 'div.parent-property');
-    const parentProperty1 = queryCellContent({ row: 1, col: 2 }, 'div.parent-property');
+    const parentProperty0 = queryCellContent({ row: 0, col: 1 }, 'div.parent-property');
+    const parentProperty1 = queryCellContent({ row: 1, col: 1 }, 'div.parent-property');
 
     expect(parentProperty0.textContent).to.equal('parentValue');
     expect(parentProperty1.textContent).to.equal('parentValue');
   });
 
   it('should render model.index', () => {
-    const index0 = queryCellContent({ row: 0, col: 2 }, 'div.index');
-    const index1 = queryCellContent({ row: 1, col: 2 }, 'div.index');
+    const index0 = queryCellContent({ row: 0, col: 1 }, 'div.index');
+    const index1 = queryCellContent({ row: 1, col: 1 }, 'div.index');
 
     expect(index0.textContent).to.equal('0');
     expect(index1.textContent).to.equal('1');
   });
 
   it('should render model.selected', () => {
-    const selected0 = queryCellContent({ row: 0, col: 2 }, 'div.selected');
-    const selected1 = queryCellContent({ row: 1, col: 2 }, 'div.selected');
+    const selected0 = queryCellContent({ row: 0, col: 1 }, 'div.selected');
+    const selected1 = queryCellContent({ row: 1, col: 1 }, 'div.selected');
 
     expect(selected0.textContent).to.equal('false');
     expect(selected1.textContent).to.equal('false');
   });
 
   it('should render model.expanded', () => {
-    const expanded0 = queryCellContent({ row: 0, col: 2 }, 'div.expanded');
-    const expanded1 = queryCellContent({ row: 1, col: 2 }, 'div.expanded');
+    const expanded0 = queryCellContent({ row: 0, col: 1 }, 'div.expanded');
+    const expanded1 = queryCellContent({ row: 1, col: 1 }, 'div.expanded');
 
     expect(expanded0.textContent).to.equal('false');
     expect(expanded1.textContent).to.equal('false');
   });
 
   it('should render model.detailsOpened', () => {
-    const detailsOpened0 = queryCellContent({ row: 0, col: 2 }, 'div.details-opened');
-    const detailsOpened1 = queryCellContent({ row: 1, col: 2 }, 'div.details-opened');
+    const detailsOpened0 = queryCellContent({ row: 0, col: 1 }, 'div.details-opened');
+    const detailsOpened1 = queryCellContent({ row: 1, col: 1 }, 'div.details-opened');
 
     expect(detailsOpened0.textContent).to.equal('false');
     expect(detailsOpened1.textContent).to.equal('false');
   });
 
   it('should render model.item.title', () => {
-    const title0 = queryCellContent({ row: 0, col: 2 }, 'div.title');
-    const title1 = queryCellContent({ row: 1, col: 2 }, 'div.title');
+    const title0 = queryCellContent({ row: 0, col: 1 }, 'div.title');
+    const title1 = queryCellContent({ row: 1, col: 1 }, 'div.title');
 
     expect(title0.textContent).to.equal('item0');
     expect(title1.textContent).to.equal('item1');
   });
 
   describe('changing parentProperty', () => {
     beforeEach(() => {
-      const input = queryCellContent({ row: 0, col: 1 }, 'input.parent-property');
+      const input = queryCellContent({ row: 0, col: 0 }, 'input.parent-property');
 
       input.value = 'new';
       fire(input, 'input');
@@ -93,8 +121,8 @@ describe('grid body template', () => {
     });
 
     it('should re-render the property in other rows', () => {
-      const parentProperty0 = queryCellContent({ row: 0, col: 2 }, 'div.parent-property');
-      const parentProperty1 = queryCellContent({ row: 1, col: 2 }, 'div.parent-property');
+      const parentProperty0 = queryCellContent({ row: 0, col: 1 }, 'div.parent-property');
+      const parentProperty1 = queryCellContent({ row: 1, col: 1 }, 'div.parent-property');
 
       expect(parentProperty0.textContent).to.equal('new');
       expect(parentProperty1.textContent).to.equal('new');
@@ -103,7 +131,7 @@ describe('grid body template', () => {
 
   describe('changing model.item.title', () => {
     beforeEach(() => {
-      const input = queryCellContent({ row: 0, col: 1 }, 'input.title');
+      const input = queryCellContent({ row: 0, col: 0 }, 'input.title');
 
       input.value = 'new0';
       fire(input, 'input');
@@ -115,8 +143,8 @@ describe('grid body template', () => {
     });
 
     it('should re-render the row', () => {
-      const title0 = queryCellContent({ row: 0, col: 2 }, 'div.title');
-      const title1 = queryCellContent({ row: 1, col: 2 }, 'div.title');
+      const title0 = queryCellContent({ row: 0, col: 1 }, 'div.title');
+      const title1 = queryCellContent({ row: 1, col: 1 }, 'div.title');
 
       expect(title0.textContent).to.equal('new0');
       expect(title1.textContent).to.equal('item1');
@@ -137,9 +165,9 @@ describe('grid body template', () => {
         cb(items, 1);
       };
 
-      checkbox = getCell({ row: 0, col: 1 })._content.querySelector('vaadin-checkbox.expanded');
-      expanded0 = getCell({ row: 0, col: 2 })._content.querySelector('div.expanded');
-      expanded1 = getCell({ row: 1, col: 2 })._content.querySelector('div.expanded');
+      checkbox = getCell({ row: 0, col: 0 })._content.querySelector('vaadin-checkbox.expanded');
+      expanded0 = getCell({ row: 0, col: 1 })._content.querySelector('div.expanded');
+      expanded1 = getCell({ row: 1, col: 1 })._content.querySelector('div.expanded');
     });
 
     beforeEach(() => {
@@ -175,9 +203,9 @@ describe('grid body template', () => {
     let checkbox, selected0, selected1;
 
     beforeEach(() => {
-      checkbox = queryCellContent({ row: 0, col: 1 }, 'vaadin-checkbox.selected');
-      selected0 = queryCellContent({ row: 0, col: 2 }, 'div.selected');
-      selected1 = queryCellContent({ row: 1, col: 2 }, 'div.selected');
+      checkbox = queryCellContent({ row: 0, col: 0 }, 'vaadin-checkbox.selected');
+      selected0 = queryCellContent({ row: 0, col: 1 }, 'div.selected');
+      selected1 = queryCellContent({ row: 1, col: 1 }, 'div.selected');
     });
 
     beforeEach(() => {
@@ -213,9 +241,9 @@ describe('grid body template', () => {
     let checkbox, detailsOpened0, detailsOpened1;
 
     beforeEach(() => {
-      checkbox = queryCellContent({ row: 0, col: 1 }, 'vaadin-checkbox.details-opened');
-      detailsOpened0 = queryCellContent({ row: 0, col: 2 }, 'div.details-opened');
-      detailsOpened1 = queryCellContent({ row: 1, col: 2 }, 'div.details-opened');
+      checkbox = queryCellContent({ row: 0, col: 0 }, 'vaadin-checkbox.details-opened');
+      detailsOpened0 = queryCellContent({ row: 0, col: 1 }, 'div.details-opened');
+      detailsOpened1 = queryCellContent({ row: 1, col: 1 }, 'div.details-opened');
     });
 
     beforeEach(() => {

packages/vaadin-template-renderer/test/grid-editor.test.js

@@ -1,13 +1,48 @@
+import sinon from 'sinon';
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextRender, enter } from '@vaadin/testing-helpers';
+import '@vaadin/vaadin-grid-pro';
 import { GridTemplatizer } from '../src/vaadin-template-renderer-grid-templatizer.js';
 
 import '../vaadin-template-renderer.js';
 
 import './fixtures/mock-grid-pro-host.js';
 
+describe('grid editor template', () => {
+  function fixtureGrid() {
+    return fixtureSync(`
+      <vaadin-grid-pro>
+        <vaadin-grid-pro-edit-column>
+          <template class="editor"></template>
+        </vaadin-grid-pro-edit-column>
+      </vaadin-grid-pro>
+    `);
+  }
+
+  it('should process the template', () => {
+    const grid = fixtureGrid();
+    const template = grid.querySelector('template.editor');
+
+    expect(template.__templatizer).to.be.an.instanceof(GridTemplatizer);
+  });
+
+  it('should throw when using both a template and a renderer', () => {
+    const stub = sinon.stub(window.Vaadin, 'templateRendererCallback');
+    const grid = fixtureGrid();
+    const column = grid.firstElementChild;
+    stub.restore();
+
+    column.editModeRenderer = () => {};
+
+    expect(() => window.Vaadin.templateRendererCallback(column)).to.throw(
+      /^Cannot use both a template and a renderer for <vaadin-grid-pro-edit-column \/>\.$/
+    );
+  });
+});
+
 describe('grid editor template', () => {
   let host, grid;
+  let cell0, cell1, input;
 
   function getCell({ row, col }) {
     const items = grid.$.items.children;
@@ -20,48 +55,36 @@ describe('grid editor template', () => {
     grid = host.$.grid;
 
     await nextRender(grid);
-  });
-
-  it('should process the template', () => {
-    const template = grid.querySelector('template.editor');
-
-    expect(template.__templatizer).to.be.an.instanceof(GridTemplatizer);
-  });
-
-  describe('editing', () => {
-    let cell0, cell1, input;
 
-    beforeEach(() => {
-      cell0 = getCell({ row: 0, col: 0 });
-      cell1 = getCell({ row: 1, col: 0 });
+    cell0 = getCell({ row: 0, col: 0 });
+    cell1 = getCell({ row: 1, col: 0 });
 
-      enter(cell0._content);
+    enter(cell0._content);
 
-      input = cell0._content.querySelector('input');
-    });
+    input = cell0._content.querySelector('input');
+  });
 
-    it('should render the editor template', () => {
-      expect(cell0._content.children).to.have.lengthOf(1);
-      expect(cell0._content.children[0]).to.equal(input);
-      expect(cell1._content.textContent).to.equal('item1');
-    });
+  it('should render the editor template', () => {
+    expect(cell0._content.children).to.have.lengthOf(1);
+    expect(cell0._content.children[0]).to.equal(input);
+    expect(cell1._content.textContent).to.equal('item1');
+  });
 
-    it('should render the body template when finishing editing', () => {
-      enter(cell0._content);
+  it('should render the body template when finishing editing', () => {
+    enter(cell0._content);
 
-      expect(cell0._content.children[0]).not.to.equal(input);
-      expect(cell0._content.textContent).to.equal('item0');
-      expect(cell1._content.textContent).to.equal('item1');
-    });
+    expect(cell0._content.children[0]).not.to.equal(input);
+    expect(cell0._content.textContent).to.equal('item0');
+    expect(cell1._content.textContent).to.equal('item1');
+  });
 
-    it('should re-render the body template after changing the value', () => {
-      input.value = 'new0';
+  it('should re-render the body template after changing the value', () => {
+    input.value = 'new0';
 
-      enter(cell0._content);
+    enter(cell0._content);
 
-      expect(cell0._content.children[0]).not.to.equal(input);
-      expect(cell0._content.textContent).to.equal('new0');
-      expect(cell1._content.textContent).to.equal('item1');
-    });
+    expect(cell0._content.children[0]).not.to.equal(input);
+    expect(cell0._content.textContent).to.equal('new0');
+    expect(cell1._content.textContent).to.equal('item1');
   });
 });