@comicrelief/component-library 7.24.0 → 7.24.2

package/playwright/components/organisms/impactSlider.spec.js

@@ -0,0 +1,292 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('impact slider component - 1', () => {
+  test('impact slider - sliding to £70', async ({ page }) => {
+
+    await page.goto('/#impactslider');
+
+    // Ensure that the slider and its handle are visible
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] #ImpactSlider > div:nth-child(4)')).toBeVisible();
+
+    // slider selector
+    const sliderSelector = '[data-testid="ImpactSlider-example-1"] #ImpactSlider';
+    const slider = await page.$(sliderSelector);
+
+    const moneyBuyElement = page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"]');
+    const moneyBuyText = await moneyBuyElement.innerText();
+    console.log('Target initially: ', moneyBuyText);
+
+    if (slider) {
+      // Get the bounding box of the slider
+      let sliderBound = await slider.boundingBox();
+
+      // Get the target position for the mouse move to a donation of £70
+      const targetPosition = sliderBound.width * (70 / 100);
+
+      // Perform mouse actions to simulate dragging the slider handle
+      await page.mouse.move(sliderBound.x, sliderBound.y + sliderBound.height / 2);
+      await page.mouse.down();
+
+      while (sliderBound.width * (parseFloat(await moneyBuyElement.innerText()) / 100) !== targetPosition) {
+        await page.mouse.move(sliderBound.x + targetPosition, sliderBound.y + sliderBound.height / 2);
+        sliderBound = await slider.boundingBox();
+      }
+
+      await page.mouse.up();
+    }
+
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] > [data-preview="ImpactSlider"] > div > div > div > p')).toContainText('A donation of £70 could help pay for:');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"] [data-testid="moneybuy-amount"]')).toContainText('70');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-2"] [data-testid="moneybuy-amount"]')).toContainText('7');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-3"] [data-testid="moneybuy-amount"]')).toContainText('4');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-4"] [data-testid="moneybuy-amount"]')).toContainText('3');
+
+    // donate now button should have the amount as £70
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] button[type="submit"]')).toContainText('Donate £70 now');
+
+    await page.waitForTimeout(5000);
+    await page.close();
+  });
+
+  test('impact slider - sliding to the maximum amount £100', async ({ page }) => {
+
+    await page.goto('/#impactslider');
+
+    // Ensure that the slider and its handle are visible
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] #ImpactSlider > div:nth-child(4)')).toBeVisible();
+
+    // slider selector
+    const sliderSelector = '[data-testid="ImpactSlider-example-1"] #ImpactSlider';
+    const slider = await page.$(sliderSelector);
+
+    const moneyBuyElement = page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"]');
+    const moneyBuyText = await moneyBuyElement.innerText();
+    console.log('Target initially: ', moneyBuyText);
+
+    if (slider) {
+      // Get the bounding box of the slider
+      let sliderBound = await slider.boundingBox();
+
+      // Get the target position for the mouse move to a donation of £100
+      const targetPosition = sliderBound.width * (100 / 100);
+
+      // Perform mouse actions to simulate dragging the slider handle
+      await page.mouse.move(sliderBound.x, sliderBound.y + sliderBound.height / 2);
+      await page.mouse.down();
+
+      while (sliderBound.width * (parseFloat(await moneyBuyElement.innerText()) / 100) !== targetPosition) {
+        await page.mouse.move(sliderBound.x + targetPosition, sliderBound.y + sliderBound.height / 2);
+        sliderBound = await slider.boundingBox();
+      }
+
+      await page.mouse.up();
+    }
+
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] > [data-preview="ImpactSlider"] > div > div > div > p')).toContainText('A donation of £100 could help pay for:');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"] [data-testid="moneybuy-amount"]')).toContainText('100');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-2"] [data-testid="moneybuy-amount"]')).toContainText('10');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-3"] [data-testid="moneybuy-amount"]')).toContainText('6');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-4"] [data-testid="moneybuy-amount"]')).toContainText('5');
+
+    // donate now button should have the amount as £100
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] button[type="submit"]')).toContainText('Donate £100 now');
+
+    await page.waitForTimeout(5000);
+    await page.close();
+  });
+
+  test('impact slider - sliding to the minimum amount £25', async ({ page }) => {
+
+    await page.goto('/#impactslider');
+
+    // Ensure that the slider and its handle are visible
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] #ImpactSlider > div:nth-child(4)')).toBeVisible();
+
+    // slider selector
+    const sliderSelector = '[data-testid="ImpactSlider-example-1"] #ImpactSlider';
+    const slider = await page.$(sliderSelector);
+
+    const moneyBuyElement = page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"]');
+    const moneyBuyText = await moneyBuyElement.innerText();
+    console.log('Target initially: ', moneyBuyText);
+
+    if (slider) {
+      // Get the bounding box of the slider
+      let sliderBound = await slider.boundingBox();
+
+      // Get the target position for the mouse move to a donation of £25
+      const targetPosition = sliderBound.width * (25 / 100);
+
+      // Perform mouse actions to simulate dragging the slider handle
+      await page.mouse.move(sliderBound.x, sliderBound.y + sliderBound.height / 2);
+      await page.mouse.down();
+
+      while (sliderBound.width * (parseFloat(await moneyBuyElement.innerText()) / 100) !== targetPosition) {
+        await page.mouse.move(sliderBound.x + targetPosition, sliderBound.y + sliderBound.height / 2);
+        sliderBound = await slider.boundingBox();
+      }
+
+      await page.mouse.up();
+    }
+
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] > [data-preview="ImpactSlider"] > div > div > div > p')).toContainText('A donation of £25 could help pay for:');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"] [data-testid="moneybuy-amount"]')).toContainText('25');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-2"] [data-testid="moneybuy-amount"]')).toContainText('2');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-3"] [data-testid="moneybuy-amount"]')).toContainText('1');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-4"] [data-testid="moneybuy-amount"]')).toContainText('1');
+
+    // donate now button should have the amount as £25
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] button[type="submit"]')).toContainText('Donate £25 now');
+
+    await page.waitForTimeout(5000);
+    await page.close();
+  });
+
+  test('impact slider - moving the slider to £80 and then back to £50', async ({ page }) => {
+    await page.goto('/#impactslider');
+
+    // Ensure that the slider and its handle are visible
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] #ImpactSlider > div:nth-child(4)')).toBeVisible();
+
+    const sliderSelector = '[data-testid="ImpactSlider-example-1"] #ImpactSlider';
+    const slider = await page.$(sliderSelector);
+
+    const moneyBuyElement = page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"]');
+    const moneyBuyText = await moneyBuyElement.innerText();
+    console.log('Target initially: ', moneyBuyText);
+
+    let targetAmountBeforeMoving;
+    let sliderBound;
+
+    // drag the slider to the right to increase the amount to £80
+    if (slider) {
+      // Get the bounding box of the slider
+      sliderBound = await slider.boundingBox();
+
+      // Get the target position for the mouse move to a donation of £80
+      const targetPosition80 = sliderBound.width * (80 / 100);
+
+      // Perform mouse actions to simulate dragging the slider handle to 80
+      await page.mouse.move(sliderBound.x, sliderBound.y + sliderBound.height / 2);
+      await page.mouse.down();
+
+      while (sliderBound.width * (parseFloat(await moneyBuyElement.innerText()) / 100) !== targetPosition80) {
+        await page.mouse.move(sliderBound.x + targetPosition80, sliderBound.y + sliderBound.height / 2);
+        sliderBound = await slider.boundingBox();
+      }
+
+      await page.mouse.up();
+
+      // Update targetAmountBeforeMoving after the first slider move
+      targetAmountBeforeMoving = parseFloat(await moneyBuyElement.innerText());
+      console.log('Slider increased to amount: ', targetAmountBeforeMoving);
+    }
+
+    // Validate that the slider is at £80
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] > [data-preview="ImpactSlider"] > div > div > div > p')).toContainText('A donation of £80 could help pay for:');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"] [data-testid="moneybuy-amount"]')).toContainText('80');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-2"] [data-testid="moneybuy-amount"]')).toContainText('8');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-3"] [data-testid="moneybuy-amount"]')).toContainText('5');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-4"] [data-testid="moneybuy-amount"]')).toContainText('4');
+
+    // donate now button should have the amount as £80
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] button[type="submit"]')).toContainText('Donate £80 now');
+
+    // add a short wait for the slider to move back from £80 to £50
+    await page.waitForTimeout(5000);
+
+    // drag the slider to the left to decrease the amount to £50
+    if (slider) {
+      // Get the bounding box of the slider
+      sliderBound = await slider.boundingBox();
+
+      // Get the target position for the mouse move to a donation of £80
+      const targetPosition45 = sliderBound.width * (50 / 100);
+
+      // Perform mouse actions to simulate dragging the slider handle to 80
+      await page.mouse.move(sliderBound.x, sliderBound.y + sliderBound.height / 2);
+      await page.mouse.down();
+
+      while (sliderBound.width * (parseFloat(await moneyBuyElement.innerText()) / 100) !== targetPosition45) {
+        await page.mouse.move(sliderBound.x + targetPosition45, sliderBound.y + sliderBound.height / 2);
+        sliderBound = await slider.boundingBox();
+      }
+
+      await page.mouse.down();
+
+      await page.waitForTimeout(2000);
+
+      // Update targetAmountBeforeMoving after the first slider move
+      targetAmountBeforeMoving = parseFloat(await moneyBuyElement.innerText());
+      console.log('Slider decreased to amount: ', targetAmountBeforeMoving);
+    }
+
+    await page.waitForTimeout(2000);
+
+    // Validate that the slider is at £50
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] > [data-preview="ImpactSlider"] > div > div > div > p')).toContainText('A donation of £50 could help pay for:');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-1"] [data-testid="moneybuy-amount"]')).toContainText('50');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-2"] [data-testid="moneybuy-amount"]')).toContainText('5');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-3"] [data-testid="moneybuy-amount"]')).toContainText('3');
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] [data-testid="impact-slider--moneybuy-4"] [data-testid="moneybuy-amount"]')).toContainText('2');
+
+    // donate now button should have the amount as £50
+    await expect(page.locator('[data-testid="ImpactSlider-example-1"] button[type="submit"]')).toContainText('Donate £50 now');
+
+    await page.close();
+  });
+});
+
+test.describe('impact slider component - 2', () => {
+  test('impact slider - sliding to £45', async ({ page }) => {
+
+    await page.goto('/#impactslider');
+
+    // Ensure that the slider and its handle are visible
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"]')).toBeVisible();
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] #ImpactSlider > div:nth-child(4)')).toBeVisible();
+
+    // slider selector
+    const sliderSelector = '[data-testid="ImpactSlider-example-3"] #ImpactSlider';
+    const slider = await page.$(sliderSelector);
+
+    const moneyBuyElement = page.locator('[data-testid="ImpactSlider-example-3"] [data-testid="impact-slider--moneybuy-1"]');
+    const moneyBuyText = await moneyBuyElement.innerText();
+    console.log('Target initially: ', moneyBuyText);
+
+    if (slider) {
+      // Get the bounding box of the slider
+      let sliderBound = await slider.boundingBox();
+
+      // Get the target position for the mouse move to a donation of £45
+      const targetPosition = sliderBound.width * (45 / 100);
+
+      // Perform mouse actions to simulate dragging the slider handle
+      await page.mouse.move(sliderBound.x, sliderBound.y + sliderBound.height / 2);
+      await page.mouse.down();
+
+      while (sliderBound.width * (parseFloat(await moneyBuyElement.innerText()) / 100) !== targetPosition) {
+        await page.mouse.move(sliderBound.x + targetPosition, sliderBound.y + sliderBound.height / 2);
+        sliderBound = await slider.boundingBox();
+      }
+
+      await page.mouse.up();
+    }
+
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] > [data-preview="ImpactSlider"] > div > div > div > p')).toContainText('A donation of £45 could help pay for:');
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] [data-testid="impact-slider--moneybuy-1"] [data-testid="moneybuy-amount"]')).toContainText('45');
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] [data-testid="impact-slider--moneybuy-2"] [data-testid="moneybuy-amount"]')).toContainText('4');
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] [data-testid="impact-slider--moneybuy-3"] [data-testid="moneybuy-amount"]')).toContainText('3');
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] [data-testid="impact-slider--moneybuy-4"] [data-testid="moneybuy-amount"]')).toContainText('2');
+
+    // donate now button should have the amount as £45
+    await expect(page.locator('[data-testid="ImpactSlider-example-3"] button[type="submit"]')).toContainText('Donate £45 now');
+
+    await page.waitForTimeout(5000);
+    await page.close();
+  });
+});

