Skip to content

feat: throw when using both a template and a renderer #2098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 10, 2021
Merged

feat: throw when using both a template and a renderer #2098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98dde7f
feat: throw when using both a template and a renderer
vursen Jun 8, 2021
0be29a9
test: expect exception when using both template and renderer in grids
vursen Jun 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 25 additions & 6 deletions packages/vaadin-template-renderer/src/vaadin-template-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,52 @@ function createRenderer(component, template, TemplatizerClass = Templatizer) {
};

template.__templatizer = templatizer;
renderer.__templatized = true;

return renderer;
}

function assignRenderer(component, rendererName, renderer) {
const oldRenderer = component[rendererName];

if (oldRenderer && !oldRenderer.__templatized) {
const tag = component.localName;

throw new Error(`Cannot use both a template and a renderer for <${tag} />.`);
}

component[rendererName] = renderer;
}

function processGridTemplate(grid, template) {
if (template.matches('.row-details')) {
grid.rowDetailsRenderer = createRenderer(grid, template, GridTemplatizer);
const renderer = createRenderer(grid, template, GridTemplatizer);
assignRenderer(grid, 'rowDetailsRenderer', renderer);
return;
}
}

function processGridColumnTemplate(column, template) {
if (template.matches('.header')) {
column.headerRenderer = createRenderer(column, template);
const renderer = createRenderer(column, template);
assignRenderer(column, 'headerRenderer', renderer);
return;
}

if (template.matches('.footer')) {
column.footerRenderer = createRenderer(column, template);
const renderer = createRenderer(column, template);
assignRenderer(column, 'footerRenderer', renderer);
return;
}

if (template.matches('.editor')) {
column.editModeRenderer = createRenderer(column, template, GridTemplatizer);
const renderer = createRenderer(column, template, GridTemplatizer);
assignRenderer(column, 'editModeRenderer', renderer);
return;
}

column.renderer = createRenderer(column, template, GridTemplatizer);
const renderer = createRenderer(column, template, GridTemplatizer);
assignRenderer(column, 'renderer', renderer);
}

function processTemplate(component, template) {
Expand All @@ -55,7 +73,8 @@ function processTemplate(component, template) {
return;
}

component.renderer = createRenderer(component, template);
const renderer = createRenderer(component, template);
assignRenderer(component, 'renderer', renderer);
}

function processTemplates(component) {
Expand Down
6 changes: 5 additions & 1 deletion packages/vaadin-template-renderer/test/fixtures/mock-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export class MockComponent extends HTMLElement {
}

connectedCallback() {
window.Vaadin.templateRendererCallback?.(this);
window.Vaadin.templateRendererCallback(this);
}

get $() {
Expand All @@ -20,6 +20,10 @@ export class MockComponent extends HTMLElement {
this.render();
}

get renderer() {
return this.__renderer;
}

render() {
this.__renderer?.(this.$.content);
}
Expand Down
10 changes: 0 additions & 10 deletions packages/vaadin-template-renderer/test/fixtures/mock-grid-host.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}" />
Expand All @@ -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}}" />
Expand Down Expand Up @@ -68,8 +60,6 @@ export class MockGridHost extends PolymerElement {
}
};
}

onClick() {}
}

customElements.define('mock-grid-host', MockGridHost);
94 changes: 61 additions & 33 deletions packages/vaadin-template-renderer/test/grid-body.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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(() => {
Expand Down
Loading