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

package/utils/billing-postcode.spec.js

@@ -0,0 +1,138 @@
+const BillingPostcode = require('./billing-postcode');
+
+describe('BillingPostcode', () => {
+	let billingPostcode;
+	let querySelectorStub;
+	let querySelectorAllStub;
+
+	beforeEach(() => {
+		const document = {
+			querySelector: () => {
+				return {
+					querySelectorAll: () => {},
+					querySelector: () => {},
+				};
+			},
+		};
+		billingPostcode = new BillingPostcode(
+			document,
+			'.ncf #billingPostcodeField'
+		);
+		querySelectorStub = jest.spyOn(billingPostcode.$el, 'querySelector');
+		querySelectorAllStub = jest.spyOn(billingPostcode.$el, 'querySelectorAll');
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns an element', () => {
+		expect(billingPostcode.$el).toBeDefined();
+	});
+
+	describe('changePostcodeReferenceForCountry', () => {
+		beforeEach(() => {
+			querySelectorStub.mockReturnValue({ innerHTML: '' });
+			querySelectorAllStub.mockReturnValue([
+				{ innerHTML: '' },
+				{ innerHTML: '' },
+			]);
+		});
+
+		describe('postcode reference name', () => {
+			it('calls querySelector with [data-reference]', () => {
+				billingPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(querySelectorAllStub).toHaveBeenCalledWith(
+					'[data-reference=postcode]'
+				);
+			});
+
+			it('sets postcodeReference to post code by default', () => {
+				const expectedResponse = [
+					{ innerHTML: 'postcode' },
+					{ innerHTML: 'postcode' },
+				];
+				billingPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(billingPostcode.reference).toEqual(expectedResponse);
+			});
+
+			it('sets postcodeReference to zip code when country code is USA', () => {
+				const expectedResponse = [
+					{ innerHTML: 'zip code' },
+					{ innerHTML: 'zip code' },
+				];
+				billingPostcode.changePostcodeReferenceForCountry = 'USA';
+				expect(billingPostcode.reference).toEqual(expectedResponse);
+			});
+
+			it('sets postcodeReference to postal code when country code is Canada', () => {
+				const expectedResponse = [
+					{ innerHTML: 'postal code' },
+					{ innerHTML: 'postal code' },
+				];
+				billingPostcode.changePostcodeReferenceForCountry = 'CAN';
+				expect(billingPostcode.reference).toEqual(expectedResponse);
+			});
+		});
+
+		describe('placeholder', () => {
+			it('calls querySelector with span input', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your postcode',
+				});
+				billingPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(querySelectorStub).toBeCalledWith('input');
+			});
+
+			it('sets postcode placeholder to `Enter your postcode` by default', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your zip code',
+				});
+				billingPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(billingPostcode.postcodeInput.placeholder).toEqual(
+					'Enter your postcode'
+				);
+			});
+
+			it('sets postcode placeholder to `Enter your zip code` when country code is USA', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your postcode',
+				});
+				billingPostcode.changePostcodeReferenceForCountry = 'USA';
+				expect(billingPostcode.postcodeInput.placeholder).toEqual(
+					'Enter your zip code'
+				);
+			});
+
+			it('sets postcode placeholder to `Enter your postal code` when country code is Canada', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your zip code',
+				});
+				billingPostcode.changePostcodeReferenceForCountry = 'CAN';
+				expect(billingPostcode.postcodeInput.placeholder).toEqual(
+					'Enter your postal code'
+				);
+			});
+		});
+	});
+
+	describe('getPostcodeReferenceByCountry', () => {
+		it('returns post code by default ', () => {
+			expect(BillingPostcode.getPostcodeReferenceByCountry('ZAR')).toEqual(
+				'postcode'
+			);
+		});
+
+		it('returns postal code when country is Canada', () => {
+			expect(BillingPostcode.getPostcodeReferenceByCountry('CAN')).toEqual(
+				'postal code'
+			);
+		});
+
+		it('returns zip code when country is USA', () => {
+			expect(BillingPostcode.getPostcodeReferenceByCountry('USA')).toEqual(
+				'zip code'
+			);
+		});
+	});
+});

package/utils/company-name.spec.js

