@comicrelief/component-library 7.28.0 → 7.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +2 -2
  2. package/dist/components/Organisms/Donate/Donate.js +12 -9
  3. package/dist/components/Organisms/Donate/Donate.md +27 -21
  4. package/dist/components/Organisms/Donate/Donate.style.js +37 -33
  5. package/dist/components/Organisms/Donate/Form/Form.js +11 -7
  6. package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +39 -10
  7. package/dist/components/Organisms/Donate/_utils.js +8 -3
  8. package/dist/components/Organisms/Header/Header.md +13 -0
  9. package/dist/components/Organisms/Header/assets/PayIn.svg +3 -0
  10. package/package.json +3 -2
  11. package/playwright/components/organisms/donate.spec.js +73 -79
  12. package/src/components/Organisms/Donate/Donate.js +33 -27
  13. package/src/components/Organisms/Donate/Donate.md +27 -21
  14. package/src/components/Organisms/Donate/Donate.style.js +12 -6
  15. package/src/components/Organisms/Donate/Form/Form.js +15 -10
  16. package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap +39 -10
  17. package/src/components/Organisms/Donate/_utils.js +9 -3
  18. package/src/components/Organisms/Header/Header.md +13 -0
  19. package/src/components/Organisms/Header/assets/PayIn.svg +3 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "7.28.0",
4
+ "version": "7.30.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
@@ -24,6 +24,7 @@
24
24
  "@babel/cli": "^7.21.5",
25
25
  "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
26
26
  "@hookform/resolvers": "^1.3.4",
27
+ "@playwright/test": "^1.38.1",
27
28
  "axios": "^0.21.1",
28
29
  "ejs": "^3.1.9",
29
30
  "jest-styled-components": "^7.1.1",
@@ -53,6 +54,7 @@
53
54
  },
54
55
  "scripts": {
55
56
  "test:unit": "yarn run jest",
57
+ "test:unit-update": "yarn jest -u",
56
58
  "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
57
59
  "styleguide:build": "styleguidist build",
58
60
  "postinstall": "yarn run build",
@@ -77,7 +79,6 @@
77
79
  ]
78
80
  },
