Feature/kids 839 implement allowance success screen

.vscode/launch.json

@@ -84,6 +84,15 @@
         "--dart-define",
         "STRIPE_MERCHANT_ID=merchant.net.givtapp.ios",
       ]
+    },
+    {
+      "name": "Golden",
+      "request": "launch",
+      "type": "dart",
+      "codeLens": {
+        "for": ["run-test", "run-test-file"]
+      },
+      "args": ["--update-goldens"]
     }
   ]
 }

dart_test.yaml

@@ -0,0 +1,2 @@
+tags:
+  golden: {}

lib/features/children/overview/pages/edit_allowance_success_page.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:givt_app/features/children/overview/pages/models/edit_allowance_success_uimodel.dart';
+import 'package:givt_app/l10n/l10n.dart';
+import 'package:givt_app/shared/pages/common_success_page.dart';
+
+class EditAllowanceSuccessPage extends StatelessWidget {
+  const EditAllowanceSuccessPage({required this.uiModel, super.key});
+
+  final EditAllowanceSuccessUIModel uiModel;
+
+  @override
+  Widget build(BuildContext context) {
+    return CommonSuccessPage(
+      buttonText: context.l10n.ready,
+      title: context.l10n.genericSuccessTitle,
+      text: context.l10n.monthlyAllowanceEditSuccessDescription(
+        uiModel.amountWithCurrencySymbol ?? '',
+      ),
+    );
+  }
+}

lib/features/children/overview/pages/models/edit_allowance_success_uimodel.dart

@@ -0,0 +1,5 @@
+class EditAllowanceSuccessUIModel {
+  const EditAllowanceSuccessUIModel({this.amountWithCurrencySymbol});
+
+  final String? amountWithCurrencySymbol;
+}

