Add test for OMIS order and quote page

src/app/views/_includes/messages/general-contact.njk

@@ -1,3 +1,3 @@
 {% call Message({ type: 'muted' }) %}
-  Get in touch with your DBT contact or email <a href="mailto:[email protected]">[email protected]</a>
+  Get in touch with your DBT contact or email <a href="mailto:[email protected]" data-test="omis-orders-email">[email protected]</a>
 {% endcall %}

src/app/views/_includes/messages/order-paid.njk

@@ -1,5 +1,5 @@
 {% call Message({ type: 'info', element: 'div' }) %}
-  <p>Completed work for your order will be sent directly to {{ order.contact_email or 'you by email' }}.</p>
+  <p data-test="completed-text">Completed work for your order will be sent directly to {{ order.contact_email or 'you by email' }}.</p>
 
-  <p>If there are any problems, get in touch with your DBT contact or email <a href="mailto:[email protected]">[email protected]</a>.</p>
+  <p data-test="problem-text">If there are any problems, get in touch with your DBT contact or email <a href="mailto:[email protected]" data-test="omis-email">[email protected]</a>.</p>
 {% endcall %}

src/app/views/_includes/meta-lists/invoice.njk

@@ -3,5 +3,6 @@
     { label: 'Invoice number', value: invoice.invoice_number },
     { label: 'Created on', value: invoice.created_on, type: 'datetime' },
     { label: 'Paid on', value: order.paid_on, type: 'date' }
-  ]
+  ],
+  dataTest: "invoice"
 }) }}

src/app/views/_includes/meta-lists/quote.njk

@@ -10,5 +10,6 @@
     { label: expiryLabel, value: expiryValue if not quote.accepted_on },
     { label: 'You accepted it on', value: quote.accepted_on, type: 'datetime' },
     { label: 'Purchase order (PO) number', value: order.po_number }
-  ]
+  ],
+  dataTest: 'quote'
 }) }}

src/app/views/_includes/payment-instructions.njk

@@ -1,11 +1,11 @@
-<p>
+<p data-test="pay-invoice-text">
   You will need to pay
-  <a href="/{{ publicToken }}/invoice" data-test='invoice-link'>the invoice</a>
+  <a href="/{{ publicToken }}/invoice" data-test="invoice-link">the invoice</a>
   by {{ invoice.payment_due_date | formatDate }} ({{ invoice.payment_due_date | fromNow(invoice.overdue) }}{{ ' overdue' if invoice.overdue }}).
 </p>
 
 <p>
-  <a href="/{{ publicToken }}/payment" class="button">
+  <a href="/{{ publicToken }}/payment" class="button" data-test="payment-options-button">
     View payment options
   </a>
 </p>

src/app/views/_layouts/omis-base.njk

@@ -40,7 +40,7 @@
       <header class="local-header">
         {% if not hideReturnLink %}
           <p class="local-header__back u-print-hide">
-            <a href="/{{ publicToken }}">View your order history</a>
+            <a href="/{{ publicToken }}" data-test="order-history-link">View your order history</a>
           </p>
         {% endif %}
 
@@ -49,7 +49,7 @@
         {% endif %}
 
         {% if subHeading %}
-          <p class="local-header__subheading">{{ subHeading }}</p>
+          <p class="local-header__subheading" data-test="subheading">{{ subHeading }}</p>
         {% endif %}
       </header>
     {% endif %}

src/app/views/_macros/common/reveal.njk

@@ -11,7 +11,7 @@
   {%- if props.summary -%}
     <details>
       <summary>
-        <span class="details__summary">{{ props.summary }}</span>
+        <span class="details__summary" data-test="reveal-{{ props.dataTest }}">{{ props.summary }}</span>
       </summary>
 
       <div class="details__content">

src/app/views/_macros/entity/meta-list.njk

@@ -10,7 +10,7 @@
   {% set modifier = props.modifier | concat('') | reverse | join(' c-meta-list--') if props.modifier %}
 
   {% if props.items | length %}
-    <div class="c-meta-list {{ modifier }}">
+    <div class="c-meta-list {{ modifier }}" data-test="metalist-{{props.dataTest}}">
       {% for metaItem in props.items %}
         {{ MetaItem(metaItem | assign({ highlightTerm: props.highlightTerm, modifier: metaItem.modifier or props.itemModifier })) }}
       {% endfor %}

