mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-16 03:10:16 -04:00
Add tests for preview pane JS
This commit is contained in:
Tom Byers
234
tests/javascripts/previewPane.test.js
Normal file
234
tests/javascripts/previewPane.test.js
Normal file
@@ -0,0 +1,234 @@
|
||||
const helpers = require('./support/helpers.js');
|
||||
|
||||
const emailPageURL = '/services/6658542f-0cad-491f-bec8-ab8457700ead/service-settings/set-email-branding';
|
||||
const emailPreviewConfirmationURL = '/services/6658542f-0cad-491f-bec8-ab8457700ead/service-settings/preview-email-branding';
|
||||
const letterPageURL = '/services/6658542f-0cad-491f-bec8-ab8457700ead/service-settings/set-letter-branding';
|
||||
const letterPreviewConfirmationURL = '/services/6658542f-0cad-491f-bec8-ab8457700ead/service-settings/preview-letter-branding';
|
||||
|
||||
let locationMock;
|
||||
|
||||
beforeAll(() => {
|
||||
|
||||
// mock calls to window.location
|
||||
// default to the email page, the pathname can be changed inside specific tests
|
||||
locationMock = new helpers.LocationMock(emailPageURL);
|
||||
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
|
||||
// reset window.location to its original state
|
||||
locationMock.reset();
|
||||
require('./support/teardown.js');
|
||||
|
||||
});
|
||||
|
||||
describe('Preview pane', () => {
|
||||
|
||||
let form;
|
||||
let radios;
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
const brands = {
|
||||
"name": "branding_style",
|
||||
"label": "Branding style",
|
||||
"cssClasses": [],
|
||||
"fields": [
|
||||
{
|
||||
"label": "Department for Education",
|
||||
"value": "dfe",
|
||||
"checked": true
|
||||
},
|
||||
{
|
||||
"label": "Home Office",
|
||||
"value": "ho",
|
||||
"checked": false
|
||||
},
|
||||
{
|
||||
"label": "Her Majesty's Revenue and Customs",
|
||||
"value": "hmrc",
|
||||
"checked": false
|
||||
},
|
||||
{
|
||||
"label": "Department for Work and Pensions",
|
||||
"value": "dwp",
|
||||
"checked": false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// set up DOM
|
||||
document.body.innerHTML =
|
||||
`<form method="post" action="${emailPageURL}" autocomplete="off" data-preview-type="email" novalidate>
|
||||
<div class="grid-row"></div>
|
||||
<div class="grid-row">
|
||||
<div class="column-full">
|
||||
<div data-module="autofocus">
|
||||
<div class="live-search js-header" data-module="live-search" data-targets=".multiple-choice">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="search">
|
||||
Search branding styles by name
|
||||
</label>
|
||||
<input autocomplete="off" class="form-control form-control-1-1 " id="search" name="search" required="" rows="8" type="search" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<button type="submit" class="button">Preview</button>
|
||||
</div>
|
||||
</form>`;
|
||||
|
||||
document.querySelector('.column-full').appendChild(helpers.getRadioGroup(brands));
|
||||
form = document.querySelector('form');
|
||||
radios = form.querySelector('fieldset');
|
||||
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
||||
document.body.innerHTML = '';
|
||||
|
||||
// we run the previewPane.js script every test
|
||||
// the module cache needs resetting each time for the script to execute
|
||||
jest.resetModules();
|
||||
|
||||
});
|
||||
|
||||
describe("If the page type is 'email'", () => {
|
||||
|
||||
describe("When the page loads", () => {
|
||||
|
||||
test("it should add the preview pane", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
expect(document.querySelector('iframe')).not.toBeNull();
|
||||
|
||||
});
|
||||
|
||||
test("it should change the form to submit the selection instead of posting to a preview page", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
expect(form.getAttribute('action')).toEqual(emailPreviewConfirmationURL);
|
||||
|
||||
});
|
||||
|
||||
test("the preview pane should show the page for the selected brand", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
const selectedValue = Array.from(radios.querySelectorAll('input[type=radio]')).filter(radio => radio.checked)[0].value;
|
||||
|
||||
expect(document.querySelector('iframe').getAttribute('src')).toEqual(`/_email?branding_style=${selectedValue}`);
|
||||
|
||||
});
|
||||
|
||||
test("the submit button should change from 'Preview' to 'Save'", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
expect(document.querySelector('button[type=submit]').textContent).toEqual('Save');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("If the selection changes", () => {
|
||||
|
||||
test("the page shown should match the selected brand", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
const newSelection = radios.querySelectorAll('input[type=radio]')[1];
|
||||
|
||||
helpers.moveSelectionToRadio(newSelection);
|
||||
|
||||
expect(document.querySelector('iframe').getAttribute('src')).toEqual(`/_email?branding_style=${newSelection.value}`);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("If the page type is 'letter'", () => {
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
// set page URL and page type to 'letter'
|
||||
window.location.pathname = letterPreviewConfirmationURL;
|
||||
form.setAttribute('data-preview-type', 'letter');
|
||||
|
||||
});
|
||||
|
||||
describe("When the page loads", () => {
|
||||
|
||||
test("it should add the preview pane", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
expect(document.querySelector('iframe')).not.toBeNull();
|
||||
|
||||
});
|
||||
|
||||
test("it should change the form to submit the selection instead of posting to a preview page", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
expect(form.getAttribute('action')).toEqual(letterPreviewConfirmationURL);
|
||||
|
||||
});
|
||||
|
||||
test("the preview pane should show the page for the selected brand", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
const selectedValue = Array.from(radios.querySelectorAll('input[type=radio]')).filter(radio => radio.checked)[0].value;
|
||||
|
||||
expect(document.querySelector('iframe').getAttribute('src')).toEqual(`/_letter?branding_style=${selectedValue}`);
|
||||
|
||||
});
|
||||
|
||||
test("the submit button should change from 'Preview' to 'Save'", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
expect(document.querySelector('button[type=submit]').textContent).toEqual('Save');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe("If the selection changes", () => {
|
||||
|
||||
test("the page shown should match the selected brand", () => {
|
||||
|
||||
// run preview pane script
|
||||
require('../../app/assets/javascripts/previewPane.js');
|
||||
|
||||
const newSelection = radios.querySelectorAll('input[type=radio]')[1];
|
||||
|
||||
helpers.moveSelectionToRadio(newSelection);
|
||||
|
||||
expect(document.querySelector('iframe').getAttribute('src')).toEqual(`/_letter?branding_style=${newSelection.value}`);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user