EYQB-479: Added new error summary block to the question pages

src/Dfe.EarlyYearsQualification.Content/Entities/DateQuestionPage.cs

@@ -15,4 +15,8 @@ public class DateQuestionPage
     public string YearLabel { get; init; } = string.Empty;
 
     public NavigationLink? BackButton { get; init; }
+
+    public string ErrorBannerHeading { get; init; } = string.Empty;
+
+    public string ErrorBannerLinkText { get; init; } = string.Empty;
 }

src/Dfe.EarlyYearsQualification.Content/Entities/DropdownQuestionPage.cs

@@ -15,4 +15,8 @@ public class DropdownQuestionPage
     public string DefaultText { get; init; } = string.Empty;
 
     public NavigationLink? BackButton { get; init; }
+
+    public string ErrorBannerHeading { get; init; } = string.Empty;
+
+    public string ErrorBannerLinkText { get; init; } = string.Empty;
 }

src/Dfe.EarlyYearsQualification.Content/Entities/RadioQuestionPage.cs

@@ -17,4 +17,8 @@ public class RadioQuestionPage
     public Document? AdditionalInformationBody { get; init; }
 
     public NavigationLink? BackButton { get; init; }
+
+    public string ErrorBannerHeading { get; init; } = string.Empty;
+
+    public string ErrorBannerLinkText { get; init; } = string.Empty;
 }

src/Dfe.EarlyYearsQualification.Mock/Content/MockContentfulService.cs

@@ -475,7 +475,9 @@ private static RadioQuestionPage CreateRadioQuestionPage(string question, List<O
                                     DisplayText = "TEST",
                                     Href = backButtonUrl,
                                     OpenInNewTab = false
-                                }
+                                },
+                   ErrorBannerHeading = "There is a problem",
+                   ErrorBannerLinkText = "Test error banner link text"
                };
     }
 
@@ -494,7 +496,9 @@ private static DateQuestionPage CreateDateQuestionPage()
                                     DisplayText = "TEST",
                                     Href = "/questions/where-was-the-qualification-awarded",
                                     OpenInNewTab = false
-                                }
+                                },
+                   ErrorBannerHeading = "There is a problem",
+                   ErrorBannerLinkText = "Test error banner link text"
                };
     }
 
@@ -513,7 +517,9 @@ private static DropdownQuestionPage CreateDropdownPage()
                                     DisplayText = "TEST",
                                     Href = "/questions/what-level-is-the-qualification",
                                     OpenInNewTab = false
-                                }
+                                },
+                   ErrorBannerHeading = "There is a problem",
+                   ErrorBannerLinkText = "Test error banner link text"
                };
     }
 

src/Dfe.EarlyYearsQualification.Web/Controllers/QuestionsController.cs

@@ -234,6 +234,8 @@ private async Task<RadioQuestionModel> MapRadioModel(RadioQuestionModel model, R
         model.AdditionalInformationHeader = question.AdditionalInformationHeader;
         model.AdditionalInformationBody = await renderer.ToHtml(question.AdditionalInformationBody);
         model.BackButton = question.BackButton;
+        model.ErrorBannerHeading = question.ErrorBannerHeading;
+        model.ErrorBannerLinkText = question.ErrorBannerLinkText;
         return model;
     }
 
@@ -249,6 +251,8 @@ private static DateQuestionModel MapDateModel(DateQuestionModel model, DateQuest
         model.MonthLabel = question.MonthLabel;
         model.YearLabel = question.YearLabel;
         model.BackButton = question.BackButton;
+        model.ErrorBannerHeading = question.ErrorBannerHeading;
+        model.ErrorBannerLinkText = question.ErrorBannerLinkText;
         return model;
     }
 
@@ -288,7 +292,9 @@ var uniqueAwardingOrganisations
                                  Text = awardingOrg
                              });
         }
-
+
+        model.ErrorBannerHeading = question.ErrorBannerHeading;
+        model.ErrorBannerLinkText = question.ErrorBannerLinkText;
         return model;
     }
 }

src/Dfe.EarlyYearsQualification.Web/Models/Content/QuestionModels/BaseQuestionModel.cs

@@ -17,4 +17,8 @@ public abstract class BaseQuestionModel
     public bool HasErrors { get; set; }
 
     public NavigationLink? BackButton { get; set; }
+
+    public string ErrorBannerHeading { get; set; } = string.Empty;
+
+    public string ErrorBannerLinkText { get; set; } = string.Empty;
 }

src/Dfe.EarlyYearsQualification.Web/Models/ErrorSummaryModel.cs

@@ -0,0 +1,10 @@
+namespace Dfe.EarlyYearsQualification.Web.Models;
+
+public class ErrorSummaryModel
+{
+    public string ErrorBannerHeading { get; init; } = string.Empty;
+
+    public string ErrorBannerLinkText { get; init; } = string.Empty;
+
+    public string ElementLinkId { get; init; } = string.Empty;
+}

