test(Screens): add golden tests for some initial screens (#73)

* chore(Assets): add offline google fonts

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): add golden test for home screen

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): refactor golden test for home screen

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): add golden test for login screen

Signed-off-by: arafaysaleem <[email protected]>

* test(Goldens): add a global golden test config

Signed-off-by: arafaysaleem <[email protected]>

* chore(Gitignore): ignore windows generated golden pngs

Signed-off-by: arafaysaleem <[email protected]>

* test(Goldens): add shared mocks for auth provider

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): add golden tests for register screen

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): refactor golden tests for home and login screens

Signed-off-by: arafaysaleem <[email protected]>

* ci(Actions): add a workflow to update goldens for new changes

Signed-off-by: arafaysaleem <[email protected]>

* ci(Actions): update PR actions to new versions

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): add comments to all golden tests

Signed-off-by: arafaysaleem <[email protected]>

* ci(Actions): fix test folder path for ubuntu file system

Signed-off-by: arafaysaleem <[email protected]>

* ci(Actions): generate local goldens in different dir

Signed-off-by: arafaysaleem <[email protected]>

* test(Goldens): add a comment to common_mocked_providers.dart

Signed-off-by: arafaysaleem <[email protected]>

* test(Goldens): update generated goldens for new changes

* ci(Goldens): restrict generation to only if dart code updates

Signed-off-by: arafaysaleem <[email protected]>

* test(Screens): add golden tests for change password screen

Signed-off-by: arafaysaleem <[email protected]>

* test(Goldens): update generated goldens for new changes

Co-authored-by: arafaysaleem <[email protected]>

.github/workflows/PR-generate-goldens.yaml

@@ -0,0 +1,44 @@
+name: Generate Updated Goldens
+on:
+  push:
+    branches-ignore: [master, release, dev] # only run on feature branches
+    paths:
+      - '**/golden_tests/**.dart'
+
+    workflow_dispatch:
+
+jobs:
+  generate-goldens:
+    name: Test APK
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
+          fetch-depth: 0
+      - name: Setup Java JDK
+        uses: actions/[email protected]
+        with:
+          distribution: 'adopt'
+          java-version: '12.x'
+      - name: Checkout Flutter Stable Channel
+        uses: subosito/[email protected]
+        with:
+          channel: 'stable'
+      - name: Get Pub Dependencies
+        run: flutter pub get
+      - name: Run Build Runner For Codegen Files
+        run: flutter packages pub run build_runner build --delete-conflicting-outputs
+      - name: Run tests
+        run: flutter test --update-goldens test/golden_tests
+      - name: Commit Updated Goldens
+        run: |
+          git config --global user.name 'arafaysaleem'
+          git config --global user.email '[email protected]'
+          git add -A
+          git commit -m "test(Goldens): update generated goldens for new changes"
+      - name: GitHub Push To Repository
+        uses: ad-m/[email protected]
+        with:
+          github_token: ${{ secrets.EZ_TICKETS_APP_TOKEN }}
+          branch: ${{ github.ref }}

.github/workflows/PR-merge-build-release.yaml

@@ -15,11 +15,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-java@v1
+      - name: Setup Java JDK
+        uses: actions/[email protected]
         with:
+          distribution: 'adopt'
           java-version: '12.x'
       - name: Checkout Flutter Stable Channel
-        uses: subosito/[email protected].1
+        uses: subosito/[email protected].3
         with:
           channel: 'stable'
       - name: Get Pub Dependencies

.github/workflows/PR-open-test-build.yaml

@@ -7,12 +7,20 @@ jobs:
     name: Test APK
     runs-on: ubuntu-latest
     steps:
+    - name: Wait For Generate Goldens Workflow To Complete
+      uses: fountainhead/[email protected]
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        checkName: generate-goldens
+        ref: ${{ github.event.pull_request.head.sha || github.sha }}
     - uses: actions/checkout@v2
-    - uses: actions/setup-java@v1
+    - name: Setup Java JDK
+      uses: actions/[email protected]
       with:
