OSOE-920: Create a reusable widget for the carousel in Lombiq.UIKit

Lombiq.UIKit.Widgets.Tests.UI/Extensions/TestCaseUITestContextExtensions.cs

@@ -0,0 +1,57 @@
+using Atata;
+using Lombiq.Tests.UI.Extensions;
+using Lombiq.Tests.UI.Services;
+using OpenQA.Selenium;
+using Shouldly;
+using System;
+using System.Text.Json;
+using System.Threading.Tasks;
+
+namespace Lombiq.UIKit.Widgets.Tests.UI.Extensions;
+
+public static class TestCaseUITestContextExtensions
+{
+    private const string CarouselWidgetPartSettingsUrl = "/ContentTypes/CarouselWidget/ContentParts/CarouselWidgetPart/Edit";
+    private const string CarouselWidgetExamplePageUrl = "/carousel-widget-example";
+
+    public static async Task TestCarouselWidgetBehaviorAsync(this UITestContext context)
+    {
+        await context.GoToRelativeUrlAsync(CarouselWidgetExamplePageUrl);
+        context.TestCarouselWidgetContainerExistence();
+        context.TestSlickCarouselExistence();
+        context.TestCorrectNumberOfItemsIsDisplayed();
+    }
+
+    public static async Task TestCarouselWidgetOptionsAsync(this UITestContext context)
+    {
+        int slidesToShow = 3;
+        bool showDots = false;
+
+        await context.SignInDirectlyAndGoToAdminRelativeUrlAsync(CarouselWidgetPartSettingsUrl);
+        context.WaitForPageLoad();
+        var options = JsonSerializer.Serialize(new { slidesToShow, dots = showDots });
+        context.ExecuteScript($"codeMirrorJsonEditor.setValue('{options}')");
+        await context.ClickReliablyOnSubmitAsync();
+        await context.GoToRelativeUrlAsync(CarouselWidgetExamplePageUrl);
+        context.TestCorrectNumberOfItemsIsDisplayed(slidesToShow);
+        context.TestCarouselWidgetDotsVisibility(showDots);
+    }
+
+    public static void TestCorrectNumberOfItemsIsDisplayed(this UITestContext context, int numberOfItems = 1) =>
+        context.GetAll(By.ClassName("slick-active")).Count.ShouldBe(numberOfItems);
+
+    public static void TestSlickCarouselExistence(this UITestContext context) =>
+        context.Exists(By.ClassName("slickCarousel__carousel"));
+
+    public static void TestCarouselWidgetContainerExistence(this UITestContext context) =>
+        context.Exists(By.ClassName("carouselWidget"));
+
+    public static void TestCarouselWidgetDotsVisibility(this UITestContext context, bool showDots)
+    {
+        var by = By.CssSelector("ul.slick-dots");
+        if (showDots)
+            context.Exists(by);
+        else
+            context.GetAll(by).Count.ShouldBe(0);
+    }
+}

Lombiq.UIKit.Widgets.Tests.UI/Lombiq.UIKit.Widgets.Tests.UI.csproj

@@ -0,0 +1,36 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <Title>Lombiq UI Kit Widgets for Orchard Core - UI Test Extensions</Title>
+    <Authors>Lombiq Technologies</Authors>
+    <Copyright>Copyright © 2022, Lombiq Technologies Ltd.</Copyright>
+    <Description>Lombiq UI Kit for Orchard Core - UI Test Extensions: Extensions to aid in UI testing Lombiq UI Kit for Orchard Core.</Description>
+    <PackageIcon>NuGetIcon.png</PackageIcon>
+    <PackageTags>OrchardCore;Lombiq;AspNetCore;UIKit</PackageTags>
+    <RepositoryUrl>https://github.com/Lombiq/Orchard-Chart.js</RepositoryUrl>
+    <PackageProjectUrl>https://github.com/Lombiq/Orchard-UIKit/blob/dev/Lombiq.UIKit.Widgets.Tests.UI/Readme.md</PackageProjectUrl>
+    <PackageLicenseExpression>BSD-3-Clause</PackageLicenseExpression>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Lombiq.UIKit.Widgets\Lombiq.UIKit.Widgets.csproj" />
+  </ItemGroup>
+
+  <ItemGroup Condition="'$(NuGetBuild)' != 'true'">
+    <ProjectReference Include="..\..\..\..\test\Lombiq.UITestingToolbox\Lombiq.Tests.UI\Lombiq.Tests.UI.csproj" />
+  </ItemGroup>
+
+  <ItemGroup Condition="'$(NuGetBuild)' == 'true'">
+    <PackageReference Include="Lombiq.Tests.UI" Version="12.0.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="NuGetIcon.png" Pack="true" PackagePath="" />
+    <None Include="Readme.md" Pack="true" PackagePath="" />
+  </ItemGroup>
+
+</Project>

Lombiq.UIKit.Widgets.Tests.UI/Readme.md

