refactor(centralui): migrate Move/Rename/Compose dialogs to DialogService.ShowAsync host (T33b)

This commit is contained in:
Joseph Doherty
2026-06-18 19:53:19 -04:00
parent c8915e8638
commit e0d085481f
9 changed files with 327 additions and 464 deletions
@@ -250,13 +250,21 @@ public class DataConnectionsPageTests : BunitContext
},
connections: new[] { new DataConnection("PLC-1", "OpcUa", 1) { Id = 100 } });
// T33b: the move dialog is now opened via IDialogService.ShowAsync and rendered
// by the shared DialogHost (which lives in MainLayout in production). Render a
// host in the same DI scope so the dialog the page opens is displayed; the host's
// focus-trap JS interop runs as no-ops under loose mode.
JSInterop.Mode = JSRuntimeMode.Loose;
var host = Render<DialogHost>();
var cut = Render<DataConnectionsPage>();
FindToggleForLabel(cut, "Plant-A")!.Click();
cut.FindAll("button").First(b => b.TextContent.Contains("Move to Site")).Click();
host.Render();
// The dialog renders with a site picker; the current site is excluded.
var dialog = cut.Find(".modal.show");
var dialog = host.Find(".modal.show");
var optionLabels = dialog.QuerySelectorAll("select option")
.Select(o => o.TextContent).ToList();
Assert.Contains(optionLabels, l => l.Contains("Plant-B"));
@@ -8,65 +8,87 @@ using ZB.MOM.WW.ScadaBridge.CentralUI.Services;
namespace ZB.MOM.WW.ScadaBridge.CentralUI.Tests.Shared;
/// <summary>
/// bUnit tests for the <see cref="MoveDataConnectionDialog"/> (M9-T24b). The dialog
/// surfaces a target-site picker (excluding the connection's current site) and, on
/// confirm, dispatches a <c>MoveDataConnectionCommand</c> through the management
/// path via <see cref="IDataConnectionMoveService"/> — the SAME guard-running seam
/// the server uses. A guard error must be shown inline and the dialog must stay open;
/// a success must close the dialog and raise the refresh signal.
/// bUnit tests for the <see cref="MoveDataConnectionDialog"/> body component
/// (M9-T24b, migrated to the DialogService.ShowAsync host in T33b). The dialog is
/// now opened through <see cref="IDialogService.ShowAsync{TResult}"/>: a single
/// <c>DialogHost</c> owns the backdrop/header/focus-trap, and the body renders only
/// the target-site picker (excluding the connection's current site) plus its own
/// action buttons. On confirm the body dispatches a <c>MoveDataConnectionCommand</c>
/// through the management path via <see cref="IDataConnectionMoveService"/> — the
/// SAME guard-running seam the server uses. A guard error must be shown inline and
/// the dialog must stay open (the awaited ShowAsync task must NOT complete); a
/// success must close the dialog and resolve the task with <c>true</c> so the page
/// reloads the tree.
///
/// The service is substituted so the tests capture the dispatched (connectionId,
/// targetSiteId) and simulate both a success and a guard-error response without a
/// real ManagementActor in scope.
/// The tests render a real <see cref="DialogService"/> behind a live
/// <c>DialogHost</c> and open the body via <c>ShowAsync&lt;bool&gt;</c> so the
/// host-driven flow is exercised end to end. The move service is substituted so the
/// tests capture the dispatched (connectionId, targetSiteId) and simulate both a
/// success and a guard-error response without a real ManagementActor in scope. bUnit
/// cannot run real JS interop, so the host's <c>sbDialog.*</c> focus calls run in
/// <see cref="JSRuntimeMode.Loose"/> mode where they become no-ops.
/// </summary>
public class MoveDataConnectionDialogTests : BunitContext
{
private readonly IDataConnectionMoveService _service = Substitute.For<IDataConnectionMoveService>();
private readonly DialogService _dialog = new();
public MoveDataConnectionDialogTests()
{
Services.AddSingleton(_service);
// Register the concrete service as the interface so DialogHost (which injects
// IDialogService and casts to DialogService) resolves the same instance the
// test drives.
Services.AddSingleton<IDialogService>(_dialog);
JSInterop.Mode = JSRuntimeMode.Loose;
}
private IRenderedComponent<MoveDataConnectionDialog> RenderDialog(
/// <summary>
/// Renders a live <c>DialogHost</c> and opens the move dialog via
/// <c>ShowAsync&lt;bool&gt;</c>, returning the rendered host and the pending task
/// the page would await.
/// </summary>
private (IRenderedComponent<DialogHost> Host, Task<bool> Pending) OpenDialog(
IRenderedComponent<DialogHost> host,
int connectionId = 100,
string connectionName = "PLC-1",
bool visible = true,
IEnumerable<(int Id, string Label)>? siteOptions = null,
EventCallback? onMoved = null,
EventCallback<bool>? visibleChanged = null)
IEnumerable<(int Id, string Label)>? siteOptions = null)
{
siteOptions ??= new[] { (2, "Plant-B"), (3, "Plant-C") };
return Render<MoveDataConnectionDialog>(p => p
.Add(d => d.IsVisible, visible)
.Add(d => d.ConnectionId, connectionId)
.Add(d => d.ConnectionName, connectionName)
.Add(d => d.SiteOptions, siteOptions)
.Add(d => d.OnMoved, onMoved ?? default)
.Add(d => d.IsVisibleChanged, visibleChanged ?? default));
Task<bool> pending = null!;
host.InvokeAsync(() =>
{
pending = _dialog.ShowAsync<bool>(
$"Move '{connectionName}' to site…",
ctx => builder =>
{
builder.OpenComponent<MoveDataConnectionDialog>(0);
builder.AddAttribute(1, nameof(MoveDataConnectionDialog.Context), ctx);
builder.AddAttribute(2, nameof(MoveDataConnectionDialog.ConnectionId), connectionId);
builder.AddAttribute(3, nameof(MoveDataConnectionDialog.ConnectionName), connectionName);
builder.AddAttribute(4, nameof(MoveDataConnectionDialog.SiteOptions), siteOptions);
builder.CloseComponent();
});
}).GetAwaiter().GetResult();
host.Render();
return (host, pending);
}
[Fact]
public void Visible_RendersTargetSitePicker_WithSuppliedOptions()
public void ShownViaHost_RendersTargetSitePicker_WithSuppliedOptions()
{
// (a) The dialog opens with a site picker whose options are exactly the
// supplied target sites (the page excludes the connection's current site).
var cut = RenderDialog(siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
// (a) When opened via ShowAsync, the body renders a site picker whose options
// are exactly the supplied target sites (the page excludes the current site),
// and the connection name appears in the host header title.
var host = Render<DialogHost>();
var (cut, _) = OpenDialog(host, siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
var options = cut.FindAll("select option");
Assert.Contains(options, o => o.TextContent.Contains("Plant-B"));
Assert.Contains(options, o => o.TextContent.Contains("Plant-C"));
// Picker reflects the connection name in the header.
Assert.Contains("PLC-1", cut.Markup);
}
[Fact]
public void Hidden_RendersNothing()
{
var cut = RenderDialog(visible: false);
Assert.Empty(cut.Markup.Trim());
}
[Fact]
public void Confirm_DispatchesMoveCommand_WithConnectionAndTargetSiteIds()
{
@@ -75,7 +97,8 @@ public class MoveDataConnectionDialogTests : BunitContext
_service.MoveAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>())
.Returns(Task.FromResult(DataConnectionMoveResult.Ok()));
var cut = RenderDialog(connectionId: 100, siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
var host = Render<DialogHost>();
var (cut, _) = OpenDialog(host, connectionId: 100, siteOptions: new[] { (2, "Plant-B"), (3, "Plant-C") });
// Pick Plant-C (id 3) and confirm.
cut.Find("select").Change("3");
@@ -87,47 +110,41 @@ public class MoveDataConnectionDialogTests : BunitContext
[Fact]
public void GuardError_IsShownInline_AndDialogStaysOpen()
{
// (c) A guard-error response is rendered inline and the dialog does NOT close
// (IsVisibleChanged is not raised with false; OnMoved is not raised).
// (c) A guard-error response is rendered inline and the dialog does NOT close:
// the awaited ShowAsync task stays incomplete (no result resolved).
const string guardError =
"Cannot move data connection 'PLC-1' (ID 100): it is referenced by 1 instance binding(s).";
_service.MoveAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>())
.Returns(Task.FromResult(DataConnectionMoveResult.Fail(guardError)));
var closed = false;
var moved = false;
var cut = RenderDialog(
connectionId: 100,
siteOptions: new[] { (2, "Plant-B") },
onMoved: EventCallback.Factory.Create(this, () => moved = true),
visibleChanged: EventCallback.Factory.Create<bool>(this, v => { if (!v) closed = true; }));
var host = Render<DialogHost>();
var (cut, pending) = OpenDialog(host, connectionId: 100, siteOptions: new[] { (2, "Plant-B") });
cut.Find("select").Change("2");
cut.FindAll("button").First(b => b.TextContent.Contains("Move")).Click();
Assert.Contains(guardError, cut.Markup);
Assert.False(closed, "Dialog must stay open on a guard error.");
Assert.False(moved, "OnMoved must not fire on a guard error.");
Assert.False(pending.IsCompleted, "Dialog must stay open on a guard error.");
// The body is still rendered inside the host (not torn down).
Assert.NotNull(cut.Find("[data-test='move-connection-error']"));
}
[Fact]
public void Success_ClosesDialog_AndRaisesRefreshSignal()
public async Task Success_ClosesDialog_AndResolvesTrue()
{
// (d) A successful move closes the dialog and resolves the awaited task with
// true so the page reloads the tree.
_service.MoveAsync(Arg.Any<int>(), Arg.Any<int>(), Arg.Any<CancellationToken>())
.Returns(Task.FromResult(DataConnectionMoveResult.Ok()));
var closed = false;
var moved = false;
var cut = RenderDialog(
connectionId: 100,
siteOptions: new[] { (2, "Plant-B") },
onMoved: EventCallback.Factory.Create(this, () => moved = true),
visibleChanged: EventCallback.Factory.Create<bool>(this, v => { if (!v) closed = true; }));
var host = Render<DialogHost>();
var (cut, pending) = OpenDialog(host, connectionId: 100, siteOptions: new[] { (2, "Plant-B") });
cut.Find("select").Change("2");
cut.FindAll("button").First(b => b.TextContent.Contains("Move")).Click();
Assert.True(closed, "Dialog must close on success.");
Assert.True(moved, "OnMoved must fire on success to refresh the tree.");
var completed = await Task.WhenAny(pending, Task.Delay(TimeSpan.FromSeconds(2)));
Assert.Same(pending, completed);
Assert.True(await pending, "Dialog must resolve true on success so the page refreshes.");
}
}