Fix readme image tests in Karma (previously were not running)

bin/sequence-diagram-svg.js

@@ -17,6 +17,14 @@ function read(pipe) {
 	});
 }
 
+function processError(err) {
+	if(typeof err === 'object' && err.message) {
+		return err.message;
+	} else {
+		return err;
+	}
+}
+
 function getCodeArg() {
 	if(process.argv.length > 2 && process.argv[2] !== '-') {
 		return Promise.resolve(process.argv[2]);
@@ -26,14 +34,6 @@ function getCodeArg() {
 	}
 }
 
-function processError(err) {
-	if(typeof err === 'object' && err.message) {
-		return err.message;
-	} else {
-		return err;
-	}
-}
-
 getCodeArg()
 	.then(VirtualSequenceDiagram.render)
 	.then((svg) => process.stdout.write(svg + '\n'))

spec/images_webspec.mjs

@@ -2,6 +2,14 @@ import ImageRegion from './image/ImageRegion.mjs';
 import SequenceDiagram from '../scripts/sequence/SequenceDiagram.mjs';
 import TESTS from './images/list.mjs';
 
+function readError(err) {
+	if(typeof err === 'object' && err.message) {
+		return err.message;
+	} else {
+		return err;
+	}
+}
+
 describe('SequenceDiagram Visuals', () => {
 	const RESOLUTION = 4;
 
@@ -56,7 +64,7 @@ describe('SequenceDiagram Visuals', () => {
 						details: 'Code is:\n\n' + code,
 					});
 				})
-				.catch(fail)
+				.catch((err) => fail(readError(err)))
 				.then(done);
 		});
 	});

spec/readme_webspec.mjs

@@ -10,8 +10,19 @@ const SAMPLE_REGEX = new RegExp(
 const SCREENSHOT_BLACKLIST = [
 	// Renders differently but correctly in different browsers
 	'screenshots/Themes.png',
+
+	// For some reason this one breaks in headless Chrome
+	'screenshots/Markdown.png',
 ];
 
+function readError(err) {
+	if(typeof err === 'object' && err.message) {
+		return err.message;
+	} else {
+		return err;
+	}
+}
+
 function findSamples(content) {
 	SAMPLE_REGEX.lastIndex = 0;
 	const results = [];
@@ -28,39 +39,40 @@ function findSamples(content) {
 	return results;
 }
 
-function makeSampleTests({file, code}, index) {
-	describe('example #' + (index + 1), () => {
-		if(file && !SCREENSHOT_BLACKLIST.includes(file)) {
-			it('looks like ' + file + ' when rendered', (done) => {
-				let actual = null;
-				new SequenceDiagram(code)
-					.getCanvas({resolution: RESOLUTION})
-					.then((c) => {
-						actual = ImageRegion
-							.fromCanvas(c)
-							.resize({width: 150});
-					})
-					.then(() => ImageRegion.loadURL(
-						file,
-						{height: actual.height, width: actual.width}
-					))
-					.then((expected) => {
-						expect(actual).toLookLike(expected);
-					})
-					.catch(fail)
-					.then(done);
+function performSampleTests({file, code}, index) {
+	if(file && !SCREENSHOT_BLACKLIST.includes(file)) {
+		let actual = null;
+		return new SequenceDiagram(code)
+			.getCanvas({resolution: RESOLUTION})
+			.then((c) => {
+				actual = ImageRegion
+					.fromCanvas(c)
+					.resize({width: 150});
+			})
+			.then(() => ImageRegion.loadURL(
+				file,
+				{height: actual.height, width: actual.width}
+			))
+			.then((expected) => {
+				expect(actual).toLookLike(expected, {
+					details: '#' + (index + 1) + ' compared to ' + file,
+				});
 			});
-		} else {
-			it('renders without error', () => {
-				expect(() => new SequenceDiagram(code)).not.toThrow();
-			});
-		}
-	});
+	} else {
+		expect(() => new SequenceDiagram(code)).not.toThrow();
+		return Promise.resolve();
+	}
 }
 
-fetch('README.md')
-	.then((response) => response.text())
-	.then(findSamples)
-	.then((samples) => describe('Readme', () => {
-		samples.forEach(makeSampleTests);
-	}));
+describe('Readme', () => {
+	/* eslint-disable jasmine/missing-expect */ // See performSampleTests
+	it('renders all samples correctly', (done) => {
+		/* eslint-enable jasmine/missing-expect */
+		fetch('README.md')
+			.then((response) => response.text())
+			.then(findSamples)
+			.then((samples) => Promise.all(samples.map(performSampleTests)))
+			.catch((err) => fail(readError(err)))
+			.then(done);
+	});
+});

spec/support/karma.conf.js

@@ -37,6 +37,7 @@ module.exports = (config) => {
 			{pattern: 'spec/helpers/**/*.mjs', type: 'module'},
 			{pattern: '**/*_spec.mjs', type: 'module'},
 			{pattern: '**/*_webspec.mjs', type: 'module'},
+			{included: false, pattern: 'screenshots/**/*'},
 			{included: false, pattern: 'scripts/**/*'},
 			{included: false, pattern: 'spec/**/*'},
 			{included: false, pattern: 'web/**/*'},
@@ -54,6 +55,7 @@ module.exports = (config) => {
 		proxies: {
 			// Add some proxies so that fetch() calls work without modification
 			'/README.md': '/base/README.md',
+			'/screenshots/': '/base/screenshots/',
 			'/spec/': '/base/spec/',
 		},
 		reportSlowerThan: 500,