@ons/design-system 70.0.12 → 70.0.14

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 (23) hide show
  1. package/README.md +2 -2
  2. package/components/access-code/_macro.spec.js +170 -136
  3. package/components/address-input/autosuggest.address.spec.js +17 -12
  4. package/components/autosuggest/autosuggest.spec.js +7 -5
  5. package/components/back-to-top/_macro.spec.js +42 -48
  6. package/components/back-to-top/back-to-top.spec.js +4 -2
  7. package/components/cookies-banner/cookies-banner.spec.js +1 -1
  8. package/components/list/_macro.njk +13 -3
  9. package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js +7 -5
  10. package/components/mutually-exclusive/mutually-exclusive.date.spec.js +10 -8
  11. package/components/mutually-exclusive/mutually-exclusive.duration.spec.js +10 -8
  12. package/components/mutually-exclusive/mutually-exclusive.email.spec.js +6 -4
  13. package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js +7 -5
  14. package/components/mutually-exclusive/mutually-exclusive.number.spec.js +6 -4
  15. package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js +6 -4
  16. package/components/navigation/navigation.spec.js +8 -6
  17. package/components/table/table.spec.js +1 -1
  18. package/components/table-of-contents/toc.spec.js +4 -2
  19. package/components/timeout-modal/timeout-modal.spec.js +41 -36
  20. package/components/timeout-panel/timeout-panel.spec.js +4 -2
  21. package/components/video/video.spec.js +109 -85
  22. package/js/cookies-settings.spec.js +1 -1
  23. package/package.json +4 -3
package/components/cookies-banner/cookies-banner.spec.js CHANGED
@@ -4,7 +4,7 @@ const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {});
4
4
 
