From 70b6912d5d0b3762d51637123a413070ec8c9cd5 Mon Sep 17 00:00:00 2001
From: Eli Ganem <eli.ganem@tylertech.com>
Date: Thu, 15 Feb 2024 13:52:26 -0500
Subject: [PATCH] fix(menu): map deprecated `icon` property to `leadingIcon`
 when options are loaded from factory (#461)

---
 src/lib/menu/menu-foundation.ts |  1 +
 src/test/spec/menu/menu.spec.ts | 25 +++++++++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/src/lib/menu/menu-foundation.ts b/src/lib/menu/menu-foundation.ts
index 74c4c139a..a55011c6d 100644
--- a/src/lib/menu/menu-foundation.ts
+++ b/src/lib/menu/menu-foundation.ts
@@ -362,6 +362,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation<IMenuOp
         if (this._open) {
           if (results && isArray(results) && results.length) {
             this._options = results;
+            this._mapIconToLeadingIcon();
             this._adapter.setOptions(results);
             const selectedValues = this._getSelectedValues();
             if (selectedValues.length) {
diff --git a/src/test/spec/menu/menu.spec.ts b/src/test/spec/menu/menu.spec.ts
index 8a656e506..8573c5c47 100644
--- a/src/test/spec/menu/menu.spec.ts
+++ b/src/test/spec/menu/menu.spec.ts
@@ -6,6 +6,7 @@ import {
   IPopupComponent,
   LIST_ITEM_CONSTANTS,
   MENU_CONSTANTS,
+  MenuOptionFactory,
   POPUP_CONSTANTS
 } from '@tylertech/forge';
 import { getShadowElement, removeElement } from '@tylertech/forge-core';
@@ -428,6 +429,30 @@ describe('MenuComponent', function(this: ITestContext) {
       expect(leadingIconEl).toBeTruthy();
       expect(leadingIconEl?.textContent).toBe('code');
     });
+
+    it(`should load leading icons from options factory based on 'leadingIcon' or 'icon' property`, async function(this: ITestContext){
+      this.context = setupTestContext();
+      const options: MenuOptionFactory = () => {
+        return [
+          { icon: 'code', value: '', label: '1' },
+          { leadingIcon: 'code', value: '', label: '2' }
+        ];
+      }
+
+      await tick();
+
+      this.context.component.options = options;
+      this.context.component.open = true;
+      
+      await tick();
+
+      const list = getPopupList(getPopupElement());
+      const listItems = Array.from(list.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)) as IListItemComponent[];
+      const leadingIcons = listItems.map(listItem => listItem.querySelector('i[slot=leading]'));
+
+      expect(leadingIcons[0]).toBeTruthy();
+      expect(leadingIcons[1]).toBeTruthy();
+    });
   });
 
   describe(`events`, function(this: ITestContext) {