Add tests for the payments pages

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 %}

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>

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>

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>

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 %}

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')
+  });
+});