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

package/components/delivery-security-instructions.spec.js

@@ -104,11 +104,11 @@ describe('DeliverySecurityInstructions', () => {
 				expect(textAreaProps.name).toBe('inputId');
 			});
 
-			it('set maxLength to 10', () => {
+			it('sets maxLength to 10', () => {
 				expect(textAreaProps.maxLength).toBe(10);
 			});
 
-			it('set rows to 3', () => {
+			it('sets rows to 3', () => {
 				expect(textAreaProps.rows).toBe(3);
 			});
 
@@ -120,7 +120,7 @@ describe('DeliverySecurityInstructions', () => {
 				expect(textAreaProps.disabled).toBeTrue;
 			});
 
-			it('set value', () => {
+			it('sets value', () => {
 				expect(textAreaProps.defaultValue).toBe('value');
 			});
 		});

package/components/graduation-date.spec.js

@@ -24,7 +24,7 @@ describe('GraduationDate', () => {
 		).toBe(true);
 	});
 
-	it('should display graduationDateMonth options as English month names', () => {
+	it('displays graduationDateMonth options as English month names', () => {
 		const wrapper = shallow(<GraduationDate />);
 		const values = wrapper
 			.find('#graduationDateMonth option')
@@ -45,7 +45,7 @@ describe('GraduationDate', () => {
 		]);
 	});
 
-	it('should store graduationDateMonth values as two-digit numbers', () => {
+	it('stores graduationDateMonth values as two-digit numbers', () => {
 		const wrapper = shallow(<GraduationDate />);
 		const values = wrapper
 			.find('#graduationDateMonth option')
@@ -85,13 +85,13 @@ describe('GraduationDate', () => {
 	describe('given a valid value prop is passed', () => {
 		const wrapper = shallow(<GraduationDate value="2020-08-28" />);
 
-		it('should set the default month', () => {
+		it('sets the default month', () => {
 			expect(wrapper.find('#graduationDateMonth').prop('defaultValue')).toEqual(
 				'08'
 			);
 		});
 
-		it('should set the default year', () => {
+		it('sets the default year', () => {
 			expect(wrapper.find('#graduationDateYear').prop('defaultValue')).toEqual(
 				'2020'
 			);
@@ -101,7 +101,7 @@ describe('GraduationDate', () => {
 	describe('given an invalid value prop is passed', () => {
 		const wrapper = shallow(<GraduationDate value="invalid" />);
 
-		it('should not set any default values', () => {
+		it('does not set any default values', () => {
 			expect(
 				wrapper.find('#graduationDateMonth').prop('defaultValue')
 			).toBeFalsy();
@@ -114,7 +114,7 @@ describe('GraduationDate', () => {
 	describe('given the isDisabled prop is set to true', () => {
 		const wrapper = shallow(<GraduationDate isDisabled={true} />);
 
-		it('should disable both select fields', () => {
+		it('disables both select fields', () => {
 			expect(
 				wrapper.find('#graduationDateMonth').prop('disabled')
 			).toBeTruthy();
@@ -125,7 +125,7 @@ describe('GraduationDate', () => {
 	describe('given the isRequired prop is set to true', () => {
 		const wrapper = shallow(<GraduationDate isRequired={true} />);
 
-		it('should make both fields required', () => {
+		it('makes both fields required', () => {
 			expect(
 				wrapper.find('#graduationDateMonth').prop('required')
 			).toBeTruthy();
@@ -136,7 +136,7 @@ describe('GraduationDate', () => {
 	describe('given the hasError prop is set to true', () => {
 		const wrapper = shallow(<GraduationDate hasError={true} />);
 
-		it('should add an invalid modifier class', () => {
+		it('adds an invalid modifier class', () => {
 			expect(wrapper.find('div.o-forms-input').prop('className')).toMatch(
 				'o-forms-input--invalid'
 			);

package/components/payment-term.spec.js

@@ -134,19 +134,19 @@ describe('PaymentTerm', () => {
 			/>
 		);
 
-		it('should not include renewal text', () => {
+		it('does not include renewal text', () => {
 			expect(
 				wrapper.find('.ncf__payment-term__renews-text').text()
 			).not.toMatch(/Renews (annually|monthly|quarterly) unless cancelled/);
 		});
 
-		it('should render fixed term renewal text in English', () => {
+		it('renders fixed term renewal text in English', () => {
 			expect(wrapper.find('.ncf__payment-term__renews-text').text()).toMatch(
 				/This subscription is for 3 months, charged monthly. You can cancel at anytime/
 			);
 		});
 
-		it('should render offer name on payment term title', () => {
+		it('renders offer name on payment term title', () => {
 			expect(wrapper.find('.ncf__payment-term__title').text()).toMatch(
 				'Mix & Match - Monthly'
 			);

package/helpers/index.spec.js

@@ -0,0 +1,11 @@
+const helpers = require('.');
+
+describe('helpers', () => {
+	it('exports a "ncf-common-data" helper', () => {
+		expect(helpers).toHaveProperty('ncf-common-data');
+	});
+
+	it('exports a "ncf-countries" helper', () => {
+		expect(helpers).toHaveProperty('ncf-countries');
+	});
+});

package/helpers/ncf-common-data.spec.js

@@ -0,0 +1,34 @@
+const mockCommonModule = {
+	example: 'example',
+	another: 'sample',
+	nested: {
+		property: 'no-problem',
+	},
+};
+jest.mock('n-common-static-data', () => mockCommonModule);
+const helper = require('./ncf-common-data');
+
+describe('ncf-common-data', () => {
+	let stub;
+
+	beforeEach(() => {
+		stub = jest.fn();
+	});
+
+	it('imports and exports the properties as defined', () => {
+		const hash = { import: 'example', export: 'whatever' };
+		helper({ hash, fn: stub });
+		const context = stub.mock.calls[0][0];
+		expect(context).toHaveProperty(hash.export, mockCommonModule[hash.import]);
+	});
+
+	it('can import nested properties', () => {
+		const hash = { import: 'nested.property', export: 'whatever' };
+		helper({ hash, fn: stub });
+		const context = stub.mock.calls[0][0];
+		expect(context).toHaveProperty(
+			hash.export,
+			mockCommonModule.nested.property
+		);
+	});
+});

package/helpers/ncf-countries.spec.js

@@ -0,0 +1,136 @@
+let mockCountries = generateCountryArray(100, { includeAllFrequent: true });
+jest.mock('n-common-static-data', () => {
+	return {
+		billingCountries: { countries: mockCountries },
+	};
+});
+jest.mock('n-common-static-data');
+const helper = require('./ncf-countries');
+
+describe('ncf-countries', () => {
+	let stub;
+
+	beforeEach(() => {
+		stub = jest.fn();
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('filter', () => {
+		it('does not filter if not present', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[1].countries).toEqual(mockCountries);
+		});
+
+		it('does not filter if not an array', () => {
+			helper({ hash: { filterList: 'C-1' }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[1].countries).toEqual(mockCountries);
+		});
+
+		it('filters and return only countries in array', () => {
+			helper({ hash: { filterList: ['C-1'] }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries).toEqual([{ code: 'C-1' }]);
+		});
+	});
+
+	describe('select', () => {
+		it('does not mark any countries selected if no value passed', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(
+				context.countries.find((country) => country.selected)
+			).not.toBeDefined();
+		});
+
+		it('does not mark any countries selected if incorrect value passed', () => {
+			helper({ hash: { value: 'Test' }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(
+				context.countries.find((country) => country.selected)
+			).not.toBeDefined();
+		});
+
+		it('marks a country as selected if value matches code', () => {
+			const value = 'C-2';
+			helper({ hash: { value }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(
+				context.countries[1].countries.find((country) => country.code === value)
+			).toBeDefined();
+		});
+	});
+
+	describe('group', () => {
+		it('does not group if frequently used countries under limit', () => {
+			helper({ hash: { filterList: ['CAN', 'FRA', 'JPN', 'USA'] }, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[0]).not.toHaveProperty('label');
+		});
+
+		it('groups countries over limits', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+
+			expect(context.countries[0]).toHaveProperty('label');
+		});
+
+		it('sorts the group of frequently used countries', () => {
+			helper({ hash: {}, fn: stub });
+			const context = stub.mock.calls[0][0];
+			const correctOrder = ['GBR', 'USA', 'JPN', 'FRA', 'CAN'];
+			const frequentlyUsed = context.countries[0].countries;
+
+			frequentlyUsed.forEach((item, index) => {
+				expect(correctOrder[index]).toEqual(item.code);
+			});
+		});
+
+		it('selects only one country if it exists in two places', () => {
+			const value = 'GBR';
+			helper({ hash: { value }, fn: stub });
+			const context = stub.mock.calls[0][0];
+			const frequentlyUsed = context.countries[0].countries;
+			const alphabetical = context.countries[1].countries;
+
+			expect(frequentlyUsed.find((item) => item.code === value)).toEqual(
+				expect.objectContaining({
+					selected: true,
+				})
+			);
+			expect(alphabetical.find((item) => item.code === value)).toEqual(
+				expect.objectContaining({
+					selected: false,
+				})
+			);
+		});
+	});
+});
+
+function generateCountryArray (length, { includeAllFrequent = true } = {}) {
+	return Array.from(Array(length), (item, index) => ({
+		code: `C-${index}`,
+	})).concat(
+		// prettier-ignore
+		includeAllFrequent
+			? [
+				{ code: 'JPN' },
+				{ code: 'FRA' },
+				{ code: 'USA' },
+				{ code: 'CAN' },
+				{ code: 'GBR' },
+			]
+			: []
+	);
+}

package/jest.config.js

@@ -9,8 +9,11 @@ module.exports = {
 	},
 	testMatch: [
 		'**/components/**/?(*.)+(spec|test).[tj]s?(x)',
+		'**/helpers/**/?(*.)+(spec|test).[tj]s?(x)',
 		'**/utils/**/?(*.)+(spec|test).[tj]s?(x)',
 	],
 	snapshotSerializers: ['jest-serializer-html'],
 	setupFilesAfterEnv: ['<rootDir>/test-jest/helpers/setup.js'],
+	resolver: '@financial-times/jest-browser-resolver',
+	transformIgnorePatterns: ['/node_modules//(?!(@financial-times)/)'],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-conversion-forms",
-  "version": "23.0.5",
+  "version": "23.0.6",
   "description": "Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).",
   "main": "dist/index.js",
   "scripts": {
@@ -38,6 +38,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@financial-times/eslint-config-next": "^3.0.0",
+    "@financial-times/jest-browser-resolver": "^1.0.2",
     "@financial-times/n-gage": "^8.2.0",
     "@storybook/addon-a11y": "^6.0.10",
     "@storybook/addon-essentials": "6.0.10",

package/utils/app-banner.spec.js

@@ -0,0 +1,68 @@
+const AppBanner = require('./app-banner');
+
+describe('Apple Pay', () => {
+	let window;
+	let element;
+	let iosAction;
+	let androidAction;
+
+	beforeEach(() => {
+		iosAction = { remove: jest.fn() };
+		androidAction = { remove: jest.fn() };
+		const classNameMap = {
+			'.ncf__app-banner-action--android': androidAction,
+			'.ncf__app-banner-action--ios': iosAction,
+		};
+		element = {
+			querySelector: jest.fn((className) => {
+				return classNameMap[className];
+			}),
+		};
+		window = {
+			document: { querySelector: jest.fn(() => element) },
+			navigator: { userAgent: '' },
+		};
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('constructor', () => {
+		it('throws an error if window not provided', () => {
+			expect(() => {
+				new AppBanner();
+			}).toThrow();
+		});
+
+		it('throws an error if banner not found', () => {
+			window.document.querySelector = jest.fn(() => false);
+			expect(() => {
+				new AppBanner(window);
+			}).toThrow();
+		});
+
+		it('does not remove any actions if the user agent is not sniffed', () => {
+			new AppBanner(window);
+
+			expect(iosAction.remove).not.toHaveBeenCalled();
+			expect(androidAction.remove).not.toHaveBeenCalled();
+		});
+
+		it('removes ios action if the user agent is android', () => {
+			window.navigator.userAgent = 'android';
+			new AppBanner(window);
+
+			expect(iosAction.remove).toHaveBeenCalled();
+			expect(androidAction.remove).not.toHaveBeenCalled();
+		});
+
+		it('removes android action if the user agent is ios', () => {
+			window.navigator.userAgent = 'iphone';
+			new AppBanner(window);
+
+			expect(iosAction.remove).not.toHaveBeenCalled();
+			expect(androidAction.remove).toHaveBeenCalled();
+		});
+	});
+});

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