@newskit-render/core 4.26.3-alpha.1 → 4.26.3-alpha.3

package/cypress/e2e/account/accessibility.cy.js

@@ -71,3 +71,18 @@ describe('Page accessibility', () => {
     })
   })
 })
+
+describe('SkipToContent', () => {
+  beforeEach(() => {
+    cy.GetAcsSession()
+    cy.mockConsentAndVisit('/account')
+  })
+
+  it('should take the user to the beginning of the main area', () => {
+    cy.get('[data-testid="skip-to-content"]').as('skiptocontentBtn')
+    cy.get('@skiptocontentBtn').focus()
+    cy.get('@skiptocontentBtn').should('contain', 'Skip to main content')
+    cy.get('@skiptocontentBtn').click()
+    cy.focused().should('have.id', 'main')
+  })
+})

package/cypress/e2e/account/{payment-failer.cy.js → banners.cy.js}

@@ -2,58 +2,86 @@ import {
   paymentFailureFirstNotice,
   paymentFailureSecondNotice,
   paymentFailureTerminatedNotice,
+  serviceCancellationDate,
 } from '../../fixtures/paymentFailure'
 
-describe('Payment Failer', () => {
+describe('Banners', () => {
   it('Should show first notice', () => {
-    cy.GetAcsSession('withSub')
+    cy.GetTnlAcsSession('tnl')
     cy.mockConsent()
-
     cy.visitAndOverrideNextData(
       '/account',
       'props.pageProps.user.paymentFailure',
       paymentFailureFirstNotice
     )
+
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains("We haven't been able to take payment")
     cy.contains(
       'You may need to update your payment details to keep your subscription.'
     )
     cy.get('[data-testid="buttonLink"]').should('be.visible')
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
     cy.contains('Update payment details')
   })
 
   it('Should show second notice', () => {
-    cy.GetAcsSession('withSub')
+    cy.GetTnlAcsSession('tnl')
     cy.mockConsent()
-
     cy.visitAndOverrideNextData(
       '/account',
       'props.pageProps.user.paymentFailure',
       paymentFailureSecondNotice
     )
+
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Act now to keep your subscription')
     cy.contains(
       'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.'
     )
     cy.get('[data-testid="buttonLink"]').should('be.visible')
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
     cy.contains('Update payment details')
   })
 
   it('Should show terminated notice', () => {
-    cy.GetAcsSession('withSub')
+    cy.GetTnlAcsSession('tnl')
     cy.mockConsent()
     cy.visitAndOverrideNextData(
       '/account',
       'props.pageProps.user.paymentFailure',
       paymentFailureTerminatedNotice
     )
+
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription has been terminated')
     cy.contains(
-      'We didn’t receive payment for your subscription. To reactivate it, please call XXXX-XXX-XXXX.'
+      'We didn’t receive payment for your subscription. To reactivate it, please call XXXX-XXX-XXXX. Or click here.'
+    )
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
+  })
+
+  it('Should show to be cancelled notice', () => {
+    cy.GetTnlAcsSession('tnl')
+    cy.mockConsent()
+    cy.visitAndOverrideNextData(
+      '/account',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      serviceCancellationDate
+    )
+
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
+    cy.contains('Your subscription will end soon.')
+    cy.contains(
+      `You have cancelled your subscription and will lose access to all benefits on ${new Date(
+        serviceCancellationDate
+      ).getDate()}/${
+        new Date(serviceCancellationDate).getMonth() + 1
+      }/${new Date(
+        serviceCancellationDate
+      ).getFullYear()}. To re-activate your subscription call XXXX-XXX-XXXX.`
     )
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
   })
 
   it('Should show expired subscription view with terminated notice', () => {
@@ -85,6 +113,7 @@ describe('Payment Failer', () => {
     Cypress.on('uncaught:exception', (err, runnable) => {
       return false
     })
+
     cy.contains('You’ve previously had a subscription that has now expired')
 
     cy.contains(
@@ -99,4 +128,42 @@ describe('Payment Failer', () => {
       .should('have.attr', 'href', '/title-subscription-options')
       .contains('View subscription options')
   })
+
+  it('Should not show banner once it has been dismissed', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() + 20 * 30 * 3600 * 1000)
+
+    cy.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      date.toISOString()
+    )
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
+    cy.contains('Your subscription will end soon.').should('exist')
+    cy.get('[data-testid="banner-close-button"]').filter(':visible').click()
+    cy.reload()
+    cy.get('[data-testid="past-due-banner"]').should('not.exist')
+  })
+
+  it('Should not display banner if set date is passed current date', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() - 24 * 35 * 3600 * 1000)
+    cy.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      date.toISOString()
+    )
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
+    cy.contains('Your subscription has been cancelled.').then(() => {
+      window.localStorage.setItem(
+        'cancelledBanner',
+        new Date(new Date().setDate(new Date().getDate() - 7)).toDateString()
+      )
+    })
+    cy.reload()
+    cy.get('[data-testid="past-due-banner"]').should('not.exist')
+    cy.clearLocalStorage()
+  })
 })

package/cypress/e2e/account/cancellation.cy.js

@@ -0,0 +1,219 @@
+import { paymentFailure } from '../../fixtures/paymentFailure'
+
+import { serviceCancellationDate } from '../../fixtures/paymentFailure'
+
+describe('Cancellation page', () => {
+  describe('Find a better name', () => {
+    beforeEach(() => {
+      cy.GetTnlAcsSession('digitalCard')
+      cy.mockConsentAndVisit('/account/cancellation')
+    })
+
+    it('Should show user cancellation reasons', () => {
+      cy.contains('Please tell us why you want to cancel')
+      cy.contains(
+        'We value your opinion and this information will help us understand how we can improve our product and the services we provide.'
+      )
+
+      cy.contains('Select one option from the list below.')
+
+      cy.contains(
+        'label',
+        'I only subscribed to read a specific article/redeem an offer'
+      )
+      cy.contains(
+        'label',
+        'I cannot justify paying for my current subscription'
+      )
+      cy.contains(
+        'label',
+        'I do not have enough time to read the edition everyday'
+      )
+      cy.contains('label', 'I prefer another news subscription service')
+      cy.contains('label', 'I do not enjoy the journalism')
+      cy.contains('label', 'I am travelling or moving abroad')
+      cy.contains('label', 'Other')
+      cy.contains('label', 'Prefer not to say')
+
+      cy.contains('[data-testid="primary-button"]', 'Continue cancellation')
+      cy.contains('[data-testid="secondary-button"]', 'Keep subscription')
+
+      //Redirects to Subscription and Billing page
+      cy.get('[data-testid="secondary-button"]').click()
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/account/subscription-and-billing')
+      })
+    })
+    it('Should show user text field when selecting Other as option', () => {
+      cy.contains('Select one option from the list below.')
+      cy.get('[type="radio"]').check('Other')
+      cy.contains('(please state)')
+
+      cy.get('textarea[name="other"]').clear()
+      cy.get('textarea[name="other"]').type('Thanks my business') //There is no validation for the text area
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains('Are you sure you want to cancel your subscription?')
+      cy.contains('Cancel subscription')
+    })
+    it('Should cancel user subscription', () => {
+      cy.contains('Select one option from the list below.')
+      cy.contains(
+        'I only subscribed to read a specific article/redeem an offer'
+      ).click()
+      cy.get('[data-testid="primary-button"]').click()
+
+      //Cancelation confirmation modal
+      cy.contains('Are you sure you want to cancel your subscription?')
+      cy.contains(
+        'You will lose unlimited access to exclusive content and benefits.'
+      )
+      cy.contains('Please note:')
+      cy.contains(
+        'Your subscription full access will be revoked by the end of your current bill cycle.'
+      )
+      cy.contains('Cancel subscription')
+      cy.contains('Keep subscription')
+
+      cy.intercept('POST', '/api/account/mutate', {
+        statusCode: 200,
+        body: { data: { cancelSubscription: { success: true } } },
+      })
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Cancelling your subscription'
+      )
+
+      // Post-cancellation modal
+      cy.get('[data-testid="dialog-content"]').should('be.visible')
+      cy.contains('Subscription cancelled')
+      cy.contains(
+        'Sorry to see you go, cancellation will be effective immediately and any current subscription benefits will be removed from your account.'
+      )
+      cy.contains(
+        'If you change your mind or cancelled by mistake, speak to one of our advisors on XXXX-XXX-XXXX.'
+      )
+      cy.contains('Back to account')
+
+      cy.get('[data-testid="centered-button"]').click()
+
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/account/subscription-and-billing')
+      })
+
+      cy.visitAndOverrideNextData(
+        '/account/subscription-and-billing',
+        'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+        serviceCancellationDate
+      )
+
+      cy.get('[data-testid="inline-message"]').contains(
+        'Your subscription will end soon'
+      )
+      cy.get('[data-testid="inline-message"]').contains(
+        'If you change your mind or cancelled by mistake, speak to one of our advisors on XXXX-XXX-XXXX.'
+      )
+      cy.get('a[href="/account/cancellation"]').should('not.exist')
+    })
+    it('Should show validation error messages when user tries to cancell subscription without selecting a cancellation reason', () => {
+      cy.contains('Select one option from the list below.')
+      cy.get('[data-testid="primary-button"]').click()
+      cy.contains('Please, select one option')
+    })
+    it('Should select only one cancellation reason', () => {
+      cy.contains('Select one option from the list below.')
+
+      cy.contains(
+        'I only subscribed to read a specific article/redeem an offer'
+      ).click()
+
+      cy.get(
+        'input[value="I only subscribed to read a specific article/redeem an offer"]'
+      ).should('be.checked')
+      cy.get(
+        'input[value="I cannot justify paying for my current subscription"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I do not have enough time to read the edition everyday"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I prefer another news subscription service"]'
+      ).should('not.be.checked')
+      cy.get('input[value="I do not enjoy the journalism"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="I am travelling or moving abroad"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="Other"]').should('not.be.checked')
+      cy.get('input[value="Prefer not to say"]').should('not.be.checked')
+
+      cy.contains('I prefer another news subscription service').click()
+
+      cy.get(
+        'input[value="I only subscribed to read a specific article/redeem an offer"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I cannot justify paying for my current subscription"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I do not have enough time to read the edition everyday"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I prefer another news subscription service"]'
+      ).should('be.checked')
+      cy.get('input[value="I do not enjoy the journalism"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="I am travelling or moving abroad"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="Other"]').should('not.be.checked')
+      cy.get('input[value="Prefer not to say"]').should('not.be.checked')
+    })
+    it('Should show error toast when canceling subscription if internal server error occures', () => {
+      cy.intercept('POST', '/api/account/mutate', { statusCode: 500 })
+
+      cy.contains('Select one option from the list below.')
+      cy.contains('I am travelling or moving abroad').click()
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        'You will lose unlimited access to exclusive content and benefits.'
+      )
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        "Sorry, we're unable to save your cancellation right now. Please try again or come back later."
+      )
+    })
+  })
+
+  it('Should show outstanding payment modal for user in payment failure', () => {
+    cy.GetTnlAcsSession('digitalCard')
+    cy.mockConsent()
+    cy.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.paymentFailure',
+      paymentFailure
+    )
+
+    cy.get('a[href="/account/cancellation"]').should('be.visible').click()
+
+    cy.contains('You have outstanding payments')
+    cy.contains(
+      'If you wish to cancel your subscription update your payment details or speak to one of our advisors on XXXX-XXX-XXXX.'
+    )
+    cy.contains('Update payment details')
+
+    cy.get('[data-testid="centered-button"]').click()
+
+    cy.location().should((loc) => {
+      expect(loc.pathname).to.eq('/account/payment')
+    })
+    cy.contains('Edit your payment method')
+  })
+})

