Amended MQ provider to be selected via an autocomplete rather than ra…

…dio buttons (#953) Fixed failing tests now that provider is selected via autocomplete Fixed failing tests Removed commented out code
DFE-Digital · Dec 8, 2023 · bdcdc4d · bdcdc4d
1 parent 0242716
commit bdcdc4d
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 39 deletions.
diff --git a/TeachingRecordSystem/src/TeachingRecordSystem.SupportUi/Pages/Mqs/AddMq/Provider.cshtml b/TeachingRecordSystem/src/TeachingRecordSystem.SupportUi/Pages/Mqs/AddMq/Provider.cshtml
@@ -1,30 +1,43 @@
 @page "/mqs/add/provider"
 @model TeachingRecordSystem.SupportUi.Pages.Mqs.AddMq.ProviderModel
+@addTagHelper *, Joonasw.AspNetCore.SecurityHeaders
 @{
-    ViewBag.Title = "Training Provider";
+    ViewBag.Title = "Training provider";
+}
+
+@section Styles {
+    <link rel="stylesheet" href="~/Styles/Components/accessible-autocomplete.min.css" asp-append-version="true" />
+}
+
+@section Scripts {
+    <script src="~/Scripts/Components/accessible-autocomplete.min.js"></script>
+    <script asp-add-nonce="true">
+        window.onload = function () {
+            accessibleAutocomplete.enhanceSelectElement({
+                defaultValue: '',
+                selectElement: document.querySelector('#@nameof(Model.MqEstablishmentValue)')
+            })
+        }
+    </script>
 }
 
 @section BeforeContent {
     <govuk-back-link href="@LinkGenerator.PersonQualifications(Model.PersonId)">Back</govuk-back-link>
 }
 
 <span class="govuk-caption-l">Add a mandatory qualification - @Model.PersonName</span>
-<h1 class="govuk-heading-l" data-testid="title">@ViewBag.Title</h1>
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
         <form action="@LinkGenerator.MqAddProvider(Model.PersonId, Model.JourneyInstance!.InstanceId)" method="post">
-            <govuk-radios asp-for="MqEstablishmentValue" data-testid="provider-list">
-                @if (Model.MqEstablishments is not null)
+            <govuk-select asp-for="MqEstablishmentValue" label-class="govuk-label--l">
+                <govuk-select-label is-page-heading="true">Training provider</govuk-select-label>
+                <govuk-select-item value=""></govuk-select-item>
+                @foreach (var establishment in Model.MqEstablishments!)
                 {
-                    @foreach (var establishment in Model.MqEstablishments)
-                    {
-                        <govuk-radios-item value="@establishment.dfeta_Value">
-                            @establishment.dfeta_name
-                        </govuk-radios-item>
-                    }
+                    <govuk-select-item value="@establishment.dfeta_Value">@establishment.dfeta_name</govuk-select-item>
                 }
-            </govuk-radios>
+            </govuk-select>
 
             <div class="govuk-button-group">
                 <govuk-button type="submit">Continue</govuk-button>

diff --git a/TeachingRecordSystem/src/TeachingRecordSystem.SupportUi/Pages/Mqs/AddMq/Provider.cshtml.cs b/TeachingRecordSystem/src/TeachingRecordSystem.SupportUi/Pages/Mqs/AddMq/Provider.cshtml.cs
@@ -28,7 +28,7 @@ public ProviderModel(
     public string? PersonName { get; set; }
 
     [BindProperty]
-    [Display(Name = "Training Provider")]
+    [Display(Name = "Training provider")]
     public string? MqEstablishmentValue { get; set; }
 
     public dfeta_mqestablishment[]? MqEstablishments { get; set; }

diff --git a/...ingRecordSystem/src/TeachingRecordSystem.SupportUi/Pages/Mqs/EditMq/Provider/Index.cshtml b/...ingRecordSystem/src/TeachingRecordSystem.SupportUi/Pages/Mqs/EditMq/Provider/Index.cshtml
@@ -1,30 +1,43 @@
 @page "/mqs/{qualificationId}/provider/{handler?}"
 @model TeachingRecordSystem.SupportUi.Pages.Mqs.EditMq.Provider.IndexModel
+@addTagHelper *, Joonasw.AspNetCore.SecurityHeaders
 @{
-    ViewBag.Title = "Training Provider";
+    ViewBag.Title = "Training provider";
+}
+
+@section Styles {
+    <link rel="stylesheet" href="~/Styles/Components/accessible-autocomplete.min.css" asp-append-version="true" />
+}
+
+@section Scripts {
+    <script src="~/Scripts/Components/accessible-autocomplete.min.js"></script>
+    <script asp-add-nonce="true">
+        window.onload = function () {
+            accessibleAutocomplete.enhanceSelectElement({
+                defaultValue: '',
+                selectElement: document.querySelector('#@nameof(Model.MqEstablishmentValue)')
+            })
+        }
+    </script>
 }
 
 @section BeforeContent {
     <govuk-back-link href="@LinkGenerator.PersonQualifications(Model.PersonId!.Value)">Back</govuk-back-link>
 }
 
 <span class="govuk-caption-l">Change a mandatory qualification - @Model.PersonName</span>
-<h1 class="govuk-heading-l" data-testid="title">@ViewBag.Title</h1>
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
         <form action="@LinkGenerator.MqEditProvider(Model.QualificationId, Model.JourneyInstance!.InstanceId)" method="post">
-            <govuk-radios asp-for="MqEstablishmentValue" data-testid="provider-list">
-                @if (Model.MqEstablishments is not null)
+            <govuk-select asp-for="MqEstablishmentValue" label-class="govuk-label--l">
+                <govuk-select-label is-page-heading="true">Training provider</govuk-select-label>
+                <govuk-select-item value=""></govuk-select-item>
+                @foreach (var establishment in Model.MqEstablishments!)
                 {
-                    @foreach (var establishment in Model.MqEstablishments)
-                    {
-                        <govuk-radios-item value="@establishment.dfeta_Value">
-                            @establishment.dfeta_name
-                        </govuk-radios-item>
-                    }
+                    <govuk-select-item value="@establishment.dfeta_Value">@establishment.dfeta_name</govuk-select-item>
                 }
-            </govuk-radios>
+            </govuk-select>
 
             <div class="govuk-button-group">
                 <govuk-button type="submit">Continue</govuk-button>

diff --git a/TeachingRecordSystem/tests/TeachingRecordSystem.SupportUi.EndToEndTests/MqTests.cs b/TeachingRecordSystem/tests/TeachingRecordSystem.SupportUi.EndToEndTests/MqTests.cs
@@ -31,8 +31,9 @@ public async Task AddMq()
 
         await page.AssertOnAddMqProviderPage();
 
-        await page.CheckAsync($"label:text-is('{mqEstablishment.dfeta_name}')");
+        await page.FillAsync($"label:text-is('Training provider')", mqEstablishment.dfeta_name);
 
+        await page.FocusAsync("button:text-is('Continue')");
         await page.ClickContinueButton();
 
         await page.AssertOnAddMqSpecialismPage();
@@ -84,10 +85,9 @@ public async Task EditMqProvider()
 
         await page.AssertOnEditMqProviderPage(qualificationId);
 
-        await page.IsCheckedAsync($"label:text-is('{oldMqEstablishment.dfeta_name}')");
-
-        await page.CheckAsync($"label:text-is('{newMqEstablishment.dfeta_name}')");
+        await page.FillAsync($"label:text-is('Training provider')", newMqEstablishment.dfeta_name);
 
+        await page.FocusAsync("button:text-is('Continue')");
         await page.ClickContinueButton();
 
         await page.AssertOnEditMqProviderConfirmPage(qualificationId);

diff --git a/...ordSystem/tests/TeachingRecordSystem.SupportUi.Tests/PageTests/Mqs/AddMq/ProviderTests.cs b/...ordSystem/tests/TeachingRecordSystem.SupportUi.Tests/PageTests/Mqs/AddMq/ProviderTests.cs
@@ -1,3 +1,4 @@
+using AngleSharp.Html.Dom;
 using FormFlow;
 using TeachingRecordSystem.SupportUi.Pages.Mqs.AddMq;
 
@@ -62,11 +63,9 @@ public async Task Get_ValidRequestWithPopulatedDataInJourneyState_PopulatesModel
 
         // Assert
         var doc = await response.GetDocument();
-        var providerList = doc.GetElementByTestId("provider-list");
-        var radioButtons = providerList!.GetElementsByTagName("input");
-        var selectedProvider = radioButtons.SingleOrDefault(r => r.HasAttribute("checked"));
+        var selectedProvider = doc.GetElementById("MqEstablishmentValue") as IHtmlSelectElement;
         Assert.NotNull(selectedProvider);
-        Assert.Equal(mqEstablishmentValue, selectedProvider.GetAttribute("value"));
+        Assert.Equal(mqEstablishmentValue, selectedProvider.Value);
     }
 
     [Fact]

diff --git a/...em/tests/TeachingRecordSystem.SupportUi.Tests/PageTests/Mqs/EditMq/Provider/IndexTests.cs b/...em/tests/TeachingRecordSystem.SupportUi.Tests/PageTests/Mqs/EditMq/Provider/IndexTests.cs
@@ -1,3 +1,4 @@
+using AngleSharp.Html.Dom;
 using FormFlow;
 using TeachingRecordSystem.Core.Dqt.Models;
 using TeachingRecordSystem.SupportUi.Pages.Mqs.EditMq.Provider;
@@ -46,11 +47,9 @@ public async Task Get_ValidRequestWithUninitializedJourneyState_PopulatesModelFr
         Assert.Equal(StatusCodes.Status200OK, (int)response.StatusCode);
 
         var doc = await response.GetDocument();
-        var providerList = doc.GetElementByTestId("provider-list");
-        var radioButtons = providerList!.GetElementsByTagName("input");
-        var selectedProvider = radioButtons.SingleOrDefault(r => r.HasAttribute("checked"));
+        var selectedProvider = doc.GetElementById("MqEstablishmentValue") as IHtmlSelectElement;
         Assert.NotNull(selectedProvider);
-        Assert.Equal(databaseMqEstablishmentValue, selectedProvider.GetAttribute("value"));
+        Assert.Equal(databaseMqEstablishmentValue, selectedProvider.Value);
     }
 
     [Fact]
@@ -81,11 +80,9 @@ public async Task Get_ValidRequestWithInitializedJourneyState_PopulatesModelFrom
         Assert.Equal(StatusCodes.Status200OK, (int)response.StatusCode);
 
         var doc = await response.GetDocument();
-        var providerList = doc.GetElementByTestId("provider-list");
-        var radioButtons = providerList!.GetElementsByTagName("input");
-        var selectedProvider = radioButtons.SingleOrDefault(r => r.HasAttribute("checked"));
+        var selectedProvider = doc.GetElementById("MqEstablishmentValue") as IHtmlSelectElement;
         Assert.NotNull(selectedProvider);
-        Assert.Equal(journeyMqEstablishmentValue, selectedProvider.GetAttribute("value"));
+        Assert.Equal(journeyMqEstablishmentValue, selectedProvider.Value);
     }
 
     [Fact]