Update two-part tariff review views to add Cypress data test attribut…

…es (#1063) https://eaflood.atlassian.net/browse/WATER-4450 We've finished building all the pages for the two-part tariff review and are now working on the acceptance tests. While writing these tests, we found a few places where the data test attribute on the view needs to be updated to make it clearer and easier to find in the acceptance tests file.
DEFRA · Jun 5, 2024 · c0282c0 · c0282c0
1 parent 16fdc11
commit c0282c0
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 65 deletions.
diff --git a/app/views/bill-runs/amend-billable-returns.njk b/app/views/bill-runs/amend-billable-returns.njk
@@ -53,10 +53,12 @@
   {% endif %}
 
   {% set insertText %}
-    <div>
+    <div data-test="financial-year">
       Financial year {{billRun.financialYear}}
     </div>
-    Charge period {{chargeVersion.chargePeriod}}
+    <div data-test="charge-period">
+      Charge period {{chargeVersion.chargePeriod}}
+    </div>
   {%endset%}
 
   {% set secondHeader %}
@@ -72,7 +74,7 @@
           errorMessage: error.radioFormElement,
           fieldset: {
             legend: {
-              html: '<span class="govuk-caption-l">' + chargeElement.description + ' ' +  chargeElement.dates + '</span>' + 'Set the billable returns quantity for this bill run' + secondHeader,
+              html: '<span class="govuk-caption-l">' + chargeElement.description + ' ' +  chargeElement.dates + '</span>' + '<div data-test="title">' + 'Set the billable returns quantity for this bill run' + '</div>' + secondHeader,
               isPageHeading: true,
               classes: 'govuk-fieldset__legend--l'
             }
@@ -81,7 +83,7 @@
             {
               id: 'authorised-quantity',
               value: authorisedQuantity,
-              html: 'Authorised ' + authorisedQuantity + 'ML'
+              html: '<div data-test="authorised-quantity">Authorised ' + authorisedQuantity + 'ML</div>'
             },
             {
               id: 'custom-quantity',

diff --git a/app/views/bill-runs/charge-reference-details.njk b/app/views/bill-runs/charge-reference-details.njk
@@ -33,10 +33,10 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-full">
       <h1 class="govuk-heading-l">
-        <span class="govuk-caption-l">Charge reference {{chargeReference.reference}}</span> {{chargeReference.description}}
+        <span class="govuk-caption-l" data-test="charge-reference">Charge reference {{chargeReference.reference}}</span><span data-test="charge-reference-description">{{chargeReference.description}}</span>
       </h1>
-    <span class="govuk-caption-m">Financial Year {{financialYear}}</span>
-    <h2 class="govuk-heading-m">
+    <span class="govuk-caption-m" data-test="financial-year">Financial Year {{financialYear}}</span>
+    <h2 class="govuk-heading-m" data-test="charge-period">
       Charge period {{chargePeriod}}
     </h2>
   </div>
@@ -46,7 +46,7 @@
   <div class="govuk-grid-column-full">
     <div class="govuk-!-margin-right-6 float-left">
       <h3>
-        <span class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold">{{chargeReference.totalBillableReturns}} ML</span>
+        <span class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold" data-test="total-billable-returns">{{chargeReference.totalBillableReturns}} ML</span>
         <div>
           <span class="govuk-body govuk-!-font-weight-bold govuk-body govuk-!-font-size-19">Total billable returns</span>
         </div>
@@ -59,7 +59,7 @@
     </div>
     <div class="govuk-!-margin-right-6 float-left">
       <h3>
-        <span class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold">{{chargeReference.authorisedVolume}} ML</span>
+        <span class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold" data-test="authorised-volume">{{chargeReference.authorisedVolume}} ML</span>
         <div>
           <span class="govuk-body govuk-!-font-weight-bold govuk-body govuk-!-font-size-19">Authorised volume</span>
         </div>
@@ -101,7 +101,8 @@
 
       {% set adjustmentsValue %}
           {% for adjustment in chargeReference.adjustments %}
-          <div>{{adjustment}}</div>
+            {% set adjustmentsIndex = loop.index0 %}
+          <div data-test="adjustment-{{ adjustmentsIndex }}">{{adjustment}}</div>
           {% endfor %}
       {% endset %}
 
@@ -123,7 +124,7 @@
               text: "Additional charges"
             },
             value: {
-              text: chargeReference.additionalCharges
+              html: '<div data-test="additional-charges">' + chargeReference.additionalCharges + '</div>'
             }
           }
         %}