src/Dfe.EarlyYearsQualification.Web/Views/Questions/Date.cshtml

@@ -12,6 +12,15 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
+        @if (Model.HasErrors)
+        {
+            await Html.RenderPartialAsync("Partials/ErrorSummary", new ErrorSummaryModel
+                                                                   {
+                                                                       ErrorBannerHeading = Model.ErrorBannerHeading,
+                                                                       ErrorBannerLinkText = Model.ErrorBannerLinkText,
+                                                                       ElementLinkId = "date-started-month"
+                                                                   });
+        }
         @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
         {
             <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">

src/Dfe.EarlyYearsQualification.Web/Views/Questions/Dropdown.cshtml

@@ -23,6 +23,15 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
+        @if (Model.HasErrors)
+        {
+            await Html.RenderPartialAsync("Partials/ErrorSummary", new ErrorSummaryModel
+                                                                    {
+                                                                        ErrorBannerHeading = Model.ErrorBannerHeading,
+                                                                        ErrorBannerLinkText = Model.ErrorBannerLinkText,
+                                                                        ElementLinkId = Model.DropdownId
+                                                                    });
+        }
         @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
         {
             <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">

src/Dfe.EarlyYearsQualification.Web/Views/Questions/Radio.cshtml

@@ -12,6 +12,15 @@
 
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
+        @if (Model.HasErrors)
+        {
+            await Html.RenderPartialAsync("Partials/ErrorSummary", new ErrorSummaryModel
+                                                                    {
+                                                                        ErrorBannerHeading = Model.ErrorBannerHeading,
+                                                                        ErrorBannerLinkText = Model.ErrorBannerLinkText,
+                                                                        ElementLinkId = Model.Options[0].Value
+                                                                    });
+        }
         @using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post))
         {
             <div class="govuk-form-group @(Model.HasErrors ? "govuk-form-group--error" : "")">

src/Dfe.EarlyYearsQualification.Web/Views/Shared/Partials/ErrorSummary.cshtml

@@ -0,0 +1,16 @@
+@model Dfe.EarlyYearsQualification.Web.Models.ErrorSummaryModel
+
+<div id="error-banner" class="govuk-error-summary" data-module="govuk-error-summary">
+    <div role="alert">
+        <h2 class="govuk-error-summary__title">
+            @Model.ErrorBannerHeading
+        </h2>
+        <div class="govuk-error-summary__body">
+            <ul class="govuk-list govuk-error-summary__list">
+                <li>
+                    <a id="error-banner-link" href="#@{@Model.ElementLinkId}">@Model.ErrorBannerLinkText</a> 
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

tests/Dfe.EarlyYearsQualification.E2ETests/cypress/e2e/pages/question-spec.cy.js

@@ -17,6 +17,7 @@ describe("A spec that tests question pages", () => {
     it("shows an error message when a user doesnt select an option on the where-was-the-qualification-awarded page", () => {
         cy.visit("/questions/where-was-the-qualification-awarded");
 
+        cy.get(".govuk-error-summary").should("not.exist");
         cy.get("#option-error").should("not.exist");
         cy.get(".govuk-form-group").should("not.have.class", "govuk-form-group--error");
 
@@ -25,6 +26,10 @@ describe("A spec that tests question pages", () => {
             expect(loc.pathname).to.eq("/questions/where-was-the-qualification-awarded");
         })
 
+        cy.get(".govuk-error-summary").should("be.visible");
+        cy.get(".govuk-error-summary__title").should("contain.text", "There is a problem");
+        cy.get("#error-banner-link").should("contain.text", "Test error banner link text");
+
         cy.get('#option-error').should("exist");
         cy.get('#option-error').should("contain.text", "Test error message");
         cy.get(".govuk-form-group").should("have.class", "govuk-form-group--error");
@@ -43,13 +48,18 @@ describe("A spec that tests question pages", () => {
     it("shows an error message when a user doesnt type a date on the when-was-the-qualification-started page", () => {
       cy.visit("/questions/when-was-the-qualification-started");
 
+      cy.get(".govuk-error-summary").should("not.exist");
       cy.get("#date-error").should("not.exist");
       cy.get(".govuk-form-group").should("not.have.class", "govuk-form-group--error");
 
       cy.get('button[id="question-submit"]').click();
       cy.location().should((loc) => {
         expect(loc.pathname).to.eq("/questions/when-was-the-qualification-started");
       })
+
+      cy.get(".govuk-error-summary").should("be.visible");
+      cy.get(".govuk-error-summary__title").should("contain.text", "There is a problem");
+      cy.get("#error-banner-link").should("contain.text", "Test error banner link text");
 
       cy.get('#date-error').should("exist");
       cy.get('#date-error').should("contain.text", "Test Error Message");
@@ -68,6 +78,7 @@ describe("A spec that tests question pages", () => {
     it("shows an error message when a user doesnt select an option on the what-level-is-the-qualification page", () => {
         cy.visit("/questions/what-level-is-the-qualification");
 
+        cy.get(".govuk-error-summary").should("not.exist");
         cy.get("#option-error").should("not.exist");
         cy.get(".govuk-form-group").should("not.have.class", "govuk-form-group--error");
 
@@ -76,6 +87,10 @@ describe("A spec that tests question pages", () => {
             expect(loc.pathname).to.eq("/questions/what-level-is-the-qualification");
         })
 
+        cy.get(".govuk-error-summary").should("be.visible");
+        cy.get(".govuk-error-summary__title").should("contain.text", "There is a problem");
+        cy.get("#error-banner-link").should("contain.text", "Test error banner link text");
+
         cy.get('#option-error').should("exist");
         cy.get('#option-error').should("contain.text", "Test error message");
         cy.get(".govuk-form-group").should("have.class", "govuk-form-group--error");
@@ -95,6 +110,7 @@ describe("A spec that tests question pages", () => {
         "and also does not check 'not in the list' on the what-is-the-awarding-organisation", () => {
         cy.visit("/questions/what-is-the-awarding-organisation");
 
+        cy.get(".govuk-error-summary").should("not.exist");
         cy.get("#dropdown-error").should("not.exist");
         cy.get("#awarding-organisation-select").should("not.have.class", "govuk-select--error");
 
@@ -103,6 +119,10 @@ describe("A spec that tests question pages", () => {
             expect(loc.pathname).to.eq("/questions/what-is-the-awarding-organisation");
         })
 
+        cy.get(".govuk-error-summary").should("be.visible");
+        cy.get(".govuk-error-summary__title").should("contain.text", "There is a problem");
+        cy.get("#error-banner-link").should("contain.text", "Test error banner link text");
+
         cy.get('#dropdown-error').should("exist");
         cy.get('#dropdown-error').should("contain.text", "Test Error Message");
         cy.get("#awarding-organisation-select").should("have.class", "govuk-select--error");

tests/Dfe.EarlyYearsQualification.UnitTests/Mocks/MockContentfulServiceTests.cs

@@ -246,6 +246,8 @@ public async Task GetRadioQuestionPage_PassInWhereWasTheQualificationAwarded_Ret
         result!.Question.Should().NotBeNullOrEmpty();
         result.CtaButtonText.Should().NotBeNullOrEmpty();
         result.ErrorMessage.Should().NotBeNullOrEmpty();
+        result.ErrorBannerHeading.Should().NotBeNull();
+        result.ErrorBannerLinkText.Should().NotBeNull();
         result.Options.Should().NotBeNullOrEmpty();
         result.Options.Count.Should().Be(5);
         result.Options[0].Label.Should().Be("England");
@@ -271,6 +273,8 @@ public async Task GetRadioQuestionPage_PassInWhatLevelIsTheQualification_Returns
         result!.Question.Should().NotBeNullOrEmpty();
         result.CtaButtonText.Should().NotBeNullOrEmpty();
         result.ErrorMessage.Should().NotBeNullOrEmpty();
+        result.ErrorBannerHeading.Should().NotBeNull();
+        result.ErrorBannerLinkText.Should().NotBeNull();
         result.Options.Should().NotBeNullOrEmpty();
         result.Options.Count.Should().Be(2);
         result.Options[0].Label.Should().Be("Level 2");
@@ -300,6 +304,8 @@ public async Task GetDateQuestionPage_PassWhenWasQualificationStartedId_ReturnsE
         result.Should().NotBeNull();
         result!.CtaButtonText.Should().Be("Continue");
         result.ErrorMessage.Should().Be("Test Error Message");
+        result.ErrorBannerHeading.Should().Be("There is a problem");
+        result.ErrorBannerLinkText.Should().Be("Test error banner link text");
         result.MonthLabel.Should().Be("Test Month Label");
         result.YearLabel.Should().Be("Test Year Label");
         result.QuestionHint.Should().Be("Test Question Hint");
@@ -326,6 +332,8 @@ public async Task GetDropdownQuestionPage_PassWhenWasQualificationStartedId_Retu
         result.Should().NotBeNull();
         result!.CtaButtonText.Should().Be("Test Button Text");
         result.ErrorMessage.Should().Be("Test Error Message");
+        result.ErrorBannerHeading.Should().Be("There is a problem");
+        result.ErrorBannerLinkText.Should().Be("Test error banner link text");
         result.Question.Should().Be("Test Dropdown Question");
         result.DefaultText.Should().Be("Test Default Dropdown Text");
         result.DropdownHeading.Should().Be("Test Dropdown Heading");