Fix some tests and clean up code

- remove unused statements in the code
- fix warning in test setup
- fix scroll tests

https://phabricator.wikimedia.org/T368525

src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue

@@ -131,7 +131,6 @@ const props = defineProps<Props>();
 const campaignParams = inject<string>( QUERY_STRING_INJECTION_KEY, '' );
 const isFullSelected = ref( false );
 const store = useStore();
-defineExpose( { focus: (): void => pageRef.value.focus() } );
 
 const setFullSelected = ( selected: boolean ) => {
 	isFullSelected.value = selected;

src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue

@@ -199,7 +199,6 @@ const { addressSummary, inlineSummaryLanguageItem } = useAddressSummary( store )
 const mailingList = useMailingListModel( store );
 const { receiptNeeded, showReceiptOptionError } = useReceiptModel( store );
 const countryWasRestored = ref<boolean>( false );
-defineExpose( { focus: (): void => pageRef.value.focus() } );
 const scrollToPaymentSection = () => {
 	const scrollIntoViewElement = document.getElementById( 'donation-page-form-section-payment' );
 	if ( scrollIntoViewElement ) {

src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts

@@ -73,6 +73,10 @@ export function usePersonalDataSectionEventHandlers(
 			return;
 		}
 
+		if ( !addressDataIsValid.value || !bankDataIsValid.value || !paymentDataIsValid.value ) {
+			return;
+		}
+
 		// Track the form submission with the Matomo Form Analytics plugin
 		// The form is a different one than the one for the submitValuesForm
 		trackFormSubmissionForAddressType( addressType.value );

tests/unit/components/pages/donation_form/single_page_form/DonationForm.spec.ts

@@ -37,7 +37,7 @@ describe( 'DonationForm.vue', () => {
 				validateBankDataUrl: '',
 				validateLegacyBankDataUrl: '',
 				salutations: [],
-				addressValidationPatterns: {} as AddressValidation,
+				addressValidationPatterns: { postcode: '' } as AddressValidation,
 				usesContentCards: true,
 			},
 			global: {

tests/unit/components/pages/donation_form/single_page_form/PersonalDataSection.spec.ts

@@ -121,13 +121,13 @@ describe( 'PersonalDataSection.vue', () => {
 
 	it( 'scrolls to payment section when button for changing payment data is clicked', async () => {
 		const scrollElement = { scrollIntoView: jest.fn() };
+		Object.defineProperty( document, 'getElementById', { writable: true, configurable: true, value: () => scrollElement } );
+
 		const { wrapper } = getWrapper();
 
 		await wrapper.find( '#previous-btn' ).trigger( 'click' );
-		await nextTick();
 
-		// TODO test that payment section got scrolled to
-		expect( scrollElement.scrollIntoView ).toHaveBeenCalledTimes( 1 );
+		expect( scrollElement.scrollIntoView ).toHaveBeenCalledWith( { behavior: 'smooth' } );
 	} );
 
 	it( 'shows and hides the error summary', async () => {

tests/unit/components/pages/donation_form/single_page_form/PersonalDataSectionDonationReceipt.spec.ts

@@ -108,13 +108,13 @@ describe( 'PersonalDataSectionDonationReceipt.vue', () => {
 
 	it( 'scrolls to payment section when button for changing payment data is clicked', async () => {
 		const scrollElement = { scrollIntoView: jest.fn() };
+		Object.defineProperty( document, 'getElementById', { writable: true, configurable: true, value: () => scrollElement } );
+
 		const { wrapper } = getWrapper();
 
 		await wrapper.find( '#previous-btn' ).trigger( 'click' );
-		await nextTick();
 
-		// TODO test that payment section got scrolled to
-		expect( scrollElement.scrollIntoView ).toHaveBeenCalled();
+		expect( scrollElement.scrollIntoView ).toHaveBeenCalledWith( { behavior: 'smooth' } );
 	} );
 
 	it( 'shows and hides the error summary', async () => {

tests/unit/components/pages/donation_form/single_page_form/PersonalDataSectionDonationReceiptStreetAutoComplete.spec.ts

@@ -15,6 +15,7 @@ import { Salutation } from '@src/view_models/Salutation';
 import PersonalDataSectionDonationReceipt from '@src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue';
 import BankFields from '@src/components/shared/BankFields.vue';
 import { FakeBankValidationResource } from '@test/unit/TestDoubles/FakeBankValidationResource';
+import { PaymentType } from '@src/view_models/PaymentType';
 
 const testCountry = {
 	countryCode: 'de',
@@ -111,13 +112,13 @@ describe( 'PersonalDataSectionDonationReceipt.vue (With Street Autocomplete)', (
 
 	it( 'scrolls to payment section when button for changing payment data is clicked', async () => {
 		const scrollElement = { scrollIntoView: jest.fn() };
+		Object.defineProperty( document, 'getElementById', { writable: true, configurable: true, value: () => scrollElement } );
+
 		const { wrapper } = getWrapper();
 
 		await wrapper.find( '#previous-btn' ).trigger( 'click' );
-		await nextTick();
 
-		// TODO test that payment section got scrolled to
-		expect( scrollElement.scrollIntoView ).toHaveBeenCalled();
+		expect( scrollElement.scrollIntoView ).toHaveBeenCalledWith( { behavior: 'smooth' } );
 	} );
 
 	it( 'shows and hides the error summary', async () => {
@@ -333,9 +334,18 @@ describe( 'PersonalDataSectionDonationReceipt.vue (With Street Autocomplete)', (
 
 	it( 'submits the form', async () => {
 		const store = createStore();
-		await setPaymentType( store, 'UEB' );
+		await store.dispatch( action( 'payment', 'initializePayment' ), {
+			allowedIntervals: [ 0, 12 ],
+			allowedPaymentTypes: [ PaymentType.PAYPAL ],
+			initialValues: {
+				amount: '2399',
+				type: PaymentType.PAYPAL,
+				paymentIntervalInMonths: '12',
+				isCustomAmount: false,
+			},
+		} );
 		await store.dispatch( action( 'address', 'initializeAddress' ), {
-			addressType: AddressTypeModel.PERSON,
+			addressType: AddressTypeModel.ANON,
 			newsletter: true,
 			receipt: true,
 			fields: [
@@ -355,10 +365,10 @@ describe( 'PersonalDataSectionDonationReceipt.vue (With Street Autocomplete)', (
 		mockedAxios.post.mockResolvedValue( { data: { status: 'OK' } } );
 		const { wrapper } = getWrapper( store );
 
-		const submitForm = wrapper.find<HTMLFormElement>( '#donation-form-submit-values' );
+		const submitForm = wrapper.find<HTMLFormElement>( '#submit-form' );
 		submitForm.element.submit = jest.fn();
 
-		await wrapper.find( '#donation-form' ).trigger( 'submit' );
+		await wrapper.find( '#submit-btn' ).trigger( 'click' );
 		await flushPromises();
 
 		expect( submitForm.element.submit ).toHaveBeenCalled();

tests/unit/components/pages/donation_form/single_page_form/PersonalDataSectionStreetAutoComplete.spec.ts

@@ -122,12 +122,15 @@ describe( 'PersonalDataSection.vue (With Street Autocomplete)', () => {
 		expect( store.dispatch ).toBeCalledWith( expectedAction, expectedPayload );
 	} );
 
-	it( 'emits previous event', async () => {
+	it( 'scrolls to top when the donor clicks the previous button', async () => {
+		const scrollElement = { scrollIntoView: jest.fn() };
+		Object.defineProperty( document, 'getElementById', { writable: true, configurable: true, value: () => scrollElement } );
+
 		const { wrapper } = getWrapper();
 
 		await wrapper.find( '#previous-btn' ).trigger( 'click' );
 
-		expect( wrapper.emitted( 'previous-page' ).length ).toStrictEqual( 1 );
+		expect( scrollElement.scrollIntoView ).toHaveBeenCalledWith( { behavior: 'smooth' } );
 	} );
 
 	it( 'shows and hides the error summary', async () => {