From f495288034b138d3d33af6cb80ddd82d7c4c0c79 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Fri, 12 Jul 2019 16:00:34 +0100 Subject: [PATCH] Add tests for integration with sticky JS --- tests/javascripts/templateFolderForm.test.js | 135 ++++++++++++++++++- 1 file changed, 134 insertions(+), 1 deletion(-) diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js index d04be551c..6717f2b11 100644 --- a/tests/javascripts/templateFolderForm.test.js +++ b/tests/javascripts/templateFolderForm.test.js @@ -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;