@comicrelief/component-library 7.24.0 → 7.24.2

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.24.0",
+  "version": "7.24.2",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
     "verbose": true,
     "testPathIgnorePatterns": [
-      "<rootDir>/cypress/",
+      "<rootDir>/playwright/",
       "<rootDir>/dist/",
       "<rootDir>/node_modules/"
     ],
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@babel/cli": "^7.21.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
     "ejs": "^3.1.9",
@@ -36,8 +37,8 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
     "react-modal": "^3.16.1",
-    "react-responsive": "^9.0.2",
     "react-range-slider-input": "^3.0.7",
+    "react-responsive": "^9.0.2",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
@@ -51,14 +52,15 @@
     "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.6"
   },
   "scripts": {
-    "test": "yarn run jest",
+    "test:unit": "yarn run jest",
     "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
     "styleguide:build": "styleguidist build",
     "postinstall": "yarn run build",
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
-    "cy:run": "export NODE_ENV=development; cypress run --headless --browser chrome",
-    "cy:open": "export NODE_ENV=development; cypress open",
-    "feature-test": "run-p --race styleguide cy:run",
+    "test:e2e": "playwright test --project=chromium",
+    "test:e2e--h": "playwright test --project=chromium --headed",
+    "test:e2e:ci": "NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
+    "test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
     "lint": "eslint src",
     "lint-fix": "yarn lint --fix"
   },
@@ -75,8 +77,8 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "^1.38.1",
     "cross-env": "^7.0.3",
-    "cypress": "13.2.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",
@@ -86,6 +88,7 @@
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
-    "semantic-release": "^17.4.6"
+    "semantic-release": "^17.4.6",
+    "start-server-and-test": "^2.0.0"
   }
 }

package/playwright/components/atoms/checkbox.spec.js

