@financial-times/n-conversion-forms/components/region-selector.spec.js

Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).

import React from 'react';
import { RegionSelector } from './region-selector';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

describe('RegionSelector', () => {
	it('renders a select with a label', () => {
		const props = {
			country: 'USA',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('label').exists()).toBe(true);
		expect(component.find('select').exists()).toBe(true);
	});

	it('renders the correct label based on country and isBillingSelector', () => {
		const props = {
			country: 'CAN',
			isBillingSelector: true,
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('label').text()).toContain('Billing Province');
	});

	it('can render an initial selected value', () => {
		const props = {
			country: 'USA',
			value: 'AR',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('select').prop('defaultValue')).toBe('AR');
	});

	it('can render a disabled select', () => {
		const props = {
			country: 'USA',
			isDisabled: true,
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('select').prop('disabled')).toBe(true);
	});

	it('can render an error state', () => {
		const props = {
			country: 'USA',
			hasError: true,
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('.o-forms-input--invalid').exists()).toBe(true);
	});

	it('can hide the component', () => {
		const props = {
			country: 'USA',
			isHidden: true,
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('.ncf__hidden').exists()).toBe(true);
	});

	it('can override id for field', () => {
		const props = {
			country: 'USA',
			fieldId: 'customFieldId',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('#customFieldId').exists()).toBe(true);
	});

	it('can override id for select', () => {
		const props = {
			country: 'USA',
			selectId: 'customSelectId',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('select#customSelectId').exists()).toBe(true);
	});

	it('applies context-specific name if is billing state', () => {
		const props = {
			country: 'USA',
			isBillingSelector: true,
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('select').prop('name')).toBe('billingState');
	});

	it('applies context-specific name if is not billing state', () => {
		const props = {
			country: 'USA',
			isBillingSelector: false,
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('select').prop('name')).toBe('state');
	});

	it('renders the correct label for USA', () => {
		const props = {
			country: 'USA',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('label').text()).toContain('State');
	});

	it('renders the correct label for CAN', () => {
		const props = {
			country: 'CAN',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('label').text()).toContain('Province');
	});

	it('renders the correct label for IND', () => {
		const props = {
			country: 'IND',
		};
		const component = mount(<RegionSelector {...props} />);
		expect(component.find('label').text()).toContain('State/Union Territory');
	});
});