@financial-times/n-conversion-forms/utils/subscription-confirmation-with-payment-link.spec.js

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

const SubscriptionConfirmationWithPaymentLink = require('./subscription-confirmation-with-payment-link');

describe('SubscriptionConfirmationWithPaymentLink', () => {
	let subscriptionConfirmation;
	let documentStub;
	let containerStub;
	let buttonStub;
	let inputStub;
	let clipboardStub;

	beforeEach(() => {
		buttonStub = {
			addEventListener: jest.fn(),
			classList: {
				add: jest.fn(),
				remove: jest.fn(),
			},
		};
		inputStub = { value: 'test-link' };
		containerStub = {
			querySelector: jest.fn((selector) => {
				if (selector.includes('button')) return buttonStub;
				if (selector.includes('input')) return inputStub;
				return null;
			}),
		};
		documentStub = {
			querySelector: jest.fn(() => containerStub),
		};
		clipboardStub = Promise.resolve();
		global.navigator.clipboard = { writeText: jest.fn(() => clipboardStub) };
	});

	afterEach(() => {
		jest.clearAllMocks();
		jest.useRealTimers();
	});

	describe('constructor', () => {
		it('throws an error if nothing passed', () => {
			expect(() => {
				new SubscriptionConfirmationWithPaymentLink();
			}).toThrow();
		});

		it('throws an error if container not present', () => {
			documentStub.querySelector.mockReturnValue(false);
			expect(() => {
				new SubscriptionConfirmationWithPaymentLink(documentStub);
			}).toThrow();
		});
	});

	describe('handleCopyPaymentLink', () => {
		beforeEach(() => {
			documentStub.querySelector.mockReturnValue(containerStub);
			subscriptionConfirmation = new SubscriptionConfirmationWithPaymentLink(
				documentStub
			);
			jest.useFakeTimers();
		});

		it('adds click event listener to button', () => {
			subscriptionConfirmation.handleCopyPaymentLink();
			expect(buttonStub.addEventListener).toHaveBeenCalledWith(
				'click',
				expect.any(Function)
			);
		});

		it('copies input value to clipboard on click', async () => {
			const callback = jest.fn();
			subscriptionConfirmation.handleCopyPaymentLink(callback);

			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
			await clickHandler();

			expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test-link');
		});

		it('updates button text and style after copy', async () => {
			subscriptionConfirmation.handleCopyPaymentLink();

			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
			await clickHandler();

			expect(buttonStub.textContent).toBe('Copied');
			expect(buttonStub.classList.add).toHaveBeenCalledWith(
				'subscription-active-with-payment-link__button--copied'
			);
		});

		it('resets button after timeout', async () => {
			subscriptionConfirmation.handleCopyPaymentLink();

			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
			await clickHandler();

			jest.advanceTimersByTime(2000);

			expect(buttonStub.textContent).toBe('Copy');
			expect(buttonStub.classList.remove).toHaveBeenCalledWith(
				'subscription-active-with-payment-link__button--copied'
			);
		});

		it('calls callback with copied value', async () => {
			const callback = jest.fn();
			subscriptionConfirmation.handleCopyPaymentLink(callback);

			const clickHandler = buttonStub.addEventListener.mock.calls[0][1];
			await clickHandler();

			expect(callback).toHaveBeenCalledWith('test-link');
		});
	});
});