@@ -0,0 +1,64 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('checkbox', () => {
+  test('checkbox component', async ({ page }) => {
+
+    await page.goto('/#checkbox');
+
+    // checkbox component should be visible
+    await expect(page.locator('[data-testid="Checkbox-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Checkbox"]')).toBeVisible();
+
+    // ensure checkboxes are checked when clicked
+    // tennis option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')).toHaveValue('Tennis');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').isChecked()).toBeTruthy();
+
+    // basketball option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')).toHaveValue('Basketball');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').isChecked()).toBeTruthy();
+
+    // cycling option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')).toHaveValue('Cycling');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').isChecked()).toBeTruthy();
+
+    // football checkbox
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').isChecked()).toBeTruthy();
+
+    // terms and conditions
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').click();
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').isChecked()).toBeTruthy();
+
+    // ensure checkboxes are unchecked when clicked again
+    // tennis option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')).toHaveValue('Tennis');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(2)').isChecked()).toBeFalsy();
+
+    // basketball option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')).toHaveValue('Basketball');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(3)').isChecked()).toBeFalsy();
+
+    // cycling option
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')).toHaveValue('Cycling');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(4)').isChecked()).toBeFalsy();
+
+    // football checkbox
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').click();
+    await expect(page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')).toHaveValue('Football');
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(5)').isChecked()).toBeFalsy();
+
+    // terms and conditions
+    await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').click();
+    expect(await page.locator('[data-testid="Checkbox-example-1"] div > label:nth-child(8)').isChecked()).toBeFalsy();
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/input.spec.js

@@ -0,0 +1,158 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('input component', () => {
+  test('input required with label and hint', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('input#input-example-1');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="input-example-1"]');
+
+    // Get the placeholder attribute
+    const placeholderText = await inputElement.getAttribute('placeholder');
+
+    // Verify the placeholder text
+    expect(placeholderText).toBe('This is the hint text');
+
+    await page.locator('#input-example-1').type('This is test input text');
+
+    await page.close();
+  });
+
+  test('input with error message', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('input#input-example-2');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="input-example-2"]');
+
+    // Get the placeholder attribute
+    const placeholderText = await inputElement.getAttribute('placeholder');
+
+    // Verify the placeholder text
+    expect(placeholderText).toBe('This is the hint text');
+
+    await page.locator('#input-example-2').type('This is test input text');
+
+    // error message should be visible
+    await expect(page.locator('[data-preview="Input"] > div > label > span[data-test="error-message"]')).toBeVisible();
+
+    await page.close();
+  });
+
+  test('Simple input (optional)', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('input#input-example-3');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="input-example-3"]');
+
+    // Get the 'name' attribute
+    const nameAttribute = await inputElement.getAttribute('name');
+
+    // Verify the 'name' attribute
+    expect(nameAttribute).toBe('fullname');
+
+    await page.locator('#input-example-3').type('This is test input text');
+
+    await page.close();
+  });
+
+  test('Simple input (required)', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('input#input-example-4');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="input-example-4"]');
+
+    // Get the 'name' attribute
+    const nameAttribute = await inputElement.getAttribute('name');
+
+    // Verify the 'name' attribute
+    expect(nameAttribute).toBe('fullname');
+
+    await page.locator('#input-example-4').type('This is test input text');
+
+    await page.close();
+  });
+
+  test('Input Label with markup', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('input#input-example-5');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="input-example-5"]');
+
+    // Get the 'name' attribute
+    const nameAttribute = await inputElement.getAttribute('name');
+
+    // Verify the 'name' attribute
+    expect(nameAttribute).toBe('fullname');
+
+    await page.locator('#input-example-5').type('This is test input text');
+
+    await page.close();
+  });
+
+  test('Input label as React element', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('input#input-example-6');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="input-example-6"]');
+
+    // Get the 'name' attribute
+    const nameAttribute = await inputElement.getAttribute('name');
+
+    // Verify the 'name' attribute
+    expect(nameAttribute).toBe('email');
+
+    await page.locator('#input-example-6').type('This is test input text');
+
+    await page.close();
+  });
+
+  test('Input with prefix', async ({ page }) => {
+
+    await page.goto('/#input');
+
+    // input required with label and hint
+    const specificElement = page.locator('#price');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="price"]');
+
+    // Get the 'name' attribute
+    const nameAttribute = await inputElement.getAttribute('name');
+
+    const placeholderText = await inputElement.getAttribute('placeholder');
+
+    // Verify the placeholder text
+    expect(placeholderText).toBe('0.00');
+
+    // Verify the 'name' attribute
+    expect(nameAttribute).toBe('price');
+
+    await page.locator('#price').type('15.99');
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/label.spec.js

@@ -0,0 +1,29 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('label component', () => {
+  test('label - Wrapping a basic text input', async ({ page }) => {
+
+    await page.goto('/#label');
+
+    // select dropdown menu component-1 should be visible
+    const specificElement = page.locator('[data-testid="Label-example-0"]');
+    await expect(specificElement).toBeVisible();
+
+    await page.locator('input[name="field-wrapper-test"]').type('This is test text');
+
+    await page.close();
+  });
+
+  test('label component - Wrapping a styled input', async ({ page }) => {
+
+    await page.goto('/#label');
+
+    // select dropdown menu component-1 should be visible
+    const specificElement = page.locator('[data-testid="Label-example-1"]');
+    await expect(specificElement).toBeVisible();
+
+    await page.locator('input[name="field-wrapper-test-1"]').type('This is test text');
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/link.spec.js

@@ -0,0 +1,48 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('link component', () => {
+  test('link', async ({ page, context }) => {
+
+    await page.goto('/#link');
+
+    // select dropdown menu component-1 should be visible
+    const specificElement = page.locator('[data-testid="Link-example-0"]');
+    await expect(specificElement).toBeVisible();
+
+    const [popup] = await Promise.all([
+      context.waitForEvent('page'), // Wait for a new page (popup)
+      page.click('[data-preview="Link"] div:nth-child(1) > a'), // Click the link
+    ]);
+
+    // Check if the popup is a new window
+    const isNewWindow = await popup.evaluate(() => window !== window.opener);
+
+    expect(isNewWindow).toBe(true);
+
+    await page.close();
+  });
+
+  test('link standard icon', async ({ page, context }) => {
+
+    await page.goto('/#link');
+
+    // select dropdown menu component-1 should be visible
+    const specificElement = page.locator('[data-testid="Link-example-0"]');
+    await expect(specificElement).toBeVisible();
+
+    // link standard icon should be visible
+    await expect(page.locator('[data-preview="Link"] div:nth-child(2) > a > span[type="standard"]')).toBeVisible();
+
+    const [popup] = await Promise.all([
+      context.waitForEvent('page'), // Wait for a new page (popup)
+      page.click('[data-preview="Link"] div:nth-child(2) > a'), // Click the link
+    ]);
+
+    // Check if the popup is a new window
+    const isNewWindow = await popup.evaluate(() => window !== window.opener);
+
+    expect(isNewWindow).toBe(true);
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/radioButton.spec.js

@@ -0,0 +1,30 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('radio button component', () => {
+  test('radio button', async ({ page }) => {
+
+    await page.goto('/#radiobutton');
+
+    // confetti component should be visible
+    await expect(page.locator('[data-testid="RadioButton-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="RadioButton"]')).toBeVisible();
+
+    // ensure radio buttons are checked when clicked
+    // male option
+    await page.locator('[data-preview="RadioButton"] div > label:nth-child(1)').click();
+    await expect(page.locator('[data-preview="RadioButton"] div > label:nth-child(1)')).toHaveValue('male');
+    expect(await page.locator('[data-preview="RadioButton"] div > label:nth-child(1)').isChecked()).toBeTruthy();
+
+    // female option
+    await page.locator('[data-preview="RadioButton"] div > label:nth-child(2)').click();
+    await expect(page.locator('[data-preview="RadioButton"] div > label:nth-child(2)')).toHaveValue('female');
+    expect(await page.locator('[data-preview="RadioButton"] div > label:nth-child(2)').isChecked()).toBeTruthy();
+
+    // other option
+    await page.locator('[data-preview="RadioButton"] div > label:nth-child(3)').click();
+    await expect(page.locator('[data-preview="RadioButton"] div > label:nth-child(3)')).toHaveValue('other');
+    expect(await page.locator('[data-preview="RadioButton"] div > label:nth-child(3)').isChecked()).toBeTruthy();
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/select.spec.js

@@ -0,0 +1,36 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('select component', () => {
+  test('select dropdown menu', async ({ page }) => {
+
+    await page.goto('/#select');
+
+    // select dropdown menu component-1 should be visible
+    await expect(page.locator('[data-testid="Select-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Select"]')).toBeVisible();
+
+    // ensure select dropdown values are visible
+    await page.locator('[data-preview="Select"] label:nth-child(2) > select').click();
+
+    await page.locator('[data-preview="Select"] label:nth-child(2) > select').selectOption('The first option');
+    await expect(page.locator('[data-preview="Select"] label:nth-child(2) > select > option[value="Option one"]')).toHaveValue('Option one');
+
+    await page.locator('[data-preview="Select"] label:nth-child(2) > select').selectOption('The second option');
+    await expect(page.locator('[data-preview="Select"] label:nth-child(2) > select > option[value="Option two"]')).toHaveValue('Option two');
+
+    await page.locator('[data-preview="Select"] label:nth-child(2) > select').selectOption('The third option');
+    await expect(page.locator('[data-preview="Select"] label:nth-child(2) > select > option[value="Option three"]')).toHaveValue('Option three');
+
+    await page.locator('[data-preview="Select"] label:nth-child(2) > select').selectOption('The fourth option');
+    await expect(page.locator('[data-preview="Select"] label:nth-child(2) > select > option[value="Option four"]')).toHaveValue('Option four');
+
+    await page.locator('[data-preview="Select"] label:nth-child(4) > select').selectOption('The second option');
+
+    const optionElement = page.locator('[data-preview="Select"] label:nth-child(4) > select > option[value="Option two"]');
+    const isSelected = await optionElement.evaluate(option => option.selected);
+
+    expect(isSelected).toBe(true);
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/textArea.spec.js

@@ -0,0 +1,39 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('text area component', () => {
+  test('text area - Long copy/Message field', async ({ page }) => {
+
+    await page.goto('/#textarea');
+
+    // input required with label and hint
+    const specificElement = page.locator('[data-testid="TextArea-example-1"]');
+    await expect(specificElement).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="textarea-test"]');
+
+    // Get the placeholder attribute
+    const placeholderText = await inputElement.getAttribute('placeholder');
+
+    // Verify the placeholder text
+    expect(placeholderText).toBe('This is a placeholder');
+
+    await page.locator('[aria-describedby="textarea-test"]').type('This is test text for textarea field');
+
+    await page.close();
+  });
+
+  test('text area - Long copy/Message field with error message', async ({ page }) => {
+
+    await page.goto('/#textarea');
+
+    const specificElement = page.locator('[data-testid="TextArea-example-1"]');
+    await expect(specificElement).toBeVisible();
+
+    await page.locator('[aria-describedby="textarea-test-2"]').type('This is test text for textarea field');
+
+    // error message should be visible
+    await expect(page.locator('[aria-describedby="textarea-test-2"] ~ span[data-test="error-message"]')).toBeVisible();
+
+    await page.close();
+  });
+});

package/playwright/components/atoms/textInputWithDropdown.spec.js

@@ -0,0 +1,23 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Text Input With Dropdown Component', () => {
+  test('TextInputWithDropdown component', async ({ page }) => {
+
+    await page.goto('/#textinputwithdropdown');
+
+    const specificElement = page.locator('[data-testid="TextInputWithDropdown-example-1"]');
+    await expect(specificElement).toBeVisible();
+
+    await page.locator('label[for="input-with-dropdown"]').type('This is test text for textarea field');
+
+    // Text input with dropdown
+    await page.locator('label[for="input-with-dropdown"]').type('test');
+
+    // ensure select dropdown values are visible
+    await expect(page.locator('label[for="input-with-dropdown"] ~ div > ul[role="listbox"]')).toBeVisible();
+
+    await page.locator('label[for="input-with-dropdown"] ~ div > ul[role="listbox"] > li[id="option-1"]').click();
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,20 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('accordian component', () => {
+  test('accordian', async ({ page, context }) => {
+
+    await page.goto('/#accordion');
+
+    // accordian elements should be visible
+    await expect(page.locator('[data-testid="Accordion-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="Accordion"]')).toBeVisible();
+    // dropdown svg icon should be visible
+    await expect(page.locator('[data-preview="Accordion"] svg')).toBeVisible();
+
+    // clicking the accordian should show the paragraph
+    await page.locator('[data-preview="Accordion"] svg').click();
+    await expect(page.locator('[data-preview="Accordion"] p')).toBeVisible();
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,26 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('school lookup component', () => {
+  test('school lookup', async ({ page, context }) => {
+
+    await page.goto('/#schoollookup');
+
+    // school lookup elements should be visible
+    await expect(page.locator('[data-testid="SchoolLookup-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="SchoolLookup"]')).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="school-lookup"]');
+
+    // Get the 'placeholder' attribute
+    const placeholderAttribute = await inputElement.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(placeholderAttribute).toBe('Type to start search');
+
+    await page.locator('#school-lookup').type('St Paul');
+    await expect(page.locator('label[for="school-lookup"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await page.locator('label[for="school-lookup"] ~ div > ul[role="listbox"] > li[id="option-6"]').click();
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,24 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('search input component', () => {
+  test('search input', async ({ page, context }) => {
+
+    await page.goto('/#searchinput');
+
+    // accordian elements should be visible
+    await expect(page.locator('[data-testid="SearchInput-example-1"]')).toBeVisible();
+    await expect(page.locator('[data-preview="SearchInput"]')).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="school-lookup"]');
+
+    // Get the 'placeholder' attribute
+    const placeholderAttribute = await inputElement.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(placeholderAttribute).toBe('Type to start search');
+
+    await page.locator('#search').type('Red Nose Day');
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,32 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('share button component', () => {
+  test('share button', async ({ page, context }) => {
+
+    await page.goto('/#sharebutton');
+
+    // accordian elements should be visible
+    await expect(page.locator('[data-testid="ShareButton-example-0"]')).toBeVisible();
+    await expect(page.locator('[data-preview="ShareButton"]')).toBeVisible();
+
+    await expect(page.locator('[data-preview="ShareButton"] > div > div > div:nth-child(1) > ul > li:nth-child(1) > a > img')).toBeVisible();
+
+    const facebookShareButton  = page.locator('[data-preview="ShareButton"] > div > div > div:nth-child(1) > ul > li:nth-child(1) > a');
+
+    // Get the 'title' attribute
+    const placeholderAttribute = await facebookShareButton.getAttribute('title');
+
+    // Verify the 'title' attribute
+    expect(placeholderAttribute).toBe('Share on Facebook');
+
+    const twitterShareButton  = page.locator('[data-preview="ShareButton"] > div > div > div:nth-child(1) > ul > li:nth-child(2) > a');
+
+    // Get the 'title' attribute
+    const twiiterPlaceholderAttribute = await twitterShareButton.getAttribute('title');
+
+    // Verify the 'title' attribute
+    expect(twiiterPlaceholderAttribute).toBe('Share on Twitter');
+
+    await page.close();
+  });
+});

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

@@ -0,0 +1,35 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('simple school lookup component', () => {
+  test('simple school lookup', async ({ page, context }) => {
+
+    await page.goto('/#simpleschoollookup');
+
+    // simple school lookup elements should be visible
+    await expect(page.locator('[data-testid="SimpleSchoolLookup-example-0"]')).toBeVisible();
+    await expect(page.locator('[data-preview="SimpleSchoolLookup"]')).toBeVisible();
+
+    const inputElement = page.locator('[aria-describedby="school_lookup"]');
+
+    // Get the 'placeholder' attribute
+    const placeholderAttribute = await inputElement.getAttribute('placeholder');
+
+    // Verify the 'placeholder' attribute
+    expect(placeholderAttribute).toBe('Enter name or postcode...');
+
+    // enter school name and click find address button
+    await page.locator('input#school_lookup').type('St Paul');
+    await expect(page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]')).toBeVisible();
+    await page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]').click();
+    await expect(page.locator('label[for="school_lookup"] ~ div > ul[role="listbox"]')).toBeVisible();
+
+    // clear school name and enter school postcode
+    await page.locator('input#school_lookup').fill('');
+    await page.locator('input#school_lookup').fill('EC4M 9AD');
+    await expect(page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]')).toBeVisible();
+    await page.locator('[data-preview="SimpleSchoolLookup"] > div > div > button[type="button"]').click();
+
+    await expect(page.locator('label[for="school_lookup"] ~ div > ul[role="listbox"]')).toBeVisible();
+    await page.close();
+  });
+});