mirror of https://github.com/flutter/pinball.git
feat: leaderboard screen (#51)
* feat: leader board page * feat: strings for leader board ui * feat: navigate to leaderboard from gameover dialog * feat: set character theme for leaderboard * test: test leaderboard page * chore: removed unused var from tests * chore: leaderboard misspelling, doc and minor fixes * chore: doc * chore: api doc * refactor: pass theme to leaderboard widgets * Update lib/leaderboard/view/leaderboard_page.dart Co-authored-by: Alejandro Santiago <dev@alestiago.com> * chore: removed ios files * refactor: leaderboard screen now uses leaderboard_repository models * test: added tests for extensions * chore: added todo to move model * feat: added navigator helper method * feat: add Flame compatibility to test navigator helper * chore: removed unused import * test: modify test to avoid time out * chore: test method name changed * refactor: changes from pr * refactor: removed themecubit * feat: provide leaderbloc * feat: added leaderbloc to screen * chore: removed unused imports * chore: strings names * fix: fixed test with model changed * refactor: removed multirepositoryprovider * test: remove unnecessary tests * chore: unused variable * chore: unused imports Co-authored-by: Alejandro Santiago <dev@alestiago.com>pull/100/head
Rui Miguel Alonso
4 years ago
committed by
GitHub
parent
ae9e6453ce
commit
1f0a0c2f04
@ -1,2 +1,3 @@
|
||||
export 'bloc/leaderboard_bloc.dart';
|
||||
export 'models/leader_board_entry.dart';
|
||||
export 'view/leaderboard_page.dart';
|
||||
|
||||
@ -0,0 +1,306 @@
|
||||
// ignore_for_file: public_member_api_docs
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:leaderboard_repository/leaderboard_repository.dart';
|
||||
import 'package:pinball/l10n/l10n.dart';
|
||||
import 'package:pinball/leaderboard/leaderboard.dart';
|
||||
import 'package:pinball/theme/theme.dart';
|
||||
import 'package:pinball_theme/pinball_theme.dart';
|
||||
|
||||
class LeaderboardPage extends StatelessWidget {
|
||||
const LeaderboardPage({Key? key, required this.theme}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
|
||||
static Route route({required CharacterTheme theme}) {
|
||||
return MaterialPageRoute<void>(
|
||||
builder: (_) => LeaderboardPage(theme: theme),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BlocProvider(
|
||||
create: (context) => LeaderboardBloc(
|
||||
context.read<LeaderboardRepository>(),
|
||||
)..add(const Top10Fetched()),
|
||||
child: LeaderboardView(theme: theme),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class LeaderboardView extends StatelessWidget {
|
||||
const LeaderboardView({Key? key, required this.theme}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = context.l10n;
|
||||
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const SizedBox(height: 80),
|
||||
Text(
|
||||
l10n.leaderboard,
|
||||
style: Theme.of(context).textTheme.headline3,
|
||||
),
|
||||
const SizedBox(height: 80),
|
||||
BlocBuilder<LeaderboardBloc, LeaderboardState>(
|
||||
builder: (context, state) {
|
||||
switch (state.status) {
|
||||
case LeaderboardStatus.loading:
|
||||
return _LeaderboardLoading(theme: theme);
|
||||
case LeaderboardStatus.success:
|
||||
return _LeaderboardRanking(
|
||||
ranking: state.leaderboard,
|
||||
theme: theme,
|
||||
);
|
||||
case LeaderboardStatus.error:
|
||||
return _LeaderboardError(theme: theme);
|
||||
}
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).push<void>(
|
||||
CharacterSelectionPage.route(),
|
||||
),
|
||||
child: Text(l10n.retry),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardLoading extends StatelessWidget {
|
||||
const _LeaderboardLoading({Key? key, required this.theme}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardError extends StatelessWidget {
|
||||
const _LeaderboardError({Key? key, required this.theme}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Text(
|
||||
'There was en error loading data!',
|
||||
style:
|
||||
Theme.of(context).textTheme.headline6?.copyWith(color: Colors.red),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardRanking extends StatelessWidget {
|
||||
const _LeaderboardRanking({
|
||||
Key? key,
|
||||
required this.ranking,
|
||||
required this.theme,
|
||||
}) : super(key: key);
|
||||
|
||||
final List<LeaderboardEntry> ranking;
|
||||
final CharacterTheme theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_LeaderboardHeaders(theme: theme),
|
||||
_LeaderboardList(
|
||||
ranking: ranking,
|
||||
theme: theme,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardHeaders extends StatelessWidget {
|
||||
const _LeaderboardHeaders({Key? key, required this.theme}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = context.l10n;
|
||||
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_LeaderboardHeaderItem(title: l10n.rank, theme: theme),
|
||||
_LeaderboardHeaderItem(title: l10n.character, theme: theme),
|
||||
_LeaderboardHeaderItem(title: l10n.username, theme: theme),
|
||||
_LeaderboardHeaderItem(title: l10n.score, theme: theme),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardHeaderItem extends StatelessWidget {
|
||||
const _LeaderboardHeaderItem({
|
||||
Key? key,
|
||||
required this.title,
|
||||
required this.theme,
|
||||
}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
final String title;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: theme.ballColor,
|
||||
),
|
||||
child: Text(
|
||||
title,
|
||||
style: Theme.of(context).textTheme.headline5,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardList extends StatelessWidget {
|
||||
const _LeaderboardList({
|
||||
Key? key,
|
||||
required this.ranking,
|
||||
required this.theme,
|
||||
}) : super(key: key);
|
||||
|
||||
final List<LeaderboardEntry> ranking;
|
||||
final CharacterTheme theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView.builder(
|
||||
shrinkWrap: true,
|
||||
itemBuilder: (_, index) => _LeaderBoardCompetitor(
|
||||
entry: ranking[index],
|
||||
theme: theme,
|
||||
),
|
||||
itemCount: ranking.length,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderBoardCompetitor extends StatelessWidget {
|
||||
const _LeaderBoardCompetitor({
|
||||
Key? key,
|
||||
required this.entry,
|
||||
required this.theme,
|
||||
}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
|
||||
final LeaderboardEntry entry;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_LeaderboardCompetitorField(
|
||||
text: entry.rank,
|
||||
theme: theme,
|
||||
),
|
||||
_LeaderboardCompetitorCharacter(
|
||||
characterAsset: entry.character,
|
||||
theme: theme,
|
||||
),
|
||||
_LeaderboardCompetitorField(
|
||||
text: entry.playerInitials,
|
||||
theme: theme,
|
||||
),
|
||||
_LeaderboardCompetitorField(
|
||||
text: entry.score.toString(),
|
||||
theme: theme,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardCompetitorField extends StatelessWidget {
|
||||
const _LeaderboardCompetitorField({
|
||||
Key? key,
|
||||
required this.text,
|
||||
required this.theme,
|
||||
}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
final String text;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: theme.ballColor,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: Text(text),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _LeaderboardCompetitorCharacter extends StatelessWidget {
|
||||
const _LeaderboardCompetitorCharacter({
|
||||
Key? key,
|
||||
required this.characterAsset,
|
||||
required this.theme,
|
||||
}) : super(key: key);
|
||||
|
||||
final CharacterTheme theme;
|
||||
final AssetGenImage characterAsset;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: theme.ballColor,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: SizedBox(
|
||||
height: 30,
|
||||
child: characterAsset.image(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
// ignore_for_file: prefer_const_constructors
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:mockingjay/mockingjay.dart';
|
||||
import 'package:pinball/game/game.dart';
|
||||
import 'package:pinball/l10n/l10n.dart';
|
||||
import 'package:pinball_theme/pinball_theme.dart';
|
||||
|
||||
import '../../../helpers/helpers.dart';
|
||||
|
||||
void main() {
|
||||
group('GameOverDialog', () {
|
||||
testWidgets('renders correctly', (tester) async {
|
||||
final l10n = await AppLocalizations.delegate.load(Locale('en'));
|
||||
await tester.pumpApp(
|
||||
const GameOverDialog(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.text(l10n.gameOver), findsOneWidget);
|
||||
expect(find.text(l10n.leaderboard), findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets('tapping on leaderboard button navigates to LeaderBoardPage',
|
||||
(tester) async {
|
||||
final l10n = await AppLocalizations.delegate.load(Locale('en'));
|
||||
final navigator = MockNavigator();
|
||||
when(() => navigator.push<void>(any())).thenAnswer((_) async {});
|
||||
|
||||
await tester.pumpApp(
|
||||
const GameOverDialog(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
navigator: navigator,
|
||||
);
|
||||
|
||||
await tester.tap(find.widgetWithText(TextButton, l10n.leaderboard));
|
||||
|
||||
verify(() => navigator.push<void>(any())).called(1);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'helpers.dart';
|
||||
|
||||
Future<void> expectNavigatesToRoute<Type>(
|
||||
WidgetTester tester,
|
||||
Route route, {
|
||||
bool hasFlameGameInside = false,
|
||||
}) async {
|
||||
// ignore: avoid_dynamic_calls
|
||||
await tester.pumpApp(
|
||||
Scaffold(
|
||||
body: Builder(
|
||||
builder: (context) {
|
||||
return ElevatedButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).push<void>(route);
|
||||
},
|
||||
child: const Text('Tap me'),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
await tester.tap(find.text('Tap me'));
|
||||
if (hasFlameGameInside) {
|
||||
// We can't use pumpAndSettle here because the page renders a Flame game
|
||||
// which is an infinity animation, so it will timeout
|
||||
await tester.pump(); // Runs the button action
|
||||
await tester.pump(); // Runs the navigation
|
||||
} else {
|
||||
await tester.pumpAndSettle();
|
||||
}
|
||||
|
||||
expect(find.byType(Type), findsOneWidget);
|
||||
}
|
||||
@ -0,0 +1,150 @@
|
||||
// ignore_for_file: prefer_const_constructors
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:leaderboard_repository/leaderboard_repository.dart';
|
||||
import 'package:mockingjay/mockingjay.dart';
|
||||
import 'package:pinball/l10n/l10n.dart';
|
||||
import 'package:pinball/leaderboard/leaderboard.dart';
|
||||
import 'package:pinball_theme/pinball_theme.dart';
|
||||
|
||||
import '../../helpers/helpers.dart';
|
||||
|
||||
void main() {
|
||||
group('LeaderboardPage', () {
|
||||
testWidgets('renders LeaderboardView', (tester) async {
|
||||
await tester.pumpApp(
|
||||
LeaderboardPage(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.byType(LeaderboardView), findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets('route returns a valid navigation route', (tester) async {
|
||||
await expectNavigatesToRoute<LeaderboardPage>(
|
||||
tester,
|
||||
LeaderboardPage.route(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
group('LeaderboardView', () {
|
||||
late LeaderboardBloc leaderboardBloc;
|
||||
|
||||
setUp(() {
|
||||
leaderboardBloc = MockLeaderboardBloc();
|
||||
});
|
||||
|
||||
testWidgets('renders correctly', (tester) async {
|
||||
final l10n = await AppLocalizations.delegate.load(Locale('en'));
|
||||
when(() => leaderboardBloc.state).thenReturn(LeaderboardState.initial());
|
||||
|
||||
await tester.pumpApp(
|
||||
BlocProvider.value(
|
||||
value: leaderboardBloc,
|
||||
child: LeaderboardView(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.text(l10n.leaderboard), findsOneWidget);
|
||||
expect(find.text(l10n.retry), findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets('renders loading view when bloc emits [loading]',
|
||||
(tester) async {
|
||||
when(() => leaderboardBloc.state).thenReturn(LeaderboardState.initial());
|
||||
|
||||
await tester.pumpApp(
|
||||
BlocProvider.value(
|
||||
value: leaderboardBloc,
|
||||
child: LeaderboardView(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.byType(CircularProgressIndicator), findsOneWidget);
|
||||
expect(find.text('There was en error loading data!'), findsNothing);
|
||||
expect(find.byType(ListView), findsNothing);
|
||||
});
|
||||
|
||||
testWidgets('renders error view when bloc emits [error]', (tester) async {
|
||||
when(() => leaderboardBloc.state).thenReturn(
|
||||
LeaderboardState.initial().copyWith(status: LeaderboardStatus.error),
|
||||
);
|
||||
|
||||
await tester.pumpApp(
|
||||
BlocProvider.value(
|
||||
value: leaderboardBloc,
|
||||
child: LeaderboardView(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.byType(CircularProgressIndicator), findsNothing);
|
||||
expect(find.text('There was en error loading data!'), findsOneWidget);
|
||||
expect(find.byType(ListView), findsNothing);
|
||||
});
|
||||
|
||||
testWidgets('renders success view when bloc emits [success]',
|
||||
(tester) async {
|
||||
final l10n = await AppLocalizations.delegate.load(Locale('en'));
|
||||
when(() => leaderboardBloc.state).thenReturn(
|
||||
LeaderboardState(
|
||||
status: LeaderboardStatus.success,
|
||||
ranking: LeaderboardRanking(ranking: 0, outOf: 0),
|
||||
leaderboard: [
|
||||
LeaderboardEntry(
|
||||
rank: '1',
|
||||
playerInitials: 'ABC',
|
||||
score: 10000,
|
||||
character: DashTheme().characterAsset,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
await tester.pumpApp(
|
||||
BlocProvider.value(
|
||||
value: leaderboardBloc,
|
||||
child: LeaderboardView(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
expect(find.byType(CircularProgressIndicator), findsNothing);
|
||||
expect(find.text('There was en error loading data!'), findsNothing);
|
||||
expect(find.text(l10n.rank), findsOneWidget);
|
||||
expect(find.text(l10n.character), findsOneWidget);
|
||||
expect(find.text(l10n.username), findsOneWidget);
|
||||
expect(find.text(l10n.score), findsOneWidget);
|
||||
expect(find.byType(ListView), findsOneWidget);
|
||||
});
|
||||
|
||||
testWidgets('navigates to CharacterSelectionPage when retry is tapped',
|
||||
(tester) async {
|
||||
final navigator = MockNavigator();
|
||||
when(() => navigator.push<void>(any())).thenAnswer((_) async {});
|
||||
|
||||
await tester.pumpApp(
|
||||
LeaderboardPage(
|
||||
theme: DashTheme(),
|
||||
),
|
||||
navigator: navigator,
|
||||
);
|
||||
await tester.ensureVisible(find.byType(TextButton));
|
||||
await tester.tap(find.byType(TextButton));
|
||||
|
||||
verify(() => navigator.push<void>(any())).called(1);
|
||||
});
|
||||
});
|
||||
}
|
||||
Loading…
Reference in new issue