Add script to check tracking configuration

- in the past it happens that we forgot to adjust all the test numbers/start dates for banners in the campaigns_info.toml file
  This commit adds a node command that runs a script to check the configuration file for consistency on those 2 issues.

- use chalk to highlight error messages

- cleans up some codestyle in related files
- update documentation

docs/ThemeUsageOverview.md

@@ -1,7 +1,7 @@
 # How to get an overview which banner uses which theme
 
-You can use the shell script `show_theme_usage.sh` used to get an overview which banner uses which theme(s). It filters the `UseOfFunds` and `Fijitiv` themes, because the `UseOfFunds` is used in all banners and the `Fijitiv` theme is only for the desktop fallback banner that we display when the regular banner does not fit the screen.
+You can use the shell script `tools/show_theme_usage.sh` used to get an overview which banner uses which theme(s). It filters the `UseOfFunds` and `Fijitiv` themes, because the `UseOfFunds` is used in all banners and the `Fijitiv` theme is only for the desktop fallback banner that we display when the regular banner does not fit the screen.
 
-The output shows the banner name and the theme(s) used in the banner. The count at the end of the line shows how many files from the theme are included in the banner. For Banners that have two style files, the count will be inaccurate (i.e twice as high), because most themes files are included in both styles.
+The output shows the banner name and the theme(s) used in the banner. The count at the end of the line shows how many files from the theme are included in the banner. For Banners that have two style files, the count will be inaccurate (i.e. twice as high), because most themes files are included in both styles.
 
 Ideally, each banner should use only one theme. If a banner uses more than one theme, please have a look and adjust the banner. The Desktop banners up until 04 accidentally use some variables from the `Treedip` theme even when their main theme is `Svingle`.

package.json

@@ -30,7 +30,8 @@
     "lint:css": "stylelint '**/*.{scss,vue}'",
     "lint:test-imports": "node test/find_mismatched_imports.mjs",
     "ci": "npm-run-all lint test",
-    "check-content-version": "ts-node check-content-version.ts",
+    "check-content-version": "ts-node tools/check-content-version.ts",
+    "check-tracking-conf": "ts-node tools/check-tracking-number-and-date.mjs",
     "coverage": "vitest run --coverage",
     "update-content": "npm update fundraising-frontend-content"
   },

test/find_mismatched_imports.mjs

@@ -1,7 +1,7 @@
 import fg from 'fast-glob';
 import path from 'path';
-import * as readline from "node:readline";
-import * as fs from "node:fs";
+import * as readline from 'node:readline';
+import * as fs from 'node:fs';
 
 const mismatchedImports = [];
 
@@ -31,7 +31,7 @@ for await ( const entry of stream ) {
 	let lineNumber = 1;
 	for await ( const line of lineReader ) {
 		const match = line.match( importRegex );
-		if( match && !match[1].includes( expectedPath ) ) {
+		if ( match && !match[ 1 ].includes( expectedPath ) ) {
 			mismatchedImports.push( { entry, line, lineNumber } );
 		}
 		lineNumber++;

check-content-version.ts → tools/check-content-version.ts

@@ -1,6 +1,6 @@
 import { exec } from 'child_process';
 
-// This is a script that checks if the fundraising-frontend-content package has a never version
+// This is a script that checks if the fundraising-frontend-content package has a newer version
 // than the one currently installed. This is useful to check if the content has been updated
 // in the remote repository and the package-lock.json file needs to be updated.
 // Run this before builing the banners

tools/check-tracking-number-and-date.mjs

@@ -0,0 +1,41 @@
+import { parse as parseTOML } from 'toml';
+import { readFileSync } from 'fs';
+import { campaignInfoToCampaignConfig } from '../webpack/convert_info_to_type.js';
+import chalk from 'chalk';
+
+const rawConfigForAllCampaigns = parseTOML( readFileSync( 'campaign_info.toml', 'utf-8' ) );
+const configObject = campaignInfoToCampaignConfig( rawConfigForAllCampaigns );
+
+for ( const channelConfig of Object.values( configObject ) ) {
+
+	// check test number
+	let testNumber = '';
+	const testNumberMatchResult = channelConfig.campaign.match( /_\d{2}/ );
+	if ( testNumberMatchResult === null ) {
+		console.warn( `${ chalk.red( 'CAMPAIGN CONFIGURATION ERROR:' ) } Cannot parse test number ( "_dd" format) for ${ channelConfig.campaign } ` );
+		process.exit( 1 );
+	}
+	testNumber = testNumberMatchResult[ 0 ];
+	const testNumberSearchString = testNumber.slice( 1 ) + '-';
+	if ( !channelConfig.tracking.includes( testNumberSearchString ) ||
+		!channelConfig.banners.ctrl.tracking.includes( testNumberSearchString ) ||
+		!channelConfig.banners.var.tracking.includes( testNumberSearchString ) ) {
+		console.warn( `${ chalk.red( 'CAMPAIGN CONFIGURATION ERROR:' ) } Faulty tracking config (test number) for ${ channelConfig.campaign } ` );
+		process.exit( 1 );
+	}
+
+	// check start date
+	let startDate = '';
+	const startDateMatchResult = channelConfig.tracking.match( /-\d{6}$/ );
+	if ( startDateMatchResult === null ) {
+		console.warn( `${ chalk.red( 'CAMPAIGN CONFIGURATION ERROR:' ) } Cannot parse 6-digit start date for ${ channelConfig.campaign } ` );
+		process.exit( 1 );
+	}
+	startDate = startDateMatchResult[ 0 ];
+	if ( !channelConfig.tracking.includes( startDate ) ||
+		!channelConfig.banners.ctrl.tracking.includes( startDate ) ||
+		!channelConfig.banners.var.tracking.includes( startDate ) ) {
+		console.warn( `${ chalk.red( 'CAMPAIGN CONFIGURATION ERROR:' ) } Faulty tracking config (start date) for ${ channelConfig.campaign } ` );
+		process.exit( 1 );
+	}
+}

vitest.campaign.config.mjs

@@ -1,5 +1,5 @@
 import { configDefaults, defineConfig, mergeConfig } from 'vitest/config';
-import chalk from 'chalk'
+import chalk from 'chalk';
 import { getFilterForInactiveCampaigns } from './test/filterInactiveCampaigns.mjs';
 import defaultConfig from './vitest.config.mjs';
 
@@ -10,14 +10,14 @@ const { inactiveCampaignGlobs, campaignsWithoutTests } = getFilterForInactiveCam
 
 const outputMissingCampaigns = ( missingCampaigns ) => {
 	missingCampaigns.forEach( c => console.log( `  ${c}` ) );
-}
+};
 
 if ( campaignsWithoutTests.length > 0 ) {
 	if ( CAMPAIGN_WITHOUT_TEST_HANDLING === 'warn' ) {
-		console.warn( `${ chalk.yellow( 'Warning:' ) } Campaigns without tests:`);
+		console.warn( `${ chalk.yellow( 'Warning:' ) } Campaigns without tests:` );
 		outputMissingCampaigns( campaignsWithoutTests );
 	} else if ( CAMPAIGN_WITHOUT_TEST_HANDLING === 'error' ) {
-		console.warn( `${ chalk.yellow( 'Error:' ) } Campaigns without tests:`);
+		console.warn( `${ chalk.yellow( 'Error:' ) } Campaigns without tests:` );
 		outputMissingCampaigns( campaignsWithoutTests );
 		process.exit( 1 );
 	}