@financial-times/n-conversion-forms 26.0.0 → 27.0.0

package/utils/tracking.spec.js

@@ -0,0 +1,174 @@
+const Tracking = require('./tracking');
+
+describe('Tracking', () => {
+	let element;
+	let window;
+	let tracking;
+
+	beforeEach(() => {
+		element = { dispatchEvent: () => {} };
+		window = {
+			CustomEvent: function () {},
+			Image: function () {},
+			Date: function () {},
+		};
+		tracking = new Tracking(window, element);
+
+		jest.spyOn(tracking, 'dispatchCustomEvent');
+		jest.spyOn(tracking, 'dispatchImage');
+		jest.spyOn(window, 'CustomEvent');
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if window not passed', () => {
+			expect(() => {
+				new Tracking();
+			}).toThrow();
+		});
+
+		it('throws an error if element not passed', () => {
+			expect(() => {
+				new Tracking(window);
+			}).toThrow();
+		});
+	});
+
+	describe('dispatch', () => {
+		describe('parameter validation', () => {
+			it('throws an error if nothing passed', () => {
+				expect(() => {
+					tracking.dispatch();
+				}).toThrow();
+			});
+
+			it('throws an error if action is missing', () => {
+				expect(() => {
+					tracking.dispatch('test');
+				}).toThrow();
+			});
+		});
+
+		describe('dispatch events', () => {
+			it('calls dispatchEvent', () => {
+				tracking.dispatch('test', 'test');
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalled();
+			});
+
+			it('fallbacks to dispatchImage if dispatchEvent errors', () => {
+				tracking.dispatchCustomEvent.mockRestore();
+				tracking.dispatchCustomEvent = jest.fn().mockImplementation(() => {
+					throw new Error();
+				});
+				tracking.dispatch('test', 'test');
+				expect(tracking.dispatchImage).toHaveBeenCalled();
+			});
+		});
+
+		describe('extra data', () => {
+			it('merges extra tracking data', () => {
+				const data = { extra: 'data' };
+				tracking.dispatch('test', 'test', data);
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalledWith(
+					expect.objectContaining(data)
+				);
+			});
+
+			it('does not overwrite the given action and test', () => {
+				const data = { action: 'bad', category: 'bad' };
+				tracking.dispatch('test', 'test', data);
+				expect(tracking.dispatchCustomEvent).not.toHaveBeenCalledWith({
+					action: 'bad',
+					category: 'bad',
+				});
+			});
+		});
+
+		describe('empty properties', () => {
+			const data = {
+				testUndefined: undefined,
+				testNull: null,
+				testEmptyString: '',
+				testZero: 0,
+				testFalse: false,
+			};
+
+			it('does not send undefined properties', () => {
+				tracking.dispatch('test', 'test', data);
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalledWith(
+					expect.not.objectContaining({ testUndefined: undefined })
+				);
+			});
+
+			it('does not send null properties', () => {
+				tracking.dispatch('test', 'test', data);
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalledWith(
+					expect.not.objectContaining({ testNull: null })
+				);
+			});
+
+			it('does not send empty string properties', () => {
+				tracking.dispatch('test', 'test', data);
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalledWith(
+					expect.not.objectContaining({ testEmptyString: '' })
+				);
+			});
+
+			it('sends zero properties', () => {
+				tracking.dispatch('test', 'test', data);
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalledWith(
+					expect.objectContaining({ testZero: 0 })
+				);
+			});
+
+			it('sends false properties', () => {
+				tracking.dispatch('test', 'test', data);
+
+				expect(tracking.dispatchCustomEvent).toHaveBeenCalledWith(
+					expect.objectContaining({ testFalse: false })
+				);
+			});
+		});
+	});
+
+	describe('dispatchCustomEvent', () => {
+		const eventData = { action: 'test', category: 'test' };
+
+		it('does not throw an error', () => {
+			expect(() => {
+				tracking.dispatchCustomEvent(eventData);
+			}).not.toThrow();
+		});
+
+		it('passes event data to the CustomEvent detail parameter', () => {
+			tracking.dispatchCustomEvent(eventData);
+			expect(window.CustomEvent).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({ detail: eventData })
+			);
+		});
+
+		it('writes debug data', () => {
+			tracking.dispatchCustomEvent(eventData);
+			expect(tracking.getDebugData()[0].data).toMatchObject(eventData);
+		});
+	});
+
+	describe('dispatchImage', () => {
+		const eventData = { action: 'test', category: 'test' };
+
+		it('does not throw an error', () => {
+			expect(() => {
+				tracking.dispatchImage(eventData);
+			}).not.toThrow();
+		});
+
+		it('writes debug data', () => {
+			tracking.dispatchImage(eventData);
+			expect(tracking.getDebugData()[0].data).toMatchObject(eventData);
+		});
+	});
+});