package/playwright/components/organisms/marketingPreferences.spec.js

@@ -0,0 +1,220 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('marketing preferences component', () => {
+  test('marketing preferences', async ({ page }) => {
+
+    await page.goto('/#marketingpreferencesdsform');
+
+    await expect(page.locator('[data-testid="MarketingPreferencesDSForm-example-1"]')).toBeVisible();
+
+    // Email field should be visible when the checkbox is clicked
+    await expect(page.locator('div#marketing-preferences--default label[for="mp_permissionEmail-yes"]')).toBeVisible();
+    await page.locator('div#marketing-preferences--default label[for="mp_permissionEmail-yes"]').click();
+    await expect(page.locator('div#marketing-preferences--default input#mp_email')).toBeVisible();
+    expect(await page.locator('div#marketing-preferences--default label[for="mp_permissionEmail-yes"]').isChecked()).toBeTruthy();
+
+    // Post field should be visible when the checkbox is clicked
+    await expect(page.locator('div#marketing-preferences--default label[for="mp_permissionPost-yes"]')).toBeVisible();
+    await page.locator('div#marketing-preferences--default label[for="mp_permissionPost-yes"]').click();
+    await expect(page.locator('div#marketing-preferences--default input#mp_address1')).toBeVisible();
+    await expect(page.locator('div#marketing-preferences--default input#mp_address2')).toBeVisible();
+    await expect(page.locator('div#marketing-preferences--default input#mp_address3')).toBeVisible();
+    await expect(page.locator('div#marketing-preferences--default input#mp_town')).toBeVisible();
+    await expect(page.locator('div#marketing-preferences--default input#mp_postcode')).toBeVisible();
+    await expect(page.locator('div#marketing-preferences--default input#mp_country')).toBeVisible();
+
+    // Text field should be visible when the checkbox is clicked
+    await expect(page.locator('div#marketing-preferences--default label[for="mp_permissionSMS-yes"]')).toBeVisible();
+    await page.locator('div#marketing-preferences--default label[for="mp_permissionSMS-yes"]').click();
+    await expect(page.locator('div#marketing-preferences--default input#mp_mobile')).toBeVisible();
+    expect(await page.locator('div#marketing-preferences--default label[for="mp_permissionSMS-yes"]').isChecked()).toBeTruthy();
+
+    // Text field should be visible when the checkbox is clicked
+    await expect(page.locator('div#marketing-preferences--default label[for="mp_permissionPhone-yes"]')).toBeVisible();
+    await page.locator('div#marketing-preferences--default label[for="mp_permissionPhone-yes"]').click();
+    await expect(page.locator('div#marketing-preferences--default input#mp_phone')).toBeVisible();
+    expect(await page.locator('div#marketing-preferences--default label[for="mp_permissionPhone-yes"]').isChecked()).toBeTruthy();
+
+    // submit button should be visible
+    await expect(page.locator('div#marketing-preferences--default ~ input[type="submit"]')).toBeVisible();
+
+    // submitting button without entering input values should show error messages
+    await page.locator('div#marketing-preferences--default ~ input[type="submit"]').click();
+
+    // email field empty error message
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter your email address');
+
+    // postal address fields empty error messages
+    // address line 1 error message
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toContainText('Please enter the first line of your address');
+    // town error message
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toContainText('Please enter your town');
+    // postcode error message
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter your postcode');
+    // country error message
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toContainText('Please enter your country');
+    // text empty error message
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
+    // phone error message
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter your phone number');
+
+    // text field empty error message
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
+
+    // phone field empty error message
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter your phone number');
+
+    // validate email field
+    await page.locator('div#marketing-preferences--default input#mp_email').type('email-signup@email.sls.comicrelief.com');
+    await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address1').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter your email address');
+
+    // email that has : should show error message
+    await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_email').type('test:@£$%£test@comicrelief.com');
+    await page.locator('div#marketing-preferences--default input#mp_address1').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toContainText('Please enter a valid email address');
+
+    // email that has mix of special chars that's valid and not valid should show error message
+    await page.locator('div#marketing-preferences--default input#mp_email').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_email').type('Test0-9!#$%&\'*+/=?^_{|}~-@comicrelief_9-8.com.uk');
+    await page.locator('div#marketing-preferences--default input#mp_address1').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-email > div > label[for="mp_email"] > span > span')).toBeHidden('');
+
+    // postal address fields validation
+    // validate address line 1 field
+    await page.locator('div#marketing-preferences--default input#mp_address1').type('Comic Relief');
+    await page.locator('div#marketing-preferences--default input#mp_address1').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toContainText('Please enter the first line of your address');
+
+    // address line 1 with special characters should show error message
+    await page.locator('div#marketing-preferences--default input#mp_address1').type('Comic @% Relief');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
+
+    // address line 1 with valid input should not show error message
+    await page.locator('div#marketing-preferences--default input#mp_address1').fill('Comic Relief'); // clear the email field
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address1"] > span > span')).toBeHidden('');
+
+    // address line 2 optional field should not show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_address2').type('Comic Relief');
+    await page.locator('div#marketing-preferences--default input#mp_address2').fill(''); // clear the email field
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address2"] > span > span')).toBeHidden('');
+
+    // address line 3 optional field should not show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_address3').type('White Chapel');
+    await page.locator('div#marketing-preferences--default input#mp_address3').fill(''); // clear the email field
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_address2"] > span > span')).toBeHidden('');
+
+    // town field should show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_town').type('London');
+    await page.locator('div#marketing-preferences--default input#mp_town').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toContainText('Please enter your town');
+
+    // town field with special characters should show error message
+    await page.locator('div#marketing-preferences--default input#mp_town').type('Lon@%don ');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
+
+    // town field with valid input should not show error message
+    await page.locator('div#marketing-preferences--default input#mp_town').fill('LONDON'); // clear the email field
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_town"] > span > span')).toBeHidden('');
+
+    // postcode field should show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_postcode').type('E1 8QS');
+    await page.locator('div#marketing-preferences--default input#mp_postcode').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter your postcode');
+
+    // postcode field with a space should show error message
+    await page.locator('div#marketing-preferences--default input#mp_postcode').type('E 1 8QS');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter a valid postcode');
+
+    // postcode field with a space in second part should show error message
+    await page.locator('div#marketing-preferences--default input#mp_postcode').type('E1 8 QS');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toContainText('Please enter a valid postcode');
+
+    // postcode field with valid input should not show error message
+    await page.locator('div#marketing-preferences--default input#mp_postcode').fill('E1 8QS'); // clear the email field
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_postcode"] > span > span')).toBeHidden('');
+
+    // country field should show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_country').type('United Kingdom');
+    await page.locator('div#marketing-preferences--default input#mp_country').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toContainText('Please enter your country');
+
+    // country field with special characters should show error message
+    await page.locator('div#marketing-preferences--default input#mp_country').type('United £$^3 Kingdom');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toContainText('This field only accepts alphanumeric characters and , . ( ) / & \' - and must start with an alphanumeric character');
+
+    // country field with valid input should not show error message
+    await page.locator('div#marketing-preferences--default input#mp_country').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_country').fill('United Kingdom'); // clear the email field
+    await expect(page.locator('div#marketing-preferences--default div.field-post > div > label[for="mp_country"] > span > span')).toBeHidden('');
+
+    // sms field should show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_mobile').type('07123456789');
+    await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter your mobile number');
+
+    // sms field with 10 digits should show error message
+    await page.locator('div#marketing-preferences--default input#mp_mobile').type('0712345678');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
+
+    // sms field with 12 digits should show error message
+    await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_mobile').type('071234567890');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
+
+    // sms field starting with a space should show error message
+    await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_mobile').type(' 07123456789');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toContainText('Please enter a valid UK mobile number');
+
+    // sms field with valid input should not show error message
+    await page.locator('div#marketing-preferences--default input#mp_mobile').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_mobile').fill('07123456789');
+    await expect(page.locator('div#marketing-preferences--default div.field-sms > div > label[for="mp_mobile"] > span > span')).toBeHidden('');
+
+    // phone field should show error message when value is not entered
+    await page.locator('div#marketing-preferences--default input#mp_phone').type('02081234567');
+    await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter your phone number');
+
+    // phone field with 10 digits should show error message
+    await page.locator('div#marketing-preferences--default input#mp_phone').type('0208123456');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter a valid UK phone number');
+
+    // phone field with 12 digits should show error message
+    await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_phone').type('020812345678');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter a valid UK phone number');
+
+    // phone field starting with a space should show error message
+    await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_phone').type(' 02081234567');
+    await page.locator('div#marketing-preferences--default input#mp_address2').click();
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toContainText('Please enter a valid UK phone number');
+
+    // phone field with valid input should not show error message
+    await page.locator('div#marketing-preferences--default input#mp_phone').fill(''); // clear the email field
+    await page.locator('div#marketing-preferences--default input#mp_phone').fill('02081234567');
+    await expect(page.locator('div#marketing-preferences--default div.field-phone > div > label > span > span')).toBeHidden('');
+
+    await page.close();
+  });
+});

