add UI tests

.gitignore

@@ -30,6 +30,7 @@
 .pub-cache/
 .pub/
 /build/
+/test/widgets/**/failures/
 
 # Web related
 lib/generated_plugin_registrant.dart

lib/widgets/pages/settings/setting_value_text.dart

@@ -0,0 +1,18 @@
+import 'package:coffeecard/base/style/text_styles.dart';
+import 'package:flutter/material.dart';
+
+class SettingValueText extends StatelessWidget {
+  final String value;
+
+  const SettingValueText({required this.value});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      value,
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      style: AppTextStyle.settingValue,
+    );
+  }
+}

lib/widgets/pages/settings/settings_page.dart

@@ -18,6 +18,7 @@ import 'package:coffeecard/widgets/pages/settings/change_passcode_flow.dart';
 import 'package:coffeecard/widgets/pages/settings/credits_page.dart';
 import 'package:coffeecard/widgets/pages/settings/faq_page.dart';
 import 'package:coffeecard/widgets/pages/settings/opening_hours_page.dart';
+import 'package:coffeecard/widgets/pages/settings/setting_value_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:gap/gap.dart';
@@ -79,11 +80,10 @@ class SettingsPage extends StatelessWidget {
                   builder: (context, colorIfShimmer) {
                     return ColoredBox(
                       color: colorIfShimmer,
-                      child: Text(
-                        (userState is UserLoaded)
+                      child: SettingValueText(
+                        value: (userState is UserLoaded)
                             ? userState.user.email
                             : Strings.emailShimmerText,
-                        style: AppTextStyle.settingValue,
                       ),
                     );
                   },
@@ -99,9 +99,8 @@ class SettingsPage extends StatelessWidget {
               ),
               SettingListEntry(
                 name: Strings.passcode,
-                valueWidget: Text(
-                  Strings.change,
-                  style: AppTextStyle.settingValue,
+                valueWidget: const SettingValueText(
+                  value: Strings.change,
                 ),
                 onTap: _ifUserStateLoaded(
                   userState,
@@ -158,7 +157,7 @@ class SettingsPage extends StatelessWidget {
 
                     return ColoredBox(
                       color: colorIfShimmer,
-                      child: Text(text, style: AppTextStyle.settingValue),
+                      child: SettingValueText(value: text),
                     );
                   },
                 ),

test/README.md

@@ -23,4 +23,17 @@ void main() {
   // Create mock object.
   var cat = MockSecureStorage();
 }
-```
+```
+
+## Golden tests
+
+Golden files for UI tests are auto-generated. This is doing by first implementing the test (Pump widget, compare to golden file), then generating the file using
+```bash
+  flutter test --update-goldens [path/to/test.dart]
+```
+
+If no path is given, all goldens will be updated.
+
+Due to OS specific rendering, golden tests will fail in the pipeline if not generated using a linux distro. 
+
+(**TODO**: Make dockerfile for golden generation)

test/widgets/components/error_section_test.dart

@@ -0,0 +1,37 @@
+import 'package:coffeecard/widgets/components/error_section.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Error section has error message', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: ErrorSection(
+            error: 'Test error',
+            retry: () {},
+          ),
+        ),
+      ),
+    );
+
+    expect(find.textContaining('Test error'), findsOneWidget);
+  });
+
+  testWidgets('Error section matches golden file', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: ErrorSection(
+            error: 'Test error',
+            retry: () {},
+          ),
+        ),
+      ),
+    );
+    await expectLater(
+      find.byType(ErrorSection),
+      matchesGoldenFile('goldens/error_section.png'),
+    );
+  });
+}

test/widgets/components/settings_list_entry_test.dart

@@ -0,0 +1,50 @@
+import 'package:coffeecard/widgets/components/settings_list_entry.dart';
+import 'package:coffeecard/widgets/pages/settings/setting_value_text.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('SettingsListEntry should match golden file with "normal" value',
+      (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SettingListEntry(
+            name: 'email',
+            valueWidget: SettingValueText(
+              value: 'Normal email',
+            ),
+          ),
+        ),
+      ),
+    );
+
+    expect(find.byType(SettingListEntry), findsOneWidget);
+    expect(find.text('Normal email'), findsOneWidget);
+
+    await expectLater(
+      find.byType(SettingListEntry),
+      matchesGoldenFile('goldens/settings_list_entry_normal.png'),
+    );
+  });
+  testWidgets('SettingListEntry when truncated should match golden file',
+      (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: SettingListEntry(
+            name: 'email',
+            valueWidget: SettingValueText(
+              value:
+                  'This is a very long text that should be truncated, This is a very long text that should be truncated, This is a very long text that should be truncated',
+            ),
+          ),
+        ),
+      ),
+    );
+    await expectLater(
+      find.byType(SettingListEntry),
+      matchesGoldenFile('goldens/setting_list_entry_truncated.png'),
+    );
+  });
+}