+        distribution: 'adopt'
         java-version: '12.x'
     - name: Checkout Flutter Stable Channel
-      uses: subosito/flutter-action@v1
+      uses: subosito/flutter-action@v1.5.3
       with:
         channel: 'stable'
     - name: Get Pub Dependencies

.gitignore

@@ -45,11 +45,17 @@ app.*.map.json
 /android/app/profile
 /android/app/release
 
-# Generated model files
+# Generated files
 *.g.dart
 *.freezed.dart
 *.gr.dart
 *.mocks.dart
 
 #keystore
 *.jks
+
+# don't check in golden failure output
+**/failures/*.png
+
+# don't check in goldens since we are using Windows and CI uses Ubuntu
+**/goldens_local/*.png

lib/helper/utils/custom_theme.dart

@@ -38,7 +38,7 @@ class CustomTheme {
         height: 1.15,
       ),
       headline4: Constants.latoFont.copyWith(
-        fontWeight: FontWeight.w500,
+        fontWeight: FontWeight.w400,
         fontSize: 26,
         height: 1.15,
       ),

lib/views/screens/login_screen.dart

@@ -76,7 +76,6 @@ class LoginScreen extends HookWidget {
                     //Email
                     CustomTextField(
                       controller: emailController,
-                      autofocus: true,
                       floatingText: 'Email',
                       hintText: 'Type your email address',
                       keyboardType: TextInputType.emailAddress,

lib/views/screens/register_screen.dart

@@ -280,7 +280,6 @@ class _UserDetailFields extends StatelessWidget {
         //Full name
         CustomTextField(
           controller: fullNameController,
-          autofocus: true,
           floatingText: 'Full name',
           hintText: 'Type your full name',
           keyboardType: TextInputType.name,

pubspec.lock

@@ -387,6 +387,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.1"
+  golden_toolkit:
+    dependency: "direct main"
+    description:
+      name: golden_toolkit
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.9.0"
   google_fonts:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -28,6 +28,7 @@ dependencies:
   flutter_secure_storage: ^4.2.1
   clock: ^1.1.0
   mockito: ^5.0.13
+  golden_toolkit: ^0.9.0
 dev_dependencies:
   flutter_test:
     sdk: flutter
@@ -41,6 +42,7 @@ flutter:
   uses-material-design: true
   assets:
   - assets/
+  - google_fonts/
 flutter_icons:
   android: true
   ios: false

test/flutter_test_config.dart

@@ -0,0 +1,37 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+//Theme
+import 'package:ez_ticketz_app/helper/utils/custom_theme.dart';
+
+Future<void> testExecutable(FutureOr<void> Function() testMain) async {
+  return GoldenToolkit.runWithConfiguration(
+    () async {
+      await loadAppFonts();
+      await testMain();
+    },
+    config: GoldenToolkitConfiguration(
+      defaultDevices: const [GoldensGlobalConfig.defaultDevice],
+      fileNameFactory: (name) {
+        if(Platform.isWindows) {
+            return 'goldens_local/$name.png';
+        }
+        else {
+          return 'goldens/$name.png';
+        }
+      }
+    ),
+  );
+}
+
+abstract class GoldensGlobalConfig {
+  static final globalAppWrapper = materialAppWrapper(
+    theme: CustomTheme.mainTheme,
+  );
+
+  static const defaultDevice = Device.iphone11;
+
+  static final defaultSurfaceSize = defaultDevice.size;
+}

test/golden_tests/change_password_screen_golden_test.dart

@@ -0,0 +1,39 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+//Providers
+import 'package:ez_ticketz_app/providers/all_providers.dart';
+import 'common_mocked_providers.dart';
+
+//Screens
+import 'package:ez_ticketz_app/views/screens/change_password_screen.dart';
+
+//Config
+import '../flutter_test_config.dart';
+
+void main() {
+  group('ChangePasswordScreen', () {
+    testGoldens(
+      'GIVEN the change password icon is pressed '
+      'WHEN the change password screen is shown '
+      'THEN it looks like change_password_screen_golden.png',
+      (tester) async {
+        //when
+        await tester.pumpWidgetBuilder(
+          ProviderScope(
+            overrides: [
+              authProvider.overrideWithProvider(mockAuthProvider)
+            ],
+            child: const ChangePasswordScreen(),
+          ),
+          surfaceSize: GoldensGlobalConfig.defaultSurfaceSize,
+          wrapper: GoldensGlobalConfig.globalAppWrapper,
+        );
+
+        //then
+        await screenMatchesGolden(tester, 'change_password_screen_golden');
+      },
+    );
+  });
+}

test/golden_tests/common_mocked_providers.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:mockito/mockito.dart';
+
+//Models
+import 'package:ez_ticketz_app/models/user_model.dart';
+
+//Providers
+import 'package:ez_ticketz_app/providers/auth_provider.dart';
+
+//States
+import 'package:ez_ticketz_app/providers/states/auth_state.dart';
+
+//Services
+import 'package:ez_ticketz_app/services/local_storage/key_value_storage_service.dart';
+import 'package:ez_ticketz_app/services/repositories/auth_repository.dart';
+
+//Mocks
+class _MockKVStorageService extends Mock implements KeyValueStorageService {
+  @override
+  bool getAuthState() => false;
+
+  @override
+  UserModel? getAuthUser() => null;
+
+  @override
+  Future<String> getAuthPassword() => SynchronousFuture('');
+
+  @override
+  void resetKeys() {}
+}
+
+//Fakes
+class _MockAuthRepository extends Fake implements AuthRepository {}
+
+//Providers
+final mockAuthProvider = StateNotifierProvider<AuthProvider, AuthState>((ref) {
+  return AuthProvider(
+    reader: ref.read,
+    authRepository: _MockAuthRepository(),
+    keyValueStorageService: _MockKVStorageService(),
+  );
+});

test/golden_tests/home_screen_golden_test.dart

@@ -0,0 +1,29 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+
+//Screens
+import 'package:ez_ticketz_app/views/screens/home_screen.dart';
+
+//Config
+import '../flutter_test_config.dart';
+
+void main() {
+  group('HomeScreen', () {
+    testGoldens(
+      'GIVEN the app is started '
+      'WHEN the home screen is shown '
+      'THEN it looks like home_screen_golden.png',
+      (tester) async {
+        //when
+        await tester.pumpWidgetBuilder(
+          const HomeScreen(),
+          surfaceSize: GoldensGlobalConfig.defaultSurfaceSize,
+          wrapper: GoldensGlobalConfig.globalAppWrapper,
+        );
+
+        //then
+        await screenMatchesGolden(tester, 'home_screen_golden');
+      },
+    );
+  });
+}

test/golden_tests/login_screen_golden_test.dart

@@ -0,0 +1,39 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+//Providers
+import 'package:ez_ticketz_app/providers/all_providers.dart';
+import 'common_mocked_providers.dart';
+
+//Screens
+import 'package:ez_ticketz_app/views/screens/login_screen.dart';
+
+//Config
+import '../flutter_test_config.dart';
+
+void main() {
+  group('LoginScreen', () {
+    testGoldens(
+      'GIVEN the login button is pressed '
+      'WHEN the login screen is shown '
+      'THEN it looks like login_screen_golden.png',
+      (tester) async {
+        //when
+        await tester.pumpWidgetBuilder(
+          ProviderScope(
+            overrides: [
+              authProvider.overrideWithProvider(mockAuthProvider),
+            ],
+            child: const LoginScreen(),
+          ),
+          surfaceSize: GoldensGlobalConfig.defaultSurfaceSize,
+          wrapper: GoldensGlobalConfig.globalAppWrapper,
+        );
+
+        //then
+        await screenMatchesGolden(tester, 'login_screen_golden');
+      },
+    );
+  });
+}