From 35599b3568424d8800a0271d7fe964d12f3c4aec Mon Sep 17 00:00:00 2001
From: Dean Elliott <dean.elliott@digital.trade.gov.uk>
Date: Wed, 24 Apr 2024 14:25:55 +0100
Subject: [PATCH] Add tests for the payments pages

---
 src/app/views/_includes/amount-due.njk        |  2 +-
 .../_includes/bank-transfer-instructions.njk  | 14 ++--
 .../_macros/form/multiple-choice-field.njk    |  2 +-
 src/app/views/payment/bank-transfer.njk       |  2 +-
 src/app/views/payment/options.njk             |  2 +-
 test/end-to-end/cypress/payment-spec.cy.js    | 71 +++++++++++++++++++
 6 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 test/end-to-end/cypress/payment-spec.cy.js

diff --git a/src/app/views/_includes/amount-due.njk b/src/app/views/_includes/amount-due.njk
index 13e4be37..3e41de1b 100644
--- a/src/app/views/_includes/amount-due.njk
+++ b/src/app/views/_includes/amount-due.njk
@@ -16,7 +16,7 @@
 
 {% call Message({ type: 'muted', element: 'div' }) %}
   Amount to pay:
-  <span class="u-block font-large">
+  <span data-test="payment-amount" class="u-block font-large">
     {{ costText | safe }}
   </span>
 {% endcall %}
diff --git a/src/app/views/_includes/bank-transfer-instructions.njk b/src/app/views/_includes/bank-transfer-instructions.njk
index f31bbc02..6070a322 100644
--- a/src/app/views/_includes/bank-transfer-instructions.njk
+++ b/src/app/views/_includes/bank-transfer-instructions.njk
@@ -1,17 +1,17 @@
-<p>Please make your payment in sterling for <strong>{{ order.total_cost | formatCurrency }}</strong> to Department for Business & Trade’s bank account at National Westminster Bank.</p>
+<p data-test="transfer-heading">Please make your payment in sterling for <strong>{{ order.total_cost | formatCurrency }}</strong> to Department for Business & Trade’s bank account at National Westminster Bank.</p>
 
 <p>
-  <strong>Account Name:</strong> DBT OMIS Service<br>
-  <strong>Account Number:</strong> 10014187<br>
-  <strong>Sort Code:</strong> 60-70-80<br>
-  <strong>Reference:</strong> {{ order.reference }}
+  <span data-test="account-name"><strong>Account Name:</strong> DBT OMIS Service<br></span>
+  <span data-test="account-number"><strong>Account Number:</strong> 10014187<br></span>
+  <span data-test="sort-code"><strong>Sort Code:</strong> 60-70-80<br></span>
+  <span data-test="reference"><strong>Reference:</strong> {{ order.reference }}</span>
 </p>
 
 <p>For international payments you may also need SWIFT and IBAN.</p>
 
 <p>
-  <strong>SWIFT:</strong> NWBKGB2L<br>
-  <strong>IBAN:</strong> GB57NWBK60708010014187
+  <span data-test="swift"><strong>SWIFT:</strong> NWBKGB2L<br></span>
+  <span data-test="iban"><strong>IBAN:</strong> GB57NWBK60708010014187</span>
 </p>
 
 <p>You agree to pay any bank charges incurred with this transaction.</p>
diff --git a/src/app/views/_macros/form/multiple-choice-field.njk b/src/app/views/_macros/form/multiple-choice-field.njk
index 20cf47ab..7e57f921 100644
--- a/src/app/views/_macros/form/multiple-choice-field.njk
+++ b/src/app/views/_macros/form/multiple-choice-field.njk
@@ -88,7 +88,7 @@
           {% if isSelected %}checked="checked"{% endif %}
           {% if props.hint %}aria-describedby="hint-{{ props.fieldId }}"{% endif %}
         >
-        <label class="c-multiple-choice__label" for="{{ props.fieldId }}-{{ loop.index }}">
+        <label data-test="{{ props.fieldId }}-{{ loop.index }}" class="c-multiple-choice__label" for="{{ props.fieldId }}-{{ loop.index }}">
           <span class="c-multiple-choice__label-text">{{ option.label }}</span>
           {% if option.hint %}
             <span class="c-multiple-choice__hint">{{ option.hint }}</span>