@@ -5,25 +5,21 @@ import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
-const { JSDOM } = require('jsdom');
-
 describe('Company Name - Util', () => {
 	describe('Make Optional/Required using the methods inherited from FormElements', () => {
-		it('should switch between required and optional the input by adding and removing the related classes', () => {
+		it('switches between required and optional the input by adding and removing the related classes', () => {
 			const props = {};
 			const component = mount(
 				<Form>
 					<CompanyName {...props} />
 				</Form>
 			);
-			const dom = new JSDOM(`
+			document.body.innerHTML = `
 				<!DOCTYPE html>
 				<html>
 				<head></head>
 				<body>${component.html()}</body>
-				</html>
-			`);
-			const document = dom.window.document;
+				</html>`;
 
 			const companyNameUtilInstance = new CompanyNameUtil(document);
 			expect(companyNameUtilInstance).toBeDefined();

package/utils/country.spec.js

@@ -0,0 +1,87 @@
+const Country = require('./country');
+
+describe('Country', () => {
+	let country;
+	let documentStub;
+	let elementStub;
+
+	beforeEach(() => {
+		elementStub = {
+			addEventListener: jest.fn(),
+			selectedIndex: 1,
+			options: [{ value: 0 }, { value: 1 }, { value: 2 }],
+		};
+		documentStub = {
+			querySelector: jest.fn(),
+		};
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if nothing passed', () => {
+			expect(() => {
+				new Country();
+			}).toThrow();
+		});
+
+		it('throws an error if field not present', () => {
+			expect(() => {
+				documentStub.querySelector.mockReturnValue(false);
+				new Country(documentStub);
+			}).toThrow();
+		});
+	});
+
+	describe('constructed', () => {
+		beforeEach(() => {
+			documentStub.querySelector.mockReturnValue(elementStub);
+			country = new Country(documentStub);
+		});
+
+		describe('onChange', () => {
+			it('adds an event listener on change', () => {
+				country.onChange();
+				expect(elementStub.addEventListener).toHaveBeenCalledWith(
+					'change',
+					expect.anything()
+				);
+			});
+
+			it('calls the callback', () => {
+				const callback = jest.fn();
+				elementStub.addEventListener = (type, callback) => callback();
+				country.onChange(callback);
+				expect(callback).toHaveBeenCalled();
+			});
+		});
+
+		describe('getSelected', () => {
+			it('throws an error if nothing selected', () => {
+				elementStub.options = [];
+				elementStub.selectedIndex = 0;
+				expect(() => {
+					country.getSelected();
+				}).toThrow();
+			});
+
+			it('throws an error if something selected that is not there', () => {
+				elementStub.selectedIndex = 4;
+				expect(() => {
+					country.getSelected();
+				}).toThrow();
+			});
+
+			it('returns the selected option', () => {
+				expect(country.getSelected()).toBe(1);
+			});
+
+			it('returns the changed selected option', () => {
+				elementStub.selectedIndex = 0;
+				expect(country.getSelected()).toBe(0);
+			});
+		});
+	});
+});

package/utils/delivery-address-type.spec.js

@@ -5,43 +5,56 @@ import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
-const { JSDOM } = require('jsdom');
-
 describe('Delivery Address Type - Util', () => {
 	describe('Get an instance of the util class', () => {
-		it('should throw an error since the component is not found', () => {
+		it('throws an error since the component is not found', () => {
 			const component = mount(<Form></Form>);
-			const jsdom = JSDOM.fragment(component.html());
+			document.body.innerHTML = `
+				<!DOCTYPE html>
+				<html>
+				<head></head>
+				<body>${component.html()}</body>
+				</html>`;
 
 			expect(() => {
-				new DeliveryAdressTypeUtil(jsdom);
+				new DeliveryAdressTypeUtil(document);
 			}).toThrow();
 		});
 	});
 	describe('Get option selected', () => {
-		it('should return the default option', () => {
+		it('returns the default option', () => {
 			const props = {};
 			const component = mount(
 				<Form>
 					<DeliveryAddressType {...props} />
 				</Form>
 			);
-			const jsdom = JSDOM.fragment(component.html());
+			document.body.innerHTML = `
+				<!DOCTYPE html>
+				<html>
+				<head></head>
+				<body>${component.html()}</body>
+				</html>`;
 
-			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(jsdom);
+			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(document);
 			expect(deliveryAdressTypeUtilInstance.getSelected()).toEqual('home');
 		});
 
-		it('should return the option selected different than the default', () => {
+		it('returns the option selected different than the default', () => {
 			const props = { value: 'pobox' };
 			const component = mount(
 				<Form>
 					<DeliveryAddressType {...props} />
 				</Form>
 			);
-			const jsdom = JSDOM.fragment(component.html());
+			document.body.innerHTML = `
+				<!DOCTYPE html>
+				<html>
+				<head></head>
+				<body>${component.html()}</body>
+				</html>`;
 
-			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(jsdom);
+			const deliveryAdressTypeUtilInstance = new DeliveryAdressTypeUtil(document);
 			expect(deliveryAdressTypeUtilInstance.getSelected()).toEqual(props.value);
 		});
 	});

package/utils/delivery-option-messages.spec.js

@@ -12,20 +12,20 @@ describe('Find Custom Delivery Option', () => {
 			stubOption.mailDelivery = false;
 		});
 
-		it('should return undefined when other country than custom messages', () => {
+		it('returns undefined when other country than custom messages', () => {
 			expect(
 				getDeliveryOption(sixDaysProductCode, stubOption, 'AAA')
 			).toBeUndefined();
 		});
 
-		it('should return undefined when invalid distributor type code', () => {
+		it('returns undefined when invalid distributor type code', () => {
 			const option = { ...stubOption, value: 'ZZ' };
 			expect(
 				getDeliveryOption(sixDaysProductCode, option, 'USA')
 			).toBeUndefined();
 		});
 
-		it('should return undefined when mailDelivery is false and not other required props are setup', () => {
+		it('returns undefined when mailDelivery is false and not other required props are setup', () => {
 			stubOption.deliveryOnPublicationDate = undefined;
 			stubOption.flightMarket = undefined;
 			expect(

package/utils/delivery-option.spec.js

@@ -5,27 +5,23 @@ import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
-const { JSDOM } = require('jsdom');
-
 describe('Delivery Option - Util', () => {
 	describe('Get an instance of the util class', () => {
-		it('should throw an error since the component is not found', () => {
-			const dom = new JSDOM(`
-				<!DOCTYPE html>
-				<html>
-				<head></head>
-				<body></body>
-				</html>
-			`);
-			const document = dom.window.document;
+		it('throws an error if document element isn not passed in', () => {
+			expect(() => {
+				new DeliveryOptionUtil();
+			}).toThrow();
+		});
 
+		it('throws an error since the component is not found', () => {
 			expect(() => {
 				new DeliveryOptionUtil(document);
 			}).toThrow();
 		});
 	});
+
 	describe('Show/Hide Items for Delivery Option Change', () => {
-		it('should swap between hide and show two items by adding and removing the related classes', () => {
+		it('swapes between hide and show two items by adding and removing the related classes', () => {
 			const props = {
 				country: 'GBR',
 				options: [
@@ -38,14 +34,13 @@ describe('Delivery Option - Util', () => {
 					<DeliveryOption {...props} />
 				</Form>
 			);
-			const dom = new JSDOM(`
+			document.body.innerHTML = `
 				<!DOCTYPE html>
 				<html>
 				<head></head>
 				<body>${component.html()}</body>
 				</html>
-			`);
-			const document = dom.window.document;
+			`;
 
 			const deliveryoptionUtilInstance = new DeliveryOptionUtil(document);
 			expect(deliveryoptionUtilInstance).toBeDefined();
@@ -61,4 +56,94 @@ describe('Delivery Option - Util', () => {
 			expect(document.querySelector('.ncf__hidden #HD')).toBe(null);
 		});
 	});
+
+	describe('handleDeliveryOptionChange', () => {
+		let deliveryOption1Listener;
+		let deliveryOption2Listener;
+		let formStub;
+
+		beforeEach(() => {
+			deliveryOption1Listener = jest.fn();
+			deliveryOption2Listener = jest.fn();
+
+			formStub = {
+				elements: {
+					deliveryOption: [
+						{ addEventListener: deliveryOption1Listener },
+						{ addEventListener: deliveryOption2Listener },
+					],
+				},
+			};
+
+			document.querySelector = jest.fn(() => formStub);
+			document.querySelectorAll = jest.fn(() => []);
+		});
+
+		afterEach(() => {
+			jest.clearAllMocks();
+		});
+
+		describe('can handle an array', () => {
+			it('binds the given callback to the change event on the delivery option fields', async () => {
+				let deliveryOptionUtil = new DeliveryOptionUtil(document);
+				let callback = jest.fn();
+				deliveryOptionUtil.handleDeliveryOptionChange(callback);
+
+				expect(deliveryOption1Listener).toHaveBeenCalledWith(
+					'change',
+					callback
+				);
+				expect(deliveryOption2Listener).toHaveBeenCalledWith(
+					'change',
+					callback
+				);
+			});
+		});
+
+		describe('can handle a single node element', () => {
+			let deliveryOptionUtil;
+			let callback;
+
+			beforeEach(() => {
+				const props = {
+					country: 'GBR',
+					options: [
+						{ value: 'HD', isSelected: true, isValidDeliveryOption: true },
+						{ value: 'PV', isSelected: false, isValidDeliveryOption: true },
+					],
+				};
+				const component = mount(
+					<Form>
+						<DeliveryOption {...props} />
+					</Form>
+				);
+				document.body.innerHTML = `
+					<!DOCTYPE html>
+					<html>
+					<head></head>
+					<body>${component.html()}</body>
+					</html>
+				`;
+
+				document.querySelector = jest.fn(() => formStub);
+
+				deliveryOptionUtil = new DeliveryOptionUtil(document);
+				callback = jest.fn();
+			});
+
+			it('can handle having only one form element', () => {
+				expect(() => {
+					deliveryOptionUtil.handleDeliveryOptionChange(callback);
+				}).not.toThrow();
+			});
+
+			it('adds the event listener', () => {
+				jest.spyOn(formStub.elements.deliveryOption[0], 'addEventListener');
+				deliveryOptionUtil.handleDeliveryOptionChange(callback);
+				expect(
+					formStub.elements.deliveryOption[0].addEventListener
+				).toHaveBeenCalledWith('change', callback);
+			});
+		});
+	});
 });

package/utils/delivery-postcode.spec.js

@@ -0,0 +1,138 @@
+const DeliveryPostcode = require('./delivery-postcode');
+
+describe('DeliveryPostcode', () => {
+	let deliveryPostcode;
+	let querySelectorStub;
+	let querySelectorAllStub;
+
+	beforeEach(() => {
+		const document = {
+			querySelector: () => {
+				return {
+					querySelectorAll: () => {},
+					querySelector: () => {},
+				};
+			},
+		};
+		deliveryPostcode = new DeliveryPostcode(
+			document,
+			'.ncf #deliveryPostcodeField'
+		);
+		querySelectorStub = jest.spyOn(deliveryPostcode.$el, 'querySelector');
+		querySelectorAllStub = jest.spyOn(deliveryPostcode.$el, 'querySelectorAll');
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('returns an element', () => {
+		expect(deliveryPostcode.$el).toBeDefined();
+	});
+
+	describe('changePostcodeReferenceForCountry', () => {
+		beforeEach(() => {
+			querySelectorStub.mockReturnValue({ innerHTML: '' });
+			querySelectorAllStub.mockReturnValue([
+				{ innerHTML: '' },
+				{ innerHTML: '' },
+			]);
+		});
+
+		describe('postcode reference name', () => {
+			it('calls querySelector with [data-reference]', () => {
+				deliveryPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(querySelectorAllStub).toHaveBeenCalledWith(
+					'[data-reference=postcode]'
+				);
+			});
+
+			it('sets postcodeReference to post code by default', () => {
+				const expectedResponse = [
+					{ innerHTML: 'postcode' },
+					{ innerHTML: 'postcode' },
+				];
+				deliveryPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(deliveryPostcode.reference).toEqual(expectedResponse);
+			});
+
+			it('sets postcodeReference to zip code when country code is USA', () => {
+				const expectedResponse = [
+					{ innerHTML: 'zip code' },
+					{ innerHTML: 'zip code' },
+				];
+				deliveryPostcode.changePostcodeReferenceForCountry = 'USA';
+				expect(deliveryPostcode.reference).toEqual(expectedResponse);
+			});
+
+			it('sets postcodeReference to postal code when country code is Canada', () => {
+				const expectedResponse = [
+					{ innerHTML: 'postal code' },
+					{ innerHTML: 'postal code' },
+				];
+				deliveryPostcode.changePostcodeReferenceForCountry = 'CAN';
+				expect(deliveryPostcode.reference).toEqual(expectedResponse);
+			});
+		});
+
+		describe('placeholder', () => {
+			it('calls querySelector with span input', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your postcode',
+				});
+				deliveryPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(querySelectorStub).toHaveBeenCalledWith('input');
+			});
+
+			it('sets postcode placeholder to `Enter your postcode` by default', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your zip code',
+				});
+				deliveryPostcode.changePostcodeReferenceForCountry = 'GBR';
+				expect(deliveryPostcode.postcodeInput.placeholder).toEqual(
+					'Enter your postcode'
+				);
+			});
+
+			it('sets postcode placeholder to `Enter your zip code` when country code is USA', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your postcode',
+				});
+				deliveryPostcode.changePostcodeReferenceForCountry = 'USA';
+				expect(deliveryPostcode.postcodeInput.placeholder).toEqual(
+					'Enter your zip code'
+				);
+			});
+
+			it('sets postcode placeholder to `Enter your postal code` when country code is Canada', () => {
+				querySelectorStub.mockReturnValue({
+					placeholder: 'Enter your zip code',
+				});
+				deliveryPostcode.changePostcodeReferenceForCountry = 'CAN';
+				expect(deliveryPostcode.postcodeInput.placeholder).toEqual(
+					'Enter your postal code'
+				);
+			});
+		});
+	});
+
+	describe('getPostcodeReferenceByCountry', () => {
+		it('returns post code by default ', () => {
+			expect(DeliveryPostcode.getPostcodeReferenceByCountry('ZAR')).toEqual(
+				'postcode'
+			);
+		});
+
+		it('returns postal code when country is Canada', () => {
+			expect(DeliveryPostcode.getPostcodeReferenceByCountry('CAN')).toEqual(
+				'postal code'
+			);
+		});
+
+		it('returns zip code when country is USA', () => {
+			expect(DeliveryPostcode.getPostcodeReferenceByCountry('USA')).toEqual(
+				'zip code'
+			);
+		});
+	});
+});