From 103b4c8851b5b33aa7a73d9487b5412a72c1652e Mon Sep 17 00:00:00 2001
From: Nico Rehwaldt <nico.rehwaldt@camunda.com>
Date: Tue, 6 Dec 2022 21:07:56 +0100
Subject: [PATCH] chore(popup-menu): add titles to all elements

Allows users to inspect truncated items.
---
 lib/features/popup-menu/PopupMenuComponent.js |  2 +-
 lib/features/popup-menu/PopupMenuList.js      |  2 +-
 .../popup-menu/PopupMenuComponentSpec.js      | 30 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/lib/features/popup-menu/PopupMenuComponent.js
index 661c521be..1592d832a 100644
--- a/lib/features/popup-menu/PopupMenuComponent.js
+++ b/lib/features/popup-menu/PopupMenuComponent.js
@@ -184,7 +184,7 @@ export default function PopupMenuComponent(props) {
     >
       ${ displayHeader && html`
         <div class="djs-popup-header">
-          <h3 class="djs-popup-title">${ title }</h3>
+          <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
           ${ headerEntries.map(entry => html`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
diff --git a/lib/features/popup-menu/PopupMenuList.js b/lib/features/popup-menu/PopupMenuList.js
index 89af0f953..ebee6f7b9 100644
--- a/lib/features/popup-menu/PopupMenuList.js
+++ b/lib/features/popup-menu/PopupMenuList.js
@@ -47,7 +47,7 @@ export default function PopupMenuList(props) {
     <div class="djs-popup-results" ref=${ resultsRef }>
       ${ groups.map(group => html`
         ${ group.name && html`
-          <div key=${ group.id } class="entry-header">
+          <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
diff --git a/test/spec/features/popup-menu/PopupMenuComponentSpec.js b/test/spec/features/popup-menu/PopupMenuComponentSpec.js
index 469d3e5d3..f74f0a76c 100644
--- a/test/spec/features/popup-menu/PopupMenuComponentSpec.js
+++ b/test/spec/features/popup-menu/PopupMenuComponentSpec.js
@@ -328,6 +328,34 @@ describe('features/popup-menu - <PopupMenu>', function() {
       expect(describedEntry.textContent).to.eql('FOOI DESCRIBE IT');
     }));
 
+
+    it('should render entry header', inject(function() {
+
+      // given
+      const entries = [
+        {
+          id: '1',
+          label: '1',
+          group: {
+            id: 'SAD',
+            name: 'SOME GROUP'
+          }
+        }
+      ];
+
+      createPopupMenu({ container, entries });
+
+      // when
+      const [
+        groupHeader
+      ] = domQueryAll('.entry-header', container);
+
+      // then
+      expect(groupHeader).to.exist;
+      expect(groupHeader.title).to.eql('SOME GROUP');
+      expect(groupHeader.textContent).to.eql('SOME GROUP');
+    }));
+
   });
 
 
@@ -404,8 +432,8 @@ describe('features/popup-menu - <PopupMenu>', function() {
     // then
     var titleElement = domQuery('.djs-popup-title', container);
     expect(titleElement).to.exist;
+    expect(titleElement.title).to.eql(title);
     expect(titleElement.innerHTML).to.eql(title);
-
   }));