79
81
  "devDependencies": {
80
- "@playwright/test": "^1.38.1",
81
82
  "cross-env": "^7.0.3",
82
83
  "eslint": "^7.32.0",
83
84
  "eslint-config-airbnb": "^18.2.0",
package/playwright/components/organisms/donate.spec.js CHANGED
@@ -2,54 +2,53 @@ const { test, expect } = require('@playwright/test');
2
2
 
3
3
  test.describe('donate component', () => {
4
4
  test('Donate-example-1 - Single Donation', async ({ page }) => {
5
-
6
5
  await page.goto('/#donate');
7
6
 
8
7
  await expect(page.locator('[data-testid="Donate-example-1"]')).toBeVisible();
9
8
 
10
9
  // moneybuy 1
11
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
12
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box1[aria-label="£12.10"]').click();
13
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('12.10');
10
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('20');
11
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box1"][aria-label="£12.10"]').click();
12
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('12.10');
14
13
 
15
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
14
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
16
15
  console.log('buttonText:', moneybuyOneButtonText);
17
16
 
18
17
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.10 now');
19
18
 
20
19
  // moneybuy 2
21
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box2[aria-label="£20.00"]').click();
22
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
20
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box2"][aria-label="£20.00"]').click();
21
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('20');
23
22
 
24
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
23
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
25
24
  console.log('buttonText:', moneybuyTwoButtonText);
26
25
 
27
26
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £20 now');
28
27
 
29
28
  // moneybuy 3
30
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box3[aria-label="£30.00"]').click();
31
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('30');
29
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box3"][aria-label="£30.00"]').click();
30
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('30');
32
31
 
33
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
32
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
34
33
  console.log('buttonText:', moneybuyThreeButtonText);
35
34
 
36
35
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £30 now');
37
36
 
38
37
  // amount field validation
39
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
38
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
40
39
 
41
40
  // enter amount 0 should show error message
42
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
41
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('0');
43
42
  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');
44
43
 
45
44
  // enter amount 25001 should show error message
46
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
47
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
45
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
46
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('25001');
48
47
  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');
49
48
 
50
49
  // enter own amount in decimals should not show error message
51
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
52
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
50
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
51
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('12.99');
53
52
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.99 now');
54
53
 
55
54
  // clicking the submit button should take to donate.comicrelief.com
@@ -59,7 +58,6 @@ test.describe('donate component', () => {
59
58
  });
60
59
 
61
60
  test('Donate-example-1 - Monthly Donation', async ({ page }) => {
62
-
63
61
  await page.goto('/#donate');
64
62
 
65
63
  await expect(page.locator('[data-testid="Donate-example-1"]')).toBeVisible();
@@ -68,47 +66,47 @@ test.describe('donate component', () => {
68
66
  await page.locator('[data-testid="Donate-example-1"] [for="give-monthly--mship-1"]').click();
69
67
 
70
68
  // moneybuy 1
71
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box1[aria-label="£5.50"]').click();
72
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('5.50');
69
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box1"][aria-label="£5.50"]').click();
70
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('5.50');
73
71
 
74
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
72
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
75
73
  console.log('buttonText:', moneybuyOneButtonText);
76
74
 
77
75
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £5.50 monthly');
78
76
 
79
77
  // moneybuy 2
80
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box2[aria-label="£10.00"]').click();
81
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('10');
78
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box2"][aria-label="£10.00"]').click();
79
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('10');
82
80
 
83
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
81
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
84
82
  console.log('buttonText:', moneybuyTwoButtonText);
85
83
 
86
84
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £10 monthly');
87
85
 
88
86
  // moneybuy 3
89
- await page.locator('[data-testid="Donate-example-1"] #mship-1--moneyBuy-box3[aria-label="£20.00"]').click();
90
- await expect(page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput')).toHaveValue('20');
87
+ await page.locator('[data-testid="Donate-example-1"] input[id$="moneyBuy-box3"][aria-label="£20.00"]').click();
88
+ await expect(page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]')).toHaveValue('20');
91
89
 
92
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
90
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-1"] button[type="submit"]').textContent();
93
91
  console.log('buttonText:', moneybuyThreeButtonText);
94
92
 
95
93
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £20 monthly');
96
94
 
97
95
  // amount field validation
98
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
96
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
99
97
 
100
98
  // enter amount 0 should show error message
101
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('0');
99
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('0');
102
100
  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');
103
101
 
104
102
  // enter amount 25001 should show error message
105
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
106
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('25001');
103
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
104
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('25001');
107
105
  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');
108
106
 
109
107
  // enter own amount in decimals should not show error message
110
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').fill('');
111
- await page.locator('[data-testid="Donate-example-1"] input#mship-1--MoneyBuy-userInput').type('12.99');
108
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').fill('');
109
+ await page.locator('[data-testid="Donate-example-1"] input[name="membership_amount"]').type('12.99');
112
110
  await expect(page.locator('[data-testid="Donate-example-1"] button[type="submit"]')).toContainText('Donate £12.99 monthly');
113
111
 
114
112
  // clicking the submit button should take to donate.comicrelief.com
@@ -118,53 +116,52 @@ test.describe('donate component', () => {
118
116
  });
119
117
 
120
118
  test('Donate-example-3 - high value cart', async ({ page }) => {
121
-
122
119
  await page.goto('/#donate');
123
120
 
124
121
  await expect(page.locator('[data-testid="Donate-example-3"]')).toBeVisible();
125
122
 
126
123
  // moneybuy 1
127
- await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box1[aria-label="£7777"]').click();
128
- await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('7777');
124
+ await page.locator('[data-testid="Donate-example-3"] input[id$="moneyBuy-box1"][aria-label="£7777"]').click();
125
+ await expect(page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]')).toHaveValue('7777');
129
126
 
130
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
127
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
131
128
  console.log('buttonText:', moneybuyOneButtonText);
132
129
 
133
130
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £7777 now');
134
131
 
135
132
  // moneybuy 2
136
- await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box2[aria-label="£8888"]').click();
137
- await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('8888');
133
+ await page.locator('[data-testid="Donate-example-3"] input[id$="moneyBuy-box2"][aria-label="£8888"]').click();
134
+ await expect(page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]')).toHaveValue('8888');
138
135
 
139
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
136
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
140
137
  console.log('buttonText:', moneybuyTwoButtonText);
141
138
 
142
139
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £8888 now');
143
140
 
144
141
  // moneybuy 3
145
- await page.locator('[data-testid="Donate-example-3"] #mship-2--moneyBuy-box3[aria-label="£9999"]').click();
146
- await expect(page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput')).toHaveValue('9999');
142
+ await page.locator('[data-testid="Donate-example-3"] input[id$="moneyBuy-box3"][aria-label="£9999"]').click();
143
+ await expect(page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]')).toHaveValue('9999');
147
144
 
148
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
145
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-3"] button[type="submit"]').textContent();
149
146
  console.log('buttonText:', moneybuyThreeButtonText);
150
147
 
151
148
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £9999 now');
152
149
 
153
150
  // amount field validation
154
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
151
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').fill('');
155
152
 
156
153
  // enter amount 0 should show error message
157
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('0');
154
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').type('0');
158
155
  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');
159
156
 
160
157
  // enter amount 25001 should show error message
161
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
162
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('25001');
158
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').fill('');
159
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').type('25001');
163
160
  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');
164
161
 
165
162
  // enter own amount in decimals should not show error message
166
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').fill('');
167
- await page.locator('[data-testid="Donate-example-3"] input#mship-2--MoneyBuy-userInput').type('22000');
163
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').fill('');
164
+ await page.locator('[data-testid="Donate-example-3"] input[name="membership_amount"]').type('22000');
168
165
  await expect(page.locator('[data-testid="Donate-example-3"] button[type="submit"]')).toContainText('Donate £22000 now');
169
166
 
170
167
  // clicking the submit button should take to donate.comicrelief.com
@@ -174,53 +171,52 @@ test.describe('donate component', () => {
174
171
  });
175
172
 
176
173
  test('Donate-example-5 - Single Giving', async ({ page }) => {
177
-
178
174
  await page.goto('/#donate');
179
175
 
180
176
  await expect(page.locator('[data-testid="Donate-example-5"]')).toBeVisible();
181
177
 
182
178
  // moneybuy 1
183
- await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box1[aria-label="£10"]').click();
184
- await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('10');
179
+ await page.locator('[data-testid="Donate-example-5"] input[id$="moneyBuy-box1"][aria-label="£10"]').click();
180
+ await expect(page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]')).toHaveValue('10');
185
181
 
186
- let moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
182
+ const moneybuyOneButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
187
183
  console.log('buttonText:', moneybuyOneButtonText);
188
184
 
189
185
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £10 now');
190
186
 
191
187
  // moneybuy 2
192
- await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box2[aria-label="£20"]').click();
193
- await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('20');
188
+ await page.locator('[data-testid="Donate-example-5"] input[id$="moneyBuy-box2"][aria-label="£20"]').click();
189
+ await expect(page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]')).toHaveValue('20');
194
190
 
195
- let moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
191
+ const moneybuyTwoButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
196
192
  console.log('buttonText:', moneybuyTwoButtonText);
197
193
 
198
194
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £20 now');
199
195
 
200
196
  // moneybuy 3
201
- await page.locator('[data-testid="Donate-example-5"] #mship-3--moneyBuy-box3[aria-label="£30"]').click();
202
- await expect(page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput')).toHaveValue('30');
197
+ await page.locator('[data-testid="Donate-example-5"] input[id$="moneyBuy-box3"][aria-label="£30"]').click();
198
+ await expect(page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]')).toHaveValue('30');
203
199
 
204
- let moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
200
+ const moneybuyThreeButtonText = await page.locator('[data-testid="Donate-example-5"] button[type="submit"]').textContent();
205
201
  console.log('buttonText:', moneybuyThreeButtonText);
206
202
 
207
203
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £30 now');
208
204
 
209
205
  // amount field validation
210
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
206
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').fill('');
211
207
 
212
208
  // enter amount 0 should show error message
213
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('0');
209
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').type('0');
214
210
  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');
215
211
 
216
212
  // enter amount 25001 should show error message
217
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
218
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('25001');
213
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').fill('');
214
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').type('25001');
219
215
  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');
220
216
 
221
217
  // enter own amount in decimals should not show error message
222
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').fill('');
223
- await page.locator('[data-testid="Donate-example-5"] input#mship-3--MoneyBuy-userInput').type('20.01');
218
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').fill('');
219
+ await page.locator('[data-testid="Donate-example-5"] input[name="membership_amount"]').type('20.01');
224
220
  await expect(page.locator('[data-testid="Donate-example-5"] button[type="submit"]')).toContainText('Donate £20.01 now');
225
221
 
226
222
  // clicking the submit button should take to donate.comicrelief.com
@@ -230,7 +226,6 @@ test.describe('donate component', () => {
230
226
  });
231
227
 
232
228
  test('Donate-example-7 - Single Giving "No Money Buys"', async ({ page }) => {
233
-
234
229
  await page.goto('/#donate');
235
230
 
236
231
  await expect(page.locator('[data-testid="Donate-example-7"]')).toBeVisible();
@@ -238,20 +233,20 @@ test.describe('donate component', () => {
238
233
  await expect(page.locator('[data-testid="Donate-example-7"] button[type="submit"]')).toContainText('Donate £20');
239
234
 
240
235
  // amount field validation
241
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
236
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').fill('');
242
237
 
243
238
  // enter amount 0 should show error message
244
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('0');
239
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').type('0');
245
240
  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');
246
241
 
247
242
  // enter amount 25001 should show error message
248
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
249
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('25001');
243
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').fill('');
244
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').type('25001');
250
245
  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');
251
246
 
252
247
  // enter own amount in decimals should not show error message
253
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').fill('');
254
- await page.locator('[data-testid="Donate-example-7"] input#mship-4--MoneyBuy-userInput').type('20.01');
248
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').fill('');
249
+ await page.locator('[data-testid="Donate-example-7"] input[name="membership_amount"]').type('20.01');
255
250
  await expect(page.locator('[data-testid="Donate-example-7"] button[type="submit"]')).toContainText('Donate £20.01');
256
251
 
257
252
  // clicking the submit button should take to donate.comicrelief.com
@@ -261,7 +256,6 @@ test.describe('donate component', () => {
261
256
  });
262
257
 
263
258
  test('Donate-example-9 - Single Giving "No Money Buys" with overridden manual input value', async ({ page }) => {
264
-
265
259
  await page.goto('/#donate');
266
260
 
267
261
  await expect(page.locator('[data-testid="Donate-example-9"]')).toBeVisible();
@@ -269,20 +263,20 @@ test.describe('donate component', () => {
269
263
  await expect(page.locator('[data-testid="Donate-example-9"] button[type="submit"]')).toContainText('Donate £567.89');
270
264
 
271
265
  // amount field validation
272
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
266
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').fill('');
273
267
 
274
268
  // enter amount 0 should show error message
275
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('0');
269
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').type('0');
276
270
  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');
277
271
 
278
272
  // enter amount 25001 should show error message
279
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
280
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('25001');
273
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').fill('');
274
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').type('25001');
281
275
  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');
282
276
 
283
277
  // enter own amount in decimals should not show error message
284
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').fill('');
285
- await page.locator('[data-testid="Donate-example-9"] input#mship-4--MoneyBuy-userInput').type('20.01');
278
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').fill('');
279
+ await page.locator('[data-testid="Donate-example-9"] input[name="membership_amount"]').type('20.01');
286
280
  await expect(page.locator('[data-testid="Donate-example-9"] button[type="submit"]')).toContainText('Donate £20.01');
287
281
 
288
282
  // clicking the submit button should take to donate.comicrelief.com
package/src/components/Organisms/Donate/Donate.js CHANGED
@@ -11,8 +11,8 @@ import { handleTitles, handleCopy } from './_utils';
11
11
  import {
12
12
  BgImage,
13
13
  Container,
14
- Header,
15
- HeaderInner,
14
+ TitleWrapperInner,
15
+ TitleWrapperOuter,
16
16
  Wrapper
17
17
  } from './Donate.style';
18
18
 
@@ -70,7 +70,8 @@ const Donate = ({
70
70
  const {
71
71
  showCopy,
72
72
  thisTitle,
73
- thisSubtitle
73
+ thisSubtitle,
74
+ noTitlesAtAll
74
75
  } = handleTitles(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
75
76
 
76
77
  const {
@@ -112,28 +113,33 @@ const Donate = ({
112
113
  />
113
114
  ) : null}
114
115
 
115
- <Wrapper formAlignRight={formAlignRight} aria-live="polite">
116
- <Header formAlignRight={formAlignRight}>
117
- <HeaderInner>
116
+ <Wrapper formAlignRight={formAlignRight} aria-live="polite" noTitlesAtAll={noTitlesAtAll}>
117
+
118
+ {/* Only render if there is SOME title copy; otherwise,
119
+ we need to the space to centre-align the form */}
120
+ { !noTitlesAtAll && (
121
+ <TitleWrapperOuter formAlignRight={formAlignRight} data-test="this-one-here">
122
+ <TitleWrapperInner>
118
123
  {showCopy && (
119
- <>
120
- <Text
121
- tag="h2"
122
- color={textColor}
123
- size="big"
124
- family="Anton"
125
- weight="normal"
126
- uppercase
127
- >
128
- {thisTitle}
129
- </Text>
130
- <Text tag="p" color={textColor} size="m">
131
- {thisSubtitle}
132
- </Text>
133
- </>
124
+ <>
125
+ <Text
126
+ tag="h2"
127
+ color={textColor}
128
+ size="big"
129
+ family="Anton"
130
+ weight="normal"
131
+ uppercase
132
+ >
133
+ {thisTitle}
134
+ </Text>
135
+ <Text tag="p" color={textColor} size="m">
136
+ {thisSubtitle}
137
+ </Text>
138
+ </>
134
139
  )}
135
- </HeaderInner>
136
- </Header>
140
+ </TitleWrapperInner>
141
+ </TitleWrapperOuter>
142
+ )}
137
143
 
138
144
  <Form
139
145
  data={data}
@@ -222,10 +228,10 @@ Donate.defaultProps = {
222
228
  additionalSingleCopy: null,
223
229
  additionalMonthlyCopy: null,
224
230
  defaultGivingType: null,
225
- monthlyTitle: null,
226
- monthlySubtitle: null,
227
- monthlyChooseAmountText: null,
228
- monthlyOtherAmountText: null
231
+ monthlyTitle: '',
232
+ monthlySubtitle: '',
233
+ monthlyChooseAmountText: '',
234
+ monthlyOtherAmountText: ''
229
235
  };
230
236
 
231
237
  export default Donate;