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

package/utils/delivery-start-date.spec.js

@@ -0,0 +1,177 @@
+jest.mock('fetchres');
+const fetchres = require('fetchres');
+const DeliveryStartDate = require('./delivery-start-date');
+
+describe('DeliveryStartDate', () => {
+	let document;
+	let startDateContainer;
+	let startDateFieldStub;
+	let startDateTextStub;
+	let dateTestInput;
+	let csrfFieldElement;
+
+	beforeEach(() => {
+		fetchres.json = jest.fn((response) => response.json());
+		global.fetch = jest.fn(() =>
+			Promise.resolve({
+				status: 200,
+			})
+		);
+
+		dateTestInput = {
+			setAttribute: jest.fn(),
+		};
+		startDateContainer = {
+			classList: { add: jest.fn(), remove: jest.fn() },
+		};
+		startDateFieldStub = {
+			value: '2019-02-16',
+			setAttribute: jest.fn(),
+			removeAttribute: jest.fn(),
+		};
+		startDateTextStub = { innerHTML: 'Saturday 16th of February 2019' };
+		csrfFieldElement = { value: '1234567890' };
+
+		document = {
+			querySelector: jest.fn((elementIdentifier) => {
+				const classMapping = {
+					'#deliveryStartDateField .o-forms-input': startDateContainer,
+					'#deliveryStartDate': startDateFieldStub,
+					'.js-start-date-text': startDateTextStub,
+					'.ncf #csrfToken': csrfFieldElement,
+				};
+
+				return classMapping[elementIdentifier] || false;
+			}),
+			createElement: jest.fn((elementType) => {
+				return elementType === 'input' ? dateTestInput : false;
+			}),
+		};
+	});
+
+	afterEach(() => {
+		fetch.mockClear();
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if document element is not passed in', () => {
+			expect(() => {
+				new DeliveryStartDate();
+			}).toThrow();
+		});
+
+		it('throws an error if delivery start date element does not exist on the page', () => {
+			expect(() => {
+				document.querySelector = () => {};
+				new DeliveryStartDate(document);
+			}).toThrow();
+		});
+	});
+
+	describe('handleDeliveryStartDateChange', () => {
+		let startDateUtil;
+		let startDateChangeResult;
+
+		async function setup () {
+			global.fetch = jest.fn(() =>
+				Promise.resolve({
+					json: () =>
+						Promise.resolve({
+							firstDeliveryDate: '2019-04-13',
+							firstDeliveryDateString: 'Saturday 13th of April 2019',
+						}),
+				})
+			);
+
+			startDateUtil = new DeliveryStartDate(document);
+			startDateChangeResult = await startDateUtil.handleDeliveryStartDateChange(
+				'/api/path',
+				() => {
+					return { foo: 'bar' };
+				}
+			);
+		}
+
+		it('does only call the api if the field has a value', async () => {
+			delete startDateFieldStub.value;
+			await setup();
+			expect(fetch).not.toHaveBeenCalled();
+		});
+
+		it('makes a call to the api for the start date', async () => {
+			await setup();
+			expect(fetch).toHaveBeenCalled();
+			expect(fetch).toHaveBeenCalledWith(
+				'/api/path',
+				expect.objectContaining({
+					method: 'POST',
+					credentials: 'include',
+					headers: {
+						'CSRF-Token': '1234567890',
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						foo: 'bar',
+						startDate: '2019-02-16',
+					}),
+				})
+			);
+		});
+
+		it('updates the page according to the response from the API call', async () => {
+			await setup();
+			expect(startDateFieldStub.value).toEqual('2019-04-13');
+			expect(startDateTextStub.innerHTML).toEqual(
+				'Saturday 13th of April 2019'
+			);
+		});
+
+		it('clears errors and return true if the fetch call succeeds', async () => {
+			await setup();
+			expect(startDateContainer.classList.remove).toHaveBeenCalledWith(
+				'o-forms-input--invalid'
+			);
+			expect(startDateChangeResult).toBe(true);
+		});
+
+		it('displays an error and return false if the fetch call errors', async () => {
+			global.fetch = jest.fn(() => Promise.reject('API is down'));
+			startDateUtil = new DeliveryStartDate(document);
+
+			let startDateChangeResult =
+				await startDateUtil.handleDeliveryStartDateChange(
+					'/api/path',
+					() => {}
+				);
+
+			expect(startDateContainer.classList.add).toHaveBeenCalledWith(
+				'o-forms-input--invalid'
+			);
+			expect(startDateChangeResult).toBe(false);
+		});
+	});
+
+	describe('enable', () => {
+		it('enables the start date field', () => {
+			let startDateUtil = new DeliveryStartDate(document);
+			startDateUtil.enable();
+
+			expect(startDateFieldStub.removeAttribute).toHaveBeenCalledWith(
+				'disabled'
+			);
+		});
+	});
+
+	describe('disable', () => {
+		it('disables the start date field', () => {
+			let startDateUtil = new DeliveryStartDate(document);
+			startDateUtil.disable();
+
+			expect(startDateFieldStub.setAttribute).toHaveBeenCalledWith(
+				'disabled',
+				'true'
+			);
+		});
+	});
+});

