Add scrolling to demo steps and improve test assertions

Co-authored-by: dwarwick <15970276+dwarwick@users.noreply.github.com>

Author: Copilot

JwtIdentity.Client/Pages/Survey/BranchingSurveyEdit.razor

@@ -119,7 +119,7 @@ else
                 <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="mb-3">
                     <MudText Typo="Typo.subtitle1" Class="font-weight-bold">Question Groups</MudText>
                     <DemoBorder CurrentDemoStep="@DemoStep" StepsToShow="@(new List<int>() { 1, 5 })" IsButton="true">
-                        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="AddQuestionGroup" StartIcon="@Icons.Material.Filled.Add" Disabled="@IsAddGroupDisabled()">
+                        <MudButton id="AddGroupButton" Variant="Variant.Filled" Color="Color.Primary" OnClick="AddQuestionGroup" StartIcon="@Icons.Material.Filled.Add" Disabled="@IsAddGroupDisabled()">
                             Add Group
                         </MudButton>
                     </DemoBorder>
@@ -136,7 +136,8 @@ else
                     @foreach (var group in QuestionGroups.OrderBy(g => g.GroupNumber))
                     {
                         var colorClass = $"group-color-{group.GroupNumber % 10}";
-                        <MudExpansionPanel Class="mb-3">
+                        var panelId = $"Group{group.GroupNumber}Panel";
+                        <MudExpansionPanel id="@panelId" Class="mb-3">
                             <TitleContent>
                                 <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Style="width: 100%;">
                                     <span class="@($"group-badge group-badge-{group.GroupNumber % 10}")">Group @group.GroupNumber</span>
@@ -157,7 +158,7 @@ else
                                             @if (group.GroupNumber == 1)
                                             {
                                                 <DemoBorder CurrentDemoStep="@DemoStep" StepsToShow="@(new List<int>() { 2, 3 })">
-                                                    <MudTextField Label="Group Name" Value="@group.GroupName"
+                                                    <MudTextField id="Group1NameField" Label="Group Name" Value="@group.GroupName"
                                                                   Variant="Variant.Outlined"
                                                                   HelperText="Optional: Give this group a descriptive name"
                                                                   ReadOnly="@IsGroupNameReadOnly(group.GroupNumber)"
@@ -180,7 +181,7 @@ else
                                             else if (group.GroupNumber == 2)
                                             {
                                                 <DemoBorder CurrentDemoStep="@DemoStep" StepsToShow="@(new List<int>() { 6, 7 })">
-                                                    <MudTextField Label="Group Name" Value="@group.GroupName"
+                                                    <MudTextField id="Group2NameField" Label="Group Name" Value="@group.GroupName"
                                                                   Variant="Variant.Outlined"
                                                                   HelperText="Optional: Give this group a descriptive name"
                                                                   ReadOnly="@IsGroupNameReadOnly(group.GroupNumber)"

JwtIdentity.Client/Pages/Survey/BranchingSurveyEdit.razor.cs

@@ -14,6 +14,7 @@ public class BranchingSurveyEditModel : BlazorBase
         protected bool IsDemoUser { get; set; }
         protected int DemoStep { get; set; }
         protected string DemoType { get; set; }
+        private int _previousDemoStep = -1;
         protected Origin AnchorOrigin { get; set; } = Origin.BottomRight;
         protected Origin TransformOrigin { get; set; } = Origin.TopLeft;
         protected bool ShowDemoStep(int step) => IsDemoUser && DemoType == "branching" && DemoStep == step;
@@ -62,6 +63,57 @@ protected override async Task OnInitializedAsync()
             BuildSyncfusionDiagram();
         }
 
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                var isMobile = await JSRuntime.InvokeAsync<bool>("isMobile");
+                if (isMobile)
+                {
+                    AnchorOrigin = Origin.BottomCenter;
+                    TransformOrigin = Origin.TopCenter;
+                }
+                StateHasChanged();
+            }
+
+            // Scroll to the current demo step when it changes
+            if (IsDemoUser && DemoStep != _previousDemoStep)
+            {
+                await ScrollToCurrentDemoStep();
+                _previousDemoStep = DemoStep;
+            }
+        }
+
+        private async Task ScrollToCurrentDemoStep()
+        {
+            var id = DemoStep switch
+            {
+                1 => "AddGroupButton",      // Step 1: Add first group
+                2 => "Group1Panel",          // Step 2: Group 1 created, ready to name
+                3 => "Group1NameField",      // Step 3: Name Group 1
+                5 => "AddGroupButton",       // Step 5: Add second group
+                6 => "Group2Panel",          // Step 6: Group 2 created, ready to name
+                7 => "Group2NameField",      // Step 7: Name Group 2
+                9 => "QuestionGroupSelector_Q3",  // Step 9: Move Q3 to Group 1
+                11 => "QuestionGroupSelector_Q4", // Step 11: Move Q4 to Group 2
+                13 => "BranchingSelector_Q1",     // Step 13: Configure Q1 branching
+                15 => "BranchingSelector_Q2",     // Step 15: Configure Q2 branching
+                _ => null
+            };
+
+            if (!string.IsNullOrEmpty(id))
+            {
+                await JSRuntime.InvokeVoidAsync(
+                    "scrollToElement",
+                    id,
+                    new { behavior = "smooth", block = "center", headerOffset = 0 }
+                );
+
+                // Ensure any demo popover tied to the element renders after the scroll
+                StateHasChanged();
+            }
+        }
+
         protected void DiagramCreated()
         {
             FitOptions options = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content };

bUnitTests/BranchingPageDemoTests.cs

@@ -188,8 +188,9 @@ public void BranchingPage_Step1_PromptsToAddFirstGroup()
             // Wait for loading to complete
             cut.WaitForState(() => cut.Markup.Contains("Add Group"), timeout: TimeSpan.FromSeconds(5));
 
-            // Assert - Prompt to add first group at step 1
+            // Assert - At step 1, Add Group button should be present and enabled (has demo-primary-border class)
             Assert.That(cut.Markup, Does.Contain("Add Group"));
+            Assert.That(cut.Markup, Does.Contain("demo-primary-border")); // Demo border shows it's the active step
         }
 
         [Test]
@@ -219,10 +220,9 @@ public void BranchingPage_AddGroup_AdvancesToStep2()
             // Wait for loading
             cut.WaitForState(() => cut.Markup.Contains("Add Group"), timeout: TimeSpan.FromSeconds(5));
 
-            // Assert - Should have Add Group button
+            // Assert - At step 1, Add Group button should be present with demo border
             Assert.That(cut.Markup, Does.Contain("Add Group"));
-            // Verify component loaded successfully
-            Assert.That(cut.Markup, Does.Contain("Survey Branching"));
+            Assert.That(cut.Markup, Does.Contain("demo-primary-border")); // Demo border shows it's active
         }
 
         [Test]