package/cypress/e2e/account/newsletters-and-alerts.cy.js

@@ -0,0 +1,149 @@
+/* eslint-disable no-only-tests/no-only-tests */
+
+describe('Newsletters and alerts without/with account', () => {
+  beforeEach(() => {
+    cy.GetTnlAcsSession('digitalCard')
+    cy.mockConsentAndVisit('/account/newsletters-and-alerts')
+  })
+
+  it('Should display page header and description', () => {
+    cy.contains('Newsletters & Alerts')
+    cy.contains(
+      'Manage your newsletters, notifications and all other contact preferences.'
+    )
+  })
+
+  it('Should display page data', () => {
+    cy.contains('Newsletters')
+    cy.contains(
+      'Get the stories you want to read, direct to your inbox. Choose from a range of daily or weekly newsletters on the subjects that matter to you.'
+    )
+    cy.get('a[aria-label="Newsletters"]')
+      .should('have.attr', 'href')
+      .and('match', /\/newsletters/)
+
+    cy.contains('Commenting notifications')
+    cy.contains(
+      'We’ll keep you informed on conversations you contribute to or follow, by sending you email notifications. Just let us know when you’d like to be notified.'
+    )
+
+    cy.contains('Contact preferences')
+    cy.contains(
+      "We'd like to keep in touch, but only if you want us to. Manage how we contact you about marketing, special offers and promotions from our partners."
+    )
+    cy.get('a[aria-label="Contact preferences"]').should(
+      'have.attr',
+      'href',
+      '#'
+    )
+  })
+})
+
+describe('Newsletters and alerts edit pages', () => {
+  beforeEach(() => {
+    cy.GetTnlAcsSession('digitalCard')
+    cy.mockConsentAndVisit('/account/newsletters-and-alerts')
+  })
+
+  describe('Edit commenting notifications', () => {
+    it('Should show user commenting notifications', () => {
+      cy.get('a[href="/account/edit/commenting-notifications"]')
+        .should('be.visible')
+        .click()
+
+      cy.contains('Edit your commenting notifications')
+      cy.contains(
+        'We’ll send you email notifications you to keep you informed on conversations you contribute to or follow.'
+      )
+
+      cy.contains('Choose when you’d like to receive notifications:')
+
+      cy.contains('label', 'When someone mentions me in a comment')
+      cy.get('input[name="userMentioned"]').should('not.have.value', 'checked')
+      cy.contains('label', 'When someone likes one of my comments')
+      cy.get('input[name="likedYourMessage"]').should(
+        'not.have.value',
+        'checked'
+      )
+      cy.contains('label', 'When someone replies to one of my comments')
+      cy.get('input[name="repliedToMessage"]').should(
+        'not.have.value',
+        'checked'
+      )
+
+      cy.contains('[data-testid="primary-button"]', 'Save')
+      cy.contains('[data-testid="secondary-button"]', 'Cancel')
+
+      // Redirects to Newsletters and Alerts page
+      cy.get('[data-testid="secondary-button"]').click()
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/account/newsletters-and-alerts')
+      })
+    })
+
+    it('Should change user commenting notifications', () => {
+      cy.get('a[href="/account/edit/commenting-notifications"]')
+        .should('be.visible')
+        .click()
+
+      cy.contains('When someone mentions me in a comment').click()
+      cy.contains('When someone likes one of my comments').click()
+      cy.contains('When someone replies to one of my comments').click()
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Updating your preferences...'
+      )
+
+      // Redirects to Newsletters and Alerts page
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/account/newsletters-and-alerts')
+      })
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Your commenting notifications has been updated'
+      )
+
+      cy.visit('/account/edit/commenting-notifications')
+      cy.get('[data-testid="userMentioned"]').should('be.checked')
+      cy.get('[data-testid="likedYourMessage"]').should('be.checked')
+      cy.get('[data-testid="repliedToMessage"]').should('be.checked')
+      cy.contains('When someone mentions me in a comment').click()
+      cy.contains('When someone likes one of my comments').click()
+      cy.contains('When someone replies to one of my comments').click()
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Updating your preferences...'
+      )
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Your commenting notifications has been updated'
+      )
+    })
+
+    it('Should show error toast when updating commenting notifications if internal server error occures', () => {
+      cy.intercept('POST', '/api/account/mutate', { statusCode: 500 })
+
+      cy.get('a[href="/account/edit/commenting-notifications"]')
+        .should('be.visible')
+        .click()
+
+      cy.get('[data-testid="userMentioned"]').check()
+      cy.get('[data-testid="likedYourMessage"]').check()
+      cy.get('[data-testid="repliedToMessage"]').check()
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Updating your preferences...'
+      )
+      cy.contains(
+        '[data-testid="toast-container"]',
+        "Sorry, we're unable to save your commenting notifications right now. Please try again or come back later."
+      )
+    })
+  })
+})

package/cypress/e2e/account/personal-details.cy.js

@@ -3,6 +3,13 @@ describe('Personal details without user', () => {
     cy.mockConsentAndVisit('/account')
   })
 
+  it('Should display page header and description', () => {
+    cy.contains('Personal Details')
+    cy.contains(
+      'Your basic account info, including your name, contact details and log-in credentials.'
+    )
+  })
+
   it('Should display default fallback values', () => {
     cy.contains('[data-testid="ContentListIntroduction"]', 'Profile')
     // cy.get('[data-testid="ContentListItems"]').should('have.length', 3)
@@ -43,6 +50,13 @@ describe('Personal details with account', () => {
     cy.mockConsentAndVisit('/account')
   })
 
+  it('Should display page header and description', () => {
+    cy.contains('Personal Details')
+    cy.contains(
+      'Your basic account info, including your name, contact details and log-in credentials.'
+    )
+  })
+
   it('Should display logged-in user data', () => {
     cy.contains('[data-testid="ContentListIntroduction"]', 'Profile')
     cy.contains('Name')