Add Anonymous and Email option for SubmitValues

- Add tests accordingly Ticket: https://phabricator.wikimedia.org/T235017
wmde · Jun 7, 2023 · 6a7976b · 6a7976b
1 parent c15236c
commit 6a7976b
Show file tree

Hide file tree

Showing 3 changed files with 421 additions and 23 deletions.
diff --git a/src/components/pages/donation_form/SubmitValues.vue b/src/components/pages/donation_form/SubmitValues.vue
@@ -8,16 +8,19 @@
 		<input type="hidden" name="bic" :value="bankdata.bic">
 
 		<input type="hidden" name="addressType" :value="addressType">
+
 		<template v-if="addressType !== 'anonym'">
+			<template v-if="addressType !== 'email'">
+				<input type="hidden" name="companyName" :value="address.companyName">
+				<input type="hidden" name="street" :value="address.street">
+				<input type="hidden" name="postcode" :value="address.postcode">
+				<input type="hidden" name="city" :value="address.city">
+				<input type="hidden" name="country" :value="address.country">
+			</template>
 			<input type="hidden" name="salutation" :value="address.salutation">
 			<input type="hidden" name="title" :value="address.title">
 			<input type="hidden" name="firstName" :value="address.firstName">
 			<input type="hidden" name="lastName" :value="address.lastName">
-			<input type="hidden" name="companyName" :value="address.companyName">
-			<input type="hidden" name="street" :value="address.street">
-			<input type="hidden" name="postcode" :value="address.postcode">
-			<input type="hidden" name="city" :value="address.city">
-			<input type="hidden" name="country" :value="address.country">
 			<input type="hidden" name="email" :value="address.email">
 		</template>
 		<input type="hidden" name="info" :value="newsletter">
@@ -41,6 +44,7 @@ import { addressTypeName } from '@/view_models/AddressTypeModel';
 import { BankAccount } from '@/view_models/BankAccount';
 import { TrackingData } from '@/view_models/TrackingData';
 import { CampaignValues } from '@/view_models/CampaignValues';
