From 7abf71ce391b91ddc9d811173f911e90bf29efd2 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Tue, 5 Dec 2023 11:35:00 +0100
Subject: [PATCH] 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
---
 .../C23_WMDE_Desktop_DE_14/banner_ctrl.ts     |  4 +-
 .../C23_WMDE_Desktop_DE_14/banner_var.ts      |  4 +-
 .../C23_WMDE_Desktop_DE_15/banner_ctrl.ts     |  4 +-
 .../C23_WMDE_Desktop_DE_15/banner_var.ts      |  4 +-
 banners/desktop/banner_ctrl.ts                |  4 +-
 banners/desktop/banner_var.ts                 |  4 +-
 banners/mobile/banner_var.ts                  |  2 +-
 banners/mobile/components/BannerVar.vue       |  2 +-
 src/createDonationURL.ts                      | 10 +---
 src/createFallbackDonationURL.ts              | 15 ++++++
 test/features/BannerContent.ts                | 48 ++++++++++++++++++-
 test/unit/createDonationURL.spec.ts           | 14 ++++++
 ...c.ts => createFallbackDonationURL.spec.ts} |  8 ++--
 13 files changed, 96 insertions(+), 27 deletions(-)
 create mode 100644 src/createFallbackDonationURL.ts
 create mode 100644 test/unit/createDonationURL.spec.ts
 rename test/unit/{createFallbackDonationLink.spec.ts => createFallbackDonationURL.spec.ts} (56%)

diff --git a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts
index a91de4665..d39b85b96 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_ctrl.ts
+++ b/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,
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts
index 9602f15ef..0a9d1795b 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_14/banner_var.ts
+++ b/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,
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
index a91de4665..d39b85b96 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_ctrl.ts
+++ b/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,
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
index 6825de95f..dce2c6743 100644
--- a/archive/desktop/C23_WMDE_Desktop_DE_15/banner_var.ts
+++ b/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,
diff --git a/banners/desktop/banner_ctrl.ts b/banners/desktop/banner_ctrl.ts
index a91de4665..d39b85b96 100644
--- a/banners/desktop/banner_ctrl.ts
+++ b/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,
diff --git a/banners/desktop/banner_var.ts b/banners/desktop/banner_var.ts
index cf63eb59a..3d5165a1e 100644
--- a/banners/desktop/banner_var.ts
+++ b/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,
diff --git a/banners/mobile/banner_var.ts b/banners/mobile/banner_var.ts
index f780c0c33..f4762149e 100644
--- a/banners/mobile/banner_var.ts
+++ b/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,
diff --git a/banners/mobile/components/BannerVar.vue b/banners/mobile/components/BannerVar.vue
index 198cb0216..b85c0b12f 100644
--- a/banners/mobile/components/BannerVar.vue
+++ b/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">
diff --git a/src/createDonationURL.ts b/src/createDonationURL.ts
index 755d112f0..e12a2c6e5 100644
--- a/src/createDonationURL.ts
+++ b/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 ),
diff --git a/src/createFallbackDonationURL.ts b/src/createFallbackDonationURL.ts
new file mode 100644
index 000000000..aadf91bcb
--- /dev/null
+++ b/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 );
+}
diff --git a/test/features/BannerContent.ts b/test/features/BannerContent.ts
index 612ec6ef9..8dfe97dd5 100644
--- a/test/features/BannerContent.ts
+++ b/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
 };
diff --git a/test/unit/createDonationURL.spec.ts b/test/unit/createDonationURL.spec.ts
new file mode 100644
index 000000000..08bbb23f9
--- /dev/null
+++ b/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' );
+	} );
+} );
diff --git a/test/unit/createFallbackDonationLink.spec.ts b/test/unit/createFallbackDonationURL.spec.ts
similarity index 56%
rename from test/unit/createFallbackDonationLink.spec.ts
rename to test/unit/createFallbackDonationURL.spec.ts
index b90b6f68f..3691dc732 100644
--- a/test/unit/createFallbackDonationLink.spec.ts
+++ b/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 );