@financial-times/n-conversion-forms 23.0.3 → 23.0.6

package/utils/event-notifier.spec.js

@@ -0,0 +1,116 @@
+const EventNotifier = require('./event-notifier');
+
+describe('Event Notifier', () => {
+	const defaults = {
+		event: 'focusin',
+		buffer: 50,
+		emitProperty: 'height',
+		watchedProperty: 'clientHeight',
+	};
+	let mockElement;
+	let alternativeWindow;
+
+	beforeEach(() => {
+		mockElement = {
+			clientWidth: 100,
+			clientHeight: 25,
+			addEventListener: jest.fn(),
+		};
+		global.parent = {
+			postMessage: jest.fn(),
+		};
+		alternativeWindow = {
+			postMessage: jest.fn(),
+		};
+		jest.spyOn(parent, 'postMessage');
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+		delete global.parent;
+	});
+
+	it('does not do anything if element not provided', () => {
+		EventNotifier.init();
+		expect(parent.postMessage).not.toHaveBeenCalled();
+		expect(mockElement.addEventListener).not.toHaveBeenCalled();
+	});
+
+	it('does not do anything if element not valid', () => {
+		EventNotifier.init(null);
+		expect(parent.postMessage).not.toHaveBeenCalled();
+		expect(mockElement.addEventListener).not.toHaveBeenCalled();
+	});
+
+	it('attaches an event listener of the default event to the provided element', () => {
+		EventNotifier.init(mockElement);
+		expect(mockElement.addEventListener).toHaveBeenCalledTimes(1);
+		expect(mockElement.addEventListener).toHaveBeenCalledWith(
+			defaults.event,
+			expect.anything()
+		);
+	});
+
+	it('attaches an event listener of custom event if one provided', () => {
+		const customEvent = 'something';
+		EventNotifier.init(mockElement, { event: customEvent });
+		expect(mockElement.addEventListener).toHaveBeenCalledTimes(1);
+		expect(mockElement.addEventListener).toHaveBeenCalledWith(
+			customEvent,
+			expect.anything()
+		);
+	});
+
+	it('does immediately postMessage if "notifyOnStart" is true', () => {
+		EventNotifier.init(mockElement, { notifyOnStart: true });
+		expect(parent.postMessage).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not immediately postMessage if "notifyOnStart" is false', () => {
+		EventNotifier.init(mockElement, { notifyOnStart: false });
+		expect(parent.postMessage).not.toHaveBeenCalled();
+	});
+
+	it('does postMessage when the event listener is triggered', () => {
+		mockElement.addEventListener = jest.fn(() => {
+			parent.postMessage();
+		});
+		EventNotifier.init(mockElement);
+		expect(parent.postMessage).toHaveBeenCalledTimes(2);
+	});
+
+	it('does postMessage when the event listener is triggered even if notifyOnStart is false', () => {
+		mockElement.addEventListener = jest.fn(() => {
+			parent.postMessage();
+		});
+		EventNotifier.init(mockElement, { notifyOnStart: false });
+		expect(parent.postMessage).toHaveBeenCalledTimes(1);
+	});
+
+	it('does postMessage with the element clientHeight + default buffer value as the message height property by default', () => {
+		const expectedPayload = JSON.stringify({
+			[defaults.emitProperty]:
+				mockElement[defaults.watchedProperty] + defaults.buffer,
+		});
+		EventNotifier.init(mockElement, { notifyOnStart: true });
+		expect(parent.postMessage).toHaveBeenCalledWith(expectedPayload, '*');
+	});
+
+	it('can override emitted, watched and buffer properties', () => {
+		const expectedPayload = JSON.stringify({
+			width: mockElement.clientWidth + 10,
+		});
+		EventNotifier.init(mockElement, {
+			emitProperty: 'width',
+			watchedProperty: 'clientWidth',
+			buffer: 10,
+		});
+		expect(parent.postMessage).toHaveBeenCalledWith(expectedPayload, '*');
+	});
+
+	it('can take an alternative window to notify', () => {
+		EventNotifier.init(mockElement, { targetWindow: alternativeWindow });
+		expect(alternativeWindow.postMessage).toHaveBeenCalledTimes(1);
+		expect(parent.postMessage).not.toHaveBeenCalled();
+	});
+});

package/utils/form-element.spec.js