+import addressType from '@/components/pages/membership_form/AddressType.vue';
 
 export default Vue.extend( {
 	name: 'SubmitValues',
@@ -49,6 +53,9 @@ export default Vue.extend( {
 		campaignValues: Object as () => CampaignValues,
 	},
 	computed: {
+		addressType() {
+			return addressType;
+		},
 		...mapState<Payment>( NS_PAYMENT, {
 			payment: ( state: Payment ) => state.values,
 		} ),

diff --git a/tests/unit/components/pages/donation_form/SubmitValues.spec.ts b/tests/unit/components/pages/donation_form/SubmitValues.spec.ts
@@ -7,8 +7,8 @@ import { AddressTypeModel, addressTypeName } from '@/view_models/AddressTypeMode
 const localVue = createLocalVue();
 localVue.use( Vuex );
 
-const getWrapper = () => {
-	return mount( SubmitValues, {
+const getWrapper = ( addressType: AddressTypeModel ) => {
+	return mount(SubmitValues, {
 		localVue,
 		propsData: {
 			trackingData: {
@@ -20,12 +20,12 @@ const getWrapper = () => {
 				keyword: 'cage',
 			},
 		},
-		store: new Vuex.Store( {
+		store: new Vuex.Store({
 			modules: {
 				[ NS_ADDRESS ]: {
 					namespaced: true,
 					state: {
-						addressType: AddressTypeModel.PERSON,
+						addressType: addressType,
 						values: {
 							firstName: 'Victor',
 							lastName: 'van Doom',
@@ -63,37 +63,101 @@ const getWrapper = () => {
 					},
 				},
 			},
-		} ),
-	} );
+		}),
+	});
 };
 
 describe( 'SubmitValues.vue', () => {
-	it( 'renders input fields', () => {
-		const wrapper = getWrapper();
+	it( 'renders input fields for ANON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.ANON );
 		expect( wrapper.element ).toMatchSnapshot();
 	} );
 
-	it( 'renders the amount as an integer', () => {
-		const wrapper = getWrapper();
+	it( 'renders input fields for EMAIL address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.EMAIL );
+		expect( wrapper.element ).toMatchSnapshot();
+	} );
+
+	it( 'renders input fields for PERSON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.PERSON );
+		expect( wrapper.element ).toMatchSnapshot();
+	} );
+
+	it( 'renders the amount as an integer for ANON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.ANON );
 		expect( ( wrapper.find( 'input[name=amount]' ).element as HTMLInputElement ).value ).toBe( '2349' );
 	} );
 
-	it( 'renders the address type as string', () => {
-		const wrapper = getWrapper();
-		expect( ( wrapper.find( 'input[name=addressType]' ).element as HTMLInputElement ).value ).toBe( addressTypeName( AddressTypeModel.PERSON ) );
+	it( 'renders the amount as an integer for EMAIL address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.EMAIL );
+		expect( ( wrapper.find( 'input[name=amount]' ).element as HTMLInputElement ).value ).toBe( '2349' );
+	} );
+
+	it( 'renders the amount as an integer for PERSON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.PERSON );
+		expect( ( wrapper.find( 'input[name=amount]' ).element as HTMLInputElement ).value ).toBe( '2349' );
+	} );
+
+	it( 'renders the address type as string for ANON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.ANON );
+		expect( ( wrapper.find('input[name=addressType]' ).element as HTMLInputElement ).value ).toBe(
+			addressTypeName( AddressTypeModel.ANON )
+		);
+	} );
+
+	it( 'renders the address type as string for EMAIL address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.EMAIL );
+		expect( ( wrapper.find( 'input[name=addressType]' ).element as HTMLInputElement ).value ).toBe(
+			addressTypeName( AddressTypeModel.EMAIL )
+		);
+	} );
+
+	it( 'renders the address type as string for PERSON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.PERSON );
+		expect( ( wrapper.find( 'input[name=addressType]' ).element as HTMLInputElement ).value ).toBe(
+			addressTypeName( AddressTypeModel.PERSON )
+		);
 	} );
 
-	it( 'sends tracking values', () => {
-		const wrapper = getWrapper();
+	it( 'sends tracking values for ANON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.ANON );
 
 		expect( ( wrapper.find( 'input[name=bImpCount]' ).element as HTMLInputElement ).value ).toBe( '1' );
 		expect( ( wrapper.find( 'input[name=impCount]' ).element as HTMLInputElement ).value ).toBe( '5' );
 	} );
 
-	it( 'sends campaign values', () => {
-		const wrapper = getWrapper();
+	it( 'sends tracking values for EMAIL address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.EMAIL );
+
+		expect( ( wrapper.find( 'input[name=bImpCount]' ).element as HTMLInputElement ).value ).toBe( '1' );
+		expect( (wrapper.find( 'input[name=impCount]' ).element as HTMLInputElement ).value ).toBe( '5' );
+	} );
+
+	it( 'sends tracking values for PERSON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.PERSON );
+
+		expect( ( wrapper.find( 'input[name=bImpCount]' ).element as HTMLInputElement ).value ).toBe( '1' );
+		expect( ( wrapper.find( 'input[name=impCount]' ).element as HTMLInputElement ).value ).toBe( '5' );
+	} );
+
+	it( 'sends campaign values for ANON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.ANON );
+
+		expect( ( wrapper.find( 'input[name=piwik_campaign]' ).element as HTMLInputElement ).value).toBe( 'nicholas' );
+		expect( ( wrapper.find( 'input[name=piwik_kwd]' ).element as HTMLInputElement ).value).toBe( 'cage' );
+	} );
+
+	it( 'sends campaign values for EMAIL address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.EMAIL );
+
+		expect( ( wrapper.find( 'input[name=piwik_campaign]' ).element as HTMLInputElement ).value ).toBe( 'nicholas' );
+		expect( ( wrapper.find( 'input[name=piwik_kwd]' ).element as HTMLInputElement ).value ).toBe( 'cage' );
+	} );
+
+	it( 'sends campaign values for PERSON address type', () => {
+		const wrapper = getWrapper( AddressTypeModel.PERSON );
 
 		expect( ( wrapper.find( 'input[name=piwik_campaign]' ).element as HTMLInputElement ).value ).toBe( 'nicholas' );
 		expect( ( wrapper.find( 'input[name=piwik_kwd]' ).element as HTMLInputElement ).value ).toBe( 'cage' );
 	} );
-} );
+} );