fix: restore template logic and tests

packages/combo-box/package.json

@@ -40,6 +40,8 @@
     "@polymer/paper-input": "^3.0.0",
     "@vaadin/testing-helpers": "^0.2.1",
     "@vaadin/vaadin-dialog": "^22.0.0-alpha1",
+    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha1",
+    "lit": "^2.0.0-rc.1",
     "sinon": "^9.2.0"
   },
   "publishConfig": {

packages/combo-box/src/vaadin-combo-box-mixin.js

@@ -6,6 +6,7 @@
 import { timeOut } from '@polymer/polymer/lib/utils/async.js';
 import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
 import { flush } from '@polymer/polymer/lib/utils/flush.js';
+import { processTemplates } from '@vaadin/vaadin-element-mixin/templates.js';
 import { ComboBoxPlaceholder } from '@vaadin/vaadin-combo-box/src/vaadin-combo-box-placeholder.js';
 import { ClearButtonMixin } from '@vaadin/field-base/src/clear-button-mixin.js';
 import { DisabledMixin } from '@vaadin/field-base/src/disabled-mixin.js';
@@ -279,6 +280,8 @@ export const ComboBoxMixin = (subclass) =>
 
       this.addEventListener('mousedown', () => this.__bringToFront());
       this.addEventListener('touchstart', () => this.__bringToFront());
+
+      processTemplates(this);
     }
 
     /**

packages/combo-box/test/fixtures/mock-combo-box-light-template-wrapper.js

@@ -0,0 +1,39 @@
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import '../vaadin-combo-box-light.js';
+
+class MockComboBoxLightTemplateWrapper extends PolymerElement {
+  static get template() {
+    return html`
+      <vaadin-combo-box-light id="comboBox" items="[[items]]">
+        <vaadin-text-field></vaadin-text-field>
+
+        <template>
+          <div>index: [[index]]</div>
+          <div>item: [[item]]</div>
+          <div>selected: [[selected]]</div>
+          <div>focused: [[focused]]</div>
+          <div>parentProperty: [[parentProperty]]</div>
+          <div>parentProperty.foo: [[parentProperty.foo]]</div>
+          <div>parentMethod: [[parentMethod()]]</div>
+          <button on-click="parentEventHandler"></button>
+        </template>
+      </vaadin-combo-box-light>
+    `;
+  }
+
+  static get properties() {
+    return {
+      items: Array
+    };
+  }
+
+  parentMethod() {
+    return 'quux';
+  }
+
+  parentEventHandler() {
+    // do nothing
+  }
+}
+
+customElements.define('mock-combo-box-light-template-wrapper', MockComboBoxLightTemplateWrapper);

packages/combo-box/test/fixtures/mock-combo-box-template-wrapper.js

@@ -0,0 +1,37 @@
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import '../vaadin-combo-box.js';
+
+class MockComboBoxTemplateWrapper extends PolymerElement {
+  static get template() {
+    return html`
+      <vaadin-combo-box id="comboBox" items="[[items]]">
+        <template>
+          <div>index: [[index]]</div>
+          <div>item: [[item]]</div>
+          <div>selected: [[selected]]</div>
+          <div>focused: [[focused]]</div>
+          <div>parentProperty: [[parentProperty]]</div>
+          <div>parentProperty.foo: [[parentProperty.foo]]</div>
+          <div>parentMethod: [[parentMethod()]]</div>
+          <button on-click="parentEventHandler"></button>
+        </template>
+      </vaadin-combo-box>
+    `;
+  }
+
+  static get properties() {
+    return {
+      items: Array
+    };
+  }
+
+  parentMethod() {
+    return 'quux';
+  }
+
+  parentEventHandler() {
+    // do nothing
+  }
+}
+
+customElements.define('mock-combo-box-template-wrapper', MockComboBoxTemplateWrapper);

packages/combo-box/test/item-template.test.js

@@ -0,0 +1,89 @@
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { fixtureSync, keyDownOn } from '@vaadin/testing-helpers';
+import { flush } from '@polymer/polymer/lib/utils/flush.js';
+import '@vaadin/vaadin-template-renderer';
+import './fixtures/mock-combo-box-template-wrapper.js';
+import './fixtures/mock-combo-box-light-template-wrapper.js';
+
+describe('item template', () => {
+  let wrapper, comboBox, firstItem;
+
+  ['combo-box' /*'combo-box-light'*/].forEach((name) => {
+    describe(name, () => {
+      beforeEach(() => {
+        wrapper = fixtureSync(`<mock-${name}-template-wrapper></mock-${name}-template-wrapper>`);
+        comboBox = wrapper.$.comboBox;
+        comboBox.items = ['foo', 'bar'];
+        comboBox.open();
+
+        flush();
+        firstItem = comboBox.$.overlay._selector.querySelector('vaadin-combo-box-item');
+      });
+
+      it('should render items using template', () => {
+        expect(firstItem.shadowRoot.innerHTML).to.contain('item: foo');
+      });
+
+      it('should have index property', () => {
+        expect(firstItem.shadowRoot.innerHTML).to.contain('index: 0');
+      });
+
+      it('should have selected property', () => {
+        expect(firstItem.shadowRoot.innerHTML).to.contain('selected: false');
+      });
+
+      it('should update selected property', () => {
+        comboBox.value = 'foo';
+        expect(firstItem.shadowRoot.innerHTML).to.contain('selected: true');
+      });
+
+      it('should have focused property', () => {
+        expect(firstItem.shadowRoot.innerHTML).to.contain('focused: false');
+      });
+
+      it('should update focused property', () => {
+        keyDownOn(comboBox.inputElement, 40); // Press arrow down key
+        expect(firstItem.shadowRoot.innerHTML).to.contain('focused: true');
+      });
+
+      it('should forward parent properties', () => {
+        wrapper.parentProperty = 'qux';
+        expect(firstItem.shadowRoot.innerHTML).to.contain('parentProperty: qux');
+      });
+
+      it('should forward parent paths', () => {
+        wrapper.parentProperty = { foo: '' };
+        wrapper.set('parentProperty.foo', 'bar');
+        expect(firstItem.shadowRoot.innerHTML).to.contain('parentProperty.foo: bar');
+      });
+
+      it('should support computed bindings in parent scope', () => {
+        expect(firstItem.shadowRoot.innerHTML).to.contain('parentMethod: quux');
+      });
+
+      it('should support event handlers in parent scope', () => {
+        const spy = sinon.spy(wrapper, 'parentEventHandler');
+        firstItem.shadowRoot.querySelector('button').click();
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should have content part wrapping template', () => {
+        const content = firstItem.shadowRoot.querySelector('[part="content"]');
+        expect(content.querySelector('button').parentElement).to.equal(content);
+      });
+
+      it('should have block style for the content part', () => {
+        const content = firstItem.shadowRoot.querySelector('[part="content"]');
+        expect(getComputedStyle(content).display).to.equal('block');
+      });
+
+      it('should preserve and propagate dir to the items', () => {
+        comboBox.close();
+        comboBox.setAttribute('dir', 'ltr');
+        comboBox.open();
+        expect(firstItem.getAttribute('dir')).to.eql('ltr');
+      });
+    });
+  });
+});