package/utils/email.spec.js

@@ -0,0 +1,210 @@
+jest.mock('fetchres');
+const fetchres = require('fetchres');
+const Email = require('./email');
+
+describe('Email', () => {
+	let document;
+	let emailElement;
+	let emailConfirmElement;
+	let emailConfirmFieldElement;
+	let csrfFieldElement;
+
+	beforeEach(() => {
+		emailElement = { addEventListener: () => {} };
+		emailConfirmElement = { addEventListener: () => {} };
+		emailConfirmFieldElement = {
+			classList: { add: () => {}, remove: () => {} },
+		};
+		csrfFieldElement = { value: '1234567890' };
+
+		document = {
+			querySelector: (selector) => {
+				if (selector.indexOf('#emailConfirmField') !== -1) {
+					return emailConfirmFieldElement;
+				} else if (selector.indexOf('#emailConfirm') !== -1) {
+					return emailConfirmElement;
+				} else if (selector.indexOf('#csrfToken') !== -1) {
+					return csrfFieldElement;
+				} else {
+					return emailElement;
+				}
+			},
+		};
+		jest.spyOn(emailElement, 'addEventListener');
+		jest.spyOn(emailConfirmElement, 'addEventListener');
+		jest.spyOn(emailConfirmFieldElement.classList, 'add');
+		jest.spyOn(emailConfirmFieldElement.classList, 'remove');
+
+		fetchres.json = jest.fn((response) => response.json());
+		global.fetch = jest.fn(() =>
+			Promise.resolve({
+				status: 200,
+			})
+		);
+	});
+
+	afterEach(() => {
+		fetch.mockClear();
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if document element is not passed in', () => {
+			expect(() => {
+				new Email();
+			}).toThrow();
+		});
+
+		it('throws an error if email confirm element does not exist on the page', () => {
+			expect(() => {
+				document.querySelector = () => {};
+				new Email(document);
+			}).toThrow();
+		});
+
+		it('throws an error if email element does not exist on the page', () => {
+			expect(() => {
+				document.querySelector = (selector) => {
+					if (selector.indexOf('#emailConfirmField') !== -1) {
+						return emailConfirmFieldElement;
+					}
+				};
+				new Email(document);
+			}).toThrow();
+		});
+
+		it('adds event listener to email element', () => {
+			new Email(document);
+			expect(emailElement.addEventListener).toHaveBeenCalledTimes(1);
+		});
+
+		it('adds addEventListener to email confirm element', () => {
+			new Email(document);
+			expect(emailConfirmElement.addEventListener).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('checkMatch', () => {
+		it('adds the error class if the fields do not match', () => {
+			emailElement.value = 'password';
+			emailConfirmElement.value = 'pass';
+
+			let email = new Email(document);
+			email.checkMatch();
+
+			expect(emailConfirmFieldElement.classList.add).toHaveBeenCalledTimes(1);
+		});
+
+		it('removes the error class if the fields match', () => {
+			emailElement.value = 'password';
+			emailConfirmElement.value = 'password';
+
+			let email = new Email(document);
+			email.checkMatch();
+
+			expect(emailConfirmFieldElement.classList.remove).toHaveBeenCalledTimes(
+				1
+			);
+		});
+
+		it('does only check if valid if emailConfirm field has a value.', () => {
+			emailElement.value = 'password';
+			emailConfirmElement.value = '';
+
+			let email = new Email(document);
+			email.checkMatch();
+
+			expect(emailConfirmFieldElement.classList.add).not.toHaveBeenCalled();
+			expect(emailConfirmFieldElement.classList.remove).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('Email Exists', () => {
+		const url = '/foo';
+		let email;
+		let onFound;
+		let onNotFound;
+
+		beforeEach(() => {
+			onFound = jest.fn();
+			onNotFound = jest.fn();
+
+			email = new Email(document);
+		});
+
+		it('adds an additional event listener to the email field', () => {
+			email.registerEmailExistsCheck(url, onFound, onNotFound);
+			// Check it's called twice since by default we bind a change listener in the constructor.
+			expect(emailElement.addEventListener).toHaveBeenCalledTimes(2);
+		});
+
+		it('returns the handler function so it can potentially be unregistered', () => {
+			let handler = email.registerEmailExistsCheck(url, onFound, onNotFound);
+			expect(handler).toBeInstanceOf(Function);
+		});
+
+		it('calls the onNotFound callback if the email field has no value.', () => {
+			email.handleEmailExistsChange(url, onFound, onNotFound);
+			expect(onFound).not.toHaveBeenCalled();
+			expect(onNotFound).toHaveBeenCalled();
+		});
+
+		it('calls the specified url with the correct params if the email field has a value', () => {
+			emailElement.value = 'test@example.com';
+			email.handleEmailExistsChange(url, onFound, onNotFound);
+
+			expect(fetch).toHaveBeenCalledWith(
+				url,
+				expect.objectContaining({
+					method: 'POST',
+					credentials: 'include',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						email: 'test@example.com',
+						csrfToken: '1234567890',
+					}),
+				})
+			);
+		});
+
+		it('calls the onNotFound callback if the call to the url fails', async () => {
+			global.fetch = jest.fn(() => Promise.reject('API is down'));
+
+			emailElement.value = 'test@example.com';
+			await email.handleEmailExistsChange(url, onFound, onNotFound);
+
+			expect(onFound).not.toHaveBeenCalled();
+			expect(onNotFound).toHaveBeenCalled();
+		});
+
+		it('calls the onFound callback if the user exists', async () => {
+			global.fetch = jest.fn(() =>
+				Promise.resolve({
+					json: () => Promise.resolve(true),
+				})
+			);
+
+			emailElement.value = 'test@example.com';
+			await email.handleEmailExistsChange(url, onFound, onNotFound);
+
+			expect(onFound).toHaveBeenCalled();
+			expect(onNotFound).not.toHaveBeenCalled();
+		});
+
+		it('calls the onNotFound callback if the user does not exist', async () => {
+			global.fetch = jest.fn(() =>
+				Promise.resolve({
+					json: () => Promise.resolve(false),
+				})
+			);
+
+			emailElement.value = 'test@example.com';
+			await email.handleEmailExistsChange(url, onFound, onNotFound);
+
+			expect(onFound).not.toHaveBeenCalled();
+			expect(onNotFound).toHaveBeenCalled();
+		});
+	});
+});

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');
+		});
+	});
+});