feat(pinball): added the footer widget with tests (#253)

* feat(pinball): added the footer widget with tests

* chore: addressed review feedback

* chore: refactor helper methods and mock classes for footer links test

lib/footer/footer.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:pinball/l10n/l10n.dart';
+import 'package:pinball/theme/theme.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+/// {@template footer}
+/// Footer widget with links to the main tech stack.
+/// {@endtemplate}
+class Footer extends StatelessWidget {
+  /// {@macro footer}
+  const Footer({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(50, 0, 50, 32),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: const [
+          _MadeWithFlutterAndFirebase(),
+          _GoogleIO(),
+        ],
+      ),
+    );
+  }
+}
+
+class _GoogleIO extends StatelessWidget {
+  const _GoogleIO({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final theme = Theme.of(context);
+    return Text(
+      l10n.footerGoogleIOText,
+      style: theme.textTheme.bodyText1!.copyWith(color: AppColors.white),
+    );
+  }
+}
+
+class _MadeWithFlutterAndFirebase extends StatelessWidget {
+  const _MadeWithFlutterAndFirebase({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final theme = Theme.of(context);
+    return RichText(
+      textAlign: TextAlign.center,
+      text: TextSpan(
+        text: l10n.footerMadeWithText,
+        style: theme.textTheme.bodyText1!.copyWith(color: AppColors.white),
+        children: <TextSpan>[
+          TextSpan(
+            text: l10n.footerFlutterLinkText,
+            recognizer: TapGestureRecognizer()
+              ..onTap = () => openLink('https://flutter.dev'),
+            style: const TextStyle(
+              decoration: TextDecoration.underline,
+            ),
+          ),
+          const TextSpan(text: ' & '),
+          TextSpan(
+            text: l10n.footerFirebaseLinkText,
+            recognizer: TapGestureRecognizer()
+              ..onTap = () => openLink('https://firebase.google.com'),
+            style: const TextStyle(
+              decoration: TextDecoration.underline,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/l10n/arb/app_en.arb

@@ -107,5 +107,21 @@
   "rounds": "Ball Ct:",
   "@rounds": {
     "description": "Text displayed on the scoreboard widget to indicate rounds left"
+  },
+  "footerMadeWithText": "Made with ",
+  "@footerMadeWithText": {
+    "description": "Text shown on the footer which mentions technologies used to build the app."
+  },
+  "footerFlutterLinkText": "Flutter",
+  "@footerFlutterLinkText": {
+    "description": "Text on the link shown on the footer which navigates to the Flutter page"
+  },
+  "footerFirebaseLinkText": "Firebase",
+  "@footerFirebaseLinkText": {
+    "description": "Text on the link shown on the footer which navigates to the Firebase page"
+  },
+  "footerGoogleIOText": "Google I/O",
+  "@footerGoogleIOText": {
+    "description": "Text shown on the footer which mentions Google I/O"
   }
 }

packages/pinball_ui/lib/pinball_ui.dart

@@ -1,3 +1,7 @@
 library pinball_ui;
 
+export 'package:url_launcher/url_launcher.dart';
+export 'package:url_launcher_platform_interface/url_launcher_platform_interface.dart';
+
 export 'src/dialog/dialog.dart';
+export 'src/external_links/external_links.dart';

packages/pinball_ui/lib/src/external_links/external_links.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/foundation.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+/// Opens the given [url] in a new tab of the host browser
+Future<void> openLink(String url, {VoidCallback? onError}) async {
+  final uri = Uri.parse(url);
+  if (await canLaunchUrl(uri)) {
+    await launchUrl(uri);
+  } else if (onError != null) {
+    onError();
+  }
+}

packages/pinball_ui/pubspec.yaml

@@ -9,17 +9,18 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  url_launcher: ^6.1.0
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
+  mocktail: ^0.3.0
   test: ^1.19.2
   very_good_analysis: ^2.4.0
 
 flutter:
   uses-material-design: true
   generate: true
-
   assets:
     - assets/images/dialog/
 

packages/pinball_ui/test/src/external_links/external_links_test.dart

@@ -0,0 +1,81 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+import 'package:plugin_platform_interface/plugin_platform_interface.dart';
+
+class MockUrlLauncher extends Mock
+    with MockPlatformInterfaceMixin
+    implements UrlLauncherPlatform {}
+
+void main() {
+  late UrlLauncherPlatform urlLauncher;
+
+  setUp(() {
+    urlLauncher = MockUrlLauncher();
+    UrlLauncherPlatform.instance = urlLauncher;
+  });
+
+  group('openLink', () {
+    test('launches the link', () async {
+      when(
+        () => urlLauncher.canLaunch(any()),
+      ).thenAnswer(
+        (_) async => true,
+      );
+      when(
+        () => urlLauncher.launch(
+          any(),
+          useSafariVC: any(named: 'useSafariVC'),
+          useWebView: any(named: 'useWebView'),
+          enableJavaScript: any(named: 'enableJavaScript'),
+          enableDomStorage: any(named: 'enableDomStorage'),
+          universalLinksOnly: any(named: 'universalLinksOnly'),
+          headers: any(named: 'headers'),
+        ),
+      ).thenAnswer(
+        (_) async => true,
+      );
+      await openLink('uri');
+      verify(
+        () => urlLauncher.launch(
+          any(),
+          useSafariVC: any(named: 'useSafariVC'),
+          useWebView: any(named: 'useWebView'),
+          enableJavaScript: any(named: 'enableJavaScript'),
+          enableDomStorage: any(named: 'enableDomStorage'),
+          universalLinksOnly: any(named: 'universalLinksOnly'),
+          headers: any(named: 'headers'),
+        ),
+      );
+    });
+
+    test('executes the onError callback when it cannot launch', () async {
+      var wasCalled = false;
+      when(
+        () => urlLauncher.canLaunch(any()),
+      ).thenAnswer(
+        (_) async => false,
+      );
+      when(
+        () => urlLauncher.launch(
+          any(),
+          useSafariVC: any(named: 'useSafariVC'),
+          useWebView: any(named: 'useWebView'),
+          enableJavaScript: any(named: 'enableJavaScript'),
+          enableDomStorage: any(named: 'enableDomStorage'),
+          universalLinksOnly: any(named: 'universalLinksOnly'),
+          headers: any(named: 'headers'),
+        ),
+      ).thenAnswer(
+        (_) async => true,
+      );
+      await openLink(
+        'url',
+        onError: () {
+          wasCalled = true;
+        },
+      );
+      await expectLater(wasCalled, isTrue);
+    });
+  });
+}

pubspec.lock

@@ -700,6 +700,62 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0"
+  url_launcher:
+    dependency: transitive
+    description:
+      name: url_launcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.1.0"
+  url_launcher_android:
+    dependency: transitive
+    description:
+      name: url_launcher_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.16"
+  url_launcher_ios:
+    dependency: transitive
+    description:
+      name: url_launcher_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.0.15"
+  url_launcher_linux:
+    dependency: transitive
+    description:
+      name: url_launcher_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.0"
+  url_launcher_macos:
+    dependency: transitive
+    description:
+      name: url_launcher_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.0"
+  url_launcher_platform_interface:
+    dependency: transitive
+    description:
+      name: url_launcher_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.5"
+  url_launcher_web:
+    dependency: transitive
+    description:
+      name: url_launcher_web
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.9"
+  url_launcher_windows:
+    dependency: transitive
+    description:
+      name: url_launcher_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.0"
   uuid:
     dependency: transitive
     description:
@@ -772,4 +828,4 @@ packages:
     version: "3.1.0"
 sdks:
   dart: ">=2.16.0 <3.0.0"
-  flutter: ">=2.8.0"
+  flutter: ">=2.10.0"

test/footer/footer_test.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
+import 'package:pinball/footer/footer.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+
+import '../helpers/helpers.dart';
+
+void main() {
+  group('Footer', () {
+    late UrlLauncherPlatform urlLauncher;
+
+    setUp(() async {
+      urlLauncher = MockUrlLauncher();
+      UrlLauncherPlatform.instance = urlLauncher;
+    });
+    testWidgets('renders "Made with..." and "Google I/O"', (tester) async {
+      await tester.pumpApp(const Footer());
+      expect(find.text('Google I/O'), findsOneWidget);
+      expect(
+        find.byWidgetPredicate(
+          (widget) =>
+              widget is RichText &&
+              widget.text.toPlainText() == 'Made with Flutter & Firebase',
+        ),
+        findsOneWidget,
+      );
+    });
+
+    testWidgets(
+      'tapping on "Flutter" opens the flutter website',
+      (tester) async {
+        when(() => urlLauncher.canLaunch(any())).thenAnswer((_) async => true);
+        when(
+          () => urlLauncher.launch(
+            any(),
+            useSafariVC: any(named: 'useSafariVC'),
+            useWebView: any(named: 'useWebView'),
+            enableJavaScript: any(named: 'enableJavaScript'),
+            enableDomStorage: any(named: 'enableDomStorage'),
+            universalLinksOnly: any(named: 'universalLinksOnly'),
+            headers: any(named: 'headers'),
+          ),
+        ).thenAnswer((_) async => true);
+        await tester.pumpApp(const Footer());
+        final flutterTextFinder = find.byWidgetPredicate(
+          (widget) => widget is RichText && tapTextSpan(widget, 'Flutter'),
+        );
+        await tester.tap(flutterTextFinder);
+        await tester.pumpAndSettle();
+        verify(
+          () => urlLauncher.launch(
+            'https://flutter.dev',
+            useSafariVC: any(named: 'useSafariVC'),
+            useWebView: any(named: 'useWebView'),
+            enableJavaScript: any(named: 'enableJavaScript'),
+            enableDomStorage: any(named: 'enableDomStorage'),
+            universalLinksOnly: any(named: 'universalLinksOnly'),
+            headers: any(named: 'headers'),
+          ),
+        );
+      },
+    );
+
+    testWidgets(
+      'tapping on "Firebase" opens the firebase website',
+      (tester) async {
+        when(() => urlLauncher.canLaunch(any())).thenAnswer((_) async => true);
+        when(
+          () => urlLauncher.launch(
+            any(),
+            useSafariVC: any(named: 'useSafariVC'),
+            useWebView: any(named: 'useWebView'),
+            enableJavaScript: any(named: 'enableJavaScript'),
+            enableDomStorage: any(named: 'enableDomStorage'),
+            universalLinksOnly: any(named: 'universalLinksOnly'),
+            headers: any(named: 'headers'),
+          ),
+        ).thenAnswer((_) async => true);
+        await tester.pumpApp(const Footer());
+        final firebaseTextFinder = find.byWidgetPredicate(
+          (widget) => widget is RichText && tapTextSpan(widget, 'Firebase'),
+        );
+        await tester.tap(firebaseTextFinder);
+        await tester.pumpAndSettle();
+        verify(
+          () => urlLauncher.launch(
+            'https://firebase.google.com',
+            useSafariVC: any(named: 'useSafariVC'),
+            useWebView: any(named: 'useWebView'),
+            enableJavaScript: any(named: 'enableJavaScript'),
+            enableDomStorage: any(named: 'enableDomStorage'),
+            universalLinksOnly: any(named: 'universalLinksOnly'),
+            headers: any(named: 'headers'),
+          ),
+        );
+      },
+    );
+  });
+}

test/helpers/helpers.dart

@@ -12,3 +12,4 @@ export 'mocks.dart';
 export 'navigator.dart';
 export 'pump_app.dart';
 export 'test_games.dart';
+export 'text_span.dart';

test/helpers/mocks.dart

@@ -11,6 +11,8 @@ import 'package:pinball/select_character/select_character.dart';
 import 'package:pinball/start_game/start_game.dart';
 import 'package:pinball_audio/pinball_audio.dart';
 import 'package:pinball_components/pinball_components.dart';
+import 'package:pinball_ui/pinball_ui.dart';
+import 'package:plugin_platform_interface/plugin_platform_interface.dart';
 
 class MockPinballGame extends Mock implements PinballGame {}
 
@@ -94,3 +96,7 @@ class MockMultiplier extends Mock implements Multiplier {}
 class MockMultipliersGroup extends Mock implements Multipliers {}
 
 class MockMultiplierCubit extends Mock implements MultiplierCubit {}
+
+class MockUrlLauncher extends Mock
+    with MockPlatformInterfaceMixin
+    implements UrlLauncherPlatform {}

test/helpers/text_span.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/widgets.dart';
+
+bool tapTextSpan(RichText richText, String text) {
+  final isTapped = !richText.text.visitChildren(
+    (visitor) => _findTextAndTap(visitor, text),
+  );
+  return isTapped;
+}
+
+bool _findTextAndTap(InlineSpan visitor, String text) {
+  if (visitor is TextSpan && visitor.text == text) {
+    (visitor.recognizer as TapGestureRecognizer?)?.onTap?.call();
+    return false;
+  }
+  return true;
+}