@@ -0,0 +1,71 @@
+const FormElement = require('./form-element');
+
+describe('FormElement', () => {
+	let formElement;
+	let document;
+	let addStub;
+	let removeStub;
+
+	beforeEach(() => {
+		addStub = jest.fn();
+		removeStub = jest.fn();
+		document = {
+			querySelector: () => {
+				return {
+					querySelectorAll: () => {},
+					querySelector: () => {
+						return {
+							value: 'test',
+						};
+					},
+					classList: {
+						add: addStub,
+						remove: removeStub,
+					},
+				};
+			},
+		};
+		formElement = new FormElement(document);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if document element isn not passed in', () => {
+			expect(() => {
+				new FormElement();
+			}).toThrow();
+		});
+
+		it('throws an error if form element does not exist on the page', () => {
+			expect(() => {
+				document.querySelector = () => {};
+				new FormElement(document);
+			}).toThrow();
+		});
+	});
+
+	describe('hide', () => {
+		it('adds the ncf__hidden class', () => {
+			formElement.hide();
+
+			expect(addStub).toHaveBeenCalledWith('ncf__hidden');
+		});
+	});
+
+	describe('show', () => {
+		it('removes the ncf__hidden class', () => {
+			formElement.show();
+
+			expect(removeStub).toHaveBeenCalledWith('ncf__hidden');
+		});
+	});
+
+	describe('value', () => {
+		it('returns the value', () => {
+			expect(formElement.value()).toEqual('test');
+		});
+	});
+});

package/utils/loader.spec.js

@@ -0,0 +1,161 @@
+const Loader = require('./loader');
+
+global.document = {};
+
+describe('Loader', () => {
+	let loader;
+	let documentStub;
+	let elementStub;
+
+	beforeEach(() => {
+		elementStub = {
+			classList: {
+				add: jest.fn(),
+				remove: jest.fn(),
+			},
+			focus: jest.fn(),
+			insertBefore: jest.fn(),
+			removeAttribute: jest.fn(),
+		};
+		documentStub = {
+			addEventListener: jest.fn(),
+			querySelector: jest.fn(),
+			removeEventListener: jest.fn(),
+		};
+		global.document.createElement = jest.fn().mockReturnValue(elementStub);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if nothing passed', () => {
+			expect(() => {
+				new Loader();
+			}).toThrow();
+		});
+
+		it('throws an error if loader not present', () => {
+			expect(() => {
+				documentStub.querySelector.mockReturnValue(false);
+				new Loader(documentStub);
+			}).toThrow();
+		});
+	});
+
+	describe('constructed', () => {
+		beforeEach(() => {
+			documentStub.querySelector.mockReturnValue(elementStub);
+			loader = new Loader(documentStub);
+		});
+
+		describe('clearContent', () => {
+			it('cleares the content of the partial', () => {
+				loader.setContent('<div>Baz</div>');
+				loader.clearContent();
+				expect(elementStub.innerHTML).toEqual('');
+			});
+		});
+
+		describe('setContent', () => {
+			it('creates the title element if it does not exist yet', () => {
+				loader.$loaderContentTitle = null;
+				loader.setContent({ title: 'Hooray!' });
+				expect(elementStub.insertBefore).toHaveBeenCalledWith(
+					elementStub,
+					expect.anything()
+				);
+			});
+			it('sets the title of the partial', () => {
+				loader.setContent({ title: 'Hooray!' });
+				expect(elementStub.innerHTML).toEqual('Hooray!');
+			});
+			it('sets the content of the partial', () => {
+				loader.setContent({ content: '<div>Baz</div>' });
+				expect(elementStub.innerHTML).toEqual('<div>Baz</div>');
+			});
+		});
+
+		describe('show', () => {
+			it('shows the loader', () => {
+				loader.show();
+				expect(elementStub.classList.add).toHaveBeenCalledWith(
+					loader.VISIBLE_CLASS
+				);
+				expect(elementStub.classList.remove).toHaveBeenCalledWith(
+					loader.HIDDEN_CLASS
+				);
+			});
+			it('calls setContent if content is passed', () => {
+				const content = { title: 'foo' };
+				jest.spyOn(loader, 'setContent');
+
+				loader.show(content);
+				expect(loader.setContent).toHaveBeenCalledWith(content);
+			});
+		});
+
+		describe('hide', () => {
+			it('hides the loader', () => {
+				loader.hide();
+				expect(elementStub.classList.add).toHaveBeenCalledWith(
+					loader.HIDDEN_CLASS
+				);
+				expect(elementStub.classList.remove).toHaveBeenCalledWith(
+					loader.VISIBLE_CLASS
+				);
+			});
+		});
+	});
+
+	describe('a11y', () => {
+		beforeEach(() => {
+			documentStub.querySelector.mockReturnValue(elementStub);
+			loader = new Loader(documentStub);
+		});
+
+		describe('show', () => {
+			it('gives the loader the focus', () => {
+				loader.show();
+
+				expect(elementStub.tabIndex).toBe(1);
+				expect(elementStub.focus).toHaveBeenCalled();
+			});
+		});
+
+		describe('showAndPreventTabbing', () => {
+			it('intercepts tab keypresses to prevent tabbing to content underneath', () => {
+				loader.showAndPreventTabbing();
+				expect(documentStub.addEventListener).toHaveBeenCalledWith(
+					'keydown',
+					expect.objectContaining({ name: 'interceptTab' })
+				);
+			});
+		});
+
+		describe('hide', () => {
+			it('removes focus from the loader', () => {
+				loader.hide();
+
+				expect(elementStub.removeAttribute).toHaveBeenCalledWith('tabindex');
+			});
+
+			it('stops intercepting tab keypresses', () => {
+				loader.hide();
+
+				expect(documentStub.removeEventListener).toHaveBeenCalledWith(
+					'keydown',
+					expect.objectContaining({ name: 'interceptTab' })
+				);
+			});
+
+			it('returns focus to a previously focused element', () => {
+				loader.showAndPreventTabbing();
+				loader.hide();
+
+				expect(elementStub.focus).toHaveBeenCalled();
+			});
+		});
+	});
+});