@@ -0,0 +1,13 @@
+# Lombiq UI Kit for Orchard Core - UI Test Extensions
+
+## About
+
+Extension methods that test various features in UI Kit for Orchard Core.
+
+Call these from a UI test project that also references _Lombiq.UIKit._ to verify the module's basic features; as seen in [Open-Source Orchard Core Extensions](https://github.com/Lombiq/Open-Source-Orchard-Core-Extensions).
+
+## Contributing and support
+
+Bug reports, feature requests, comments, questions, code contributions and love letters are warmly welcome. You can send them to us via GitHub issues and pull requests. Please adhere to our [open-source guidelines](https://lombiq.com/open-source-guidelines) while doing so.
+
+This project is developed by [Lombiq Technologies](https://lombiq.com/). Commercial-grade support is available through Lombiq.

Lombiq.UIKit.Widgets/Constants/DefaultValues.cs

@@ -0,0 +1,6 @@
+namespace Lombiq.UIKit.Widgets.Constants;
+
+public static class DefaultValues
+{
+    public const string CarouselWidgetPartOptions = "{}";
+}

Lombiq.UIKit.Widgets/Handlers/SlidePartHandler.cs

@@ -0,0 +1,10 @@
+using Lombiq.UIKit.Widgets.Models;
+using OrchardCore.ContentManagement.Handlers;
+
+namespace Lombiq.UIKit.Widgets.Handlers;
+
+public class SlidePartHandler : ContentPartHandler<SlidePart>
+{
+    public override Task UpdatedAsync(UpdateContentContext context, SlidePart part) =>
+        Task.Run(() => context.ContentItem.DisplayText = part.Title.Text);
+}

Lombiq.UIKit.Widgets/Lombiq.UIKit.Widgets.csproj

@@ -0,0 +1,28 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <FrameworkReference Include="Microsoft.AspNetCore.App" />
+  </ItemGroup>
+
+
+  <ItemGroup>
+    <PackageReference Include="OrchardCore.Module.Targets" Version="2.1.0" />
+    <PackageReference Include="OrchardCore.Contents" Version="2.1.0" />
+    <PackageReference Include="OrchardCore.DisplayManagement" Version="2.1.0" />
+    <PackageReference Include="OrchardCore.ResourceManagement" Version="2.1.0" />
+    <PackageReference Include="OrchardCore.Flows" Version="2.1.0" />
+    <PackageReference Include="OrchardCore.Media" Version="2.1.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Lombiq.UIKit\Lombiq.UIKit.csproj" />
+  </ItemGroup>
+
+</Project>

Lombiq.UIKit.Widgets/Manifest.cs

@@ -0,0 +1,9 @@
+using OrchardCore.Modules.Manifest;
+
+[assembly: Module(
+    Name = "Lombiq UI Kit Widgets",
+    Author = "Lombiq Technologies",
+    Version = "0.0.1",
+    Description = "Module for reusable widgets based on Lombiq UI Kit.",
+    Website = "https://github.com/Lombiq/Orchard-UIKit"
+)]

Lombiq.UIKit.Widgets/Migrations/CarouselWidgetMigrations.cs

@@ -0,0 +1,54 @@
+using Lombiq.HelpfulLibraries.OrchardCore.Contents;
+using Lombiq.UIKit.Widgets.Models;
+using Lombiq.UIKit.Widgets.Settings;
+using OrchardCore.ContentManagement.Metadata;
+using OrchardCore.ContentManagement.Metadata.Settings;
+using OrchardCore.Data.Migration;
+using OrchardCore.Flows.Models;
+using OrchardCore.Media.Settings;
+
+namespace Lombiq.UIKit.Widgets.Migrations;
+
+public class CarouselWidgetMigrations : DataMigration
+{
+    private readonly IContentDefinitionManager _contentDefinitionManager;
+
+    public CarouselWidgetMigrations(IContentDefinitionManager contentDefinitionManager) => _contentDefinitionManager = contentDefinitionManager;
+
+    public async Task<int> CreateAsync()
+    {
+        await _contentDefinitionManager.AlterPartDefinitionAsync<SlidePart>(
+            part =>
+            {
+                part.WithField(part => part.Title, field => field.WithPosition("0"));
+                part.WithField(part => part.Image, field => field.WithSettings(new MediaFieldSettings
+                {
+                    Multiple = false,
+                }).WithPosition("1")
+                );
+            }
+            );
+
+        await _contentDefinitionManager.AlterPartDefinitionAsync(nameof(CarouselWidgetPart), part => part
+        .Attachable()
+        .WithSettings(new CarouselWidgetPartSettings())
+        );
+
+        await _contentDefinitionManager.AlterTypeDefinitionAsync("Slide", type =>
+        type
+            .Securable()
+            .WithPart(nameof(SlidePart)));
+
+        await _contentDefinitionManager.AlterTypeDefinitionAsync("CarouselWidget", type =>
+        type
+            .Securable()
+            .WithPart(nameof(CarouselWidgetPart), part => part.WithSettings(new CarouselWidgetPartSettings()))
+            .WithPart(nameof(BagPart), part => part.WithSettings(new BagPartSettings
+            {
+                ContainedContentTypes = ["Slide"],
+            })
+            ).Stereotype(CommonStereotypes.Widget));
+
+        return 1;
+    }
+}

Lombiq.UIKit.Widgets/Models/CarouselWidgetPart.cs

@@ -0,0 +1,4 @@
+using OrchardCore.ContentManagement;
+
+namespace Lombiq.UIKit.Widgets.Models;
+public class CarouselWidgetPart : ContentPart;

Lombiq.UIKit.Widgets/Models/SlidePart.cs

@@ -0,0 +1,10 @@
+using OrchardCore.ContentFields.Fields;
+using OrchardCore.ContentManagement;
+using OrchardCore.Media.Fields;
+
+namespace Lombiq.UIKit.Widgets.Models;
+public class SlidePart : ContentPart
+{
+    public TextField Title { get; set; } = new();
+    public MediaField Image { get; set; } = new();
+}