[FTD #6] add golden test file comparer for threshold

Author: TobiasRump

.github/workflows/basic_dart_check.yml

@@ -17,7 +17,7 @@ jobs:
         uses: subosito/flutter-action@v2
         with:
           channel: stable
-          flutter-version: 3.27.1
+          flutter-version: 3.22.3
       - run: flutter --version
 
       - name: ⚙️ Install dependencies

dart_test.yaml

@@ -31,7 +31,7 @@ class BubbleBoxPainter extends CustomPainter {
     this.tip = const BubbleBoxTip(),
   });
   final Text text;
-  final EdgeInsets padding; //! TODO: fix text not being centered
+  final EdgeInsets padding;
   final Color bubbleColor;
   final double borderRadius;
   final BubbleBoxTip tip;
@@ -59,7 +59,7 @@ class BubbleBoxPainter extends CustomPainter {
     final bubbleHeight = availableHeight + padding.vertical;
 
     // Calculate tail size
-    //! TODO: extract
+    // !TODO: extract
     final tailHeight = bubbleHeight * 0.25;
 
     final path = Path()

lib/src/modules/box/painter/bubble_box_painter.dart

@@ -44,12 +44,8 @@ class RoundedBoxPainter extends CustomPainter {
       ..strokeWidth = strokeWidth
       ..style = PaintingStyle.stroke;
 
-    // TODO(everyone): Extract and make generic
     final textSpan = TextSpan(text: text.data, style: text.style);
-    final textPainter = TextPainter(
-      text: textSpan,
-      textDirection: TextDirection.ltr,
-    )..layout();
+    final textPainter = TextPainter(text: textSpan, textDirection: TextDirection.ltr)..layout();
 
     final textWidth = textPainter.width;
     final boxWidth = min(textWidth, size.width);
@@ -61,27 +57,9 @@ class RoundedBoxPainter extends CustomPainter {
     final nLines = heightFactor.ceil();
     boxHeight = nLines * textHeight;
 
-    double getOffsetDx() {
-      var dx = size.width / 2;
-      if (padding.left != padding.right) {
-        final diff = (padding.left - padding.right).abs() / 2;
-        dx = padding.left < padding.right ? dx + diff : dx - diff;
-      }
-      return dx;
-    }
-
-    double getOffsetDy() {
-      var dy = size.height / 2;
-      if (padding.top != padding.bottom) {
-        final diff = (padding.top - padding.bottom).abs() / 2;
-        dy = padding.top < padding.bottom ? dy + diff : dy - diff;
-      }
-      return dy;
-    }
-
     final centerOffset = Offset(
-      getOffsetDx(),
-      getOffsetDy(),
+      _getOffsetDx(size),
+      _getOffsetDy(size),
     );
 
     final rrect = RRect.fromRectAndRadius(
@@ -92,6 +70,24 @@ class RoundedBoxPainter extends CustomPainter {
     canvas.drawRRect(rrect, paint);
   }
 
+  double _getOffsetDx(Size size) {
+    var dx = size.width / 2;
+    if (padding.left != padding.right) {
+      final diff = (padding.left - padding.right).abs() / 2;
+      dx = padding.left < padding.right ? dx + diff : dx - diff;
+    }
+    return dx;
+  }
+
+  double _getOffsetDy(Size size) {
+    var dy = size.height / 2;
+    if (padding.top != padding.bottom) {
+      final diff = (padding.top - padding.bottom).abs() / 2;
+      dy = padding.top < padding.bottom ? dy + diff : dy - diff;
+    }
+    return dy;
+  }
+
   @override
   bool shouldRepaint(covariant CustomPainter oldDelegate) {
     return false;

lib/src/modules/box/painter/rounded_box_painter.dart

@@ -0,0 +1,25 @@
+import 'dart:async';
+
+import 'package:flutter_test/flutter_test.dart';
+
+import 'utils/local_file_comparer.dart';
+
+const _kGoldenTestsThreshold = 0.5 / 100;
+
+Future<void> testExecutable(FutureOr<void> Function() testMain) async {
+  if (goldenFileComparator is LocalFileComparator) {
+    final testUrl = (goldenFileComparator as LocalFileComparator).basedir;
+
+    goldenFileComparator = LocalFileComparatorWithThreshold(
+      Uri.parse('$testUrl/test.dart'),
+      _kGoldenTestsThreshold,
+    );
+  } else {
+    throw Exception(
+      'Expected `goldenFileComparator` to be of type `LocalFileComparator`, '
+      'but it is of type `${goldenFileComparator.runtimeType}`',
+    );
+  }
+
+  await testMain();
+}

test/flutter_test_config.dart

@@ -34,7 +34,6 @@ void main() {
             matchesGoldenFile('text_decorator/box/bubble.default.png'),
           );
         },
-        tags: ['golden'],
       );
       testWidgets(
         'BoxStyle.rounded renders',
@@ -57,7 +56,6 @@ void main() {
             matchesGoldenFile('text_decorator/box/rounded.default.png'),
           );
         },
-        tags: ['golden'],
       );
 
       testWidgets(
@@ -80,7 +78,6 @@ void main() {
             matchesGoldenFile('text_decorator/box/curled.default.png'),
           );
         },
-        tags: ['golden'],
       );
     });
   });

test/src/widgets/text_decorator/box/bubble.default.png

@@ -0,0 +1,36 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+/// Works just like [LocalFileComparator] but includes a [threshold] that, when
+/// exceeded, marks the test as a failure.
+class LocalFileComparatorWithThreshold extends LocalFileComparator {
+  LocalFileComparatorWithThreshold(super.testFile, this.threshold) : assert(threshold >= 0 && threshold <= 1, 'Threshold must be between 0 and 1');
+
+  /// Threshold above which tests will be marked as failing.
+  /// Ranges from 0 to 1, both inclusive.
+  final double threshold;
+
+  @override
+  Future<bool> compare(Uint8List imageBytes, Uri golden) async {
+    final result = await GoldenFileComparator.compareLists(
+      imageBytes,
+      await getGoldenBytes(golden),
+    );
+
+    if (!result.passed && result.diffPercent <= threshold) {
+      debugPrint(
+        'A difference of ${result.diffPercent * 100}% was found, but it is '
+        'acceptable since it is not greater than the threshold of '
+        '${threshold * 100}%',
+      );
+
+      return true;
+    }
+
+    if (!result.passed) {
+      final error = await generateFailureOutput(result, golden, basedir);
+      throw FlutterError(error);
+    }
+    return result.passed;
+  }
+}