Adding UI test for Lucide icon picker

Author: barthamark

Lombiq.HelpfulExtensions.Tests.UI/Extensions/LucideTestCaseUITestContextExtensions.cs

@@ -0,0 +1,32 @@
+using Lombiq.Tests.UI.Extensions;
+using Lombiq.Tests.UI.Services;
+using OpenQA.Selenium;
+using Shouldly;
+using System.Threading.Tasks;
+
+namespace Lombiq.HelpfulExtensions.Tests.UI.Extensions;
+
+public static class LucideTestCaseUITestContextExtensions
+{
+    /// <summary>
+    /// Tests the Lombiq Helpful Extensions - Lucide feature.
+    /// </summary>
+    public static async Task TestLucideFeatureAsync(this UITestContext context)
+    {
+        const string iconName = "camera";
+
+        await context.SignInDirectlyAsync();
+
+        await context.EnableFeatureDirectlyAsync(FeatureIds.Lucide);
+        await context.ExecuteRecipeDirectlyAsync("Lombiq.HelpfulExtensions.Tests.UI.Lucide.Tests");
+        await context.CreateNewContentItemAsync("LucidePickerTest", onlyIfNotAlreadyThere: false);
+
+        await context.ClickReliablyOnAsync(By.CssSelector("[data-lucide-toggle]"));
+        await context.ClickAndFillInWithRetriesAsync(By.CssSelector("[data-lucide-search]"), iconName);
+        await context.ClickReliablyOnAsync(By.CssSelector($"[data-lucide-icon='{iconName}']"));
+
+        var selectedIcon = context.ExecuteScript("return document.querySelector(arguments[0])?.dataset.lucideIcon ?? '';", $"[data-lucide-icon='{iconName}'].active") as string;
+        selectedIcon.ShouldBe(iconName);
+        context.Get(By.CssSelector($"[data-lucide-preview] [data-lucide='{iconName}']"));
+    }
+}

Lombiq.HelpfulExtensions.Tests.UI/Recipes/Lombiq.HelpfulExtensions.Tests.UI.Lucide.Tests.recipe.json

@@ -0,0 +1,55 @@
+{
+  "name": "Lombiq.HelpfulExtensions.Tests.UI.Lucide.Tests",
+  "displayName": "Lombiq Helpful Extensions - Lucide test recipe",
+  "description": "Creates a simple content type for testing the Lucide icon picker editor.",
+  "author": "Lombiq Technologies",
+  "website": "https://github.com/Lombiq/Helpful-Extensions",
+  "version": "1.0",
+  "issetuprecipe": false,
+  "categories": [],
+  "tags": [],
+  "steps": [
+    {
+      "name": "ContentDefinition",
+      "ContentTypes": [
+        {
+          "Name": "LucidePickerTest",
+          "DisplayName": "Lucide Picker Test",
+          "Settings": {
+            "ContentTypeSettings": {
+              "Creatable": true,
+              "Listable": true,
+              "Draftable": true,
+              "Versionable": true
+            }
+          },
+          "ContentTypePartDefinitionRecords": [
+            {
+              "PartName": "LucidePickerTest",
+              "Name": "LucidePickerTest",
+              "Settings": {}
+            }
+          ]
+        }
+      ],
+      "ContentParts": [
+        {
+          "Name": "LucidePickerTest",
+          "Settings": {},
+          "ContentPartFieldDefinitionRecords": [
+            {
+              "FieldName": "TextField",
+              "Name": "Icon",
+              "Settings": {
+                "ContentPartFieldSettings": {
+                  "DisplayName": "Icon",
+                  "Editor": "LucideIconPicker"
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}