src/app/views/order-summary.njk

@@ -13,38 +13,38 @@
     {% include '_includes/messages/order-paid.njk' %}
   {% endif %}
 
-  <h2>Your actions</h2>
+  <h2 data-test="actions-heading">Your actions</h2>
 
   {% if not quote.accepted_on and not (quote.expired or quote.cancelled_on) %}
-    <p>Please review and accept your quote so that we can start delivering the work.</p>
+    <p data-test="accept-quote-text">Please review and accept your quote so that we can start delivering the work.</p>
 
     <p>
-      <a href="/{{ publicToken }}/quote" class="button">
+      <a href="/{{ publicToken }}/quote" class="button" data-test="review-your-quote-button">
         Review your quote
       </a>
     </p>
   {% elif order.status === 'quote_accepted' %}
-    <p>You must pay for your order to receive the work.</p>
+    <p data-test="must-pay-text">You must pay for your order to receive the work.</p>
 
     {% include '_includes/payment-instructions.njk' %}
   {% else %}
-    <p>You have no actions for this order.</p>
+    <p data-test="no-actions-text">You have no actions for this order.</p>
   {% endif %}
 
   {% if invoice %}
-    <h3>Your invoice</h3>
+    <h3 data-test="invoice-heading">Your invoice</h3>
 
     {% include '_includes/meta-lists/invoice.njk' %}
 
     <ul class="list-unstyled">
       {% if invoice.invoice_company_name %}
         <li>
-          <a href="/{{ publicToken }}/invoice" data-test='view-invoice-link'>View your invoice</a>
+          <a href="/{{ publicToken }}/invoice" data-test="view-invoice-link">View your invoice</a>
         </li>
       {% endif %}
       {% if order.status in ['paid', 'complete'] %}
         <li>
-          <a href="/{{ publicToken }}/receipt">View your payment receipt</a>
+          <a href="/{{ publicToken }}/receipt" data-test="receipt-link">View your payment receipt</a>
         </li>
       {% endif %}
     </ul>
@@ -54,14 +54,14 @@
     {% endif %}
   {% endif %}
 
-  <h3>Your quote</h3>
+  <h3 data-test="your-quote-heading">Your quote</h3>
 
   {% include '_includes/meta-lists/quote.njk' %}
 
   {% if quote.accepted_on or quote.expired or quote.cancelled_on %}
     <ul class="list-unstyled">
       <li>
-        <a href="/{{ publicToken }}/quote">
+        <a href="/{{ publicToken }}/quote" data-test="quote-link">
           View your {{ 'accepted' if quote.accepted_on }} quote
         </a>
       </li>

src/app/views/quote-accepted.njk

@@ -3,7 +3,7 @@
 {% set hideReturnLink = true %}
 
 {% block main_content %}
-  <div class="confirmation-banner">
+  <div class="confirmation-banner" data-test="confirmation-banner">
     <h1 class="confirmation-banner__heading">
       Quote accepted
     </h1>
@@ -16,11 +16,11 @@
 
   <h3>What happens next</h3>
 
-  <p>You will receive a confirmation email that the quote has been accepted.</p>
+  <p data-test="confirmation-text">You will receive a confirmation email that the quote has been accepted.</p>
 
   {% include '_includes/payment-instructions.njk' %}
 
   <p>
-    <a href="/{{ publicToken }}">View your order history</a>
+    <a href="/{{ publicToken }}" data-test="order-history-link">View your order history</a>
   </p>
 {% endblock  %}

src/app/views/quote.njk

@@ -20,7 +20,7 @@
 
   {% if quote.content %}
     <article class="example">
-      <div class="example__preview l-markdown">
+      <div class="example__preview l-markdown" data-test="quote">
 {# Ugly indentation is so that markdown spacing is handled correctly #}
 {% markdown %}{{ quote.content | safe }}{% endmarkdown %}
         {% call Reveal({ summary: 'View full terms and conditions' }) %}
@@ -50,10 +50,10 @@
         error: 'Confirm that you accept the Charges and the Terms and Conditions' if invalid
       }) }}
 
-      <button type="submit" class="button">Accept quote</button>
+      <button type="submit" class="button" data-test="accept-quote-button">Accept quote</button>
     </form>
 
