test: initials input display

lib/game/components/backbox/backbox.dart

@@ -18,7 +18,7 @@ class Backbox extends PositionComponent with HasGameRef, ZIndex {
             _BackboxSpriteComponent(),
           ],
         ) {
-    zIndex = ZIndexes.backboardMarquee;
+    zIndex = ZIndexes.backbox;
   }
 
   /// Puts [InitialsInputDisplay] on the [Backbox].
@@ -27,7 +27,7 @@ class Backbox extends PositionComponent with HasGameRef, ZIndex {
     required String characterIconPath,
     InitialsOnSubmit? onSubmit,
   }) async {
-    removeAll(children);
+    removeAll(children.where((child) => child is! _BackboxSpriteComponent));
     await add(
       InitialsInputDisplay(
         score: score,

lib/game/components/game_flow_controller.dart

@@ -29,7 +29,7 @@ class GameFlowController extends ComponentController<PinballGame>
   void initialsInput() {
     // TODO(erickzanardo): implement score submission and "navigate" to the
     // next page
-    component.firstChild<Backbox>()?.initialsInput(
+    component.descendants().whereType<Backbox>().first.initialsInput(
           score: state?.score ?? 0,
           characterIconPath: component.characterTheme.leaderboardIcon.keyName,
         );

packages/pinball_components/lib/src/components/z_indexes.dart

@@ -111,7 +111,7 @@ abstract class ZIndexes {
 
   static const debugInfo = _above + score;
 
-  // Backboard
+  // Backbox
 
-  static const backboardMarquee = _below + outerBoundary;
+  static const backbox = _below + outerBoundary;
 }

test/game/components/backbox/backbox_test.dart

@@ -3,24 +3,55 @@
 import 'package:flame/components.dart';
 import 'package:flame_test/flame_test.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:mocktail/mocktail.dart';
 import 'package:pinball/game/components/backbox/displays/initials_input_display.dart';
 import 'package:pinball/game/game.dart';
+import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball_components/pinball_components.dart';
 import 'package:pinball_theme/pinball_theme.dart' as theme;
 
 import '../../../helpers/helpers.dart';
 
+class _MockAppLocalizations extends Mock implements AppLocalizations {
+  @override
+  String get score => '';
+
+  @override
+  String get name => '';
+
+  @override
+  String get enterInitials => '';
+
+  @override
+  String get arrows => '';
+
+  @override
+  String get andPress => '';
+
+  @override
+  String get enterReturn => '';
+
+  @override
+  String get toSubmit => '';
+}
+
 void main() {
-  group('Backbox', () {
+  TestWidgetsFlutterBinding.ensureInitialized();
   final characterIconPath = theme.Assets.images.dash.leaderboardIcon.keyName;
   final assets = [
     characterIconPath,
     Assets.images.backbox.marquee.keyName,
     Assets.images.backbox.displayDivider.keyName,
   ];
-    final tester = FlameTester(() => EmptyPinballTestGame(assets: assets));
+  final flameTester = FlameTester(
+    () => EmptyPinballTestGame(
+      assets: assets,
+      l10n: _MockAppLocalizations(),
+    ),
+  );
 
-    tester.test(
+  group('Backbox', () {
+    flameTester.test(
       'loads correctly',
       (game) async {
         final backbox = Backbox();
@@ -31,7 +62,7 @@ void main() {
     );
 
     group('renders correctly', () {
-      tester.testGameWidget(
+      flameTester.testGameWidget(
         'empty',
         setUp: (game, tester) async {
           await game.images.loadAll(assets);
@@ -50,7 +81,7 @@ void main() {
       );
     });
 
-    tester.test(
+    flameTester.test(
       'initialsInput adds InitialsInputDisplay',
       (game) async {
         final backbox = Backbox();

test/game/components/backbox/displays/initials_input_display_test.dart

@@ -1,6 +1,9 @@
 // ignore_for_file: cascade_invocations
 
+import 'package:flame/components.dart';
 import 'package:flame_test/flame_test.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:pinball/game/components/backbox/displays/initials_input_display.dart';
@@ -34,22 +37,24 @@ class _MockAppLocalizations extends Mock implements AppLocalizations {
 }
 
 void main() {
-  group('InitialsInputDisplay', () {
+  TestWidgetsFlutterBinding.ensureInitialized();
   final characterIconPath = theme.Assets.images.dash.leaderboardIcon.keyName;
   final assets = [
     characterIconPath,
     Assets.images.backbox.displayDivider.keyName,
   ];
-    final tester = FlameTester(
+  final flameTester = FlameTester(
-      () => EmptyPinballTestGame(
+    () => EmptyKeyboardPinballTestGame(
       assets: assets,
       l10n: _MockAppLocalizations(),
     ),
   );
 
-    tester.test(
+  group('InitialsInputDisplay', () {
+    flameTester.test(
       'loads correctly',
       (game) async {
+        await game.images.loadAll(assets);
         final initialsInputDisplay = InitialsInputDisplay(
           score: 0,
           characterIconPath: characterIconPath,
@@ -60,5 +65,121 @@ void main() {
         expect(game.children, contains(initialsInputDisplay));
       },
     );
+
+    flameTester.testGameWidget(
+      'can change the initials',
+      setUp: (game, tester) async {
+        final initialsInputDisplay = InitialsInputDisplay(
+          score: 1000,
+          characterIconPath: characterIconPath,
+          onSubmit: (_) {},
+        );
+        await game.ensureAdd(initialsInputDisplay);
+
+        // Focus is already on the first letter
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+        await tester.pump();
+
+        // Move to the next an press up again
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowRight);
+        await tester.pump();
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+        await tester.pump();
+
+        // One more time
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowRight);
+        await tester.pump();
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+        await tester.pump();
+
+        // Back to the previous and increase one more
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowLeft);
+        await tester.pump();
+        await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+        await tester.pump();
+      },
+      verify: (game, tester) async {
+        final initialsInputDisplay =
+            game.descendants().whereType<InitialsInputDisplay>().single;
+
+        expect(initialsInputDisplay.initials, equals('BCB'));
+      },
+    );
+
+    String? submitedInitials;
+    flameTester.testGameWidget(
+      'submits the initials',
+      setUp: (game, tester) async {
+        final initialsInputDisplay = InitialsInputDisplay(
+          score: 1000,
+          characterIconPath: characterIconPath,
+          onSubmit: (value) {
+            submitedInitials = value;
+          },
+        );
+        await game.ensureAdd(initialsInputDisplay);
+
+        await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+        await tester.pump();
+      },
+      verify: (game, tester) async {
+        expect(submitedInitials, equals('AAA'));
+      },
+    );
+
+    group('BackboardLetterPrompt', () {
+      flameTester.testGameWidget(
+        'cycles the char up and down when it has focus',
+        setUp: (game, tester) async {
+          await game.ensureAdd(
+            InitialsLetterPrompt(hasFocus: true, position: Vector2.zero()),
+          );
+          await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+          await tester.pump();
+          await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+          await tester.pump();
+          await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+          await tester.pump();
+          await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown);
+          await tester.pump();
+        },
+        verify: (game, tester) async {
+          final prompt = game.firstChild<InitialsLetterPrompt>();
+          expect(prompt?.char, equals('C'));
+        },
+      );
+
+      flameTester.testGameWidget(
+        "does nothing when it doesn't have focus",
+        setUp: (game, tester) async {
+          await game.ensureAdd(
+            InitialsLetterPrompt(position: Vector2.zero()),
+          );
+          await tester.sendKeyEvent(LogicalKeyboardKey.arrowUp);
+          await tester.pump();
+        },
+        verify: (game, tester) async {
+          final prompt = game.firstChild<InitialsLetterPrompt>();
+          expect(prompt?.char, equals('A'));
+        },
+      );
+
+      flameTester.testGameWidget(
+        'blinks the prompt when it has the focus',
+        setUp: (game, tester) async {
+          await game.ensureAdd(
+            InitialsLetterPrompt(position: Vector2.zero(), hasFocus: true),
+          );
+        },
+        verify: (game, tester) async {
+          final underscore =
+              game.descendants().whereType<ShapeComponent>().first;
+          expect(underscore.paint.color, Colors.white);
+
+          game.update(2);
+          expect(underscore.paint.color, Colors.transparent);
+        },
+      );
+    });
   });
 }

test/game/components/game_flow_controller_test.dart

@@ -65,7 +65,8 @@ void main() {
 
         when(() => overlays.remove(any())).thenAnswer((_) => true);
 
-        when(game.firstChild<Backbox>).thenReturn(backbox);
+        when(() => game.descendants().whereType<Backbox>())
+            .thenReturn([backbox]);
         when(game.firstChild<CameraController>).thenReturn(cameraController);
         when(() => game.overlays).thenReturn(overlays);
         when(() => game.characterTheme).thenReturn(DashTheme());

test/helpers/test_games.dart

@@ -2,6 +2,7 @@
 
 import 'dart:async';
 
+import 'package:flame/input.dart';
 import 'package:flame_bloc/flame_bloc.dart';
 import 'package:flame_forge2d/flame_forge2d.dart';
 import 'package:mocktail/mocktail.dart';
@@ -87,3 +88,25 @@ class EmptyPinballTestGame extends PinballTestGame {
     }
   }
 }
+
+class EmptyKeyboardPinballTestGame extends PinballTestGame
+    with HasKeyboardHandlerComponents {
+  EmptyKeyboardPinballTestGame({
+    List<String>? assets,
+    PinballAudio? audio,
+    CharacterTheme? theme,
+    AppLocalizations? l10n,
+  }) : super(
+          assets: assets,
+          audio: audio,
+          theme: theme,
+          l10n: l10n ?? _MockAppLocalizations(),
+        );
+
+  @override
+  Future<void> onLoad() async {
+    if (_assets != null) {
+      await images.loadAll(_assets!);
+    }
+  }
+}