5
5
  describe('script: cookies-banner', () => {
6
6
  beforeEach(async () => {
7
- const client = await page.target().createCDPSession();
7
+ const client = await page.createCDPSession();
8
8
  await client.send('Network.clearBrowserCookies');
9
9
  });
10
10
 
package/components/list/_macro.njk CHANGED
@@ -20,10 +20,17 @@
20
20
  {% else %}
21
21
  {% set listEl = 'ul' %}
22
22
  {% endif %}
23
+
24
+ {% if listLength < 2 %}
25
+ {% set attributes = params.itemsList[0].attributes %}
26
+ {% else %}
27
+ {% set attributes = params.attributes %}
28
+ {% endif %}
23
29
  {% set openingTag = "<" + listEl %}
24
30
  {% set closingTag = "</" + listEl + ">" %}
31
+
25
32
  {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
26
- class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
33
+ class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attribute, value in (attributes.items() if attributes is mapping and attributes.items else attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
27
34
  {%- for item in params.itemsList -%}
28
35
  {% set sublistClasses = item.listClasses if item.listClasses %}
29
36
  {%
@@ -48,7 +55,7 @@
48
55
 
49
56
  {%- if item.prefix or (params.iconPosition == 'before') -%}
50
57
  <span
51
- class="ons-list__prefix {{ 'ons-list__prefix--icon-check' if params.variants == 'summary' and params.iconType == 'check' }}"
58
+ class="ons-list__prefix{{ ' ons-list__prefix--icon-check' if params.variants == 'summary' and itemIconType == 'check' }}"
52
59
  {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
53
60
  >
54
61
  {%- if item.prefix -%}
@@ -74,6 +81,7 @@
74
81
  })
75
82
  }}
76
83
  {%- else -%}
84
+ {# Remove setting attributes on link in future update #}
77
85
  <a
78
86
  href="{{ item.url }}"
79
87
  class="ons-list__link{{ ' ons-js-inpagelink' if item.variants == 'inPageLink' }}{{ ' ' + item.classes if item.classes else '' }}"
@@ -90,7 +98,7 @@
90
98
  {%- endif -%}
91
99
  {%- if item.suffix or (params.iconPosition == 'after') -%}
92
100
  <span
93
- class="ons-list__suffix {{ 'ons-list__suffix--icon-check' if params.variants == 'summary' and params.iconType == 'check' }}"
101
+ class="ons-list__suffix{{ ' ons-list__suffix--icon-check' if params.variants == 'summary' and itemIconType == 'check' }}"
94
102
  {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
95
103
  >
96
104
  {%- if item.suffix -%}
@@ -115,9 +123,11 @@
115
123
  {% endset %}
116
124
 
117
125
  {% if listLength > 1 or listEl == 'ul' %}
126
+ {# Remove if not item.url in future update #}
118
127
  <li
119
128
  class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
120
129
  {% if item.current %}aria-current="true"{% endif %}
130
+ {% if not item.url %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}{% endif %}
121
131
  >
122
132
  {{- listItem | safe -}}
123
133
  </li>
package/components/mutually-exclusive/mutually-exclusive.checkboxes.spec.js CHANGED
@@ -60,6 +60,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = {
60
60
  },
61
61
  };
62
62
 
63
+ const { setTimeout } = require('node:timers/promises');
64
+
63
65
  describe('script: mutually-exclusive', () => {
64
66
  describe('checkboxes', () => {
65
67
  beforeEach(async () => {
@@ -93,7 +95,7 @@ describe('script: mutually-exclusive', () => {
93
95
  });
94
96
 
95
97
  it('then the aria-live message should reflect the removed non exclusive options', async () => {
96
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
98
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
97
99
 
98
100
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
99
101
  expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
@@ -125,7 +127,7 @@ describe('script: mutually-exclusive', () => {
125
127
  });
126
128
 
127
129
  it('then the aria-live message should reflect the removed exclusive option', async () => {
128
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
130
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
129
131
 
130
132
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
131
133
  expect(alertText).toBe('No central heating deselected.');
@@ -137,7 +139,7 @@ describe('script: mutually-exclusive', () => {
137
139
  });
138
140
 
139
141
  it('the aria-live message should not be updated', async () => {
140
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
142
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
141
143
 
142
144
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
143
145
  expect(alertText).toBe('No central heating deselected.');
@@ -166,7 +168,7 @@ describe('script: mutually-exclusive', () => {
166
168
  });
167
169
 
168
170
  it('then the aria-live message should say nothing', async () => {
169
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
171
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
170
172
 
171
173
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
172
174
  expect(alertText).toBe('');
@@ -192,7 +194,7 @@ describe('script: mutually-exclusive', () => {
192
194
  });
193
195
 
194
196
  it('then the aria-live message should say nothing', async () => {
195
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
197
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
196
198
 
197
199
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
198
200
  expect(alertText).toBe('');
package/components/mutually-exclusive/mutually-exclusive.date.spec.js CHANGED
@@ -70,6 +70,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS = {
70
70
  },
71
71
  };
72
72
 
73
+ const { setTimeout } = require('node:timers/promises');
74
+
73
75
  describe('script: mutually-exclusive', () => {
74
76
  describe('date', () => {
75
77
  beforeEach(async () => {
@@ -103,7 +105,7 @@ describe('script: mutually-exclusive', () => {
103
105
  });
104
106
 
105
107
  it('then the aria alert should tell the user that the date input has been cleared', async () => {
106
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
108
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
107
109
 
108
110
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
109
111
  expect(alertText).toBe('Day cleared. Month cleared. Year cleared.');
@@ -129,7 +131,7 @@ describe('script: mutually-exclusive', () => {
129
131
  });
130
132
 
131
133
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
132
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
134
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
133
135
 
134
136
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
135
137
  expect(alertText).toBe('I have never had a paid job deselected.');
@@ -146,7 +148,7 @@ describe('script: mutually-exclusive', () => {
146
148
  });
147
149
 
148
150
  it('then the aria alert shouldnt say anything', async () => {
149
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
151
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
150
152
 
151
153
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
152
154
  expect(alertText).toBe('');
@@ -159,7 +161,7 @@ describe('script: mutually-exclusive', () => {
159
161
  });
160
162
 
161
163
  it('then the aria alert shouldnt say anything', async () => {
162
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
164
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
163
165
 
164
166
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
165
167
  expect(alertText).toBe('');
@@ -193,7 +195,7 @@ describe('script: mutually-exclusive', () => {
193
195
  });
194
196
 
195
197
  it('then the aria alert should tell the user that the date input has been cleared', async () => {
196
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
198
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
197
199
 
198
200
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
199
201
  expect(alertText).toBe('What year was your last MOT? cleared.');
@@ -217,7 +219,7 @@ describe('script: mutually-exclusive', () => {
217
219
  });
218
220
 
219
221
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
220
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
222
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
221
223
 
222
224
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
223
225
  expect(alertText).toBe('I have never had a paid job deselected.');
@@ -232,7 +234,7 @@ describe('script: mutually-exclusive', () => {
232
234
  });
233
235
 
234
236
  it('then the aria alert shouldnt say anything', async () => {
235
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
237
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
236
238
 
237
239
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
238
240
  expect(alertText).toBe('');
@@ -245,7 +247,7 @@ describe('script: mutually-exclusive', () => {
245
247
  });
246
248
 
247
249
  it('then the aria alert shouldnt say anything', async () => {
248
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
250
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
249
251
 
250
252
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
251
253
  expect(alertText).toBe('');
package/components/mutually-exclusive/mutually-exclusive.duration.spec.js CHANGED
@@ -70,6 +70,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS = {
70
70
  },
71
71
  };
72
72
 
73
+ const { setTimeout } = require('node:timers/promises');
74
+
73
75
  describe('script: mutually-exclusive', () => {
74
76
  describe('duration', () => {
75
77
  beforeEach(async () => {
@@ -100,7 +102,7 @@ describe('script: mutually-exclusive', () => {
100
102
  });
101
103
 
102
104
  it('then the aria alert should tell the user that the inputs have been cleared', async () => {
103
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
105
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
104
106
 
105
107
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
106
108
  expect(alertText).toBe('Years cleared. Months cleared.');
@@ -125,7 +127,7 @@ describe('script: mutually-exclusive', () => {
125
127
  });
126
128
 
127
129
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
128
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
130
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
129
131
 
130
132
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
131
133
  expect(alertText).toBe('I have not moved in to this address yet deselected.');
@@ -141,7 +143,7 @@ describe('script: mutually-exclusive', () => {
141
143
  });
142
144
 
143
145
  it('then the aria alert shouldnt say anything', async () => {
144
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
146
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
145
147
 
146
148
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
147
149
  expect(alertText).toBe('');
@@ -154,7 +156,7 @@ describe('script: mutually-exclusive', () => {
154
156
  });
155
157
 
156
158
  it('then the aria alert shouldnt say anything', async () => {
157
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
159
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
158
160
 
159
161
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
160
162
  expect(alertText).toBe('');
@@ -189,7 +191,7 @@ describe('script: mutually-exclusive', () => {
189
191
  });
190
192
 
191
193
  it('then the aria alert should tell the user that the inputs have been cleared', async () => {
192
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
194
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
193
195
 
194
196
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
195
197
  expect(alertText).toBe('How long have you lived at this address? cleared.');
@@ -213,7 +215,7 @@ describe('script: mutually-exclusive', () => {
213
215
  });
214
216
 
215
217
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
216
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
218
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
217
219
 
218
220
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
219
221
  expect(alertText).toBe('I have not moved in to this address yet deselected.');
@@ -228,7 +230,7 @@ describe('script: mutually-exclusive', () => {
228
230
  });
229
231
 
230
232
  it('then the aria alert shouldnt say anything', async () => {
231
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
233
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
232
234
 
233
235
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
234
236
  expect(alertText).toBe('');
@@ -241,7 +243,7 @@ describe('script: mutually-exclusive', () => {
241
243
  });
242
244
 
243
245
  it('then the aria alert shouldnt say anything', async () => {
244
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
246
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
245
247
 
246
248
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
247
249
  expect(alertText).toBe('');
package/components/mutually-exclusive/mutually-exclusive.email.spec.js CHANGED
@@ -27,6 +27,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS = {
27
27
  },
28
28
  };
29
29
 
30
+ const { setTimeout } = require('node:timers/promises');
31
+
30
32
  describe('script: mutually-exclusive', () => {
31
33
  describe('email input', () => {
32
34
  beforeEach(async () => {
@@ -54,7 +56,7 @@ describe('script: mutually-exclusive', () => {
54
56
  });
55
57
 
56
58
  it('then the aria alert should tell the user that the email input has been cleared', async () => {
57
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
59
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
58
60
 
59
61
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
60
62
  expect(alertText).toBe('Enter an email cleared.');
@@ -78,7 +80,7 @@ describe('script: mutually-exclusive', () => {
78
80
  });
79
81
 
80
82
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
81
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
83
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
82
84
 
83
85
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
84
86
  expect(alertText).toBe('I dont want to receive a confirmation email deselected.');
@@ -93,7 +95,7 @@ describe('script: mutually-exclusive', () => {
93
95
  });
94
96
 
95
97
  it('then the aria alert shouldnt say anything', async () => {
96
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
98
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
97
99
 
98
100
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
99
101
  expect(alertText).toBe('');
@@ -106,7 +108,7 @@ describe('script: mutually-exclusive', () => {
106
108
  });
107
109
 
108
110
  it('then the aria alert shouldnt say anything', async () => {
109
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
111
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
110
112
 
111
113
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
112
114
  expect(alertText).toBe('');
package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js CHANGED
@@ -67,6 +67,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = {
67
67
  },
68
68
  };
69
69
 
70
+ const { setTimeout } = require('node:timers/promises');
71
+
70
72
  describe('script: mutually-exclusive', () => {
71
73
  describe('checkboxes', () => {
72
74
  beforeEach(async () => {
@@ -100,7 +102,7 @@ describe('script: mutually-exclusive', () => {
100
102
  });
101
103
 
102
104
  it('then the aria-live message should reflect the removed non exclusive options', async () => {
103
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
105
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
104
106
 
105
107
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
106
108
  expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
@@ -133,7 +135,7 @@ describe('script: mutually-exclusive', () => {
133
135
  });
134
136
 
135
137
  it('then the aria-live message should reflect the removed exclusive option', async () => {
136
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
138
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
137
139
 
138
140
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
139
141
  expect(alertText).toBe('Dont know deselected.');
@@ -145,7 +147,7 @@ describe('script: mutually-exclusive', () => {
145
147
  });
146
148
 
147
149
  it('the aria-live message should not be updated', async () => {
148
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
150
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
149
151
 
150
152
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
151
153
  expect(alertText).toBe('Dont know deselected.');
@@ -175,7 +177,7 @@ describe('script: mutually-exclusive', () => {
175
177
  });
176
178
 
177
179
  it('then the aria-live message should say nothing', async () => {
178
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
180
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
179
181
 
180
182
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
181
183
  expect(alertText).toBe('');
@@ -202,7 +204,7 @@ describe('script: mutually-exclusive', () => {
202
204
  });
203
205
 
204
206
  it('then the aria-live message should say nothing', async () => {
205
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
207
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
206
208
 
207
209
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
208
210
  expect(alertText).toBe('');
package/components/mutually-exclusive/mutually-exclusive.number.spec.js CHANGED
@@ -33,6 +33,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
33
33
  },
34
34
  };
35
35
 
36
+ const { setTimeout } = require('node:timers/promises');
37
+
36
38
  describe('script: mutually-exclusive', () => {
37
39
  describe('number input', () => {
38
40
  beforeEach(async () => {
@@ -60,7 +62,7 @@ describe('script: mutually-exclusive', () => {
60
62
  });
61
63
 
62
64
  it('then the aria alert should tell the user that the number input has been cleared', async () => {
63
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
65
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
64
66
 
65
67
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
66
68
  expect(alertText).toBe('Gross annual income cleared.');
@@ -84,7 +86,7 @@ describe('script: mutually-exclusive', () => {
84
86
  });
85
87
 
86
88
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
87
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
89
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
88
90
 
89
91
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
90
92
  expect(alertText).toBe('I prefer not to say deselected.');
@@ -99,7 +101,7 @@ describe('script: mutually-exclusive', () => {
99
101
  });
100
102
 
101
103
  it('then the aria alert shouldnt say anything', async () => {
102
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
104
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
103
105
 
104
106
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
105
107
  expect(alertText).toBe('');
@@ -112,7 +114,7 @@ describe('script: mutually-exclusive', () => {
112
114
  });
113
115
 
114
116
  it('then the aria alert shouldnt say anything', async () => {
115
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
117
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
116
118
 
117
119
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
118
120
  expect(alertText).toBe('');
package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js CHANGED
@@ -34,6 +34,8 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS = {
34
34
  },
35
35
  };
36
36
 
37
+ const { setTimeout } = require('node:timers/promises');
38
+
37
39
  const FAKE_TEXTAREA_INPUT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
38
40
 
39
41
  describe('script: mutually-exclusive', () => {
@@ -68,7 +70,7 @@ describe('script: mutually-exclusive', () => {
68
70
  });
69
71
 
70
72
  it('then the aria alert should tell the user that the textarea has been cleared', async () => {
71
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
73
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
72
74
 
73
75
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
74
76
  expect(alertText).toBe('Enter your feedback cleared.');
@@ -92,7 +94,7 @@ describe('script: mutually-exclusive', () => {
92
94
  });
93
95
 
94
96
  it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
95
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
97
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
96
98
 
97
99
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
98
100
  expect(alertText).toBe('I dont want to provide feedback deselected.');
@@ -107,7 +109,7 @@ describe('script: mutually-exclusive', () => {
107
109
  });
108
110
 
109
111
  it('then the aria alert shouldnt say anything', async () => {
110
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
112
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
111
113
 
112
114
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
113
115
  expect(alertText).toBe('');
@@ -120,7 +122,7 @@ describe('script: mutually-exclusive', () => {
120
122
  });
121
123
 
122
124
  it('then the aria alert shouldnt say anything', async () => {
123
- await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
125
+ await setTimeout(SCREEN_READER_TIMEOUT_DELAY);
124
126
 
125
127
  const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
126
128
  expect(alertText).toBe('');
package/components/navigation/navigation.spec.js CHANGED
@@ -230,12 +230,14 @@ describe('script: navigation', () => {
230
230
  });
231
231
 
232
232
  describe('when the toggle button is clicked to close the navigation list', () => {
233
+ const { setTimeout } = require('node:timers/promises');
234
+
233
235
  beforeEach(async () => {
234
236
  await page.focus(buttonEl);
235
237
  await page.keyboard.press('Enter');
236
- await page.waitForTimeout(100);
238
+ await setTimeout(100);
237
239
  await page.keyboard.press('Enter');
238
- await page.waitForTimeout(100);
240
+ await setTimeout(100);
239
241
  });
240
242
 
241
243
  it('has aria-hidden set as `true` on the navigation list', async () => {
@@ -270,14 +272,14 @@ describe('script: navigation', () => {
270
272
 
271
273
  it('has the aria-hidden attribute removed from the navigation list', async () => {
272
274
  const nav = await page.$(navEl);
273
- const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null);
274
- expect(hasAriaAttribute).toBe(false);
275
+ const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === null);
276
+ expect(hasAriaAttribute).toBe(true);
275
277
  });
276
278
 
277
279
  it('has aria-expanded removed from the navigation toggle button', async () => {
278
280
  const button = await page.$(buttonEl);
279
- const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') !== null);
280
- expect(hasAriaExpanded).toBe(false);
281
+ const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') === null);
282
+ expect(hasAriaExpanded).toBe(true);
281
283
  });
282
284
 
283
285
  it('has the hide class removed from the navigation list', async () => {
package/components/table/table.spec.js CHANGED
@@ -31,7 +31,7 @@ describe('script: table', () => {
31
31
  });
32
32
 
33
33
  it('should show both shadow elements', async () => {
34
- await page.waitForTimeout(200);
34
+ await new Promise((r) => setTimeout(r, 200));
35
35
 
36
36
  const leftShadowVisibleCount = await page.$$eval('.ons-table__left-shadow.ons-visible', (nodes) => nodes.length);
37
37
  expect(leftShadowVisibleCount).not.toBe(0);
package/components/table-of-contents/toc.spec.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
2
2
 
3
+ const { setTimeout } = require('node:timers/promises');
4
+
3
5
  describe('script: table-of-contents', () => {
4
6
  beforeEach(async () => {
5
7
  await setTestPage(
@@ -55,7 +57,7 @@ describe('script: table-of-contents', () => {
55
57
  ['section3', 'Third section'],
56
58
  ])('marks "%s" as the current section', async (sectionId, sectionTitle) => {
57
59
  await page.$eval(`#${sectionId}`, (node) => node.scrollIntoView());
58
- await page.waitForTimeout(250);
60
+ await setTimeout(250);
59
61
 
60
62
  const activeSection = await page.$eval('.ons-toc__link-active', (node) => node.innerText.trim());
61
63
  expect(activeSection).toBe(sectionTitle);
@@ -154,7 +156,7 @@ describe('script: table-of-contents-fixed-position', () => {
154
156
  window.scrollTo(0, 1000);
155
157
  });
156
158
 
157
- await page.waitForTimeout(250);
159
+ await setTimeout(250);
158
160
  const leftColumn = await page.$('#sticky-container');
159
161
  const boundingBox = await leftColumn.boundingBox();
160
162