@financial-times/n-conversion-forms 23.0.4 → 23.0.7

package/utils/apple-pay.spec.js

@@ -0,0 +1,177 @@
+const ApplePay = require('./apple-pay');
+
+describe('Apple Pay', () => {
+	let request;
+	let window;
+	let event;
+	let applePay;
+
+	beforeEach(() => {
+		request = { canMakePayment: function () {}, show: function () {} };
+		window = {
+			PaymentRequest: function () {
+				return request;
+			},
+			fetch: function () {
+				return Promise.resolve({ json: function () {} });
+			},
+		};
+		event = { complete: function () {} };
+
+		jest.spyOn(request, 'canMakePayment');
+		jest.spyOn(request, 'show');
+		jest.spyOn(window, 'PaymentRequest');
+		jest.spyOn(window, 'fetch');
+		jest.spyOn(event, 'complete');
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('public methods', () => {
+		describe('constructor', () => {
+			it('throws an error if PaymentRequest not available', () => {
+				window.PaymentRequest = null;
+				expect(() => {
+					new ApplePay(window);
+				}).toThrow();
+			});
+
+			it('creates the PaymentRequest with the defaults', () => {
+				new ApplePay(window);
+				expect(window.PaymentRequest).toHaveBeenCalledWith(
+					ApplePay.PAYMENT_METHODS,
+					ApplePay.PAYMENT_DETAILS,
+					ApplePay.PAYMENT_OPTIONS
+				);
+			});
+		});
+
+		describe('canMakePayment', () => {
+			it('proxies canMakePayment to the request', () => {
+				applePay = new ApplePay(window);
+				applePay.canMakePayment();
+				expect(request.canMakePayment).toHaveBeenCalled();
+			});
+		});
+
+		describe('show', () => {
+			it('proxies show to the request', () => {
+				applePay = new ApplePay(window);
+				applePay.show();
+				expect(request.show).toHaveBeenCalled();
+			});
+
+			it('does not create new request if no details passed', () => {
+				applePay = new ApplePay(window);
+				applePay.show();
+				expect(window.PaymentRequest).toHaveBeenCalledTimes(1);
+			});
+
+			it('creates new request if new details passed', () => {
+				applePay = new ApplePay(window);
+				applePay.show({ total: { label: 'new' } });
+				expect(window.PaymentRequest).toHaveBeenCalledTimes(2);
+			});
+
+			it('creates new request with right parameters', () => {
+				applePay = new ApplePay(window);
+				applePay.show({ total: { label: 'new' } });
+				expect(window.PaymentRequest).toHaveBeenCalledWith(
+					applePay.methods,
+					applePay.details,
+					applePay.options
+				);
+			});
+
+			it('setup onmerchantvalidation method', () => {
+				delete request.onmerchantvalidation;
+				applePay = new ApplePay(window);
+				applePay.show();
+				expect(request.onmerchantvalidation).toBeInstanceOf(Function);
+			});
+		});
+
+		describe('handleMerchantValidation', () => {
+			it('uses the production merchant validation URL by default', () => {
+				applePay = new ApplePay(window);
+				applePay.handleMerchantValidation(event);
+				expect(window.fetch).toHaveBeenCalledWith(
+					ApplePay.MERCHANT_VALIDATION_URL,
+					expect.anything()
+				);
+			});
+
+			it('uses the test merchant validation URL', () => {
+				applePay = new ApplePay(window, ApplePay.TEST_PAYMENT_METHODS);
+				applePay.handleMerchantValidation(event);
+				expect(window.fetch).toHaveBeenCalledWith(
+					ApplePay.TEST_MERCHANT_VALIDATION_URL,
+					expect.anything()
+				);
+			});
+
+			it('calls event.complete with response', async () => {
+				applePay = new ApplePay(window);
+				await applePay.handleMerchantValidation(event);
+				expect(event.complete).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('static methods', () => {
+		describe('getMerchantId', () => {
+			it('returns default merchant id', () => {
+				expect(ApplePay.getMerchantId()).toEqual(expect.any(String));
+			});
+
+			it('returns default merchant id if methods has no data', () => {
+				const methods = [{}];
+				expect(ApplePay.getMerchantId(methods)).toEqual(expect.any(String));
+			});
+
+			it('returns default merchant id if methods data has not got one', () => {
+				const methods = [{ data: {} }];
+				expect(ApplePay.getMerchantId(methods)).toEqual(expect.any(String));
+			});
+
+			it('returns merchant id from methods data', () => {
+				const methods = [{ data: { merchantIdentifier: 'test' } }];
+				expect(ApplePay.getMerchantId(methods)).toEqual('test');
+			});
+		});
+
+		describe('getMerchantValidationUrl', () => {
+			it('returns production merchant validation url', () => {
+				expect(ApplePay.getMerchantValidationUrl(ApplePay.MERCHANT_ID)).toEqual(
+					ApplePay.MERCHANT_VALIDATION_URL
+				);
+			});
+
+			it('returns a differnt merchant validation url for test merchant', () => {
+				expect(
+					ApplePay.getMerchantValidationUrl(ApplePay.TEST_MERCHANT_ID)
+				).toEqual(ApplePay.TEST_MERCHANT_VALIDATION_URL);
+			});
+
+			it('defaults to the production merchant validation url', () => {
+				expect(ApplePay.getMerchantValidationUrl()).toEqual(
+					ApplePay.MERCHANT_VALIDATION_URL
+				);
+			});
+		});
+
+		describe('getPaymentDetails', () => {
+			it('formats given values in payment details object', () => {
+				const label = 'test';
+				const value = 1.01;
+				const currency = 'GBP';
+				const details = ApplePay.getPaymentDetails(value, currency, label);
+
+				expect(details.total.label).toEqual(label);
+				expect(details.total.amount).toEqual({ value, currency });
+			});
+		});
+	});
+});

package/utils/billing-country.spec.js

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

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(