mirror of
https://github.com/GSA/notifications-admin.git
synced 2025-12-14 00:52:55 -05:00
edd2a04c7a
In 674c27a693 we updated the autofocus
Javascript to be compatible with GOV.UK Frontend textboxes, which have
the `data-module` attribute set on the `input` element, rather than on
a wrapper element.
However we still have some `<textarea>`s and `<input>`s which haven’t
moved to GOV.UK Frontend and therefore aren’t getting picked up by the
Javascript which is supposed to focus them.
This commit makes the Javascript work with both kinds of textbox, which
is needed until we move entirely to GOV.UK Frontend.
93 lines
2.1 KiB
JavaScript
93 lines
2.1 KiB
JavaScript
const helpers = require('./support/helpers.js');
|
|
|
|
beforeAll(() => {
|
|
require('../../app/assets/javascripts/autofocus.js');
|
|
});
|
|
|
|
afterAll(() => {
|
|
require('./support/teardown.js');
|
|
});
|
|
|
|
describe('Autofocus', () => {
|
|
|
|
const labelText = 'Search by name';
|
|
let focusHandler;
|
|
let search;
|
|
|
|
beforeEach(() => {
|
|
|
|
document.title = 'Find services by name - GOV.UK Notify';
|
|
|
|
// set up DOM
|
|
document.body.innerHTML =
|
|
`<div id="wrapper">
|
|
<label class="form-label" for="search">
|
|
${labelText}
|
|
</label>
|
|
<input autocomplete="off" class="form-control form-control-1-1" id="search" name="search" type="search" value="" data-module="autofocus">
|
|
</div>`;
|
|
|
|
focusHandler = jest.fn();
|
|
search = document.getElementById('search');
|
|
search.addEventListener('focus', focusHandler, false);
|
|
|
|
});
|
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
search.removeEventListener('focus', focusHandler);
|
|
focusHandler = null;
|
|
|
|
});
|
|
|
|
test('is focused when modules start', () => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
expect(focusHandler).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
test('is focused when attribute is set on outer element', () => {
|
|
|
|
document.getElementById('search').removeAttribute('data-module');
|
|
document.getElementById('wrapper').setAttribute('data-module', 'autofocus');
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
expect(focusHandler).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
test('is not focused if the window has scrolled', () => {
|
|
|
|
// mock the window being scrolled 25px
|
|
$.prototype.scrollTop = jest.fn(() => 25);
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
expect(focusHandler).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
test('is focused if the window has scrolled but the force-focus flag is set', () => {
|
|
|
|
// mock the window being scrolled 25px
|
|
$.prototype.scrollTop = jest.fn(() => 25);
|
|
|
|
// set the force-focus flag
|
|
document.querySelector('#search').setAttribute('data-force-focus', true);
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
expect(focusHandler).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
});
|