Social Logos: Add post-build tests (#38224)

* Add tests

* Add changelog

* Remove unneeded test

* Adjusted expected-vs-actual test to check both ways

projects/js-packages/social-logos/changelog/add-social-logos-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added post-build tests.

projects/js-packages/social-logos/composer.json

@@ -9,7 +9,7 @@
 	},
 	"scripts": {
 		"build-development": "./tools/build",
-		"build-production": "./tools/build --prod"
+		"build-production": "./tools/build && ./tests/tests.js"
 	},
 	"repositories": [
 		{

projects/js-packages/social-logos/tests/tests.js

@@ -0,0 +1,130 @@
+#!/usr/bin/env node
+/* eslint-disable no-console, no-process-exit */
+
+// Exit codes:
+//   0: All is well
+//   2: The production build isn't clean
+//   3: SVG optimization checks failed
+//   4: Missing or extra build files detected
+
+const { spawnSync } = require( 'child_process' );
+const fs = require( 'fs' );
+const glob = require( 'glob' ); // Add this line to import the 'glob' module
+
+const helperFilesDir = 'tests/helper_files/';
+const svgSrcDir = 'src/svg/';
+const buildDir = 'build/';
+const svgBuildDir = buildDir + 'svg-clean/';
+
+// Start in the right folder.
+const rootDir = __dirname + '/..';
+process.chdir( rootDir );
+
+/**
+ * Verifies the SVG optimization is working.
+ */
+function verifySVGOptimization() {
+	console.log( 'Verifying SVG optimization...' );
+	// Using the last SVG file, as the optimization tends to go in alphabetical order.
+	const testSVG = helperFilesDir + 'youtube.svg';
+	const builtSVG = svgBuildDir + 'youtube.svg';
+
+	// Compare testSVG and buildSVG
+	const testSVGContent = fs.readFileSync( testSVG, 'utf8' );
+	const builtSVGContent = fs.readFileSync( builtSVG, 'utf8' );
+	if ( testSVGContent !== builtSVGContent ) {
+		console.error( 'Optimization appears to have failed! These files do not match:' );
+		console.error( `  - ${ testSVG }` );
+		console.error( `  - ${ builtSVG }` );
+		process.exit( 3 );
+	}
+
+	console.log( 'SVG optimization appears to have worked.' );
+}
+
+/**
+ * Verify the other build files are present.
+ *
+ * Basically this checks all files other than the svg-clean dir, which
+ * is checked separately in `checkSVGBuilds()`.
+ */
+function verifyOtherBuildFiles() {
+	console.log( 'Verifying other build files...' );
+
+	// Generate a list of expected SVG files.
+	const svgFiles = glob
+		.sync( '**', {
+			cwd: svgSrcDir,
+			nodir: true,
+		} )
+		.map( file => 'svg-clean/' + file );
+
+	// Here lie all expected built files (without the build folder prefix).
+	const expectedBuildFiles = new Set(
+		[
+			'css/example.css',
+			'font/codepoints.json',
+			'font/social-logos.css',
+			'font/social-logos.woff2',
+			'react/stories/index.stories.d.ts',
+			'react/stories/index.stories.js',
+			'react/example.d.ts',
+			'react/example.js',
+			'react/index.d.ts',
+			'react/index.js',
+			'react/social-logo-data.d.ts',
+			'react/social-logo-data.js',
+			'react/social-logo.d.ts',
+			'react/social-logo.js',
+			'svg-sprite/example.html',
+			'svg-sprite/social-logos.svg',
+		].concat( svgFiles )
+	);
+
+	const actualBuildFiles = new Set(
+		glob.sync( '**', {
+			cwd: buildDir,
+			nodir: true,
+		} )
+	);
+
+	const problemFiles = actualBuildFiles.symmetricDifference( expectedBuildFiles );
+
+	problemFiles.forEach( file => {
+		if ( ! actualBuildFiles.has( file ) ) {
+			console.error( 'Missing build file: ' + buildDir + file );
+		} else if ( ! expectedBuildFiles.has( file ) ) {
+			console.error( 'Extra build file: ' + buildDir + file );
+		}
+	} );
+
+	if ( problemFiles.size ) {
+		process.exit( 4 );
+	}
+}
+
+/**
+ * Verifies the source dir is clean (no uncommitted changed files).
+ *
+ * When adding a new icon, it will generate new `src/font/codepoints.json` and
+ * `src/react/social-logo-data.tsx` files. This is expected during a dev build,
+ * but those changes should be committed and no changes should occur when
+ * building for production.
+ */
+function verifySourceIsClean() {
+	console.log( 'Checking for changed source files...' );
+	const gitDiff = spawnSync( 'git', [ 'diff', '--exit-code', '--stat', './src' ] );
+	if ( gitDiff.status ) {
+		console.error( gitDiff.stdout.toString().replace( /\n$/, '' ) );
+		console.error( 'Production builds should not change the ./src folder!' );
+		console.error( 'Did you forget to commit changes?' );
+		process.exit( 2 );
+	}
+	console.log( 'Production build is clean.' );
+}
+
+console.log( 'Running post-build tests...' );
+verifySVGOptimization();
+verifyOtherBuildFiles();
+verifySourceIsClean();
+console.log( 'Everything checks out! Carry on.' );

projects/js-packages/social-logos/tools/build

@@ -28,13 +28,3 @@ else
 	echo 'Build failure!'
 	exit 1
 fi
-
-if [[ $1 == '--prod' ]]; then
-	echo 'Checking for changed source files...'
-	if ! git diff --exit-code --stat './src'; then
-		echo 'Production builds should not change the ./src folder!'
-		echo 'Did you forget to commit changes to ./src/react/social-logo-data.jsx?'
-		exit 2
-	fi
-	echo 'Build is clean.'
-fi