PP-10627 add agreement details page cy test

- add a new test that checks the rendering of the agreement details page in specifics

app/views/agreements/detail.njk

@@ -75,7 +75,7 @@
     ]
   }) }}
 
-  <h2 class="govuk-heading-m govuk-!-margin-top-9">Payment instrument</h2>
+  <h2 class="govuk-heading-m govuk-!-margin-top-9" data-cy="payment-instrument-title">Payment instrument</h2>
   {% set paymentInstrument = agreement.payment_instrument %}
 
   {% if paymentInstrument %}
@@ -120,7 +120,7 @@
   <p id="empty-payment-instrument" class="govuk-body">No payment instrument set for this agreement.</p>
   {% endif %}
 
-  <h2 class="govuk-heading-m govuk-!-margin-top-9">Transactions</h2>
+  <h2 class="govuk-heading-m govuk-!-margin-top-9" data-cy="transaction-list-title">Transactions</h2>
   <table id="transactions-list" class="govuk-table">
     <thead class="govuk-table__head">
       <tr class="govuk-table__row">
@@ -148,7 +148,7 @@
     </tbody>
   </table>
 
-  <p class="govuk-body">
+  <p class="govuk-body" data-cy="all-payment-link">
     <a class="govuk-link govuk-link__no-visited-state" href="{{ formatAccountPathsFor(routes.account.transactions.index, currentGatewayAccount.external_id) }}?agreementId={{ agreement.external_id }}">Show all transactions for this agreement</a>
   </p>
 </div>

app/views/agreements/list.njk