-    {% call Reveal({ summary: 'There is a problem with my quote' }) %}
+    {% call Reveal({ summary: 'There is a problem with my quote', dataTest: 'quote-problem' }) %}
       {% include '_includes/messages/general-contact.njk' %}
     {% endcall %}
   {% endif %}

test/end-to-end/cypress/order-page-spec.cy.js

@@ -0,0 +1,81 @@
+const { addMonths, format } = require("date-fns");
+const { formats } = require("../../../config");
+
+describe("order page spec", () => {
+  it("when visiting an order where the quote is awaiting acceptance", () => {
+    cy.visit(
+      "http://localhost:4000/7AGZC7uaAIV-5L34J5lnZXHvFG9J1xnbBQnieAUCn-LRJpr-QA"
+    );
+    cy.log('should display correct headings')
+    cy.get('h1').should("have.text", "Your order");
+    cy.get('[data-test="subheading"]').should("have.text", "Order reference WHY589/23 in Canada")
+
+    cy.log('should display Review your quote text and button')
+    cy.get('[data-test="actions-heading"]').should('have.text', 'Your actions')
+    cy.get('[data-test="accept-quote-text"]').should('have.text', 'Please review and accept your quote so that we can start delivering the work.')
+    cy.get('[data-test="review-your-quote-button"]')
+      .should("contain", "Review your quote")
+      .and('have.attr', 'href', '/7AGZC7uaAIV-5L34J5lnZXHvFG9J1xnbBQnieAUCn-LRJpr-QA/quote');
+
+    cy.log('should display Your quote text')
+    cy.get('[data-test="your-quote-heading"]').should('have.text', 'Your quote')
+    cy.get('[data-test="metalist-quote"]').should('contain', 'We sent it on').and('contain', format(new Date(), formats.dateLong)).and('contain', 'It will expire on').and('contain', `${format(addMonths(new Date(), 1), formats.dateLong)} (in a month)`)
+  });
+  it("when visiting an order where the quote is accepted", () => {
+    cy.visit(
+      "http://localhost:4000/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ"
+    );
+    cy.log('should display correct headings')
+    cy.get('h1').should("have.text", "Your order");
+    cy.get('[data-test="subheading"]').should("have.text", "Order reference RYM547/24 in Canada")
+
+    cy.log('should display invoice text and button')
+    cy.get('[data-test="actions-heading"]').should('have.text', 'Your actions')
+    cy.get('[data-test="must-pay-text"]').should('have.text', 'You must pay for your order to receive the work.')
+    cy.get('[data-test="pay-invoice-text"]').should('have.text', `\n  You will need to pay\n  the invoice\n  by ${format(addMonths(new Date(), 1), formats.dateLong)} (in a month).\n`)
+    cy.get('[data-test="invoice-link"]').should('have.text', 'the invoice').and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/invoice')
+    cy.get('[data-test="payment-options-button"]')
+      .should("contain", "View payment options")
+      .and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/payment')
+    cy.get('[data-test="accept-quote-text"]').should('not.exist')
+    cy.get('[data-test="review-your-quote-button"]').should("not.exist")
+
+    cy.log('should display Your invoice text')
+    cy.get('[data-test="invoice-heading"]').should('have.text', 'Your invoice')
+    cy.get('[data-test="metalist-invoice"]').should('contain', 'Invoice number').and('contain', 'Created on').and('contain', format(new Date(), formats.dateLong))
+    cy.get('[data-test="view-invoice-link"]').should('contain', 'View your invoice').and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/invoice')
+
+    cy.log('should display Your quote text')
+    cy.get('[data-test="your-quote-heading"]').should('have.text', 'Your quote')
+    cy.get('[data-test="metalist-quote"]').should('contain', 'We sent it on').and('contain', format(new Date(), formats.dateLong)).and('contain', 'You accepted it on')
+    cy.get('[data-test="quote-link"]').should('contain', 'View your accepted quote').and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/quote')
+  });
+  it("when visiting an order that has been paid for", () => {
+    cy.visit(
+      "http://localhost:4000/h93Dn7DKvMLbUB5Yz2h5z7dL1mXXGUa_UiPNBkVoyKLmBE29YQ"
+    );
+    cy.log('should display correct headings')
+    cy.get('h1').should("have.text", "Your order");
+    cy.get('[data-test="subheading"]').should("have.text", "Order reference CJC167/23 in Canada")
+
+    cy.log('should display completion box')
+    cy.get('[data-test="completed-text"]').should('have.text', 'Completed work for your order will be sent directly to you by email.')
+    cy.get('[data-test="problem-text"]').should('have.text', 'If there are any problems, get in touch with your DBT contact or email [email protected].')
+    cy.get('[data-test="omis-email"]').should('have.attr', 'href', 'mailto:[email protected]')
+
+    cy.log('should display invoice text and button')
+    cy.get('[data-test="actions-heading"]').should('have.text', 'Your actions')
+    cy.get('[data-test="no-actions-text"]').should('have.text', 'You have no actions for this order.')
+
+    cy.log('should display Your invoice text')
+    cy.get('[data-test="invoice-heading"]').should('have.text', 'Your invoice')
+    cy.get('[data-test="metalist-invoice"]').should('contain', 'Invoice number').and('contain', 'Created on').and('contain', format(new Date(), formats.dateLong)).and('contain', 'Paid on')
+    cy.get('[data-test="view-invoice-link"]').should('contain', 'View your invoice').and('have.attr', 'href', '/h93Dn7DKvMLbUB5Yz2h5z7dL1mXXGUa_UiPNBkVoyKLmBE29YQ/invoice')
+    cy.get('[data-test="receipt-link"]').should('contain', 'View your payment receipt').and('have.attr', 'href', '/h93Dn7DKvMLbUB5Yz2h5z7dL1mXXGUa_UiPNBkVoyKLmBE29YQ/receipt')
+
+    cy.log('should display Your quote text')
+    cy.get('[data-test="your-quote-heading"]').should('have.text', 'Your quote')
+    cy.get('[data-test="metalist-quote"]').should('contain', 'We sent it on').and('contain', format(new Date(), formats.dateLong)).and('contain', 'You accepted it on')
+    cy.get('[data-test="quote-link"]').should('contain', 'View your accepted quote').and('have.attr', 'href', '/h93Dn7DKvMLbUB5Yz2h5z7dL1mXXGUa_UiPNBkVoyKLmBE29YQ/quote')
+  });
+});