package/utils/password.spec.js

@@ -0,0 +1,65 @@
+const Password = require('./password');
+
+describe('Password', () => {
+	let password;
+	let document;
+	let passwordElement;
+	let checkboxElement;
+
+	beforeEach(() => {
+		passwordElement = { type: '' };
+		checkboxElement = { addEventListener: () => {}, checked: false };
+		document = {
+			querySelector: (selector) => {
+				if (selector.indexOf('#password') !== -1) {
+					return passwordElement;
+				} else {
+					return checkboxElement;
+				}
+			},
+		};
+		password = new Password(document);
+		jest.spyOn(password, 'toggleMask');
+		jest.spyOn(checkboxElement, 'addEventListener');
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if document element is not passed in.', () => {
+			expect(() => {
+				new Password();
+			}).toThrow();
+		});
+
+		it('throws an error if password element does not exist on the page', () => {
+			expect(() => {
+				document.querySelector = () => {};
+				new Password(document);
+			}).toThrow();
+		});
+	});
+
+	describe('registerMaskCheckbox', () => {
+		it('adds event listener to checkbox if it exists', () => {
+			new Password(document);
+			expect(checkboxElement.addEventListener).toHaveBeenCalled();
+		});
+	});
+
+	describe('toggleMask', () => {
+		it('sets the input type to text', () => {
+			passwordElement.type = 'password';
+			password.toggleMask(false);
+			expect(passwordElement.type).toEqual('text');
+		});
+
+		it('sets the input type to password', () => {
+			passwordElement.type = 'text';
+			password.toggleMask(true);
+			expect(passwordElement.type).toEqual('password');
+		});
+	});
+});

package/utils/payment-term.spec.js

