@@ -179,7 +179,7 @@ describe('modal', () => {
179 179
},
180 180
propsData: {
181 181
static: false,
182 -
id: 'testtarget',
182 +
id: 'test-target',
183 183
visible: true
184 184
}
185 185
})
@@ -190,7 +190,7 @@ describe('modal', () => {
190 190
expect(wrapper.isEmpty()).toBe(true)
191 191
expect(wrapper.element.nodeType).toEqual(Node.COMMENT_NODE)
192 192 193 -
const outer = document.getElementById('testtarget___BV_modal_outer_')
193 +
const outer = document.getElementById('test-target___BV_modal_outer_')
194 194
expect(outer).toBeDefined()
195 195
expect(outer).not.toBe(null)
196 196
@@ -205,7 +205,7 @@ describe('modal', () => {
205 205
await waitNT(wrapper.vm)
206 206
await waitRAF()
207 207 208 -
// Should no longer be in document.
208 +
// Should no longer be in document
209 209
expect(outer.parentElement).toEqual(null)
210 210
})
211 211
@@ -358,14 +358,14 @@ describe('modal', () => {
358 358
const $cancel = $buttons.at(0)
359 359
expect($cancel.attributes('type')).toBe('button')
360 360
expect($cancel.text()).toContain('cancel')
361 -
// v-html is applied to a span
361 +
// `v-html` is applied to a span
362 362
expect($cancel.html()).toContain('<span><em>cancel</em></span>')
363 363 364 364
// OK button (right-most button)
365 365
const $ok = $buttons.at(1)
366 366
expect($ok.attributes('type')).toBe('button')
367 367
expect($ok.text()).toContain('ok')
368 -
// v-html is applied to a span
368 +
// `v-html` is applied to a span
369 369
expect($ok.html()).toContain('<span><em>ok</em></span>')
370 370 371 371
wrapper.destroy()
@@ -1161,8 +1161,8 @@ describe('modal', () => {
1161 1161
const App = localVue.extend({
1162 1162
render(h) {
1163 1163
return h('div', {}, [
1164 -
h('button', { class: 'trigger', attrs: { id: 'trigger', type: 'button' } }, 'trigger'),
1165 -
h(BModal, { props: { static: true, id: 'test', visible: true } }, 'modal content')
1164 +
h('button', { attrs: { id: 'button', type: 'button' } }, 'Button'),
1165 +
h(BModal, { props: { static: true, id: 'test', visible: true } }, 'Modal content')
1166 1166
])
1167 1167
}
1168 1168
})
@@ -1185,7 +1185,7 @@ describe('modal', () => {
1185 1185
await waitNT(wrapper.vm)
1186 1186
await waitRAF()
1187 1187 1188 -
const $button = wrapper.find('button.trigger')
1188 +
const $button = wrapper.find('#button')
1189 1189
expect($button.exists()).toBe(true)
1190 1190
expect($button.is('button')).toBe(true)
1191 1191
@@ -1198,48 +1198,42 @@ describe('modal', () => {
1198 1198
expect(document.activeElement).not.toBe(document.body)
1199 1199
expect(document.activeElement).toBe($content.element)
1200 1200 1201 -
// Try and set focusin on external button
1201 +
// Try and focus the external button
1202 +
$button.element.focus()
1202 1203
$button.trigger('focusin')
1203 -
await waitNT(wrapper.vm)
1204 -
expect(document.activeElement).not.toBe($button.element)
1205 -
expect(document.activeElement).toBe($content.element)
1206 - 1207 -
// Try and set focusin on external button
1208 -
$button.trigger('focus')
1209 -
await waitNT(wrapper.vm)
1210 1204
expect(document.activeElement).not.toBe($button.element)
1211 1205
expect(document.activeElement).toBe($content.element)
1212 1206 1213 -
// Emulate TAB by focusing the `bottomTrap` span element.
1207 +
// Emulate TAB by focusing the `bottomTrap` span element
1214 1208
// Should focus first button in modal (in the header)
1215 1209
const $bottomTrap = wrapper.find(BModal).find({ ref: 'bottomTrap' })
1216 1210
expect($bottomTrap.exists()).toBe(true)
1217 1211
expect($bottomTrap.is('span')).toBe(true)
1218 -
// Find the close (x) button (it is the only one with the .close class)
1212 +
// Find the close (x) button (it is the only one with the `.close` class)
1219 1213
const $closeButton = $modal.find('button.close')
1220 1214
expect($closeButton.exists()).toBe(true)
1221 1215
expect($closeButton.is('button')).toBe(true)
1222 -
// focus the tab trap
1216 +
// Focus the tab trap
1217 +
$bottomTrap.element.focus()
1223 1218
$bottomTrap.trigger('focusin')
1224 -
$bottomTrap.trigger('focus')
1225 1219
await waitNT(wrapper.vm)
1226 1220
expect(document.activeElement).not.toBe($bottomTrap.element)
1227 1221
expect(document.activeElement).not.toBe($content.element)
1228 1222
// The close (x) button (first tabable in modal) should be focused
1229 1223
expect(document.activeElement).toBe($closeButton.element)
1230 1224 1231 -
// Emulate CTRL-TAB by focusing the `topTrap` div element.
1225 +
// Emulate CTRL-TAB by focusing the `topTrap` div element
1232 1226
// Should focus last button in modal (in the footer)
1233 1227
const $topTrap = wrapper.find(BModal).find({ ref: 'topTrap' })
1234 1228
expect($topTrap.exists()).toBe(true)
1235 1229
expect($topTrap.is('span')).toBe(true)
1236 -
// Find the OK button (it is the only one with .btn-primary class)
1230 +
// Find the OK button (it is the only one with `.btn-primary` class)
1237 1231
const $okButton = $modal.find('button.btn.btn-primary')
1238 1232
expect($okButton.exists()).toBe(true)
1239 1233
expect($okButton.is('button')).toBe(true)
1240 -
// focus the tab trap
1234 +
// Focus the tab trap
1235 +
$topTrap.element.focus()
1241 1236
$topTrap.trigger('focusin')
1242 -
$topTrap.trigger('focus')
1243 1237
await waitNT(wrapper.vm)
1244 1238
expect(document.activeElement).not.toBe($topTrap.element)
1245 1239
expect(document.activeElement).not.toBe($bottomTrap.element)
@@ -1249,5 +1243,153 @@ describe('modal', () => {
1249 1243 1250 1244
wrapper.destroy()
1251 1245
})
1246 + 1247 +
it('it allows focus for elements when "no-enforce-focus" enabled', async () => {
1248 +
const App = localVue.extend({
1249 +
render(h) {
1250 +
return h('div', {}, [
1251 +
h('button', { attrs: { id: 'button1', type: 'button' } }, 'Button 1'),
1252 +
h('button', { attrs: { id: 'button2', type: 'button' } }, 'Button 2'),
1253 +
h(
1254 +
BModal,
1255 +
{
1256 +
props: {
1257 +
static: true,
1258 +
id: 'test',
1259 +
visible: true,
1260 +
noEnforceFocus: true
1261 +
}
1262 +
},
1263 +
'Modal content'
1264 +
)
1265 +
])
1266 +
}
1267 +
})
1268 +
const wrapper = mount(App, {
1269 +
attachToDocument: true,
1270 +
localVue: localVue,
1271 +
stubs: {
1272 +
transition: false
1273 +
}
1274 +
})
1275 + 1276 +
expect(wrapper.isVueInstance()).toBe(true)
1277 + 1278 +
await waitNT(wrapper.vm)
1279 +
await waitRAF()
1280 +
await waitNT(wrapper.vm)
1281 +
await waitRAF()
1282 +
await waitNT(wrapper.vm)
1283 +
await waitRAF()
1284 +
await waitNT(wrapper.vm)
1285 +
await waitRAF()
1286 + 1287 +
const $button1 = wrapper.find('#button1')
1288 +
expect($button1.exists()).toBe(true)
1289 +
expect($button1.is('button')).toBe(true)
1290 + 1291 +
const $button2 = wrapper.find('#button2')
1292 +
expect($button2.exists()).toBe(true)
1293 +
expect($button2.is('button')).toBe(true)
1294 + 1295 +
const $modal = wrapper.find('div.modal')
1296 +
expect($modal.exists()).toBe(true)
1297 +
const $content = $modal.find('div.modal-content')
1298 +
expect($content.exists()).toBe(true)
1299 + 1300 +
expect($modal.element.style.display).toEqual('block')
1301 +
expect(document.activeElement).not.toBe(document.body)
1302 +
expect(document.activeElement).toBe($content.element)
1303 + 1304 +
// Try to focus button1
1305 +
$button1.element.focus()
1306 +
$button1.trigger('focusin')
1307 +
await waitNT(wrapper.vm)
1308 +
expect(document.activeElement).toBe($button1.element)
1309 +
expect(document.activeElement).not.toBe($content.element)
1310 + 1311 +
// Try to focus button2
1312 +
$button2.element.focus()
1313 +
$button2.trigger('focusin')
1314 +
await waitNT(wrapper.vm)
1315 +
expect(document.activeElement).toBe($button2.element)
1316 +
expect(document.activeElement).not.toBe($content.element)
1317 + 1318 +
wrapper.destroy()
1319 +
})
1320 + 1321 +
it('it allows focus for elements in "ignore-enforce-focus-selector" prop', async () => {
1322 +
const App = localVue.extend({
1323 +
render(h) {
1324 +
return h('div', {}, [
1325 +
h('button', { attrs: { id: 'button1', type: 'button' } }, 'Button 1'),
1326 +
h('button', { attrs: { id: 'button2', type: 'button' } }, 'Button 2'),
1327 +
h(
1328 +
BModal,
1329 +
{
1330 +
props: {
1331 +
static: true,
1332 +
id: 'test',
1333 +
visible: true,
1334 +
ignoreEnforceFocusSelector: '#button1'
1335 +
}
1336 +
},
1337 +
'Modal content'
1338 +
)
1339 +
])
1340 +
}
1341 +
})
1342 +
const wrapper = mount(App, {
1343 +
attachToDocument: true,
1344 +
localVue: localVue,
1345 +
stubs: {
1346 +
transition: false
1347 +
}
1348 +
})
1349 + 1350 +
expect(wrapper.isVueInstance()).toBe(true)
1351 + 1352 +
await waitNT(wrapper.vm)
1353 +
await waitRAF()
1354 +
await waitNT(wrapper.vm)
1355 +
await waitRAF()
1356 +
await waitNT(wrapper.vm)
1357 +
await waitRAF()
1358 +
await waitNT(wrapper.vm)
1359 +
await waitRAF()
1360 + 1361 +
const $button1 = wrapper.find('#button1')
1362 +
expect($button1.exists()).toBe(true)
1363 +
expect($button1.is('button')).toBe(true)
1364 + 1365 +
const $button2 = wrapper.find('#button2')
1366 +
expect($button2.exists()).toBe(true)
1367 +
expect($button2.is('button')).toBe(true)
1368 + 1369 +
const $modal = wrapper.find('div.modal')
1370 +
expect($modal.exists()).toBe(true)
1371 +
const $content = $modal.find('div.modal-content')
1372 +
expect($content.exists()).toBe(true)
1373 + 1374 +
expect($modal.element.style.display).toEqual('block')
1375 +
expect(document.activeElement).not.toBe(document.body)
1376 +
expect(document.activeElement).toBe($content.element)
1377 + 1378 +
// Try to focus button1
1379 +
$button1.element.focus()
1380 +
$button1.trigger('focusin')
1381 +
await waitNT(wrapper.vm)
1382 +
expect(document.activeElement).toBe($button1.element)
1383 +
expect(document.activeElement).not.toBe($content.element)
1384 + 1385 +
// Try to focus button2
1386 +
$button2.element.focus()
1387 +
$button2.trigger('focusin')
1388 +
await waitNT(wrapper.vm)
1389 +
expect(document.activeElement).not.toBe($button2.element)
1390 +
expect(document.activeElement).toBe($content.element)
1391 + 1392 +
wrapper.destroy()
1393 +
})
1252 1394
})
1253 1395
})
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4