darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-05 19:03:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add tests for integration with sticky JS

Browse Source
This commit is contained in:
Tom Byers
2019-07-12 16:00:34 +01:00
parent d0b6f844ce
commit f495288034
1 changed files with 134 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
tests/javascripts/templateFolderForm.test.js
View File

@@ -157,6 +157,13 @@ function setFixtures (hierarchy) {
};
function resetStickyMocks () {
GOVUK.stickAtBottomWhenScrolling.recalculate.mockClear();
GOVUK.stickAtBottomWhenScrolling.setMode.mockClear();
};
beforeAll(() => {
require('../../app/assets/javascripts/templateFolderForm.js');
});
@@ -245,6 +252,22 @@ describe('TemplateFolderForm', () => {
return formControls.querySelector('[role=status]');
};
describe("Before the page loads", () => {
// We need parts of the module to be made sticky, but by the module code,
// not the sticky JS code that operates on the HTML at page load.
// Because of this, they wll need to be marked with classes
test("the HTML for the module should contain placeholder classes on each part that needs to be sticky", () => {
expect(templateFolderForm.querySelectorAll('#move_to_folder_radios > .js-will-stick-at-bottom-when-scrolling').length).toEqual(2);
expect(templateFolderForm.querySelector('#move_to_new_folder_form > .js-will-stick-at-bottom-when-scrolling')).not.toBeNull();
expect(templateFolderForm.querySelector('#add_new_folder_form > .js-will-stick-at-bottom-when-scrolling')).not.toBeNull();
expect(templateFolderForm.querySelectorAll('#add_new_template_form > .js-will-stick-at-bottom-when-scrolling').length).toEqual(2);
});
});
describe("When the page loads", () => {
beforeEach(() => {
@@ -257,6 +280,8 @@ describe('TemplateFolderForm', () => {
});
afterEach(() => resetStickyMocks());
test("the default controls and the counter should be showing", () => {
expect(document.querySelector('button[value=add-new-template]')).not.toBeNull();
@@ -293,6 +318,20 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#nothing_selected .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
});
describe("Clicking 'New template'", () => {
@@ -304,10 +343,15 @@ describe('TemplateFolderForm', () => {
formControls = templateFolderForm.querySelector('#sticky_template_forms');
// reset sticky JS mocks called when the module starts
resetStickyMocks();
helpers.triggerEvent(formControls.querySelector('[value=add-new-template]'), 'click');
});
afterEach(() => resetStickyMocks());
test("should show options for all the types of template", () => {
const options = [
@@ -325,7 +369,7 @@ describe('TemplateFolderForm', () => {
let matchingRadio = formControls.querySelector(`#${matchingLabels[0].getAttribute('for')}`)
expect(matchingRadio).not.toBeNull();
});;
});
});
@@ -343,12 +387,29 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the classes the sticky JS hooks into should be present for both parts
expect(formControls.querySelectorAll('#add_new_template_form .js-stick-at-bottom-when-scrolling').length).toEqual(2);
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// the mode should be set to 'dialog' so both parts can be sticky
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('dialog');
});
describe("When the 'Cancel' link is clicked", () => {
let addNewTemplateButton;
beforeEach(() => {
// reset sticky JS mocks called when the new template state loaded
resetStickyMocks();
helpers.triggerEvent(formControls.querySelector('.js-cancel'), 'click');
addNewTemplateButton = formControls.querySelector('[value=add-new-template]');
@@ -375,6 +436,8 @@ describe('TemplateFolderForm', () => {
let textbox;
afterEach(() => resetStickyMocks());
beforeEach(() => {
// start module
@@ -382,6 +445,9 @@ describe('TemplateFolderForm', () => {
formControls = templateFolderForm.querySelector('#sticky_template_forms');
// reset sticky JS mocks called when the module starts
resetStickyMocks();
helpers.triggerEvent(formControls.querySelector('[value=add-new-folder]'), 'click');
textbox = formControls.querySelector('input[type=text]');
@@ -403,6 +469,20 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#add_new_folder_form .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
describe("When the 'Cancel' link is clicked", () => {
let addNewFolderButton;
@@ -444,11 +524,16 @@ describe('TemplateFolderForm', () => {
formControls = templateFolderForm.querySelector('#sticky_template_forms');
// reset sticky JS mocks called when the module starts
resetStickyMocks();
helpers.triggerEvent(templateFolderCheckboxes[0], 'click');
helpers.triggerEvent(templateFolderCheckboxes[2], 'click');
});
afterEach(() => resetStickyMocks());
test("the buttons for moving to a new or existing folder are showing", () => {
expect(formControls.querySelector('button[value=move-to-new-folder]')).not.toBeNull();
@@ -456,6 +541,20 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#items_selected .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
describe("Clear link", () => {
let clearLink;
@@ -515,6 +614,9 @@ describe('TemplateFolderForm', () => {
beforeEach(() => {
// reset sticky JS mocks called when a selection was made
resetStickyMocks();
helpers.triggerEvent(formControls.querySelector('[value=move-to-existing-folder]'), 'click');
});
@@ -557,6 +659,20 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the classes the sticky JS hooks into should be present for both parts
expect(formControls.querySelectorAll('#move_to_folder_radios .js-stick-at-bottom-when-scrolling').length).toEqual(2);
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// the mode should be set to 'dialog' so both parts can be sticky
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('dialog');
});
describe("When the 'Cancel' link is clicked", () => {
let moveToFolderButton;
@@ -591,6 +707,9 @@ describe('TemplateFolderForm', () => {
beforeEach(() => {
// reset sticky JS mocks called when a selection was made
resetStickyMocks();
helpers.triggerEvent(formControls.querySelector('[value=move-to-new-folder]'), 'click');
textbox = formControls.querySelector('input[type=text]');
@@ -612,6 +731,20 @@ describe('TemplateFolderForm', () => {
});
test("should make the current controls sticky", () => {
// the class the sticky JS hooks into should be present
expect(formControls.querySelector('#move_to_new_folder_form .js-stick-at-bottom-when-scrolling')).not.toBeNull();
// .recalculate should have been called so the sticky JS picks up the controls
expect(GOVUK.stickAtBottomWhenScrolling.recalculate.mock.calls.length).toEqual(1);
// mode should have been set to 'default' as the controls only have one part
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls.length).toEqual(1);
expect(GOVUK.stickAtBottomWhenScrolling.setMode.mock.calls[0][0]).toEqual('default');
});
describe("When the 'Cancel' link is clicked", () => {
let moveToNewFolderButton;