mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 03:13:42 -05:00
103 lines
2.3 KiB
JavaScript
103 lines
2.3 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>
|
|
<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('has a label including the page title when the module starts', () => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
expect(search.hasAttribute('aria-label')).toBe(true);
|
|
expect(search.getAttribute('aria-label')).toEqual(document.title + ' - ' + labelText);
|
|
|
|
});
|
|
|
|
test('gets the original label back when focus moves away', () => {
|
|
|
|
// start module
|
|
window.GOVUK.modules.start();
|
|
|
|
// shift focus away from textbox
|
|
helpers.triggerEvent(search, 'blur');
|
|
|
|
expect(search.hasAttribute('aria-label')).toBe(false);
|
|
|
|
});
|
|
|
|
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();
|
|
|
|
});
|
|
|
|
});
|