Add step controller tests (#287)

Ticket: https://phabricator.wikimedia.org/T351199

test/components/DonationForm/StepControllers/SubmittableMainDonationFormUpgradeOptions.spec.ts

@@ -0,0 +1,117 @@
+import { beforeEach, describe, expect, it, test, vi } from 'vitest';
+import { StepAction } from '@src/components/DonationForm/StepNavigation';
+import { resetFormModel } from '@test/resetFormModel';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import {
+	createSubmittableMainDonationFormUpgradeOptions
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationFormUpgradeOptions';
+import { useFormModel } from '@src/components/composables/useFormModel';
+
+const formModel = useFormModel();
+
+describe( 'SubmittableMainDonationFormUpgradeOptions', () => {
+	let stepNavigation: StepAction;
+
+	// The model values are in the global scope, and they need to be reset before each test
+	beforeEach( () => {
+		resetFormModel( formModel );
+		stepNavigation = {
+			goToStep: vi.fn(),
+			submit: vi.fn()
+		};
+	} );
+
+	test.each( [
+		[ PaymentMethods.PAYPAL.value, '10', 'yearly' ],
+		[ PaymentMethods.BANK_TRANSFER.value, '10', 'yearly' ],
+		[ PaymentMethods.CREDIT_CARD.value, '10', 'yearly' ],
+		[ PaymentMethods.DIRECT_DEBIT.value, '10', 'yearly' ],
+		[ PaymentMethods.PAYPAL.value, '101', 'yearly' ],
+		[ PaymentMethods.BANK_TRANSFER.value, '101', 'yearly' ],
+		[ PaymentMethods.CREDIT_CARD.value, '101', 'yearly' ],
+		[ PaymentMethods.DIRECT_DEBIT.value, '101', 'yearly' ],
+		[ PaymentMethods.PAYPAL.value, '12', 'monthly' ],
+		[ PaymentMethods.BANK_TRANSFER.value, '12', 'monthly' ],
+		[ PaymentMethods.CREDIT_CARD.value, '12', 'monthly' ],
+		[ PaymentMethods.DIRECT_DEBIT.value, '12', 'monthly' ]
+	] )( 'goes to correct step when payment method is not Sofort and amount is in upgrade range', async ( paymentMethod: string, selectedAmount: string, expectedPage: string ) => {
+		formModel.paymentMethod.value = paymentMethod;
+		formModel.interval.value = Intervals.ONCE.value;
+		formModel.selectedAmount.value = selectedAmount;
+		const donationForm = createSubmittableMainDonationFormUpgradeOptions(
+			formModel,
+			'yearly',
+			'monthly',
+			11,
+			100
+		);
+
+		await donationForm.submit( stepNavigation, {} );
+
+		expect( stepNavigation.goToStep ).toHaveBeenCalledOnce();
+		expect( stepNavigation.goToStep ).toHaveBeenCalledWith( expectedPage );
+	} );
+
+	test.each( [
+		[ PaymentMethods.SOFORT.value, '10' ],
+		[ PaymentMethods.SOFORT.value, '12' ],
+		[ PaymentMethods.SOFORT.value, '101' ]
+	] )( 'submits when payment method is sofort', async ( paymentMethod: string, selectedAmount: string ) => {
+		formModel.interval.value = Intervals.ONCE.value;
+		formModel.paymentMethod.value = paymentMethod;
+		formModel.selectedAmount.value = selectedAmount;
+		const donationForm = createSubmittableMainDonationFormUpgradeOptions(
+			formModel,
+			'yearly',
+			'monthly',
+			11,
+			100
+		);
+
+		await donationForm.submit( stepNavigation, {} );
+
+		expect( stepNavigation.submit ).toHaveBeenCalledOnce();
+	} );
+
+	test.each( [
+		[ Intervals.MONTHLY.value, '10' ],
+		[ Intervals.QUARTERLY.value, '10' ],
+		[ Intervals.BIANNUAL.value, '10' ],
+		[ Intervals.YEARLY.value, '10' ],
+		[ Intervals.MONTHLY.value, '11' ],
+		[ Intervals.QUARTERLY.value, '11' ],
+		[ Intervals.BIANNUAL.value, '11' ],
+		[ Intervals.YEARLY.value, '11' ],
+		[ Intervals.MONTHLY.value, '101' ],
+		[ Intervals.QUARTERLY.value, '101' ],
+		[ Intervals.BIANNUAL.value, '101' ],
+		[ Intervals.YEARLY.value, '101' ]
+	] )( 'submits when interval is not once', async ( interval: string ) => {
+		formModel.interval.value = interval;
+		formModel.paymentMethod.value = PaymentMethods.PAYPAL.value;
+		const donationForm = createSubmittableMainDonationFormUpgradeOptions(
+			formModel,
+			'yearly',
+			'monthly',
+			11,
+			100
+		);
+
+		await donationForm.submit( stepNavigation, {} );
+
+		expect( stepNavigation.submit ).toHaveBeenCalledOnce();
+	} );
+
+	it( 'rejects calls to previous', async () => {
+		const donationForm = createSubmittableMainDonationFormUpgradeOptions(
+			formModel,
+			'yearly',
+			'monthly',
+			11,
+			100
+		);
+
+		expect( donationForm.previous( stepNavigation ) ).rejects.toEqual( 'we can\'t go to previous! This should never happen' );
+	} );
+} );

test/components/DonationForm/StepControllers/SubmittableMainDonationFormWhenOverAmount.spec.ts

@@ -27,7 +27,7 @@ describe( 'SubmittableMainDonationFormWhenOverAmount', () => {
 		[ PaymentMethods.BANK_TRANSFER.value ],
 		[ PaymentMethods.CREDIT_CARD.value ],
 		[ PaymentMethods.DIRECT_DEBIT.value ]
-	] )( 'submits when payment method is Sofort', async ( paymentMethod: string ) => {
+	] )( 'goes to upgrade when payment method is not Sofort', async ( paymentMethod: string ) => {
 		formModel.paymentMethod.value = paymentMethod;
 		formModel.interval.value = Intervals.ONCE.value;
 		const donationForm = createSubmittableMainDonationFormWhenOverAmount( formModel, 'yearly', 100 );
@@ -38,7 +38,7 @@ describe( 'SubmittableMainDonationFormWhenOverAmount', () => {
 		expect( stepNavigation.goToStep ).toHaveBeenCalledWith( 'yearly' );
 	} );
 
-	it( 'goes to upgrade when payment method is not Sofort', async () => {
+	it( 'submits when payment method is Sofort', async () => {
 		formModel.paymentMethod.value = PaymentMethods.SOFORT.value;
 		formModel.interval.value = Intervals.ONCE.value;
 		const donationForm = createSubmittableMainDonationFormWhenOverAmount( formModel, 'yearly', 100 );

test/components/DonationForm/StepControllers/SubmittableUpgradeToMonthly.spec.ts

@@ -0,0 +1,78 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { StepAction } from '@src/components/DonationForm/StepNavigation';
+import { resetFormModel } from '@test/resetFormModel';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import {
+	createSubmittableUpgradeToMonthly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToMonthly';
+
+const formModel = useFormModel();
+
+describe( 'SubmittableUpgradeToMonthly', () => {
+	let stepNavigation: StepAction;
+
+	// The model values are in the global scope, and they need to be reset before each test
+	beforeEach( () => {
+		resetFormModel( formModel );
+		stepNavigation = {
+			goToStep: vi.fn(),
+			submit: vi.fn()
+		};
+	} );
+
+	it( 'submits when user selects option', async () => {
+		const upgrade = createSubmittableUpgradeToMonthly( formModel, 'link', 'previous' );
+
+		await upgrade.submit( stepNavigation, {} );
+
+		expect( stepNavigation.submit ).toHaveBeenCalledOnce();
+	} );
+
+	it( 'goes to link step when user clicks link', async () => {
+		const upgrade = createSubmittableUpgradeToMonthly( formModel, 'link', 'previous' );
+
+		await upgrade.submit( stepNavigation, { changeOfAmount: 'true' } );
+
+		expect( stepNavigation.goToStep ).toHaveBeenCalledOnce();
+		expect( stepNavigation.goToStep ).toHaveBeenCalledWith( 'link' );
+	} );
+
+	it( 'sets form interval to once on previous', async () => {
+		formModel.interval.value = Intervals.YEARLY.value;
+		const upgrade = createSubmittableUpgradeToMonthly( formModel, 'link', 'previous' );
+
+		await upgrade.previous( stepNavigation );
+
+		expect( formModel.interval.value ).toBe( Intervals.ONCE.value );
+	} );
+
+	it( 'goes to previous step on previous', async () => {
+		formModel.interval.value = Intervals.YEARLY.value;
+		const upgrade = createSubmittableUpgradeToMonthly( formModel, 'link', 'previous' );
+
+		await upgrade.previous( stepNavigation );
+
+		expect( stepNavigation.goToStep ).toHaveBeenCalledOnce();
+		expect( stepNavigation.goToStep ).toHaveBeenCalledWith( 'previous' );
+	} );
+
+	describe( 'tracking events', function () {
+		it( 'converts recurring interval to "submit" event with the correct option selected', async () => {
+			const upgrade = createSubmittableUpgradeToMonthly( formModel, 'link', 'previous' );
+
+			await upgrade.submit( stepNavigation, { upgradeToMonthlyInterval: Intervals.MONTHLY.value } );
+
+			expect( stepNavigation.submit ).toHaveBeenCalledWith( new BannerSubmitEvent( 'UpgradeToMonthlyForm', 'recurring' ) );
+		} );
+
+		it( 'converts non-recurring interval to "submit" event with the correct option selected', async () => {
+			const upgrade = createSubmittableUpgradeToMonthly( formModel, 'link', 'previous' );
+
+			await upgrade.submit( stepNavigation, { upgradeToMonthlyInterval: Intervals.ONCE.value } );
+
+			expect( stepNavigation.submit ).toHaveBeenCalledWith( new BannerSubmitEvent( 'UpgradeToMonthlyForm', 'non-recurring' ) );
+		} );
+	} );
+} );