ENG-3255: 'Update' form updates - remove transactionID (#427)

* Empty commit to trigger build

* Remove code refs to transactionID

* Test updates

* Missed one

* Tidyup

* More tidying

* Fix validation

* Add DonationType to all update journeys, update tests

* Remove reference to legacy stuff

* Update staging tests

* Final tidyup

* New opt. mobile field, make email field required

* Shorterm fix validaton issue

* Extra emphasis

* Additional text tweak

* Building out tests for new fields

* Refactor and simplify stupid edge check

* Hacky fix way around hacky code

* Revert accidental change

* Expand testing command to cover new updates

* Tidyup

* Add all tests back

* test: update giftaid/update tests

* test: update giftaid/update tests

---------

Co-authored-by: Krupa Pammi <k.pammi@comicrelief.com>

README.md

@@ -71,7 +71,7 @@ The domains for giftaid are as follows
 
 To run PR Playwright Tests locally (after running `yarn playwright install` if you haven't previously), you need to first export `REACT_APP_ENDPOINT_URL=https://giftaid-sandbox.sls.comicrelief.com/` in your terminal for the form to get submitted and then run the script `test:playwright-local:local` found in package.json; this script starts the http://localhost:3000 server in the background, config for this is found in `playwright-local/playwright-local.config.js` file and runs the tests in headless mode. 
 
-To view a test in a headed mode locally, add `--headed` flag option to `"test:playwright-local:local": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium --headed"` script found in package.json. 
+To view a test in a _headed_ mode locally, use the according command; `test:playwright-local--h`.
 
 To run a single test, add `only` annotation
 

playwright-local/tests/update/formValidation.spec.js

@@ -1,8 +1,8 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 const { Commands } = require('../utils/commands');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
+
+const email = `giftaid-staging-${Date.now().toString()}@email.sls.comicrelief.com`;
 
 test.describe('Giftaid update form validation', () => {
 
@@ -16,9 +16,7 @@ test.describe('Giftaid update form validation', () => {
 
     // submit the form
     await page.locator('button[type=submit]').click();
-
-    await expect(page.locator('div#field-error--urlTransID > span')).toContainText('This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter');
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('Please fill in your transaction id');
+
     await expect(page.locator('div#field-error--firstname > span')).toContainText('Please fill in your first name');
     await expect(page.locator('div#field-error--lastname > span')).toContainText('Please fill in your last name');
     await expect(page.locator('div#field-error--postcode > span')).toContainText('Please enter your postcode');
@@ -31,40 +29,13 @@ test.describe('Giftaid update form validation', () => {
 
     // giftaid declaration error message
     await expect(page.locator('div#field-error--giftAidClaimChoice > span')).toContainText('This field is required');
+
+    // DonationType error message
+    await expect(page.locator('#field-error--donationType')).toContainText('This field is required');
 
     await page.close();
   });
 
-  test('validate transaction ID field', async ({ page }) => {
-
-    const commands = new Commands(page);
-
-    await page.locator('input#field-input--transactionId').fill(transactionId);
-    await page.locator('input#field-input--transactionId').fill('');
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('Please fill in your transaction id');
-
-    // transaction ID number with special characters should shows error message
-    await page.locator('input#field-input--transactionId').type('ea794dc3-35f8-4a87-bc94-14125fd480@$', {delay: 100});
-    await page.waitForSelector('div#field-error--transactionId > span');
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter');
-
-    // clear the transaction ID field and enter valid inputs and submit form
-    await page.locator('input#field-input--transactionId').fill('');
-
-    // entering valid input fields should be able to submit the form
-    await commands.populateUpdateFormFields(page);
-
-    // select giftaid declaration
-    await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
-
-    // submit the form
-    await page.locator('button[type=submit]').click();
-
-    await expect(page.locator('div > h1')).toContainText('Thank you,\n' +
-      'test!');
-
-    await page.close();
-  });
 
   test('validate first name field on giftaid update form', async ({ page }) => {
 
@@ -93,7 +64,10 @@ test.describe('Giftaid update form validation', () => {
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields(page);
-
+
+    // Select 'Online' donation type
+    await page.locator('#donationType>div:nth-child(3)>label').click();
+
     // select giftaid declaration
     await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
 
@@ -134,6 +108,9 @@ test.describe('Giftaid update form validation', () => {
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields(page);
+
+    // Select 'Online' donation type
+    await page.locator('#donationType>div:nth-child(3)>label').click();
 
     // select giftaid declaration
     await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
@@ -182,10 +159,13 @@ test.describe('Giftaid update form validation', () => {
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields(page);
-
+
+    // Select 'Online' donation type
+    await page.locator('#donationType>div:nth-child(3)>label').click();
+
     // select giftaid declaration
     await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
-    
+
     // submit the form
     await page.locator('button[type=submit]').click();
 
@@ -194,6 +174,38 @@ test.describe('Giftaid update form validation', () => {
 
     await page.close();
   });
+
+  test('Validate mobile number field', async ({ page }) => {
+    const commands = new Commands(page);
+
+    // Test cases for various mobile number validations
+    const mobileTestCases = [
+      { input: '0712345678', error: 'Please enter a valid mobile phone number - it must be the same number associated with your donation.' },
+      { input: '0712345678900', error: 'Please enter a valid mobile phone number - it must be the same number associated with your donation.' },
+      { input: '0712 345 6789', error: 'Please enter a valid mobile phone number - it must be the same number associated with your donation.' },
+      { input: '0780ab5694245', error: 'Please enter a valid mobile phone number - it must be the same number associated with your donation.' },
+    ];
+
+    for (let testCase of mobileTestCases) {
+      await page.locator('#field-input--mobile').fill(''); // Clear the field before each test
+      await page.locator('#field-input--mobile').type(testCase.input, { delay: 100 });
+      await expect(page.locator('div#field-error--mobile > span')).toHaveText(testCase.error);
+    }
+
+    // Validate correct mobile number
+    await page.locator('#field-input--mobile').fill(''); // Ensure the field is cleared before filling with valid data
+
+    await commands.populateUpdateFormFields(page);
+
+    // Select yes for giftaid declaration to complete the form
+    await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
+
+    // Select 'Online' donation type
+    await page.locator('#donationType>div:nth-child(3)>label').click();
+
+    await page.locator('button[type=submit]').click();
+    await expect(page.locator('div > h1')).toHaveText('Thank you, test!');
+  });
 
   test('postcode entered with extra spaces should show error message', async ({ page }) => {
 
@@ -234,7 +246,6 @@ test.describe('Giftaid update form validation', () => {
   test('enter valid UK postcode on giftaid update form using postcode lookup should be able to submit the form', async ({ page }) => {
 
     // fill in all input fields
-    await page.locator('input#field-input--transactionId').fill(transactionId);
     await page.locator('#field-input--firstname').fill('test');
     await page.locator('#field-input--lastname').fill('test lastname');
     await page.locator('input#field-input--email').fill('giftaid-staging-@email.sls.comicrelief.com');
@@ -271,6 +282,9 @@ test.describe('Giftaid update form validation', () => {
 
       const town = await page.evaluate(() => document.querySelector('input#field-input--town').getAttribute('value'));
       console.log('Address line 1 field value is : ', town);
+
+      // Select 'Online' donation type
+      await page.locator('#donationType>div:nth-child(3)>label').click();
 
       // select giftaid declaration
       await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
@@ -288,6 +302,9 @@ test.describe('Giftaid update form validation', () => {
       await page.locator('#field-input--address2').type('CAMELFORD HOUSE 87-90');
       await page.locator('#field-input--address3').type('ALBERT EMBANKMENT');
       await page.locator('#field-input--town').type('LONDON');
+
+      // Select 'Online' donation type
+      await page.locator('#donationType>div:nth-child(3)>label').click();
 
       // select giftaid declaration
       await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();

playwright-local/tests/update/internationalAddressesValidation.spec.js

@@ -1,7 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 test.describe('International addresses validation on update form', () => {
   test('selecting a non-UK country and entering a non-UK postcode should submit the update form', async ({ page }) => {
@@ -11,7 +10,6 @@ test.describe('International addresses validation on update form', () => {
     await page.waitForLoadState('domcontentloaded');
 
     /// fill in all input fields
-    await page.locator('input#field-input--transactionId').fill(transactionId);
     await page.locator('#field-input--firstname').fill('test');
     await page.locator('#field-input--lastname').fill('test lastname');
     await page.locator('input#field-input--email').fill('giftaid-staging-@email.sls.comicrelief.com');
@@ -42,6 +40,9 @@ test.describe('International addresses validation on update form', () => {
 
     // Select yes for giftaid declaration to complete the form
     await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
+
+    // Select 'Online' donation type
+    await page.locator('#donationType>div:nth-child(3)>label').click();
 
     // Submitting the form with valid international details
     await page.locator('button[type=submit]').click();

playwright-local/tests/update/validFormSubmission.spec.js

@@ -10,15 +10,15 @@ test('Valid Giftaid Update submission', async ({ page }) => {
 
   await page.waitForLoadState('domcontentloaded');
 
-  // Ensure the transaction ID input is visible
-  await expect(page.locator('input#field-input--transactionId')).toBeVisible();
-
   // Populate all input fields with valid data
   await commands.populateUpdateFormFields(page);
 
   // Select 'Yes' for GiftAid declaration
   await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
 
+  // Select 'Online' donation type
+  await page.locator('#donationType>div:nth-child(3)>label').click();
+
   // Submit the form and validate the thank you message
   await page.locator('button[type=submit]').click();
   await expect(page.locator('div > h1')).toContainText('Thank you,\n' +

playwright-local/tests/utils/commands.js

@@ -1,11 +1,9 @@
-const { v4: uuidv4 } = require('uuid');
 const Chance = require('chance');
 const chance = new Chance();
 
 class Commands {
   constructor(page) {
     this.page = page;
-    this.transactionId = uuidv4();
   }
 
   /**
@@ -56,7 +54,6 @@ class Commands {
    * @param userData - Optional user data for form filling.
    */
   async populateUpdateFormFields(page, {
-    transactionID = this.transactionId,
     firstName = 'test',
     lastName = chance.last(),
     email = `giftaid-update-staging-${chance.email()}`,
@@ -65,9 +62,8 @@ class Commands {
     address2 = chance.street(),
     address3 = 'test address 3',
     town = chance.city(),
+    mobile = chance.phone({ country: 'uk', mobile: true }).replace(/\s/g, ''), // Remove spaces from the phone number
   } = {}) {
-    await page.locator('input#field-input--transactionId').fill(transactionID);
-    console.log('transactionId is:', transactionID);
     await page.locator('input#field-input--firstname').fill(firstName);
     await page.locator('input#field-input--lastname').fill(lastName);
     await page.locator('input#field-input--postcode').fill(postcode);
@@ -77,6 +73,7 @@ class Commands {
     await page.locator('input#field-input--address2').fill(address2);
     await page.locator('input#field-input--address3').fill(address3);
     await page.locator('input#field-input--town').fill(town);
+    await page.locator('#field-input--mobile').type(mobile);
   }
 }