lib/features/registration/widgets/registered_check_animation.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:givt_app/shared/widgets/common_icons.dart';
 
 class RegisteredCheckAnimation extends StatefulWidget {
   @override
@@ -30,15 +31,11 @@ class _RegisteredCheckAnimationState extends State<RegisteredCheckAnimation> {
 
               return Stack(
                 children: [
-                  SvgPicture.asset(
-                    'assets/images/registered_check_background.svg',
-                    height: size.height * 0.3,
-                  ),
+                  registeredCheckBackground(height: size.height + 0.3),
                   Positioned(
                     left: leftPosition,
                     top: topPosition,
-                    child: SvgPicture.asset(
-                      'assets/images/registered_check.svg',
+                    child: registeredCheck(
                       width: imageSize,
                       clipBehavior: Clip.none,
                     ),

lib/shared/pages/common_success_page.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:givt_app/shared/widgets/common_icons.dart';
+import 'package:givt_app/shared/widgets/custom_green_elevated_button.dart';
+
+class CommonSuccessPage extends StatelessWidget {
+  const CommonSuccessPage({
+    required this.buttonText,
+    this.title,
+    this.text,
+    this.onClickButton,
+    super.key,
+  });
+
+  final String buttonText;
+  final String? title;
+  final String? text;
+  final void Function()? onClickButton;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (title != null)
+              Flexible(
+                child: Text(
+                  title!,
+                  style: Theme.of(context)
+                      .textTheme
+                      .titleLarge
+                      ?.copyWith(fontWeight: FontWeight.w700),
+                  textAlign: TextAlign.center,
+                ),
+              ),
+            if (text != null)
+              Flexible(
+                child: Text(
+                  text!,
+                  style: Theme.of(context).textTheme.bodyMedium,
+                  textAlign: TextAlign.center,
+                ),
+              ),
+          ],
+        ),
+        Stack(
+          alignment: Alignment.center,
+          children: [
+            registeredCheckBackground(),
+            registeredCheck(),
+          ],
+        ),
+        CustomGreenElevatedButton(
+          title: buttonText,
+          onPressed: onClickButton ?? () => Navigator.of(context).pop(),
+        ),
+      ],
+    );
+  }
+}

lib/shared/widgets/common_icons.dart

@@ -1,7 +1,23 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 Widget calendarClockIcon({double? width, double? height}) => Image.asset(
       'assets/images/calendar_clock.webp',
       width: width,
       height: height,
     );
+
+Widget registeredCheck({double? width, double? height, Clip? clipBehavior}) =>
+    SvgPicture.asset(
+      'assets/images/registered_check.svg',
+      width: width,
+      height: height,
+      clipBehavior: clipBehavior ?? Clip.hardEdge,
+    );
+
+Widget registeredCheckBackground({double? width, double? height}) =>
+    SvgPicture.asset(
+      'assets/images/registered_check_background.svg',
+      width: width,
+      height: height,
+    );

pubspec.lock

@@ -652,6 +652,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "12.1.3"
+  golden_toolkit:
+    dependency: "direct dev"
+    description:
+      name: golden_toolkit
+      sha256: "8f74adab33154fe7b731395782797021f97d2edc52f7bfb85ff4f1b5c4a215f0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.15.0"
   google_fonts:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -72,6 +72,7 @@ dev_dependencies:
   bloc_test: ^9.1.1
   flutter_test:
     sdk: flutter
+  golden_toolkit: ^0.15.0
   melos: ^3.4.0
   mocktail: ^1.0.2
   very_good_analysis: ^5.0.0+1

test/flutter_test_config.dart

@@ -0,0 +1,8 @@
+import 'dart:async';
+
+// https://api.flutter.dev/flutter/flutter_test/flutter_test-library.html
+
+Future<void> testExecutable(FutureOr<void> Function() testMain) async {
+  // in the future we will setup the injection of test dependencies here
+  await testMain();
+}

test/golden/flutter_test_config.dart

@@ -0,0 +1,22 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+// https://api.flutter.dev/flutter/flutter_test/flutter_test-library.html
+
+Future<void> testExecutable(FutureOr<void> Function() testMain) async {
+  return GoldenToolkit.runWithConfiguration(
+    () async {
+      await loadAppFonts();
+      await testMain();
+    },
+    config: GoldenToolkitConfiguration(
+      enableRealShadows: true,
+      // if a CI runs on a different machine this will cause the test to fail
+      // due to pixel differences, therefore we disable the golden assertion
+      // when the platform is not MacOS
+      skipGoldenAssertion: () => !Platform.isMacOS,
+    ),
+  );
+}

test/golden/golden_utils.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:givt_app/l10n/l10n.dart';
+import 'package:givt_app/utils/app_theme.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+import 'screen_sizes.dart';
+
+const smallLoremIpsum =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+const mediumLoremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing '
+    'elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+const largeLoremIpsum =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod '
+    'tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim '
+    'veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea '
+    'commodo consequat. Duis aute irure dolor in reprehenderit in voluptate '
+    'velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint '
+    'occaecat cupidatat non proident, sunt in culpa qui officia deserunt '
+    'mollit anim id est laborum.';
+
+WidgetWrapper goldenWrapper() => materialAppWrapper(
+      theme: AppTheme.lightTheme,
+      localizations: AppLocalizations.localizationsDelegates,
+    );
+
+Future<void> prepareWidgetForGolden(
+  WidgetTester tester,
+  Widget widget, {
+  Size? size,
+}) async {
+  await tester.pumpWidgetBuilder(
+    widget,
+    wrapper: goldenWrapper(),
+    surfaceSize: size ?? SurfaceSizes.oneScenarioPortrait,
+  );
+}
+
+Future<void> checkIfScreenMatchesGolden(
+  String goldenFileName,
+  WidgetTester tester,
+  Widget widget, {
+  Size? size,
+}) async {
+  await prepareWidgetForGolden(tester, widget, size: size);
+  await screenMatchesGolden(tester, goldenFileName);
+}

test/golden/screen_sizes.dart

@@ -0,0 +1,6 @@
+import 'package:flutter/painting.dart';
+
+class SurfaceSizes {
+  static const oneScenarioPortrait = Size(500, 600);
+  static const twoScenariosPortrait = Size(500, 1200);
+}

test/golden/shared/pages/success_pages_golden_test.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:givt_app/features/children/overview/pages/edit_allowance_success_page.dart';
+import 'package:givt_app/features/children/overview/pages/models/edit_allowance_success_uimodel.dart';
+import 'package:givt_app/shared/pages/common_success_page.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+import '../../golden_utils.dart';
+import '../../screen_sizes.dart';
+
+// https://pub.dev/packages/golden_toolkit
+
+void main() {
+  testGoldens('Success Pages render correctly', (tester) async {
+    final builder = GoldenBuilder.column(
+      bgColor: Colors.white,
+      //this wrap is not always needed but i want my columns to expand to a
+      // certain height so we can check if the spaceBetween property works
+      wrap: (widget) => SizedBox(
+        height: 500,
+        child: widget,
+      ),
+    )
+      ..addScenario(
+        'Common Success Page',
+        const CommonSuccessPage(
+          buttonText: mediumLoremIpsum,
+          title: smallLoremIpsum,
+          text: mediumLoremIpsum,
+        ),
+      )
+      ..addScenario(
+        'Edit Allowance Success Page',
+        const EditAllowanceSuccessPage(
+          uiModel:
+              EditAllowanceSuccessUIModel(amountWithCurrencySymbol: r'$15'),
+        ),
+      );
+    await checkIfScreenMatchesGolden(
+      'success_pages_golden',
+      tester,
+      builder.build(),
+      size: SurfaceSizes.twoScenariosPortrait,
+    );
+  });
+}