Add test for autofocus.js

One of the simplest of our JavaScript files to
test how difficult this is.

Answer is not too bad and includes the file
needing a DOM to operate on and jQuery in the
global scope.
This commit is contained in:
Tom Byers
2019-04-12 12:10:05 +01:00
parent 2e558744a5
commit 00c1ebf02a

View File

@@ -0,0 +1,84 @@
beforeAll(() => {
// set up jQuery
window.jQuery = require('jquery');
$ = window.jQuery;
// load module code
require('govuk_frontend_toolkit/javascripts/govuk/modules.js');
require('../../app/assets/javascripts/autofocus.js');
});
afterAll(() => {
window.jQuery = null;
$ = null;
delete window.GOVUK;
});
describe('Autofocus', () => {
let focusHandler;
let search;
beforeEach(() => {
// set up DOM
document.body.innerHTML =
`<div data-module="autofocus">
<label class="form-label" for="search">
Search by name
</label>
<input autocomplete="off" class="form-control form-control-1-1" id="search" name="search" type="search" value="">
</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 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('div').setAttribute('data-force-focus', true);
// start module
window.GOVUK.modules.start();
expect(focusHandler).toHaveBeenCalled();
});
});