diff --git a/app/views/bill-runs/match-details.njk b/app/views/bill-runs/match-details.njk
@@ -50,15 +50,15 @@
     </div>
   </div>
 
-  <div class="govuk-caption-m"> Financial year {{ financialYear }}</div>
-  <h2 class="govuk-heading-m">Charge period {{ chargePeriod }}</h2>
+  <div class="govuk-caption-m" data-test="financial-year"> Financial year {{ financialYear }}</div>
+  <h2 class="govuk-heading-m" data-test="charge-period">Charge period {{ chargePeriod }}</h2>
 
   {# Billable returns and volume #}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       <div class="govuk-!-margin-right-6 float-left">
         <h3>
-          <div class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold">
+          <div class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold" data-test="billable-returns">
             {{chargeElement.billableVolume}}ML
           </div>
           <div class="govuk-body govuk-!-font-weight-bold govuk-body govuk-!-font-size-19">
@@ -75,7 +75,7 @@
       </div>
       <div class="govuk-!-margin-right-6 float-left">
         <h3>
-          <div class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold">
+          <div class="govuk-body govuk-font-size-64 govuk-!-font-weight-bold" data-test="authorised-volume">
             {{chargeElement.authorisedVolume}}ML
           </div>
           <div class="govuk-body govuk-!-font-weight-bold govuk-body govuk-!-font-size-19">
@@ -91,7 +91,8 @@
                 Issue
               </h4>
               {% for issue in chargeElement.issues %}
-                <div> {{ issue }} </div>
+                {% set issuesIndex = loop.index0 %}
+                <div data-test="issues-{{ issuesIndex }}"> {{ issue }} </div>
               {% endfor %}
             </div>
           {% endif %}
@@ -142,24 +143,20 @@
 
       {% set tableRow = [
         {
-          html: action,
-          classes: 'govuk-body-s',
-          attributes: { 'data-test': 'matched-return-action' + matchedReturnIndex }
+          html: '<div data-test="matched-return-action-' + matchedReturnIndex + '">' + action + '</div>',
+          classes: 'govuk-body-s'
         },
         {
-          html: returnSummary,
-          classes: 'govuk-body-s',
-          attributes: { 'data-test': 'matched-return-summary' + matchedReturnIndex }
+          html: '<div data-test="matched-return-summary-' + matchedReturnIndex + '">' + returnSummary + '</div>',
+          classes: 'govuk-body-s'
           },
         {
-          html: tag,
-          classes: 'govuk-body-s',
-          attributes: { 'data-test': 'matched-return-status' + matchedReturnIndex }
+          html: '<div data-test="matched-return-status-' + matchedReturnIndex + '">' + tag + '</div>',
+          classes: 'govuk-body-s'
         },
         {
-          html: "<div>" + return.returnTotal + "</div>" + issues,
-          classes: "govuk-body-s govuk-!-text-align-right",
-          attributes: { 'data-test': 'matched-return-total' + matchedReturnIndex}
+          html: '<div data-test="matched-return-total-' + matchedReturnIndex + '"><div>' + return.returnTotal + '</div>' + issues + '</div>' ,
+          classes: "govuk-body-s govuk-!-text-align-right"
         }]
       %}
 

diff --git a/app/views/bill-runs/review-licence.njk b/app/views/bill-runs/review-licence.njk
@@ -42,13 +42,13 @@
 
   {# Licence nav bars #}
   <ul class="govuk-summary-list__actions-list govuk-!-margin-bottom-3">
-    <li class="govuk-summary-list__actions-list-item"><a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-link--no-underline" href="/licences/{{ licence.licenceId }}#summary">
+    <li class="govuk-summary-list__actions-list-item" data-test="summary-link"><a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-link--no-underline" href="/licences/{{ licence.licenceId }}#summary">
         Summary
       </a></li>
-    <li class="govuk-summary-list__actions-list-item"><a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-link--no-underline" href="/licences/{{ licence.licenceId }}#returns">
+    <li class="govuk-summary-list__actions-list-item" data-test="returns-link"><a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-link--no-underline" href="/licences/{{ licence.licenceId }}#returns">
         Returns
       </a></li>
-      <li class="govuk-summary-list__actions-list-item"><a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-link--no-underline" href="/licences/{{ licence.licenceId }}#charge">
+      <li class="govuk-summary-list__actions-list-item" data-test="charge-information-link"><a class="govuk-link govuk-!-font-weight-bold govuk-link--no-visited-state govuk-link--no-underline" href="/licences/{{ licence.licenceId }}#charge">
         Charge information
       </a></li>
   </ul>
@@ -99,7 +99,7 @@
     }) }}
 
     {{ govukButton({
-      text: "Remove from bill run",
+      text: 'Remove from bill run',
       classes: "govuk-button--secondary",
       href: "../remove/" + licence.licenceId,
       preventDoubleClick: true
@@ -115,7 +115,7 @@
         {% for chargeVersion in chargeData %}
           {% set chargeDateIndex = loop.index0 %}
             <li>
-              <a class="govuk-link" href="#chargeVersion{{chargeDateIndex}}">{{chargeVersion.chargePeriodDate}}</a>
+              <a class="govuk-link" href="#chargeVersion{{chargeDateIndex}}" data-test="charge-period-{{ chargeDateIndex }}">{{chargeVersion.chargePeriodDate}}</a>
             </li>
         {% endfor %}
         </ul>
@@ -162,22 +162,22 @@
         {
           html: action,
           classes: 'govuk-body-s',
-          attributes: { 'data-test': 'matched-return-action' + matchedReturnIndex }
+          attributes: { 'data-test': 'matched-return-action-' + matchedReturnIndex }
         },
         {
           html: returnSummary,
           classes: 'govuk-body-s',
-          attributes: { 'data-test': 'matched-return-summary' + matchedReturnIndex }
+          attributes: { 'data-test': 'matched-return-summary-' + matchedReturnIndex }
           },
         {
           html: tag,
           classes: 'govuk-body-s',
-          attributes: { 'data-test': 'matched-return-status' + matchedReturnIndex }
+          attributes: { 'data-test': 'matched-return-status-' + matchedReturnIndex }
         },
         {
           html: "<div>" + return.returnTotal + "</div>" + issues,
           classes: "govuk-body-s govuk-!-text-align-right",
-          attributes: { 'data-test': 'matched-return-total' + matchedReturnIndex}
+          attributes: { 'data-test': 'matched-return-total-' + matchedReturnIndex}
         }]
       %}
 
@@ -241,22 +241,22 @@
         {
           html: action,
           classes: 'govuk-body-s',
-          attributes: { 'data-test': 'unmatched-return-action' + unmatchedReturnIndex }
+          attributes: { 'data-test': 'unmatched-return-action-' + unmatchedReturnIndex }
         },
         {
           html: returnSummary,
           classes: 'govuk-body-s',
-          attributes: { 'data-test': 'unmatched-return-summary' + unmatchedReturnIndex }
+          attributes: { 'data-test': 'unmatched-return-summary-' + unmatchedReturnIndex }
         },
         {
           html: tag,
           classes: 'govuk-body-s',
-          attributes: { 'data-test': 'unmatched-return-status' + unmatchedReturnIndex }
+          attributes: { 'data-test': 'unmatched-return-status-' + unmatchedReturnIndex }
         },
         {
           html: "<div>" + return.returnTotal + "</div>" + issues,
           classes: "govuk-body-s govuk-!-text-align-right",
-          attributes: { 'data-test': 'unmatched-return-total' + unmatchedReturnIndex }
+          attributes: { 'data-test': 'unmatched-return-total-' + unmatchedReturnIndex }
         }
         ]
       %}