package/utils/validation.js

@@ -1,5 +1,5 @@
-const OForms = require('o-forms').default;
-const Input = require('o-forms/src/js/input').default;
+const OForms = require('@financial-times/o-forms').default;
+const Input = require('@financial-times/o-forms/src/js/input').default;
 
 class Validation {
 	/**

package/utils/validation.spec.js

@@ -0,0 +1,234 @@
+jest.mock('@financial-times/o-forms');
+jest.mock('@financial-times/o-forms/src/js/input');
+const OForms = require('@financial-times/o-forms');
+const Input = require('@financial-times/o-forms/src/js/input').default;
+const ValidationUtil = require('./validation');
+
+describe('Validation - Util', () => {
+	let validation;
+	beforeEach(() => {
+		document.body.innerHTML = `
+			<!DOCTYPE html>
+			<html>
+			<head></head>
+			<body>
+				<form class="ncf"></form>
+			</body>
+			</html>`;
+
+		validation = new ValidationUtil(document);
+		jest.spyOn(validation, 'checkFormValidity');
+		validation.init();
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('calls oForms to setup client side validation', () => {
+			expect(OForms.default.init).toHaveBeenCalled();
+		});
+
+		it('checks validation status on init', () => {
+			expect(validation.checkFormValidity).toHaveBeenCalled();
+		});
+
+		it('has a $form property exposing the form element', () => {
+			expect(validation.$form).toBeDefined();
+		});
+	});
+
+	describe('init', () => {
+		it('adds an event listener to required elements', () => {
+			expect(
+				validation.$requiredEls[0].input.addEventListener
+			).toHaveBeenCalled();
+		});
+
+		it('binds to onbeforeunload by default', () => {
+			expect(global.window.onbeforeunload).toBeDefined();
+			expect(global.window.onbeforeunload).toBeInstanceOf(Function);
+		});
+
+		it('does not bind to onbeforeunload if mutePromptBeforeLeaving = true', () => {
+			delete global.window.onbeforeunload;
+			const validationTest = new ValidationUtil({
+				mutePromptBeforeLeaving: true,
+			});
+			validationTest.init();
+
+			expect(global.window.onbeforeunload).not.toBeDefined();
+		});
+	});
+
+	describe('onbeforeunload', () => {
+		it('returns null by default', () => {
+			expect(global.window.onbeforeunload()).toBe(null);
+		});
+
+		it('returns true if the form has changed', () => {
+			validation.formChanged = true;
+
+			expect(global.window.onbeforeunload()).toBe(true);
+		});
+	});
+
+	describe('checkElementValidity', () => {
+		let $el;
+
+		beforeEach(() => {
+			$el = { foo: true };
+		});
+
+		it('does not call validateInput if custom validation fails', () => {
+			jest.spyOn(validation, 'checkCustomValidation').mockReturnValue(false);
+			validation.checkElementValidity($el);
+
+			expect(Input).not.toHaveBeenCalled();
+		});
+
+		it('calls input.validate for the element.', () => {
+			validation.checkElementValidity($el);
+
+			expect(Input).toHaveBeenCalledWith($el);
+		});
+	});
+
+	describe('checkFormValidity', () => {
+		it('sets the form as invalid if there are invalid elements.', () => {
+			validation.formValid = true;
+			validation.$requiredEls[0].input.checkValidity.mockReturnValue(false);
+
+			validation.checkFormValidity();
+
+			expect(validation.formValid).toBe(false);
+		});
+
+		it('sets the form as valid if there are no invalid elements.', () => {
+			validation.formValid = false;
+
+			validation.checkFormValidity();
+
+			expect(validation.formValid).toBe(true);
+		});
+	});
+
+	describe('Custom Validation', () => {
+		let field;
+
+		beforeEach(() => {
+			field = validation.oForms.formInputs.find(
+				(el) => el.input.name === 'foo'
+			);
+		});
+
+		describe('addCustomValidation', () => {
+			it('stores a custom validation function', () => {
+				validation.addCustomValidation({
+					errorMessage: 'Oops, something custom went wrong!',
+					field,
+					validator: jest.fn(),
+				});
+				expect(validation.customValidation.size).toBe(1);
+			});
+
+			it('throws if a custom validation function has already been specified for a particular field', () => {
+				validation.addCustomValidation({
+					errorMessage: 'Oops, something custom went wrong!',
+					field,
+					validator: jest.fn(),
+				});
+
+				expect(() => {
+					validation.addCustomValidation({
+						errorMessage: 'Oops, something else custom went wrong!',
+						field,
+					});
+				}).toThrow();
+			});
+
+			it('stores a custom validation function that will show a custom validation message when validation fails', async () => {
+				jest.spyOn(validation, 'showCustomFieldValidationError');
+				jest.spyOn(validation, 'clearCustomFieldValidationError');
+
+				validation.addCustomValidation({
+					errorMessage: 'Oops, something custom went wrong!',
+					field,
+					validator: jest.fn().mockReturnValue(false),
+				});
+
+				// Run the stored custom validation function
+				await validation.customValidation.get('foo')();
+
+				expect(validation.showCustomFieldValidationError).toHaveBeenCalled();
+				expect(
+					validation.clearCustomFieldValidationError
+				).not.toHaveBeenCalled();
+			});
+
+			it('stores a custom validation function that will clear a custom validation message when validation passes', async () => {
+				jest.spyOn(validation, 'showCustomFieldValidationError');
+				jest.spyOn(validation, 'clearCustomFieldValidationError');
+
+				validation.addCustomValidation({
+					errorMessage: 'Oops, something custom went wrong!',
+					field,
+					validator: jest.fn().mockReturnValue(true),
+				});
+
+				// Run the stored custom validation function
+				await validation.customValidation.get('foo')();
+
+				expect(validation.clearCustomFieldValidationError).toHaveBeenCalled();
+			});
+		});
+
+		describe('showCustomFieldValidationError', () => {
+			let messageStub = { foo: 'bar' };
+
+			it('adds the o-form--error class to the parent', () => {
+				jest.spyOn(field.input.parentNode.classList, 'add');
+				validation.showCustomFieldValidationError(field.input, messageStub);
+
+				expect(field.input.parentNode.classList.add).toHaveBeenCalledWith(
+					'o-forms-input--invalid'
+				);
+			});
+
+			it('adds the message to the parent', () => {
+				jest.spyOn(global.document, 'querySelector').mockReturnValue(null);
+				validation.showCustomFieldValidationError(field.input, messageStub);
+
+				expect(field.input.parentNode.insertBefore).toHaveBeenCalledWith(
+					messageStub,
+					null
+				);
+			});
+		});
+
+		describe('clearCustomFieldValidationError', () => {
+			beforeEach(() => {
+				validation.$form = document.createElement('form');
+			});
+
+			it('removes the message from the page', () => {
+				jest
+					.spyOn(validation.$form, 'querySelector')
+					.mockReturnValue(field.input);
+				validation.clearCustomFieldValidationError(field.input);
+
+				expect(field.parentNode.removeChild).toHaveBeenCalledWith(field.input);
+			});
+
+			it('re-checks the element validity for standard validation rules', () => {
+				jest.spyOn(validation, 'checkElementValidity');
+				validation.clearCustomFieldValidationError(field.input);
+
+				expect(validation.checkElementValidity).toHaveBeenCalledWith(
+					field.input
+				);
+			});
+		});
+	});
+});

package/utils/zuora.spec.js

@@ -0,0 +1,249 @@
+jest.mock('./form-element');
+const PaymentType = require('./payment-type');
+const Zuora = require('./zuora');
+
+let fixtures = {
+	render: {
+		code: 'firstNameRequired',
+		key: 'firstName',
+		message: 'firstName required',
+	},
+};
+
+describe('Zuora', () => {
+	let window;
+	let zuora;
+
+	beforeEach(() => {
+		window = {
+			Z: {
+				prepopulate: jest.fn(),
+				runAfterRender: jest.fn(),
+				renderWithErrorHandler: jest.fn(),
+				sendErrorMessageToHpm: jest.fn(),
+				setEventHandler: jest.fn(),
+				submit: jest.fn(),
+				validate: jest.fn(),
+			},
+		};
+		zuora = new Zuora(window);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('sets up global listeners', () => {
+			expect(window.Z.setEventHandler).toHaveBeenNthCalledWith(
+				1,
+				'blur_mode_enabled',
+				expect.anything()
+			);
+			expect(window.Z.setEventHandler).toHaveBeenNthCalledWith(
+				2,
+				'blur_mode_disabled',
+				expect.anything()
+			);
+		});
+
+		it('sets up dom elements', () => {
+			expect(zuora.iframe).toBeDefined();
+			expect(zuora.overlay).toBeDefined();
+		});
+
+		it('gets Z from window and adds to class scope', () => {
+			expect(zuora.Z).toEqual(window.Z);
+		});
+	});
+
+	describe('render', () => {
+		const params = { foo: 'bar' };
+		const prepopulatedFields = { firstName: 'John' };
+		const renderCallback = () => {};
+
+		it('calls relevant Zuora functions', async () => {
+			await zuora.render({ params, prepopulatedFields, renderCallback });
+
+			expect(window.Z.renderWithErrorHandler).toHaveBeenCalled();
+		});
+
+		it('sets up error handler that calls sendErrorMessageToHpm', async () => {
+			await zuora.render({ params, prepopulatedFields, renderCallback });
+			const handler = window.Z.renderWithErrorHandler.mock.calls[0][3];
+
+			handler();
+			expect(window.Z.sendErrorMessageToHpm).toHaveBeenCalled();
+		});
+
+		it('sets up error handler that calls sendErrorMessageToHpm with correct error', async () => {
+			await zuora.render({ params, prepopulatedFields, renderCallback });
+			const handler = window.Z.renderWithErrorHandler.mock.calls[0][3];
+
+			handler(
+				fixtures.render.key,
+				fixtures.render.code,
+				fixtures.render.message
+			);
+			expect(window.Z.sendErrorMessageToHpm).toHaveBeenCalledWith(
+				'firstName',
+				'First Name is invalid'
+			);
+		});
+
+		it('binds the renderCallback to Zuora`s runAfterRender function', async () => {
+			await zuora.render({ params, prepopulatedFields, renderCallback });
+
+			expect(window.Z.runAfterRender).toHaveBeenCalled();
+		});
+	});
+
+	describe('submit', () => {
+		it('rejects if paymentType is not valid', async () => {
+			let error;
+			try {
+				await zuora.submit('');
+			} catch (e) {
+				error = e;
+			}
+
+			expect(error instanceof Zuora.ZuoraErrorInvalidPaymentType).toBe(true);
+		});
+
+		describe(PaymentType.CREDITCARD, () => {
+			it('calls validate', async () => {
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: true })
+				);
+				await zuora.submit(PaymentType.CREDITCARD);
+
+				expect(window.Z.validate).toHaveBeenCalled();
+			});
+
+			it('rejects if the validation fails', async () => {
+				let error;
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: false })
+				);
+				try {
+					await zuora.submit(PaymentType.CREDITCARD);
+				} catch (e) {
+					error = e;
+				}
+
+				expect(error instanceof Zuora.ZuoraErrorValidation).toBe(true);
+			});
+
+			it('calls submit if validation passes', async () => {
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: true })
+				);
+				await zuora.submit(PaymentType.CREDITCARD);
+
+				expect(window.Z.submit).toHaveBeenCalled();
+			});
+		});
+
+		describe(PaymentType.DIRECTDEBIT, () => {
+			it('calls validate', async () => {
+				zuora.onDirectDebitConfirmation = jest.fn((callback) => callback(true));
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: true })
+				);
+				await zuora.submit(PaymentType.DIRECTDEBIT);
+
+				expect(window.Z.validate).toHaveBeenCalled();
+			});
+
+			it('rejects if the validation fails', async () => {
+				let error;
+				zuora.onDirectDebitConfirmation = jest.fn((callback) => callback(true));
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: false })
+				);
+				try {
+					await zuora.submit(PaymentType.DIRECTDEBIT);
+				} catch (e) {
+					error = e;
+				}
+
+				expect(error instanceof Zuora.ZuoraErrorValidation).toBe(true);
+			});
+
+			it('calls submit if validation passes', async () => {
+				zuora.onDirectDebitConfirmation = jest.fn((callback) => callback(true));
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: true })
+				);
+				await zuora.submit(PaymentType.DIRECTDEBIT);
+
+				expect(window.Z.submit).toHaveBeenCalled();
+			});
+
+			it('rejects if the direct debit is not confirmed', async () => {
+				let error;
+				zuora.onDirectDebitConfirmation = jest.fn((callback) =>
+					callback(false)
+				);
+				window.Z.validate.mockImplementation((callback) =>
+					callback({ success: true })
+				);
+				try {
+					await zuora.submit(PaymentType.DIRECTDEBIT);
+				} catch (e) {
+					error = e;
+				}
+
+				expect(error instanceof Zuora.ZuoraErrorMandateCancel).toBe(true);
+			});
+		});
+	});
+
+	describe('onAgreementCheckboxChange', () => {
+		let callbackStub;
+
+		beforeEach(() => {
+			callbackStub = jest.fn();
+		});
+
+		it('sets up agreement checkbox event handlers', () => {
+			zuora.onAgreementCheckboxChange(callbackStub);
+
+			// The first 2 calls to this happen in setupListeners
+			expect(window.Z.setEventHandler).toHaveBeenNthCalledWith(
+				3,
+				'agreement_checked',
+				expect.any(Function)
+			);
+			expect(window.Z.setEventHandler).toHaveBeenNthCalledWith(
+				4,
+				'agreement_unchecked',
+				expect.any(Function)
+			);
+		});
+	});
+
+	describe('onDirectDebitConfirmation', () => {
+		let callbackStub;
+
+		beforeEach(() => {
+			callbackStub = jest.fn();
+		});
+
+		it('sets up mandate confirmation event handlers', () => {
+			zuora.onDirectDebitConfirmation(callbackStub);
+
+			// The first 2 calls to this happen in setupListeners
+			expect(window.Z.setEventHandler).toHaveBeenNthCalledWith(
+				3,
+				'mandate_confirmed',
+				expect.any(Function)
+			);
+			expect(window.Z.setEventHandler).toHaveBeenNthCalledWith(
+				4,
+				'mandate_cancelled',
+				expect.any(Function)
+			);
+		});
+	});
+});