feat: introduce Theme Editor tests (vaadin#17404)

Create test module for a Theme Editor.

Fixes vaadin#17313

flow-test-util/src/main/java/com/vaadin/flow/testutil/DevToolsElement.java

@@ -98,6 +98,10 @@ public void showExperimentalFeatures() {
         showTab("features");
     }
 
+    public void showThemeEditor() {
+        showTab("theme-editor");
+    }
+
     public List<String> listExperimentalFeatures() {
         return (List<String>) executeScript(
                 "return Array.from(arguments[0].shadowRoot.querySelectorAll('.features-tray .feature label')).map(e => e.textContent.trim())",

flow-tests/pom.xml

@@ -290,6 +290,7 @@
                 <module>test-live-reload</module>
                 <module>test-live-reload-multimodule</module>
                 <module>test-live-reload-multimodule/pom-devbundle.xml</module>
+                <module>test-theme-editor</module>
                 <module>test-redeployment</module>
 
                 <module>test-scalability</module>

flow-tests/test-theme-editor/metadata/vaadin-button.txt

@@ -0,0 +1,116 @@
+[
+  {
+    "selector": "vaadin-button",
+    "displayName": "Root element",
+    "properties": [
+      {
+        "propertyName": "background-color",
+        "displayName": "Background color",
+        "editorType": "color"
+      },
+      {
+        "propertyName": "border-color",
+        "displayName": "Border color",
+        "editorType": "color"
+      },
+      {
+        "propertyName": "border-width",
+        "displayName": "Border width",
+        "editorType": "range",
+        "presets": [
+          "0px",
+          "1px",
+          "2px",
+          "3px"
+        ],
+        "icon": "square"
+      },
+      {
+        "propertyName": "border-radius",
+        "displayName": "Border radius",
+        "editorType": "range",
+        "presets": [
+          "0",
+          "--lumo-border-radius-m",
+          "--lumo-border-radius-l"
+        ],
+        "icon": "square"
+      },
+      {
+        "propertyName": "--lumo-button-size",
+        "displayName": "Size",
+        "editorType": "range",
+        "presets": [
+          "--lumo-size-xs",
+          "--lumo-size-s",
+          "--lumo-size-m",
+          "--lumo-size-l",
+          "--lumo-size-xl"
+        ],
+        "icon": "square"
+      },
+      {
+        "propertyName": "padding-inline",
+        "displayName": "Padding",
+        "editorType": "range",
+        "presets": [
+          "--lumo-space-xs",
+          "--lumo-space-s",
+          "--lumo-space-m",
+          "--lumo-space-l",
+          "--lumo-space-xl"
+        ],
+        "icon": "square"
+      }
+    ]
+  },
+  {
+    "selector": "vaadin-button::part(label)",
+    "displayName": "Label",
+    "properties": [
+      {
+        "propertyName": "color",
+        "displayName": "Text color",
+        "editorType": "color",
+        "presets": [
+          "--lumo-header-text-color",
+          "--lumo-body-text-color",
+          "--lumo-secondary-text-color",
+          "--lumo-tertiary-text-color",
+          "--lumo-disabled-text-color",
+          "--lumo-primary-text-color",
+          "--lumo-error-text-color",
+          "--lumo-success-text-color"
+        ]
+      },
+      {
+        "propertyName": "font-size",
+        "displayName": "Font size",
+        "editorType": "range",
+        "presets": [
+          "--lumo-font-size-xxs",
+          "--lumo-font-size-xs",
+          "--lumo-font-size-s",
+          "--lumo-font-size-m",
+          "--lumo-font-size-l",
+          "--lumo-font-size-xl",
+          "--lumo-font-size-xxl",
+          "--lumo-font-size-xxxl"
+        ],
+        "icon": "font"
+      },
+      {
+        "propertyName": "font-weight",
+        "displayName": "Bold",
+        "editorType": "checkbox",
+        "checkedValue": "bold"
+      },
+      {
+        "propertyName": "font-style",
+        "displayName": "Italic",
+        "editorType": "checkbox",
+        "checkedValue": "italic"
+      }
+    ]
+  }
+]

flow-tests/test-theme-editor/pom.xml

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <artifactId>flow-tests</artifactId>
+        <groupId>com.vaadin</groupId>
+        <version>24.2-SNAPSHOT</version>
+    </parent>
+    <artifactId>flow-test-theme-editor</artifactId>
+    <name>Flow tests for Theme Editor</name>
+
+    <packaging>war</packaging>
+    <properties>
+        <maven.deploy.skip>true</maven.deploy.skip>
+        <vaadin.devmode.liveReload.enabled>true</vaadin.devmode.liveReload.enabled>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-lit-template</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-resources</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-common</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-dev-server</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>flow-test-lumo</artifactId>
+            <version>${project.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-button-flow</artifactId>
+            <version>24.1.6</version>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <!-- Run flow plugin to build frontend -->
+            <plugin>
+                <groupId>com.vaadin</groupId>
+                <artifactId>flow-maven-plugin</artifactId>
+            </plugin>
+            <!-- Run jetty before integration tests, and stop after -->
+            <plugin>
+                <groupId>org.eclipse.jetty</groupId>
+                <artifactId>jetty-maven-plugin</artifactId>
+                <configuration>
+                    <webApp>
+                        <!-- use a non-root context -->
+                        <contextPath>/context</contextPath>
+                    </webApp>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>

flow-tests/test-theme-editor/src/main/java/com/vaadin/flow/uitest/ui/ThemeEditorView.java

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2000-2023 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.flow.uitest.ui;
+
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.uitest.servlet.ViewTestLayout;
+
+@Route(value = "com.vaadin.flow.uitest.ui.ThemeEditorView", layout = ViewTestLayout.class)
+public class ThemeEditorView extends Div {
+    public ThemeEditorView() {
+        Button button = new Button("Click");
+        button.setId("button");
+        add(button);
+    }
+}

flow-tests/test-theme-editor/src/test/java/com/vaadin/flow/uitest/ui/AbstractThemeEditorIT.java

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2000-2023 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.flow.uitest.ui;
+
+import com.vaadin.flow.testutil.ChromeDeviceTest;
+
+public abstract class AbstractThemeEditorIT extends ChromeDeviceTest {
+
+    @Override
+    protected String getTestPath() {
+        return "/context" + super.getTestPath();
+    }
+
+    protected void open() {
+        open((String[]) null);
+    }
+}

flow-tests/test-theme-editor/src/test/java/com/vaadin/flow/uitest/ui/Metadata.java

@@ -0,0 +1,25 @@
+package com.vaadin.flow.uitest.ui;
+
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
+
+import java.util.List;
+
+@JsonIgnoreProperties(ignoreUnknown = true)
+public class Metadata {
+
+    private String selector;
+    private String displayName;
+    private List<Property> properties;
+
+    public String getSelector() {
+        return selector;
+    }
+
+    public String getDisplayName() {
+        return displayName;
+    }
+
+    public List<Property> getProperties() {
+        return properties;
+    }
+}

flow-tests/test-theme-editor/src/test/java/com/vaadin/flow/uitest/ui/Property.java

@@ -0,0 +1,23 @@
+package com.vaadin.flow.uitest.ui;
+
+import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
+
+@JsonIgnoreProperties(ignoreUnknown = true)
+public class Property {
+
+    private String propertyName;
+    private String displayName;
+    private String editorType;
+
+    public String getPropertyName() {
+        return propertyName;
+    }
+
+    public String getDisplayName() {
+        return displayName;
+    }
+
+    public String getEditorType() {
+        return editorType;
+    }
+}