package/playwright/components/organisms/membership.spec.js

@@ -0,0 +1,47 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('membership component', () => {
+  test('membership', async ({ page }) => {
+
+    await page.goto('/#membership');
+
+    await expect(page.locator('[data-testid="Membership-example-1"]')).toBeVisible();
+
+    // moneybuy 1
+    await expect(page.locator('[data-testid="Membership-example-1"] [aria-label="£5"]')).toBeVisible();
+    await page.locator('[data-testid="Membership-example-1"] [aria-label="£5"]').click();
+    await expect(page.locator('[data-testid="Membership-example-1"] form > fieldset > p')).toContainText('a regular supply of toiletries for someone living in a refugee camp in Serbia.');
+
+    // moneybuy 2
+    await expect(page.locator('[data-testid="Membership-example-1"] [aria-label="£10"]')).toBeVisible();
+    await page.locator('[data-testid="Membership-example-1"] [aria-label="£10"]').click();
+    await expect(page.locator('[data-testid="Membership-example-1"] form > fieldset > p')).toContainText('a potentially lifesaving call for a man at risk of suicide in the UK.');
+
+    // moneybuy 3
+    await expect(page.locator('[data-testid="Membership-example-1"] [aria-label="£20"]')).toBeVisible();
+    await page.locator('[data-testid="Membership-example-1"] [aria-label="£20"]').click();
+    await expect(page.locator('[data-testid="Membership-example-1"] form > fieldset > p')).toContainText('the distribution of enough surplus food for a school breakfast club to feed 80 children.');
+
+    // amount field validation
+    await page.locator('[data-testid="Membership-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Membership-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Membership-example-1"] form > fieldset > p')).toContainText('Please enter a number between 1 and 25000, and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Membership-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Membership-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Membership-example-1"] form > fieldset > p')).toContainText('Please enter a number between 1 and 25000, and up to 2 decimal places');
+
+    // enter own amount in decimals should not show error message
+    await page.locator('[data-testid="Membership-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Membership-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
+    await expect(page.locator('[data-testid="Membership-example-1"] form > fieldset > p')).toContainText('Your donation will help us fund amazing projects in the UK and around the world.');
+
+    // clicking the submit button should take to donate.comicrelief.com/form/giftaid
+    await page.locator('[data-testid="Membership-example-1"] form > fieldset > input[type="submit"]').click();
+
+    await page.close();
+  });
+});