@@ -0,0 +1,198 @@
+const PaymentTerm = require('./payment-term');
+
+describe('PaymentTerm', () => {
+	let paymentTerm;
+	let documentStub;
+	let elementStub;
+
+	beforeEach(() => {
+		elementStub = {
+			querySelector: jest.fn(),
+			querySelectorAll: jest.fn(),
+			getAttribute: jest.fn(),
+			setAttribute: jest.fn(),
+			cloneNode: jest.fn(),
+			remove: jest.fn(),
+			insertBefore: jest.fn(),
+			parentElement: elementStub,
+			addEventListener: jest.fn(),
+			value: 'test',
+			dataset: {
+				baseAmount: 100,
+			},
+		};
+		documentStub = {
+			querySelector: jest.fn(),
+		};
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if nothing passed', () => {
+			expect(() => {
+				new PaymentTerm();
+			}).toThrow();
+		});
+
+		it('throws an error if field not present', () => {
+			expect(() => {
+				documentStub.querySelector.mockReturnValue(false);
+				new PaymentTerm(documentStub);
+			}).toThrow();
+		});
+	});
+
+	describe('constructed', () => {
+		beforeEach(() => {
+			documentStub.querySelector.mockReturnValue(elementStub);
+			paymentTerm = new PaymentTerm(documentStub);
+		});
+
+		describe('getSelected', () => {
+			it('throws an error if nothing selected', () => {
+				elementStub.querySelector.mockReturnValue(false);
+				expect(() => {
+					paymentTerm.getSelected();
+				}).toThrow();
+			});
+
+			it('returns the value of the selected term', () => {
+				elementStub.querySelector.mockReturnValue(elementStub);
+				paymentTerm.getSelected();
+				expect(elementStub.getAttribute).toHaveBeenCalledWith('value');
+			});
+		});
+
+		describe('onChange', () => {
+			it('adds an event listener on change', () => {
+				paymentTerm.onChange();
+				expect(elementStub.addEventListener).toHaveBeenCalledWith(
+					'change',
+					expect.anything()
+				);
+			});
+
+			it('calls the callback', () => {
+				const callback = jest.fn();
+				elementStub.addEventListener = (type, callback) => callback();
+				paymentTerm.onChange(callback);
+				expect(callback).toHaveBeenCalled();
+			});
+		});
+
+		describe('updateOptions', () => {
+			beforeEach(() => {
+				paymentTerm.getSelected = jest.fn().mockReturnValue(true);
+				elementStub.querySelector.mockReturnValue(elementStub);
+				elementStub.cloneNode.mockReturnValue(elementStub);
+				elementStub.querySelectorAll.mockReturnValue([elementStub]);
+			});
+
+			it('throws an error if not all terms have an update', () => {
+				expect(() => {
+					paymentTerm.updateOptions([]);
+				}).toThrow();
+			});
+
+			it('replaces the price with the correct updated price', () => {
+				const priceStub = {};
+				elementStub.querySelector.mockImplementation((elementId) => {
+					return elementId === '.ncf__payment-term__price'
+						? priceStub
+						: elementStub;
+				});
+				paymentTerm.updateOptions([
+					{
+						value: 'test',
+						price: '£1.01',
+					},
+				]);
+				expect(priceStub.innerHTML).toEqual('£1.01');
+			});
+
+			it('replaces the trial price with the correct updated trial price', () => {
+				const trialPriceStub = {};
+				elementStub.querySelector.mockImplementation((elementId) => {
+					return elementId === '.ncf__payment-term__trial-price'
+						? trialPriceStub
+						: elementStub;
+				});
+				paymentTerm.updateOptions([
+					{
+						value: 'test',
+						trialPrice: '£1.01',
+					},
+				]);
+				expect(trialPriceStub.innerHTML).toEqual('£1.01');
+			});
+
+			it('replaces the monthly price with the correct updated monthly price', () => {
+				const monthlyPriceStub = {};
+				elementStub.querySelector.mockImplementation((elementId) => {
+					return elementId === '.ncf__payment-term__monthly-price'
+						? monthlyPriceStub
+						: elementStub;
+				});
+				paymentTerm.updateOptions([
+					{
+						value: 'test',
+						monthlyPrice: '£1.01',
+					},
+				]);
+				expect(monthlyPriceStub.innerHTML).toEqual('£1.01');
+			});
+
+			describe('updating base amount', () => {
+				const updatedOptions = [
+					{
+						value: 'test',
+						monthlyPrice: '£1.01',
+						amount: 500,
+						trialAmount: 1,
+					},
+				];
+
+				beforeEach(() => {
+					elementStub.querySelector.mockReturnValue(elementStub);
+				});
+
+				it('replaces the base amount with the correct updated trial amount', () => {
+					updatedOptions[0].isTrial = true;
+					paymentTerm.updateOptions(updatedOptions);
+					expect(elementStub.setAttribute).toHaveBeenCalledWith(
+						'data-base-amount',
+						1
+					);
+				});
+
+				it('replaces the base amount with the correct updated amount', () => {
+					updatedOptions[0].isTrial = false;
+					paymentTerm.updateOptions(updatedOptions);
+					expect(elementStub.setAttribute).toHaveBeenCalledWith(
+						'data-base-amount',
+						500
+					);
+				});
+			});
+
+			describe('getBaseAmount', () => {
+				it('throws an error if nothing selected', () => {
+					elementStub.querySelector.mockReturnValue(false);
+					expect(() => {
+						paymentTerm.getBaseAmount();
+					}).toThrow();
+				});
+
+				it('returns base amount of the selected term', () => {
+					elementStub.dataset.baseAmount = 99;
+					elementStub.querySelector.mockReturnValue(elementStub);
+					const returnedAmount = paymentTerm.getBaseAmount();
+					expect(returnedAmount).toBe(99);
+				});
+			});
+		});
+	});
+});