refactor: make Icon use <vaadin-icon> web component (#1785)

vaadin · Jun 14, 2021 · e670705 · e670705
1 parent 06ab995
commit e670705
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 166 deletions.
diff --git a/vaadin-icons-flow-parent/pom.xml b/vaadin-icons-flow-parent/pom.xml
@@ -12,7 +12,6 @@
     <modules>
         <module>vaadin-icons-flow</module>
         <module>vaadin-icons-testbench</module>
-        <module>vaadin-icons-flow-demo</module>
     </modules>
     <profiles>
         <profile>

diff --git a/vaadin-icons-flow-parent/vaadin-icons-flow-demo/pom.xml b/vaadin-icons-flow-parent/vaadin-icons-flow-demo/pom.xml
diff --git a/vaadin-icons-flow-parent/vaadin-icons-flow-integration-tests/pom.xml b/vaadin-icons-flow-parent/vaadin-icons-flow-integration-tests/pom.xml
@@ -48,15 +48,15 @@
         </dependency>
         <dependency>
             <groupId>com.vaadin</groupId>
-            <artifactId>flow-component-demo-helpers</artifactId>
+            <artifactId>flow-html-components</artifactId>
         </dependency>
         <dependency>
             <groupId>org.slf4j</groupId>
             <artifactId>slf4j-simple</artifactId>
         </dependency>
         <dependency>
             <groupId>com.vaadin</groupId>
-            <artifactId>vaadin-icons-flow-demo</artifactId>
+            <artifactId>vaadin-ordered-layout-flow</artifactId>
             <version>${project.version}</version>
         </dependency>
         <dependency>

diff --git a/...in/flow/component/icon/demo/IconView.java → ...in/flow/component/icon/demo/IconView.java b/...in/flow/component/icon/demo/IconView.java → ...in/flow/component/icon/demo/IconView.java
@@ -15,27 +15,28 @@
  */
 package com.vaadin.flow.component.icon.demo;
 
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H2;
 import com.vaadin.flow.component.html.Label;
 import com.vaadin.flow.component.icon.Icon;
-import com.vaadin.flow.component.icon.IronIcon;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
-import com.vaadin.flow.demo.DemoView;
 import com.vaadin.flow.router.Route;
 
 /**
  * View for {@link Icon} demo.
  *
  * @author Vaadin Ltd
  */
-@Route("vaadin-icons")
-public class IconView extends DemoView {
+@Route("vaadin-icons/icon-view")
+@JsModule("@vaadin/vaadin-lumo-styles/vaadin-iconset.js")
+public class IconView extends Div {
 
-    @Override
-    public void initView() {
+    public IconView() {
         createBasicIconsView();
         createStyledIconView();
         createClickableIconsView();
@@ -49,7 +50,7 @@ private void createBasicIconsView() {
         Icon close = new Icon(VaadinIcon.CLOSE);
 
         // Creating an icon from the Lumo icons collection
-        IronIcon clock = new IronIcon("lumo", "clock");
+        Icon clock = new Icon("lumo", "clock");
 
         // end-source-example
 
@@ -119,4 +120,12 @@ private void createAllIconsView() {
         iconLayout.setId("all-icons");
         addCard("All available icons", iconLayout);
     }
+
+    private void addCard(String title, Component... components) {
+        VerticalLayout layout = new VerticalLayout();
+        layout.setMargin(true);
+        layout.add(new H2(title));
+        layout.add(components);
+        add(layout);
+    }
 }
diff --git a/...ons-flow-integration-tests/src/test/java/com/vaadin/flow/component/icon/tests/IconIT.java b/...ons-flow-integration-tests/src/test/java/com/vaadin/flow/component/icon/tests/IconIT.java
@@ -18,18 +18,26 @@
 import java.util.List;
 
 import org.junit.Assert;
+import org.junit.Before;
 import org.junit.Test;
 import org.openqa.selenium.By;
 import org.openqa.selenium.WebElement;
 
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.icon.demo.IconView;
-import com.vaadin.tests.ComponentDemoTest;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.tests.AbstractComponentIT;
 
 /**
  * Integration tests for the {@link IconView}.
  */
-public class IconIT extends ComponentDemoTest {
+@TestPath("vaadin-icons/icon-view")
+public class IconIT extends AbstractComponentIT {
+
+    @Before
+    public void init() {
+        open();
+    }
 
     @Test
     public void basicIcons() {
@@ -45,22 +53,21 @@ public void styledIcon() {
         assertCssValue(icon, "width", "100px");
         assertCssValue(icon, "height", "100px");
 
-        // Selenium returns the color in rgba-format for some reason
-        assertCssValue(icon, "color", "rgba(255, 165, 0, 1)");
+        assertCssValue(icon, "fill", "rgb(255, 165, 0)");
     }
 
     @Test
     public void clickableIcon() {
-        WebElement message = layout.findElement(By.id("clickable-message"));
+        WebElement message = findElement(By.id("clickable-message"));
         Assert.assertEquals("", message.getText());
 
-        WebElement icon = layout.findElement(By.id("clickable-v-icon"));
+        WebElement icon = findElement(By.id("clickable-v-icon"));
         icon.click();
 
         Assert.assertEquals("The VAADIN_V icon was clicked!",
                 message.getText());
 
-        icon = layout.findElement(By.id("clickable-h-icon"));
+        icon = findElement(By.id("clickable-h-icon"));
         icon.click();
 
         Assert.assertEquals("The VAADIN_H icon was clicked!",
@@ -69,9 +76,10 @@ public void clickableIcon() {
 
     @Test
     public void allAvailableIcons() {
-        WebElement allIcons = layout.findElement(By.id("all-icons"));
+        WebElement allIcons = findElement(By.id("all-icons"));
         List<WebElement> labels = allIcons.findElements(By.tagName("label"));
-        List<WebElement> icons = allIcons.findElements(By.tagName("iron-icon"));
+        List<WebElement> icons = allIcons
+                .findElements(By.tagName("vaadin-icon"));
 
         Assert.assertEquals(VaadinIcon.values().length, labels.size());
         Assert.assertEquals(VaadinIcon.values().length, icons.size());
@@ -80,9 +88,33 @@ public void allAvailableIcons() {
             WebElement label = labels.get(i);
             WebElement icon = icons.get(i);
             String enumName = VaadinIcon.values()[i].name();
+            String normalizedIconName = normalize(VaadinIcon.values()[i])
+                    .name();
             Assert.assertEquals(enumName, label.getText());
             assertIconProperty(icon, "vaadin",
-                    enumName.toLowerCase().replace('_', '-'));
+                    normalizedIconName.toLowerCase().replace('_', '-'));
+        }
+    }
+
+    /**
+     * In case a the given icon is one of the deprecated values, the
+     * corresponding updated VaadinIcon is returned. Otherwise the given
+     * VaadinIcon is returned as such.
+     */
+    private static VaadinIcon normalize(VaadinIcon icon) {
+        switch (icon) {
+        case BUSS:
+            return VaadinIcon.BUS;
+        case FUNCION:
+            return VaadinIcon.FUNCTION;
+        case MEGAFONE:
+            return VaadinIcon.MEGAPHONE;
+        case PALETE:
+            return VaadinIcon.PALETTE;
+        case TRENDIND_DOWN:
+            return VaadinIcon.TRENDING_DOWN;
+        default:
+            return icon;
         }
     }
 
@@ -101,9 +133,4 @@ private void assertCssValue(WebElement element, String propertyName,
             String expectedValue) {
         Assert.assertEquals(expectedValue, element.getCssValue(propertyName));
     }
-
-    @Override
-    protected String getTestPath() {
-        return ("/vaadin-icons");
-    }
 }