package/playwright.config.js

@@ -0,0 +1,49 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: './playwright',
+  /* Fail the build on CI if you accidentally left test
+  .only in the source code. */
+  forbidOnly: !!process.env.CI,
+  retries: 2,
+  workers: 2,
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 60 * 1000,
+  },
+  reporter: [
+    ['list'],
+    ['html', { open: 'never' }]
+  ],
+  use: {
+    actionTimeout: 0,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn styleguide',
+    port: '6060',
+    timeout: 120000,
+    reuseExistingServer: true,
+  },
+});

package/src/components/Atoms/SocialIcons/Utils/Icons.js

@@ -1,5 +1,5 @@
 import facebook from '../assets/facebook.svg';
-import twitter from '../assets/x-logo.svg';
+import twitter from '../assets/X-white-Subtract.svg';
 import youtube from '../assets/youtube.svg';
 import instagram from '../assets/instagram.svg';
 

package/src/components/Atoms/SocialIcons/assets/X-white-Subtract.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48ZM37.0874 9.18501L26.6638 21.3016H26.6632L38 37.8003H29.6623L22.0281 26.6901L12.4702 37.8003H10L20.9315 25.0942L10 9.18501H18.3377L25.5665 19.7057L34.6174 9.18501H37.0874ZM22.1729 23.6501L23.2805 25.2343V25.2349L30.8244 36.0253H34.6185L25.3739 22.8019L24.2663 21.2177L17.1544 11.0446H13.3603L22.1729 23.6501Z" fill="white"/>
+</svg>