@@ -301,11 +301,11 @@
     <div class="govuk-grid-column-full">
       {% for chargeVersion in chargeData %}
       {% set chargeVersionIndex = loop.index0 %}
-        <div class ="govuk-caption-l">Financial year {{chargeVersion.financialYear}}</div>
-        <section id="chargeVersion{{chargeVersionIndex}}">
+        <div class ="govuk-caption-l" data-test="financial-year">Financial year {{chargeVersion.financialYear}}</div>
+        <section id="charge-version-{{chargeVersionIndex}}">
           <h2 class="govuk-heading-l">Charge periods {{chargeVersion.chargePeriodDate}}</h2>
         </section>
-        <div class="govuk-caption-m">{{chargeVersion.licenceHolderName}}</div>
+        <div class="govuk-caption-m" data-test='licence-holder'>{{chargeVersion.licenceHolderName}}</div>
 
         {% set chargeReferenceText = "charge references " if chargeVersion.chargeReferences.length > 1 else "charge reference " %}
         {% set chargeElementText = "charge elements " if chargeVersion.chargeElementCount > 1 else "charge element " %}
@@ -315,7 +315,7 @@
         {# Billing account details #}
         {% set billingAccountLink = '/billing-accounts/' + chargeVersion.billingAccountDetails.billingAccountId %}
         {% set billingAccountText %}
-          <div class="govuk-!-font-weight-bold">Billing account <a class="govuk-link" href="{{ billingAccountLink }}">{{ chargeVersion.billingAccountDetails.accountNumber }}</a></div>
+          <div class="govuk-!-font-weight-bold">Billing account <a class="govuk-link" data-test="billing-account" href="{{ billingAccountLink }}">{{ chargeVersion.billingAccountDetails.accountNumber }}</a></div>
           <div data-test="account-name">{{ chargeVersion.billingAccountDetails.accountName }}</div>
 
           {# billing account contact name #}
@@ -326,7 +326,7 @@
           {# billing account address #}
           <div>
             {% for addressLine in chargeVersion.billingAccountDetails.addressLines %}
-            {% set addressLineIndex = loop.index0 %}
+              {% set addressLineIndex = loop.index0 %}
               <div data-test="address-line" + addressLineIndex>{{addressLine}}</div>
             {% endfor %}
           </div>
@@ -345,26 +345,25 @@
             <div class="govuk-grid-column-full">
               <div class="govuk-summary-card ">
                 <div class="govuk-summary-card__title-wrapper ">
-                  <h3 class="govuk-summary-card__title"><span class="govuk-!-font-weight-regular">{{chargeReference.chargeCategory}}</span><div>{{chargeReference.chargeDescription}}</div></h3>
+                  <h3 class="govuk-summary-card__title"><span class="govuk-!-font-weight-regular" data-test="reference-{{ chargeReferenceIndex }}">{{chargeReference.chargeCategory}}</span><div data-test="charge-description-{{ chargeReferenceIndex }}">{{chargeReference.chargeDescription}}</div></h3>
                 </div>
 
                 <div class="govuk-summary-card__content govuk-!-padding-top-0">
                   {% set rows = [] %}
                   {% set row = {
                     classes: "border-bottom",
                     key: {
-                      text: "Total billable returns",
-                      attributes: { 'data-test': 'total' }
+                      text: "Total billable returns"
                     },
                     value: {
-                      text: chargeReference.totalBillableReturns,
-                      attributes: { 'data-test': 'total-billable-returns' }
+                      html: '<div data-test="total-billable-returns-' + chargeReferenceIndex + '">' + chargeReference.totalBillableReturns + '</div>'
                     },
                     actions: {
                       items: [
                         {
                           href: licence.licenceId + '/charge-reference-details/' + chargeReference.id,
-                          text: chargeReference.chargeReferenceLink.linkName
+                          text: chargeReference.chargeReferenceLink.linkName,
+                          attributes: { 'data-test': 'charge-reference-link-' + chargeReferenceIndex }
                         }
                       ]
                     }
@@ -375,7 +374,7 @@
 
                   <div class="govuk-!-margin-top-0">
                     {{ govukSummaryList({
-                      attributes: { 'data-test': 'charge-reference' + chargeReferenceIndex },
+                      attributes: { 'data-test': 'charge-reference-' + chargeReferenceIndex },
                       classes: "govuk-!-margin-bottom-9 govuk-section-break govuk-section-break--visible",
                       rows: rows
                     }) }}
@@ -387,14 +386,14 @@
                     {% set elementRows = [] %}
 
                     <div class="govuk-!-margin-top-6">
-                      <span class="govuk-body govuk-!-font-weight-regular">{{chargeElement.elementNumber}}</span>
+                      <span class="govuk-body govuk-!-font-weight-regular" data-test="element-count-{{ chargeElementIndex }}">{{chargeElement.elementNumber}}</span>
                       <span class="float-right">
                         {{ statusTag(chargeElement.elementStatus) }}
                       </span>
-                      <h3 class="govuk-heading-s govuk-!-margin-bottom-1">{{chargeElement.elementDescription}}
+                      <h3 class="govuk-heading-s govuk-!-margin-bottom-1" data-test="element-description-{{ chargeElementIndex }}">{{chargeElement.elementDescription}}
                         <div>
                           {% for chargeElementDate in chargeElement.dates %}
-                            <div>{{ chargeElementDate }}</div>
+                            <div data-test="element-dates-{{ chargeElementIndex }}">{{ chargeElementDate }}</div>
                           {% endfor %}
                         </div>
                       </h3>
@@ -415,24 +414,21 @@
                             text: 'Issues'
                           },
                           value: {
-                            html: issues,
-                            attributes: { 'data-test': 'charge-element-issues' + chargeElementIndex }
+                            html: '<div data-test="charge-element-issues-' + chargeElementIndex + '">' + issues + '</div>'
                           }
                         },
                         {
                           key: {
                             text: 'Billable returns'
                           },
                           value: {
-                            text: chargeElement.billableReturns,
-                            attributes: { 'data-test': 'charge-element-billable-returns' + chargeElementIndex }
+                            html: '<div data-test="charge-element-billable-returns-' + chargeElementIndex + '">' + chargeElement.billableReturns + '</div>'
                           },
                           actions: {
                             items: [
                             {
                               href: licence.licenceId + '/match-details/' + chargeElement.reviewChargeElementId,
-                              text: 'View match details',
-                              visuallyHiddenText: ''
+                              html: '<div data-test="charge-element-match-details-' + chargeElementIndex + '">View match details</div>'
                             }
                           ]}
                         },
@@ -441,14 +437,13 @@
                             text: 'Return volume'
                           },
                           value: {
-                            html: returnVolumes,
-                            attributes: { 'data-test': 'charge-element-return-volumes' + chargeElementIndex }
+                            html: '<div data-test="charge-element-return volumes-' + chargeElementIndex + '">' + returnVolumes + '</div>'
                           }
                         }]
                       %}
 
                       {{ govukSummaryList({
-                        attributes: { 'data-test': 'charge-elements' },
+                        attributes: { 'data-test': 'charge-element-' + chargeElementIndex },
                         classes: "govuk-!-margin-bottom-9",
                         rows: elementRow
                       }) }}