Fix banner tests

- Add createFallbackDonationURL function to make it more explicit
  when a link is being generated for a fallback banner
- Add tests for both donation URL functions
- Put missing mobile text test back

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

archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts

@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createDonationURL( page.getTracking(), impressionCount, true )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts

@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createDonationURL( page.getTracking(), impressionCount, true )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts

@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createDonationURL( page.getTracking(), impressionCount, true )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts

@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createDonationURL( page.getTracking(), impressionCount, true )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

banners/desktop/banner_ctrl.ts

@@ -25,7 +25,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -44,7 +44,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createDonationURL( page.getTracking(), impressionCount, true )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

banners/desktop/banner_var.ts

@@ -28,7 +28,7 @@ import { createFormActions } from '@src/createFormActions';
 import { LinearDailyDonorAverage } from '@src/utils/DynamicContent/LinearDailyDonorAverage';
 import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
 import { visitorsVsDailyDonorsSentence } from './visitorsVsDailyDonorsSentence';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
 const date = new Date();
 const localeFactory = new LocaleFactoryDe();
@@ -50,7 +50,7 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createDonationURL( page.getTracking(), impressionCount, true )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

banners/mobile/banner_var.ts

@@ -45,7 +45,7 @@ const app = createVueApp( BannerConductor, {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		pageScroller: new WindowPageScroller(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
-		donationURL: createDonationURL( page.getTracking(), impressionCount, false, { amount: '1000' } )
+		donationURL: createDonationURL( page.getTracking(), impressionCount, { amount: '1000' } )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

banners/mobile/components/BannerVar.vue

@@ -3,7 +3,7 @@
 		<MiniBanner
 			@close="onCloseMiniBanner"
 			@show-full-page-banner="onshowFullPageBanner"
-			@submit10Euro="submit10Euro"
+			@submit-10-euro="submit10Euro"
 		>
 			<template #banner-slides>
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">

src/createDonationURL.ts

@@ -11,17 +11,11 @@ const DONATE_LINK_URL = 'https://spenden.wikimedia.de';
  * For creating the target URL for the banner donation form, see `createFormActions.ts` instead.
  * @param {TrackingParameters} tracking
  * @param {ImpressionCount} impressionCount
- * @param {boolean} comesFromFallbackBanner  the component that contains this link is the fallback banner for banner size issues
  * @param {Record<string, string>} extraUrlParameters
  */
-export function createDonationURL(
-	tracking: TrackingParameters,
-	impressionCount: ImpressionCount,
-	comesFromFallbackBanner: boolean,
-	extraUrlParameters: Record<string, string> = {} ): string {
-	const piwikKeyword = comesFromFallbackBanner ? tracking.keyword.replace( /(ctrl|var)/g, 'mini' ) : tracking.keyword;
+export function createDonationURL( tracking: TrackingParameters, impressionCount: ImpressionCount, extraUrlParameters: Record<string, string> = {} ): string {
 	const urlParameters = new URLSearchParams( {
-		piwik_kwd: piwikKeyword,
+		piwik_kwd: tracking.keyword,
 		piwik_campaign: tracking.campaign,
 		impCount: String( impressionCount.overallCountIncremented ),
 		bImpCount: String( impressionCount.bannerCountIncremented ),

src/createFallbackDonationURL.ts

@@ -0,0 +1,15 @@
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+import { createDonationURL } from '@src/createDonationURL';
+
+/**
+ * This function is used for the fallback banner, as it replaces the usual tracking parameters with mini
+ *
+ * @param {TrackingParameters} tracking
+ * @param {ImpressionCount} impressionCount
+ * @param {Record<string, string>} extraUrlParameters
+ */
+export function createFallbackDonationURL( tracking: TrackingParameters, impressionCount: ImpressionCount, extraUrlParameters: Record<string, string> = {} ): string {
+	tracking.keyword = tracking.keyword.replace( /(ctrl|var)/g, 'mini' );
+	return createDonationURL( tracking, impressionCount, extraUrlParameters );
+}

test/features/BannerContent.ts

@@ -145,6 +145,50 @@ const expectShowsLiveTimeInSlideshow = async ( getWrapper: ( dynamicContent: Dyn
 	expect( wrapper.find( '.wmde-banner-slider' ).text() ).toContain( 'Third Date and Time' );
 };
 
+const expectShowsLiveDateAndTimeInMiniBanner = async ( getWrapper: ( dynamicContent: DynamicContent ) => VueWrapper<any> ): Promise<any> => {
+	const dynamicContent = newDynamicContent();
+	// There are 2 live text elements mounted at the same time in the mobile banners meaning it will be initialised twice
+	dynamicContent.getCurrentDateAndTime = vi.fn().mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Second Date and Time' )
+		.mockReturnValueOnce( 'Third Date and Time' );
+
+	const wrapper = getWrapper( dynamicContent );
+
+	expect( wrapper.find( '.wmde-banner-mini-slideshow' ).text() ).toContain( 'Initial Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-mini-slideshow' ).text() ).toContain( 'Second Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-mini-slideshow' ).text() ).toContain( 'Third Date and Time' );
+};
+
+const expectShowsLiveDateAndTimeInFullPageBanner = async ( getWrapper: ( dynamicContent: DynamicContent ) => VueWrapper<any> ): Promise<any> => {
+	const dynamicContent = newDynamicContent();
+	// There are 2 live text elements mounted at the same time in the mobile banners meaning it will be initialised twice
+	dynamicContent.getCurrentDateAndTime = vi.fn().mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Initial Date and Time' )
+		.mockReturnValueOnce( 'Second Date and Time' )
+		.mockReturnValueOnce( 'Third Date and Time' );
+
+	const wrapper = getWrapper( dynamicContent );
+
+	await wrapper.find( '.wmde-banner-mini-button' ).trigger( 'click' );
+
+	expect( wrapper.find( '.wmde-banner-message' ).text() ).toContain( 'Initial Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-message' ).text() ).toContain( 'Second Date and Time' );
+
+	await vi.advanceTimersByTimeAsync( 1000 );
+
+	expect( wrapper.find( '.wmde-banner-message' ).text() ).toContain( 'Third Date and Time' );
+};
+
 export const bannerContentFeatures: Record<string, ( wrapper: VueWrapper<any> ) => Promise<any>> = {
 	expectSlideShowPlaysWhenBecomesVisible,
 	expectSlideShowStopsOnFormInteraction
@@ -166,5 +210,7 @@ export const bannerContentDateAndTimeFeatures: Record<string, ( getWrapper: () =
 	expectShowsLiveDateAndTimeInMessage,
 	expectShowsLiveDateAndTimeInSlideshow,
 	expectShowsLiveTimeInMessage,
-	expectShowsLiveTimeInSlideshow
+	expectShowsLiveTimeInSlideshow,
+	expectShowsLiveDateAndTimeInMiniBanner,
+	expectShowsLiveDateAndTimeInFullPageBanner
 };

test/unit/createDonationURL.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { ImpressionCountStub } from '@test/fixtures/ImpressionCountStub';
+import { createDonationURL } from '@src/createDonationURL';
+
+describe( 'createDonationURL', () => {
+	it( 'should create donation URL with tracking information', () => {
+		const extraParameters = { locale: 'de_DE', ast: '1' };
+		const ctrlLink = createDonationURL( { campaign: 'C1', keyword: 'banner-ctrl' }, new ImpressionCountStub(), extraParameters );
+		const varLink = createDonationURL( { campaign: 'C1', keyword: 'banner-var' }, new ImpressionCountStub(), extraParameters );
+
+		expect( ctrlLink ).toStrictEqual( 'https://spenden.wikimedia.de?piwik_kwd=banner-ctrl&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1' );
+		expect( varLink ).toStrictEqual( 'https://spenden.wikimedia.de?piwik_kwd=banner-var&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1' );
+	} );
+} );

test/unit/createFallbackDonationLink.spec.ts → test/unit/createFallbackDonationURL.spec.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest';
 import { ImpressionCountStub } from '@test/fixtures/ImpressionCountStub';
-import { createDonationURL } from '@src/createDonationURL';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 
-describe( 'createDonationURL', () => {
+describe( 'createFallbackDonationURL', () => {
 	it( 'should create donation URL with tracking information', () => {
 		const extraParameters = { locale: 'de_DE', ast: '1' };
-		const ctrlLink = createDonationURL( { campaign: 'C1', keyword: 'banner-ctrl' }, new ImpressionCountStub(), true, extraParameters );
-		const varLink = createDonationURL( { campaign: 'C1', keyword: 'banner-var' }, new ImpressionCountStub(), true, extraParameters );
+		const ctrlLink = createFallbackDonationURL( { campaign: 'C1', keyword: 'banner-ctrl' }, new ImpressionCountStub(), extraParameters );
+		const varLink = createFallbackDonationURL( { campaign: 'C1', keyword: 'banner-var' }, new ImpressionCountStub(), extraParameters );
 		const expected = 'https://spenden.wikimedia.de?piwik_kwd=banner-mini&piwik_campaign=C1&impCount=1&bImpCount=1&locale=de_DE&ast=1';
 
 		expect( ctrlLink ).toStrictEqual( expected );