test/end-to-end/cypress/quote-accepted-spec.cy.js

@@ -0,0 +1,20 @@
+const { addMonths, format } = require('date-fns')
+const { formats } = require("../../../config");
+
+describe("quote acceptance page spec", () => {
+    it("when accepting a quote", () => {
+      cy.visit(
+        "http://localhost:4000/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/quote/accepted"
+      );
+
+      cy.log('should render all elements correctly')
+      cy.get('[data-test="confirmation-banner"]').should('contain', 'Quote accepted').and('contain', 'Your reference number is').and('contain', 'RYM547/24')
+      cy.get('h3').should('have.text', 'What happens next')
+      cy.get('[data-test="confirmation-text"]').should('have.text', 'You will receive a confirmation email that the quote has been accepted.')
+      cy.get('[data-test="pay-invoice-text"]').should('have.text', `\n  You will need to pay\n  the invoice\n  by ${format(addMonths(new Date(), 1), formats.dateLong)} (in a month).\n`)
+      cy.get('[data-test="payment-options-button"]')
+      .should("contain", "View payment options")
+      .and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/payment')
+      cy.get('[data-test="order-history-link"]').should('have.text', 'View your order history').and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ')
+    })
+})

test/end-to-end/cypress/quote-page-spec.cy.js

@@ -0,0 +1,59 @@
+const { addMonths, format } = require('date-fns')
+const { formats } = require("../../../config");
+
+describe("quote page spec", () => {
+  it("where the quote is awaiting acceptance", () => {
+    cy.visit(
+      "http://localhost:4000/7AGZC7uaAIV-5L34J5lnZXHvFG9J1xnbBQnieAUCn-LRJpr-QA/quote"
+    );
+    cy.log('should render correct headings')
+    cy.get('[data-test="order-history-link"]').should('have.text', 'View your order history').and('have.attr', 'href', '/7AGZC7uaAIV-5L34J5lnZXHvFG9J1xnbBQnieAUCn-LRJpr-QA')
+    cy.get('[class="local-header__heading"]').should('have.text', 'Your quote')
+    cy.get('[data-test="subheading"]').should('have.text', 'Order reference WHY589/23 for Canada')
+    cy.get('[data-test="metalist-quote"]').should('contain', 'We sent it on').and('contain', format(new Date(), formats.dateLong)).and('contain', 'It will expire on').and('contain', `${format(addMonths(new Date(), 1), formats.dateLong)} (in a month)`)
+
+    cy.log('should render quote')
+    cy.get('[data-test="quote"]').should('contain', `Date: ${format(new Date(), formats.dateLong)}`)
+    .and('contain', 'Quote for the Provision of an Overseas Market Introduction Service (“OMIS”): WHY589/23 (the Quote)')
+    .and('contain', 'Motorleaf Global HQ of 5000 Rue Saint-Patrick, Montréal, H4E 1A8, Canada')
+    .and('contain', 'DBT will deliver the Services on or before the Delivery Date which shall be 7 May 2030')
+    .and('contain', 'The Customer Contact shall be Johnny Cakeman of Motorleaf Global HQ, 5000 Rue Saint-Patrick, Montréal, H4E 1A8, Canada and [email protected].')
+    .and('contain', `This Quote must be accepted by you by ${format(addMonths(new Date(), 1), formats.dateLong)}.`)
+
+    cy.log('should render the quote acceptance elements')
+    cy.get('[data-test="field-confirm-1"]').should('contain', 'I accept the Charges and the Terms and Conditions')
+    cy.get('[data-test="accept-quote-button"]').should('have.text', 'Accept quote')
+    cy.get('[data-test="reveal-quote-problem"]').should('have.text', 'There is a problem with my quote').click()
+    cy.get('[class="c-message c-message--muted"]').should('contain', 'Get in touch with your DBT contact or email [email protected]')
+    cy.get('[data-test="omis-orders-email"]').should('have.attr', 'href', 'mailto:[email protected]')
+
+    cy.log('should accept the quote')
+    cy.get('[data-test="field-confirm-1"]').click()
+    cy.get('[data-test="accept-quote-button"]').click()
+    cy.location('pathname').should('eq', '/7AGZC7uaAIV-5L34J5lnZXHvFG9J1xnbBQnieAUCn-LRJpr-QA/quote/accepted')
+
+  });
+  it("when visiting an order where the quote is accepted", () => {
+    cy.visit(
+      "http://localhost:4000/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ/quote"
+    );
+    cy.log('should render correct headings')
+    cy.get('[data-test="order-history-link"]').should('have.text', 'View your order history').and('have.attr', 'href', '/XXMPH3b2185a7Vpe2f3RiI5HXT0Nshrck_6xGJuRp4UAsA6vkQ')
+    cy.get('[class="local-header__heading"]').should('have.text', 'Your quote')
+    cy.get('[data-test="subheading"]').should('have.text', 'Order reference RYM547/24 for Canada')
+    cy.get('[data-test="metalist-quote"]').should('contain', 'We sent it on').and('contain', format(new Date(), formats.dateLong)).and('contain', 'You accepted it on')
+
+    cy.log('should render quote')
+    cy.get('[data-test="quote"]').should('contain', `Date: ${format(new Date(), formats.dateLong)}`)
+    .and('contain', 'Quote for the Provision of an Overseas Market Introduction Service (“OMIS”): RYM547/24 (the Quote)')
+    .and('contain', 'Motorleaf Global HQ of 5000 Rue Saint-Patrick, Montréal, H4E 1A8, Canada')
+    .and('contain', 'DBT will deliver the Services on or before the Delivery Date which shall be 7 May 2030')
+    .and('contain', 'The Customer Contact shall be Johnny Cakeman of Motorleaf Global HQ, 5000 Rue Saint-Patrick, Montréal, H4E 1A8, Canada and [email protected].')
+    .and('contain', `This Quote must be accepted by you by ${format(addMonths(new Date(), 1), formats.dateLong)}.`)
+
+    cy.log('should not display the acceptance elements')
+    cy.get('[data-test="field-confirm-1"]').should('not.exist')
+    cy.get('[data-test="accept-quote-button"]').should('not.exist')
+    cy.get('[data-test="reveal-quote-problem"]').should('not.exist')
+  })
+});