Merge branch 'main' into 16_create-theme-for-scenes

Author: matthew-carroll

lib/src/goldens/golden_comparisons.dart

@@ -11,8 +11,8 @@ GoldenCollectionMismatches compareGoldenCollections(
   // For every golden, look for missing and mismatching screenshots.
   for (final id in goldens.ids) {
     if (!screenshots.hasId(id)) {
-      mismatches[id] = MissingGoldenMismatch(
-        golden: goldens[id],
+      mismatches[id] = MissingCandidateMismatch(
+        golden: goldens[id]!,
       );
       continue;
     }
@@ -44,7 +44,7 @@ GoldenCollectionMismatches compareGoldenCollections(
   for (final id in screenshots.ids) {
     if (!goldens.hasId(id)) {
       mismatches[id] = MissingGoldenMismatch(
-        screenshot: screenshots[id],
+        screenshot: screenshots[id]!,
       );
     }
   }
@@ -132,22 +132,29 @@ class WrongSizeGoldenMismatch extends GoldenMismatch {
   Map<String, dynamic> get describeStructured => throw UnimplementedError();
 }
 
-/// Attempted to compare a screenshot to a golden, but either the screenshot was never
-/// generated, or the screenshot was generated for a golden that doesn't exist.
+/// Attempted to compare a candidate to a golden, but the candidate was generated for a golden that doesn't exist.
 class MissingGoldenMismatch extends GoldenMismatch {
   MissingGoldenMismatch({
-    super.golden,
     super.screenshot,
   });
 
-  GoldenSceneScreenshot get _existingGolden => golden ?? screenshot!;
+  @override
+  String get describe =>
+      "A new screenshot was generated with ID '${screenshot!.id}', but there's no existing golden image with that ID.";
 
   @override
-  String get describe => "A new screenshot was generated with ID '${_existingGolden.id}', $_missingMessage";
+  Map<String, dynamic> get describeStructured => throw UnimplementedError();
+}
 
-  String get _missingMessage => golden != null //
-      ? "but no screenshot was generated with that ID."
-      : "but there's no existing golden image with that ID.";
+/// Attempted to compare a candidate to a golden, but the candidate was never generated.
+class MissingCandidateMismatch extends GoldenMismatch {
+  MissingCandidateMismatch({
+    super.golden,
+  });
+
+  @override
+  String get describe =>
+      "A new screenshot was generated with ID '${golden!.id}', but no screenshot was generated with that ID.";
 
   @override
   Map<String, dynamic> get describeStructured => throw UnimplementedError();

lib/src/goldens/golden_scenes.dart

@@ -54,12 +54,12 @@ ${const JsonEncoder.withIndent("  ").convert(sceneJson)}'''), stackTrace);
 
   // Extract the golden images from the scene image.
   print("Extracting goldens from file...");
-  return _extractCollectionFromScene(sceneMetadata, sceneImage);
+  return _extractCollectionFromSceneBitmap(sceneMetadata, sceneImage);
 }
 
 /// Extracts a [ScreenshotCollection] from a golden scene within the current widget tree.
 ///
-/// A golden scene is an image that contains some number of individual golden files within it.
+/// A golden scene is an image that contains some number of individual golden screenshots within it.
 /// In other words, a single image contains (possibly) many different golden images.
 ///
 /// This function screenshots the part of the Flutter UI within the given [sceneBounds], extracts
@@ -98,10 +98,10 @@ Future<ScreenshotCollection> extractGoldenCollectionFromSceneWidgetTree(
 
   // Extract the golden images from the scene image.
   print("Extracting candidates from widget tree...");
-  return _extractCollectionFromScene(sceneMetadata, treeImage);
+  return _extractCollectionFromSceneBitmap(sceneMetadata, treeImage);
 }
 
-ScreenshotCollection _extractCollectionFromScene(GoldenSceneMetadata sceneMetadata, Image sceneImage) {
+ScreenshotCollection _extractCollectionFromSceneBitmap(GoldenSceneMetadata sceneMetadata, Image sceneImage) {
   // Cut each golden image out of the scene.
   print("Extracting screenshots from a scene (maybe goldens, maybe candidates):");
   final goldenImages = <String, GoldenSceneScreenshot>{};
@@ -153,6 +153,7 @@ RenderRepaintBoundary? _findNearestRepaintBoundary(Finder bounds) {
 class GoldenSceneMetadata {
   static GoldenSceneMetadata fromJson(Map<String, dynamic> json) {
     return GoldenSceneMetadata(
+      description: json["description"] ?? "",
       images: [
         for (final imageJson in (json["images"] as List<dynamic>)) //
           GoldenImageMetadata.fromJson(imageJson),
@@ -161,13 +162,16 @@ class GoldenSceneMetadata {
   }
 
   const GoldenSceneMetadata({
+    required this.description,
     required this.images,
   });
 
+  final String description;
   final List<GoldenImageMetadata> images;
 
   Map<String, dynamic> toJson() {
     return {
+      "description": description,
       "images": images.map((image) => image.toJson()).toList(growable: false),
     };
   }

lib/src/scenes/failure_scene.dart

@@ -0,0 +1,83 @@
+import 'dart:math';
+import 'dart:ui' as ui;
+
+import 'package:flutter_test_goldens/src/goldens/pixel_comparisons.dart';
+import 'package:image/image.dart';
+
+import 'package:flutter_test_goldens/flutter_test_goldens.dart';
+
+/// Given a [mismatch] between a golden and a screenshot, generates an image
+/// that shows the golden, the screenshot, and the differences between them.
+Future<Image> paintGoldenMismatchImages(GoldenMismatch mismatch) async {
+  final goldenWidth = mismatch.golden!.image.width;
+  final goldenHeight = mismatch.golden!.image.height;
+
+  final screenshotWidth = mismatch.screenshot!.image.width;
+  final screenshotHeight = mismatch.screenshot!.image.height;
+
+  final maxWidth = max(goldenWidth, screenshotWidth);
+  final maxHeight = max(goldenHeight, screenshotHeight);
+
+  final failureImage = Image(
+    width: maxWidth * 2,
+    height: maxHeight * 2,
+  );
+
+  // Copy golden to top left corner.
+  for (int x = 0; x < goldenWidth; x += 1) {
+    for (int y = 0; y < goldenHeight; y += 1) {
+      final goldenPixel = mismatch.golden!.image.getPixel(x, y);
+      failureImage.setPixel(x, y, goldenPixel);
+    }
+  }
+
+  // Copy screenshot to top right corner.
+  for (int x = 0; x < screenshotWidth; x += 1) {
+    for (int y = 0; y < screenshotHeight; y += 1) {
+      final screenshotPixel = mismatch.screenshot!.image.getPixel(x, y);
+      failureImage.setPixel(maxWidth + x, y, screenshotPixel);
+    }
+  }
+
+  // Paint mismatch images.
+  final absoluteDiffColor = ColorUint32.rgb(255, 255, 0);
+  for (int x = 0; x < maxWidth; x += 1) {
+    for (int y = 0; y < maxHeight; y += 1) {
+      if (x >= goldenWidth || x >= screenshotWidth || y >= goldenHeight || y >= screenshotHeight) {
+        // This pixel doesn't exist in the golden, or it doesn't exist in the
+        // screenshot. Therefore, we have nothing to compare. Treat this pixel
+        // as a max severity difference.
+
+        // Paint this pixel in the absolute diff image.
+        failureImage.setPixel(x, maxHeight + y, absoluteDiffColor);
+
+        // Paint this pixel in the relative severity diff image.
+        failureImage.setPixel(maxWidth + x, maxHeight + y, absoluteDiffColor);
+
+        continue;
+      }
+
+      // Check if the screenshot matches the golden.
+      final goldenPixel = mismatch.golden!.image.getPixel(x, y);
+      final screenshotPixel = mismatch.screenshot!.image.getPixel(x, y);
+      final pixelsMatch = goldenPixel == screenshotPixel;
+      if (pixelsMatch) {
+        continue;
+      }
+
+      // Paint this pixel in the absolute diff image.
+      failureImage.setPixel(x, maxHeight + y, absoluteDiffColor);
+
+      // Paint this pixel in the relative severity diff image.
+      final mismatchPercent = calculateColorMismatchPercent(goldenPixel, screenshotPixel);
+      final yellowAmount = ui.lerpDouble(0.2, 1.0, mismatchPercent)!;
+      failureImage.setPixel(
+        goldenWidth + x,
+        goldenHeight + y,
+        ColorUint32.rgb((255 * yellowAmount).round(), (255 * yellowAmount).round(), 0),
+      );
+    }
+  }
+
+  return failureImage;
+}

lib/src/scenes/film_strip.dart

@@ -360,6 +360,7 @@ class FilmStrip {
     // Lookup and return metadata for the position and size of each golden image
     // within the gallery.
     return GoldenSceneMetadata(
+      description: description,
       images: [
         for (final golden in renderablePhotos.keys)
           GoldenImageMetadata(