diff --git a/src/app/views/payment/bank-transfer.njk b/src/app/views/payment/bank-transfer.njk
index 2b08b12d..b5d1ac7f 100644
--- a/src/app/views/payment/bank-transfer.njk
+++ b/src/app/views/payment/bank-transfer.njk
@@ -6,7 +6,7 @@
   {% include '_includes/bank-transfer-instructions.njk' %}
 
   <p>
-    <a href="/{{ publicToken }}/invoice">View your invoice</a>
+    <a data-test="invoice-link" href="/{{ publicToken }}/invoice">View your invoice</a>
   </p>
 
   <h3>Can’t pay by bank transfer</h3>
diff --git a/src/app/views/payment/options.njk b/src/app/views/payment/options.njk
index 2af1d59f..d2d99e18 100644
--- a/src/app/views/payment/options.njk
+++ b/src/app/views/payment/options.njk
@@ -30,6 +30,6 @@
       error: 'cannot be blank' if invalid
     }) }}
 
-    <button type="submit" class="button">Continue</button>
+    <button data-test="submit-button" type="submit" class="button">Continue</button>
   </form>
 {% endblock %}
diff --git a/test/end-to-end/cypress/payment-spec.cy.js b/test/end-to-end/cypress/payment-spec.cy.js
new file mode 100644
index 00000000..4bd9e631
--- /dev/null
+++ b/test/end-to-end/cypress/payment-spec.cy.js
@@ -0,0 +1,71 @@
+describe("payment spec", () => {
+  it("visits OMIS payment options page", () => {
+    // Visit the payment options page.
+    cy.visit(
+      "http://localhost:4000/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/payment"
+    );
+
+    // Payment options page assertions.
+    cy.get("h1").should("exist").and("have.text", "Choose a payment method");
+    cy.get('[data-test="payment-amount"]')
+      .should("exist")
+      .contains("£1,000.00 (No VAT applies)");
+    cy.get('[data-test="field-payment-method-1"]')
+      .should("exist")
+      .contains("credit or debit card");
+    cy.get('[data-test="field-payment-method-2"]')
+      .should("exist")
+      .contains("bank transfer");
+  });
+
+  it("visits OMIS pay by bank transfer page", () => {
+    // Visit payment page.
+    cy.visit(
+      "http://localhost:4000/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/payment"
+    );
+
+    // Select bank transfer option and submit to go to bank transfer page.
+    cy.get('[data-test="field-payment-method-2"]').click();
+    cy.get('[data-test="submit-button"]').click();
+
+    cy.get("h1").should("exist").and("have.text", "Paying by bank transfer");
+
+    // Assert payment amount is displayed.
+    cy.get('[data-test="transfer-heading"]')
+      .should("exist")
+      .contains("Please make your payment in sterling for £1,000.00");
+
+    // Assert DBT bank details are displayed as well as payment reference.
+    cy.get('[data-test="account-name"]')
+      .should("exist")
+      .contains("Account Name: DBT OMIS Service");
+    cy.get('[data-test="account-number"]')
+      .should("exist")
+      .contains("Account Number: 10014187");
+    cy.get('[data-test="sort-code"]')
+      .should("exist")
+      .contains("Sort Code: 60-70-80");
+    cy.get('[data-test="reference"]')
+      .should("exist")
+      .contains("Reference: RYM547/24");
+
+    // Assert SWIFT and IBAN codes are shown.
+    cy.get('[data-test="swift"]').should("exist").contains("NWBKGB2L");
+    cy.get('[data-test="iban"]')
+      .should("exist")
+      .contains("GB57NWBK60708010014187");
+  });
+
+  it("visits OMIS pay by bank transfer and checks invoice link", () => {
+    // Visit bank transfer page
+    cy.visit(
+      "http://localhost:4000/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/payment/bank-transfer"
+    );
+
+    // Assert invoice link takes you to the invoice page.
+    cy.get('[data-test="invoice-link"]')
+      .click()
+
+    cy.url().should('include', '/invoice')
+  });
+});