fix(select): update itemLabelGenerator tests to query listBox correctly

The tests were failing because they were querying for items directly
in the overlay instead of first getting the listBox element. This fix
ensures tests properly navigate the DOM structure to find the rendered
items.

Also adds an example of itemLabelGenerator usage to dev/select.html

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: Artur-

dev/select.html

@@ -64,6 +64,13 @@ <h2 class="heading">States</h2>
       </vaadin-select>
     </section>
 
+    <section class="section">
+      <h2 class="heading">Item Label Generator</h2>
+      <vaadin-select id="country-select" label="Country (with itemLabelGenerator)">
+        <vaadin-tooltip slot="tooltip" text="Using itemLabelGenerator to show custom labels"></vaadin-tooltip>
+      </vaadin-select>
+    </section>
+
     <script type="module">
       import { html, render } from 'lit';
 
@@ -85,6 +92,17 @@ <h2 class="heading">States</h2>
               root,
             );
           };
+        } else if (select.id === 'country-select') {
+          // Example with itemLabelGenerator
+          select.items = [
+            { code: 'US', name: 'United States', value: 'us' },
+            { code: 'GB', name: 'United Kingdom', value: 'gb' },
+            { code: 'FR', name: 'France', value: 'fr' },
+            { code: 'DE', name: 'Germany', value: 'de' },
+            { code: 'JP', name: 'Japan', value: 'jp' }
+          ];
+          // Generate labels showing both code and name
+          select.itemLabelGenerator = (item) => `${item.code} - ${item.name}`;
         } else {
           select.items = [
             { label: 'Show all', value: 'all' },
@@ -99,4 +117,4 @@ <h2 class="heading">States</h2>
       });
     </script>
   </body>
-</html>
+</html>

packages/select/demo/item-label-generator-example.html

@@ -25,7 +25,10 @@ describe('item-label-generator', () => {
       await oneEvent(select._overlayElement, 'vaadin-overlay-open');
       await nextRender();
 
-      const items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      const listBox = select._overlayElement.querySelector('vaadin-select-list-box');
+      expect(listBox).to.be.ok;
+      const items = listBox.querySelectorAll('vaadin-select-item');
+      expect(items).to.have.lengthOf(3);
       expect(items[0].textContent).to.equal('Option 1');
       expect(items[1].textContent).to.equal('Option 2');
       expect(items[2].textContent).to.equal('Option 3');
@@ -39,7 +42,10 @@ describe('item-label-generator', () => {
       await oneEvent(select._overlayElement, 'vaadin-overlay-open');
       await nextRender();
 
-      const items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      const listBox = select._overlayElement.querySelector('vaadin-select-list-box');
+      expect(listBox).to.be.ok;
+      const items = listBox.querySelectorAll('vaadin-select-item');
+      expect(items).to.have.lengthOf(3);
       expect(items[0].textContent).to.equal('Custom 1 - 1');
       expect(items[1].textContent).to.equal('Custom 2 - 2');
       expect(items[2].textContent).to.equal('Custom 3 - 3');
@@ -53,13 +59,15 @@ describe('item-label-generator', () => {
       await oneEvent(select._overlayElement, 'vaadin-overlay-open');
       await nextRender();
 
-      let items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      const listBox = select._overlayElement.querySelector('vaadin-select-list-box');
+      expect(listBox).to.be.ok;
+      let items = listBox.querySelectorAll('vaadin-select-item');
       expect(items[0].textContent).to.equal('1');
 
       select.itemLabelGenerator = (item) => `Value: ${item.value}`;
       await nextFrame();
 
-      items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      items = listBox.querySelectorAll('vaadin-select-item');
       expect(items[0].textContent).to.equal('Value: 1');
     });
 
@@ -71,7 +79,9 @@ describe('item-label-generator', () => {
       await oneEvent(select._overlayElement, 'vaadin-overlay-open');
       await nextRender();
 
-      const items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      const listBox = select._overlayElement.querySelector('vaadin-select-list-box');
+      expect(listBox).to.be.ok;
+      const items = listBox.querySelectorAll('vaadin-select-item');
       expect(items[0].textContent).to.equal('');
     });
 
@@ -83,7 +93,9 @@ describe('item-label-generator', () => {
       await oneEvent(select._overlayElement, 'vaadin-overlay-open');
       await nextRender();
 
-      const items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      const listBox = select._overlayElement.querySelector('vaadin-select-list-box');
+      expect(listBox).to.be.ok;
+      const items = listBox.querySelectorAll('vaadin-select-item');
       expect(items[0].textContent).to.equal('');
     });
   });
@@ -102,7 +114,9 @@ describe('item-label-generator', () => {
       await oneEvent(select._overlayElement, 'vaadin-overlay-open');
       await nextRender();
 
-      const items = select._overlayElement.querySelectorAll('vaadin-select-item');
+      const listBox = select._overlayElement.querySelector('vaadin-select-list-box');
+      expect(listBox).to.be.ok;
+      const items = listBox.querySelectorAll('vaadin-select-item');
       expect(items[0].textContent).to.equal('John (30)');
       expect(items[1].textContent).to.equal('Jane (25)');
     });