@comicrelief/component-library 7.24.0 → 7.24.2

package/playwright/components/molecules/typeahead.spec.js

@@ -0,0 +1,27 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('typeahead component', () => {
+  test('typeahead', async ({ page }) => {
+
+    await page.goto('/#typeahead');
+
+    await expect(page.locator('[data-testid="Typeahead-example-1"]')).toBeVisible();
+
+    await expect(page.locator('[data-preview="Typeahead"]')).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="typeahead-test"]');
+
+    // Get the 'placeholder' attribute
+    const placeholderAttribute = await inputElement.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(placeholderAttribute).toBe('Start searching...');
+
+    // type a word and typeahead should give options
+    await page.locator('input#typeahead-test').type('red nos');
+    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await expect(page.locator('label[for="typeahead-test"] ~ div > ul[role="listbox"] > li[id="option-0"]')).toContainText('red nose');
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,293 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('donate component', () => {
+  test('Donate-example-1 - Single Donation', async ({ page }) => {
+
+    await page.goto('/#donate');
+
+    await expect(page.locator('[data-testid="Donate-example-1"]')).toBeVisible();
+
+    // moneybuy 1
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
+    await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box1[aria-label="£12.10"]').click();
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('12.10');
+
+    let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyOneButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.10 now');
+
+    // moneybuy 2
+    await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box2[aria-label="£20.00"]').click();
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
+
+    let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyTwoButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £20 now');
+
+    // moneybuy 3
+    await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box3[aria-label="£30.00"]').click();
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('30');
+
+    let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyThreeButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £30 now');
+
+    // amount field validation
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount 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="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.99 now');
+
+    // clicking the submit button should take to donate.comicrelief.com
+    await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').click();
+
+    await page.close();
+  });
+
+  test('Donate-example-1 - Monthly Donation', async ({ page }) => {
+
+    await page.goto('/#donate');
+
+    await expect(page.locator('[data-testid="Donate-example-1"]')).toBeVisible();
+
+    // click monthly donation
+    await page.locator('[data-testid="Donate-example-1"] [for="give-monthly--mship-1"]').click();
+
+    // moneybuy 1
+    await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box1[aria-label="£5.50"]').click();
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('5.50');
+
+    let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyOneButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £5.50 monthly');
+
+    // moneybuy 2
+    await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box2[aria-label="£10.00"]').click();
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('10');
+
+    let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyTwoButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £10 monthly');
+
+    // moneybuy 3
+    await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box3[aria-label="£20.00"]').click();
+    await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
+
+    let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyThreeButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £20 monthly');
+
+    // amount field validation
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Donate-example-1"] p:nth-child(4)')).toContainText('Please enter an amount 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="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
+    await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.99 monthly');
+
+    // clicking the submit button should take to donate.comicrelief.com
+    await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').click();
+
+    await page.close();
+  });
+
+  test('Donate-example-3 - high value cart', async ({ page }) => {
+
+    await page.goto('/#donate');
+
+    await expect(page.locator('[data-testid="Donate-example-3"]')).toBeVisible();
+
+    // moneybuy 1
+    await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box1[aria-label="£7777"]').click();
+    await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('7777');
+
+    let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyOneButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £7777 now');
+
+    // moneybuy 2
+    await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box2[aria-label="£8888"]').click();
+    await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('8888');
+
+    let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyTwoButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £8888 now');
+
+    // moneybuy 3
+    await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box3[aria-label="£9999"]').click();
+    await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('9999');
+
+    let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyThreeButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £9999 now');
+
+    // amount field validation
+    await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Donate-example-3"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Donate-example-3"] p:nth-child(4)')).toContainText('Please enter an amount 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="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('22000');
+    await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £22000 now');
+
+    // clicking the submit button should take to donate.comicrelief.com
+    await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').click();
+
+    await page.close();
+  });
+
+  test('Donate-example-5 - Single Giving', async ({ page }) => {
+
+    await page.goto('/#donate');
+
+    await expect(page.locator('[data-testid="Donate-example-5"]')).toBeVisible();
+
+    // moneybuy 1
+    await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box1[aria-label="£10"]').click();
+    await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('10');
+
+    let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyOneButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £10 now');
+
+    // moneybuy 2
+    await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box2[aria-label="£20"]').click();
+    await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('20');
+
+    let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyTwoButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £20 now');
+
+    // moneybuy 3
+    await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box3[aria-label="£30"]').click();
+    await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('30');
+
+    let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
+    console.log('buttonText:', moneybuyThreeButtonText);
+
+    await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £30 now');
+
+    // amount field validation
+    await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Donate-example-5"] p:nth-child(4)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Donate-example-5"] p:nth-child(4)')).toContainText('Please enter an amount 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="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('20.01');
+    await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £20.01 now');
+
+    // clicking the submit button should take to donate.comicrelief.com
+    await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').click();
+
+    await page.close();
+  });
+
+  test('Donate-example-7 - Single Giving "No Money Buys"', async ({ page }) => {
+
+    await page.goto('/#donate');
+
+    await expect(page.locator('[data-testid="Donate-example-7"]')).toBeVisible();
+
+    await expect(page.locator('[data-testid="Donate-example-7"] button[type="submit"]')).toContainText('Donate £20');
+
+    // amount field validation
+    await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Donate-example-7"] p:nth-child(3)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Donate-example-7"] p:nth-child(3)')).toContainText('Please enter an amount 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="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('20.01');
+    await expect(page.locator('[data-testid="Donate-example-7"] button[type="submit"]')).toContainText('Donate £20.01');
+
+    // clicking the submit button should take to donate.comicrelief.com
+    await page.locator('[data-testid="Donate-example-7"] button[type="submit"]').click();
+
+    await page.close();
+  });
+
+  test('Donate-example-9 - Single Giving "No Money Buys" with overridden manual input value', async ({ page }) => {
+
+    await page.goto('/#donate');
+
+    await expect(page.locator('[data-testid="Donate-example-9"]')).toBeVisible();
+
+    await expect(page.locator('[data-testid="Donate-example-9"] button[type="submit"]')).toContainText('Donate £567.89');
+
+    // amount field validation
+    await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
+
+    // enter amount 0 should show error message
+    await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('0');
+    await expect(page.locator('[data-testid="Donate-example-9"] p:nth-child(3)')).toContainText('Please enter an amount between £1 and £25000 and up to 2 decimal places');
+
+    // enter amount 25001 should show error message
+    await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('25001');
+    await expect(page.locator('[data-testid="Donate-example-9"] p:nth-child(3)')).toContainText('Please enter an amount 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="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
+    await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('20.01');
+    await expect(page.locator('[data-testid="Donate-example-9"] button[type="submit"]')).toContainText('Donate £20.01');
+
+    // clicking the submit button should take to donate.comicrelief.com
+    await page.locator('[data-testid="Donate-example-9"] button[type="submit"]').click();
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,109 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Email Signup Form component', () => {
+  test('Email SignUp Form', async ({ page }) => {
+
+    await page.goto('/#emailsignupform');
+
+    await expect(page.locator('[data-testid="EmailSignUpForm-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name')).toBeVisible();
+    await expect(page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name')).toBeVisible();
+    await expect(page.locator('[data-testid="EmailSignUpForm-example-1"] #email')).toBeVisible();
+
+    // firstname field
+    const firstnamePlaceholder = page.locator('[aria-describedby="first-name"]');
+
+    // Get the 'placeholder' attribute
+    const placeholderAttribute = await firstnamePlaceholder.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(placeholderAttribute).toBe('Enter your first name');
+
+    // validate firstname field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').type('dwe$%£34');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').type('dwe$%£34');
+
+    // firstname with special chars should show error message
+    await expect(page.locator('label[for="first-name"]  div ~ span')).toContainText('This field only accepts letters and \' - and must start with a letter');
+
+    // firstname starting with a space should show error message
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').type(' test firstname');
+    await expect(page.locator('label[for="first-name"]  div ~ span')).toContainText('This field only accepts letters and \' - and must start with a letter');
+
+    // firstname starting with numbers should show error message
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').type('1234567');
+    await expect(page.locator('label[for="first-name"]  div ~ span')).toContainText('This field only accepts letters and \' - and must start with a letter');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').fill('');
+
+    // lastname
+    const lastnamePlaceholder = page.locator('[aria-describedby="last-name"]');
+
+    // Get the 'placeholder' attribute
+    const lastnamePlaceholderAttribute = await lastnamePlaceholder.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(lastnamePlaceholderAttribute).toBe('Enter your last name');
+
+    // validate lastname field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').type('dwe$%£34');
+
+    // lastname with special chars should show error message
+    await expect(page.locator('label[for="last-name"]  div ~ span')).toContainText('This field only accepts letters and \' - and must start with a letter');
+
+    // lastname starting with a space should show error message
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').type(' test firstname');
+    await expect(page.locator('label[for="last-name"]  div ~ span')).toContainText('This field only accepts letters and \' - and must start with a letter');
+
+    // lastname starting with numbers should show error message
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').type('1234567');
+    await expect(page.locator('label[for="last-name"]  div ~ span')).toContainText('This field only accepts letters and \' - and must start with a letter');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').fill('');
+
+    // email
+    const emailPlaceholder = page.locator('[aria-describedby="email"]');
+
+    // Get the 'placeholder' attribute
+    const emailPlaceholderAttribute = await emailPlaceholder.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(emailPlaceholderAttribute).toBe('example@youremail.com');
+
+    // validate email field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('email-signup@email.sls.comicrelief.com');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').fill(''); // clear the email field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').click();
+    await expect(page.locator('label[for="email"]  div ~ span')).toContainText('Please enter your email address');
+
+    // email that has : should show error message
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').fill(''); // clear the email field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('test:@£$%£test@comicrelief.com');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').click();
+    await expect(page.locator('label[for="email"]  div ~ 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('[data-testid="EmailSignUpForm-example-1"] #email').fill(''); // clear the email field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('Test0-9!#$%&\'*+/=?^_{|}~-@comicrelief_9-8.com.uk');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').click();
+    await expect(page.locator('label[for="email"]  div ~ span')).toBeHidden('');
+
+    // enter valid inputs should not show error messages
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #first-name').type('test firstname');
+
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').fill('');
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #last-name').type('test lastname');
+
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').fill(''); // clear the email field
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] #email').type('email-signup@email.sls.comicrelief.com');
+
+    // submit the ESU form
+    await page.locator('[data-testid="EmailSignUpForm-example-1"] button[type="submit"] > span').click();
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,67 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('footer component', () => {
+  test('Standard footer', async ({ page }) => {
+
+    await page.goto('/#footer');
+
+    await expect(page.locator('[data-testid="Footer-example-1"]')).toBeVisible();
+    // footer social icons should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(2) > footer[role="banner"] [title="Check out our Facebook page"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(2) > footer[role="banner"] [title="Check out our Instagram account"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(2) > footer[role="banner"] [title="Check out our Twitter account"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(2) > footer[role="banner"] [title="Check out our YouTube channel"]')).toBeVisible();
+
+    // CR logo in the footer should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(2) > footer[role="banner"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+
+    // footer menu should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(2) > footer[role="banner"] [aria-label="main-menu"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('Overrides allowList functionality', async ({ page }) => {
+
+    await page.goto('/#footer');
+
+    await expect(page.locator('[data-testid="Footer-example-1"]')).toBeVisible();
+    // footer social icons should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [title="Check out our Facebook page"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [title="Check out our Instagram account"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [title="Check out our Twitter account"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [title="Check out our YouTube channel"]')).toBeVisible();
+
+    // CR logo in the footer should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+
+    // footer menu should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [aria-label="main-menu"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('additional legal line footer', async ({ page }) => {
+
+    await page.goto('/#footer');
+
+    await expect(page.locator('[data-testid="Footer-example-1"]')).toBeVisible();
+
+    // legal line to the top of the footer should be present
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(6) > footer[role="banner"] > div > p')).toContainText('MR. MEN ™ LITTLE MISS ™ © 2022 THOIP (a SANRIO Company). All rights reserved.');
+
+    // footer social icons should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(4) > footer[role="banner"] [title="Check out our Facebook page"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(6) > footer[role="banner"] [title="Check out our Instagram account"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(6) > footer[role="banner"] [title="Check out our Twitter account"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(6) > footer[role="banner"] [title="Check out our YouTube channel"]')).toBeVisible();
+
+    // CR logo in the footer should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(6) > footer[role="banner"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+
+    // footer menu should be visible
+    await expect(page.locator('[data-preview="Footer"] > div > div:nth-child(6) > footer[role="banner"] [aria-label="main-menu"]')).toBeVisible();
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,82 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('header component', () => {
+  test('Comic Relief header', async ({ page }) => {
+
+    await page.goto('/#header');
+
+    await expect(page.locator('[data-testid="Header-example-1"]')).toBeVisible();
+    // donate locator
+    await expect(page.locator('[data-testid="Header-example-1"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    // CR logo
+    await expect(page.locator('[data-testid="Header-example-1"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+    // shop
+    await expect(page.locator('[data-testid="Header-example-1"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('Sport Relief header', async ({ page }) => {
+
+    await page.goto('/#header');
+
+    await expect(page.locator('[data-testid="Header-example-3"]')).toBeVisible();
+    // donate locator
+    await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    // SR logo
+    await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] a[href="/sportrelief"]')).toBeVisible();
+    // shop
+    await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('Pride header', async ({ page }) => {
+
+    await page.goto('/#header');
+
+    await expect(page.locator('[data-testid="Header-example-5"]')).toBeVisible();
+    // donate locator
+    await expect(page.locator('[data-testid="Header-example-5"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    // CR logo
+    await expect(page.locator('[data-testid="Header-example-5"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+    // shop
+    await expect(page.locator('[data-testid="Header-example-5"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('Comic Relief header with Search', async ({ page }) => {
+
+    await page.goto('/#header');
+
+    await expect(page.locator('[data-testid="Header-example-7"]')).toBeVisible();
+    // donate locator
+    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    // CR logo
+    await expect(page.locator('[data-testid="Header-example-7"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+    // shop
+    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
+    // search
+    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] a[href="/search"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('Comic Relief header with Search and Shop', async ({ page }) => {
+
+    await page.goto('/#header');
+
+    await expect(page.locator('[data-testid="Header-example-9"]')).toBeVisible();
+    // donate locator
+    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    // CR logo
+    await expect(page.locator('[data-testid="Header-example-9"] [title="Go to Comic Relief homepage"]')).toBeVisible();
+    // shop icon
+    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] [title="Shop"]')).toBeVisible();
+    // search
+    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] a[href="/search"]')).toBeVisible();
+
+    await page.close();
+  });
+});