test/widgets/components/stats/leaderboard_list_entry_test.dart

@@ -0,0 +1,86 @@
+import 'package:coffeecard/widgets/components/stats/leaderboard_list_entry.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('LeaderboardListEntry given rank 0 should display rank as -',
+      (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: LeaderboardListEntry(
+            id: 0,
+            name: 'name',
+            score: 0,
+            rank: 0,
+            highlight: false,
+          ),
+        ),
+      ),
+    );
+
+    expect(find.byType(LeaderboardListEntry), findsOneWidget);
+    expect(find.text('-'), findsOneWidget);
+  });
+  testWidgets('LeaderboardListEntry given rank 1 should display rank as 1',
+      (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: LeaderboardListEntry(
+            id: 0,
+            name: 'name',
+            score: 0,
+            rank: 1,
+            highlight: false,
+          ),
+        ),
+      ),
+    );
+
+    expect(find.byType(LeaderboardListEntry), findsOneWidget);
+    expect(find.text('1'), findsOneWidget);
+  });
+  testWidgets('LeaderboardListEntry should match golden file', (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: LeaderboardListEntry(
+            id: 1,
+            highlight: false,
+            name: 'Test',
+            rank: 1,
+            score: 100,
+          ),
+        ),
+      ),
+    );
+    await expectLater(
+      find.byType(LeaderboardListEntry),
+      matchesGoldenFile('goldens/leaderboard_list_entry.png'),
+    );
+  });
+
+  testWidgets(
+      'LeaderboardListEntry when highlighted and truncated should match golden file',
+      (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: LeaderboardListEntry(
+            id: 1,
+            highlight: true,
+            name:
+                'TestHighlighted with a very long name so it gets truncated and the score remains on the right',
+            rank: 30,
+            score: 1,
+          ),
+        ),
+      ),
+    );
+    await expectLater(
+      find.byType(LeaderboardListEntry),
+      matchesGoldenFile('goldens/leaderboard_list_entry_highlighted.png'),
+    );
+  });
+}

test/widgets/components/stats/stat_card_test.dart

@@ -0,0 +1,57 @@
+import 'package:coffeecard/widgets/components/stats/stat_card.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Statistics card has a title and rank', (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: StatisticsCard(
+            title: 'StatsTest',
+            rank: 2,
+            loading: false,
+          ),
+        ),
+      ),
+    );
+
+    expect(find.text('StatsTest'), findsOneWidget);
+    expect(find.text('2nd'), findsOneWidget);
+  });
+
+  testWidgets('Statistics card shows N/A if rank is 0', (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: StatisticsCard(
+            title: 'StatsTest',
+            rank: 0,
+            loading: false,
+          ),
+        ),
+      ),
+    );
+
+    expect(find.text('StatsTest'), findsOneWidget);
+    expect(find.textContaining('N/A'), findsOneWidget);
+  });
+
+  testWidgets('Statistics card matches golden file', (tester) async {
+    await tester.pumpWidget(
+      const MaterialApp(
+        home: Scaffold(
+          body: StatisticsCard(
+            title: 'This semester',
+            rank: 2,
+            loading: false,
+          ),
+        ),
+      ),
+    );
+    await expectLater(
+      find.byType(StatisticsCard),
+      matchesGoldenFile('goldens/stat_card.png'),
+    );
+  });
+}

test/widgets/components/tickets/buy_tickets_card_test.dart

@@ -0,0 +1,54 @@
+import 'package:coffeecard/models/ticket/product.dart';
+import 'package:coffeecard/widgets/components/tickets/buy_tickets_card.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('BuyTicketsCard should have product information', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: BuyTicketsCard(
+            product: const Product(
+              id: 0,
+              name: 'CoffeeTitle',
+              description: 'CoffeeDescription',
+              amount: 2,
+              price: 10,
+            ),
+            onTap: (context, product, state) {},
+          ),
+        ),
+      ),
+    );
+
+    expect(find.text('CoffeeTitle'), findsOneWidget);
+    expect(find.text('CoffeeDescription'), findsOneWidget);
+    expect(find.text('2 tickets'), findsOneWidget);
+    expect(find.text('10,-'), findsOneWidget);
+  });
+
+  testWidgets('BuyTicketsCard should match golden file', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: BuyTicketsCard(
+            product: const Product(
+              id: 0,
+              name: 'Coffee',
+              description: 'Coffee',
+              amount: 1,
+              price: 1,
+            ),
+            onTap: (context, product, state) {},
+          ),
+        ),
+      ),
+    );
+
+    await expectLater(
+      find.byType(BuyTicketsCard),
+      matchesGoldenFile('goldens/buy_tickets_card.png'),
+    );
+  });
+}