@@ -12,7 +12,7 @@ Agreements - GOV.UK Pay
 
   <div class="transactions-filter govuk-grid-row">
     {# markup should be refined and not rely on clearfix - directly lifted from transactions #}
-    <form class="govuk-clearfix" method="get" action="{{search_path}}" novalidate>
+    <form class="govuk-clearfix" method="get" action="{{search_path}}" novalidate  data-cy="filter-container">
       {% set statuses = [{
         value: '',
         text: 'All',
@@ -35,7 +35,7 @@ Agreements - GOV.UK Pay
         <legend class="govuk-visually-hidden">
           Status
         </legend>
-        <fieldset class="govuk-fieldset">
+        <fieldset class="govuk-fieldset" data-cy="status-select">
         {{
           govukSelect({
             id: "status",

app/views/agreements/paginator.njk

@@ -2,7 +2,7 @@
 {% if links and links.length %}
 <div class="pagination" id="pagination">
   {% for paginationLink in links %}
-    <form class="paginationForm page-{{paginationLink.pageName}}" method="GET" novalidate>
+    <form class="paginationForm page-{{paginationLink.pageName}}" method="GET" novalidate data-cy="pagination-form">
       <input type="hidden" name="page" value="{{paginationLink.pageNumber}}"/>
 
       {% for filterKey, filterValue in filters %}

test/cypress/integration/agreements/agreement.cy.js

@@ -42,7 +42,74 @@ describe('Agreement detail page', () => {
     cy.setEncryptedCookies(userExternalId)
   })
 
-  it('should display agreement detail page and allow cancelling agreement', () => {
+  it('should display agreement detail page', () => {
+    cy.task('setupStubs', [
+      ...userAndGatewayAccountStubs(),
+      agreementStubs.getLedgerAgreementSuccess({
+        service_id: serviceExternalId,
+        live: false,
+        gatewayAccountId,
+        external_id: 'a-valid-agreement-id'
+      }),
+      transactionsStub
+    ])
+
+    cy.visit('/test/service/service-id/account/gateway-account-id/agreements/a-valid-agreement-id')
+
+    cy.get('h1').contains('Agreement detail')
+
+    cy.get('.govuk-heading-l').should('have.text', 'Agreement detail')
+
+    cy.get('[data-cy=agreement-detail]').find('dt').eq(0).contains('ID')
+    cy.get('[data-cy=agreement-detail]').find('dd').eq(0).contains('a-valid-agreement-id')
+    cy.get('[data-cy=agreement-detail]').find('dt').eq(1).contains('Reference')
+    cy.get('[data-cy=agreement-detail]').find('dd').eq(1).contains('valid-reference')
+    cy.get('[data-cy=agreement-detail]').find('dt').eq(2).contains('Status')
+    cy.get('[data-cy=agreement-detail]').find('dd').eq(2).contains('active')
+    cy.get('[data-cy=agreement-detail]').find('dt').eq(3).contains('Description')
+    cy.get('[data-cy=agreement-detail]').find('dd').eq(3).contains('Reason shown to paying user for taking agreement')
+    cy.get('[data-cy=agreement-detail]').find('dt').eq(4).contains('Date created')
+    cy.get('[data-cy=agreement-detail]').find('dd').eq(4).contains('1 March 2022')
+
+    cy.get('[data-cy=payment-instrument-title]').should('have.text', 'Payment instrument')
+    cy.get('#payment-instrument-list').should('exist')
+    cy.get('#empty-payment-instrument').should('not.exist')
+    cy.get('#payment-instrument-list').should('exist')
+    cy.get('#payment-instrument-list').children().should('have.length', 6)
+    cy.get('#payment-instrument-list').find('dt').eq(0).contains('Type')
+    cy.get('#payment-instrument-list').find('dd').eq(0).contains('Card')
+    cy.get('#payment-instrument-list').find('dt').eq(1).contains('Card')
+    cy.get('#payment-instrument-list').find('dd').eq(1).find('img').should('have.attr', 'src', '/public/images/card_visa.png')
+    cy.get('#payment-instrument-list').find('dd').eq(1).get('[alt="Card brand Visa"]').should('exist')
+    cy.get('#payment-instrument-list').find('dt').eq(2).contains('Name on card')
+    cy.get('#payment-instrument-list').find('dd').eq(2).contains('Test User')
+    cy.get('#payment-instrument-list').find('dt').eq(3).contains('Card number')
+    cy.get('#payment-instrument-list').find('dd').eq(3).contains('••••0002')
+    cy.get('#payment-instrument-list').find('dt').eq(4).contains('Card expiry date')
+    cy.get('#payment-instrument-list').find('dd').eq(4).contains('08/23')
+    cy.get('#payment-instrument-list').find('dt').eq(5).contains('Card type')
+    cy.get('#payment-instrument-list').find('dd').eq(5).contains('Debit')
+
+    cy.get('[data-cy=transaction-list-title]').should('have.text', 'Transactions')
+    cy.get('#transactions-list').should('exist')
+    cy.get('#transactions-list thead').find('th').eq(0).should('contain', 'Reference number')
+    cy.get('#transactions-list thead').find('th').eq(1).should('contain', 'State')
+    cy.get('#transactions-list thead').find('th').eq(2).should('contain', 'Amount')
+    cy.get('#transactions-list thead').find('th').eq(3).should('contain', 'Date created')
+    cy.get('#transactions-list tbody').find('tr').should('have.length', 2)
+    cy.get('#transactions-list tbody').find('tr').eq(0).find('.reference').should('contain', 'payment-reference')
+    cy.get('#transactions-list tbody').find('tr').eq(0).find('.state').should('contain', 'In progress')
+    cy.get('#transactions-list tbody').find('tr').eq(0).find('.amount').should('contain', '£10.00')
+    cy.get('#transactions-list tbody').find('tr').eq(0).find('.time').should('contain', '01 May 2018 — 14:27:00')
+    cy.get('#transactions-list tbody').find('tr').eq(1).find('.reference').should('contain', 'second-reference')
+    cy.get('#transactions-list tbody').find('tr').eq(1).find('.state').should('contain', 'In progress')
+    cy.get('#transactions-list tbody').find('tr').eq(1).find('.amount').should('contain', '£200.00')
+    cy.get('#transactions-list tbody').find('tr').eq(1).find('.time').should('contain', '01 May 2018 — 14:27:00')
+
+    cy.get('[data-cy=all-payment-link]').should('exist')
+  })
+
+  it('should allow cancelling agreement', () => {
     cy.task('setupStubs', [
       ...userAndGatewayAccountStubs(),
       agreementStubs.getLedgerAgreementSuccess({

test/cypress/integration/agreements/agreements.cy.js

@@ -71,6 +71,27 @@ describe('Agreements', () => {
     cy.visit('/test/service/service-id/account/gateway-account-id/agreements')
 
     cy.get('#navigation-menu-agreements').should('have.length', 1)
+
+    cy.get('h1').contains('Agreements')
+
+    cy.get('[data-cy=filter-container]').should('exist')
+    cy.get('[data-cy=status-select]').should('exist')
+    cy.get('#status').get('label').contains('Status')
+    cy.get('#status-hint').contains('Select an option')
+    cy.get('#reference').get('label').contains('Reference number')
+    cy.get('#reference-hint').contains('Enter full or partial reference')
+
+    cy.get('#filter').should('exist')
+
+    cy.get('[data-cy=pagination-form]').should('exist')
+
+    cy.get('#agreements-list').should('exist')
+    cy.get('#agreements-list thead').find('th').eq(0).should('have.text', 'ID')
+    cy.get('#agreements-list thead').find('th').eq(1).should('have.text', 'Reference')
+    cy.get('#agreements-list thead').find('th').eq(2).should('contain', 'Status')
+    cy.get('#agreements-list thead').find('th').eq(3).should('contain', 'Payment instrument')
+    cy.get('#agreements-list thead').find('th').eq(4).should('contain', 'Date created')
+    cy.get('#agreements-list tbody').find('tr').should('have.length', 25)
   })
 
   const referenceFilter = 'a-valid-ref'