Render font icon correctly on the 'more' menu item (#8126)

* Render font icon correctly on the 'more' menu item

Fixes #8125

client/src/main/java/com/vaadin/client/ui/menubar/MenuBarConnector.java

@@ -25,9 +25,8 @@ import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.Paintable;
 import com.vaadin.client.TooltipInfo;
 import com.vaadin.client.UIDL;
-import com.vaadin.client.WidgetUtil;
 import com.vaadin.client.ui.AbstractComponentConnector;
-import com.vaadin.client.ui.ImageIcon;
+import com.vaadin.client.ui.Icon;
 import com.vaadin.client.ui.SimpleManagedLayout;
 import com.vaadin.client.ui.VMenuBar;
 import com.vaadin.shared.ui.ComponentStateUtil;
@@ -77,11 +76,11 @@ public class MenuBarConnector extends AbstractComponentConnector
             StringBuffer itemHTML = new StringBuffer();
 
             if (moreItemUIDL.hasAttribute("icon")) {
-                itemHTML.append("<img src=\""
-                        + WidgetUtil.escapeAttribute(client.translateVaadinUri(
-                                moreItemUIDL.getStringAttribute("icon")))
-                        + "\" class=\"" + ImageIcon.CLASSNAME
-                        + "\" alt=\"\" />");
+                Icon icon = client
+                        .getIcon(moreItemUIDL.getStringAttribute("icon"));
+                if (icon != null) {
+                    itemHTML.append(icon.getElement().getString());
+                }
             }
 
             String moreItemText = moreItemUIDL.getStringAttribute("text");

uitest/src/main/java/com/vaadin/tests/components/menubar/MenuBarIcons.java

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.menubar;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.FontAwesome;
+import com.vaadin.server.Resource;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.MenuBar;
+import com.vaadin.ui.MenuBar.MenuItem;
+
+@Theme("tests-valo")
+public class MenuBarIcons extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        MenuBar fontIconMenu = new MenuBar();
+        fontIconMenu.setId("fontIcon");
+        fontIconMenu.setWidth("400px");
+        fontIconMenu.addItem("Main", FontAwesome.MAIL_REPLY_ALL, null);
+        MenuItem hasSub = fontIconMenu.addItem("Has sub", FontAwesome.SUBWAY,
+                null);
+        hasSub.addItem("Sub item", FontAwesome.AMBULANCE, null);
+        for (int i = 0; i < 10; i++) {
+            fontIconMenu.addItem("Filler " + i, FontAwesome.ANGELLIST, null);
+        }
+        MenuItem more = fontIconMenu.getMoreMenuItem();
+        more.setText("More");
+        more.setIcon(FontAwesome.MOTORCYCLE);
+        addComponent(fontIconMenu);
+
+        MenuBar menu = new MenuBar();
+        menu.setId("image");
+        menu.setWidth("400px");
+        Resource imageIcon = new ThemeResource("img/email-reply.png");
+        menu.addItem("Main", imageIcon, null);
+        hasSub = menu.addItem("Has sub", imageIcon, null);
+        hasSub.addItem("Sub item", imageIcon, null);
+        for (int i = 0; i < 10; i++) {
+            menu.addItem("Filler " + i, imageIcon, null);
+        }
+        more = menu.getMoreMenuItem();
+        more.setText("More");
+        more.setIcon(imageIcon);
+        addComponent(menu);
+
+    }
+
+}

uitest/src/test/java/com/vaadin/tests/components/menubar/MenuBarIconsTest.java

@@ -0,0 +1,82 @@
+package com.vaadin.tests.components.menubar;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.server.FontAwesome;
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.MenuBarElement;
+import com.vaadin.tests.tb3.SingleBrowserTest;
+
+public class MenuBarIconsTest extends SingleBrowserTest {
+
+    @Test
+    public void fontIconsRendered() {
+        openTestURL();
+        MenuBarElement menu = $(MenuBarElement.class).id("fontIcon");
+        WebElement moreItem = menu
+                .findElements(By.className("v-menubar-menuitem")).get(3);
+
+        assertFontIcon(FontAwesome.MAIL_REPLY_ALL,
+                menu.findElement(By.vaadin("#Main")));
+        WebElement hasSubElement = menu.findElement(By.vaadin("#Has sub"));
+        assertFontIcon(FontAwesome.SUBWAY, hasSubElement);
+        assertFontIcon(FontAwesome.ANGELLIST,
+                menu.findElement(By.vaadin("#Filler 0")));
+
+        hasSubElement.click();
+
+        assertFontIcon(FontAwesome.AMBULANCE,
+                hasSubElement.findElement(By.vaadin("#Sub item")));
+        // Close sub menu
+        hasSubElement.click();
+
+        assertFontIcon(FontAwesome.MOTORCYCLE, moreItem);
+
+        moreItem.click();
+        WebElement filler5 = moreItem.findElement(By.vaadin("#Filler 5"));
+        assertFontIcon(FontAwesome.ANGELLIST, filler5);
+
+    }
+
+    @Test
+    public void imageIconsRendered() {
+        openTestURL();
+        MenuBarElement menu = $(MenuBarElement.class).id("image");
+        WebElement moreItem = menu
+                .findElements(By.className("v-menubar-menuitem")).get(3);
+
+        String image = "/tests-valo/img/email-reply.png";
+        assertImage(image, menu.findElement(By.vaadin("#Main")));
+        WebElement hasSubElement = menu.findElement(By.vaadin("#Has sub"));
+        assertImage(image, hasSubElement);
+        assertImage(image, menu.findElement(By.vaadin("#Filler 0")));
+
+        hasSubElement.click();
+
+        assertImage(image, hasSubElement.findElement(By.vaadin("#Sub item")));
+        // Close sub menu
+        hasSubElement.click();
+
+        assertImage(image, moreItem);
+
+        moreItem.click();
+        WebElement filler5 = moreItem.findElement(By.vaadin("#Filler 5"));
+        assertImage(image, filler5);
+
+    }
+
+    private void assertImage(String image, WebElement menuItem) {
+        WebElement imageElement = menuItem.findElement(By.className("v-icon"));
+        Assert.assertTrue(imageElement.getAttribute("src").endsWith(image));
+    }
+
+    private void assertFontIcon(FontAwesome expected, WebElement menuItem) {
+        WebElement mainIcon = menuItem.findElement(By.className("v-icon"));
+
+        Assert.assertEquals(expected.getCodepoint(),
+                mainIcon.getText().codePointAt(0));
+
+    }
+}