Make Shrine shopping cart icons display correctly (#651)

* First version.

* Remove prints.

* Simplify.

* Add tests and update goldens.

* Reverted existing goldens.

* Update goldens.

Co-authored-by: Tianguang Zhang <tianguang@google.com>

lib/studies/shrine/expanding_bottom_sheet.dart

@@ -675,9 +675,11 @@ class _ProductThumbnailRowState extends State<ProductThumbnailRow> {
 
   @override
   Widget build(BuildContext context) {
-    _updateLists();
     return ScopedModelDescendant<AppStateModel>(
-      builder: (context, child, model) => _buildAnimatedList(context),
+      builder: (context, child, model) {
+        _updateLists();
+        return _buildAnimatedList(context);
+      },
     );
   }
 }

test_goldens/shrine_test.dart

@@ -0,0 +1,76 @@
+// Copyright 2019 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'package:gallery/main.dart';
+import 'package:gallery/studies/shrine/supplemental/product_card.dart';
+
+import 'testing/precache_images.dart';
+import 'testing/util.dart';
+
+void main() {
+  group('mobile', () {
+    testWidgets(
+      'shrine displays shopping cart correctly',
+      (tester) async {
+        await setUpBinding(tester, size: mobileSize);
+        await pumpWidgetWithImages(
+          tester,
+          const GalleryApp(initialRoute: '/shrine/login'),
+          shrineAssets,
+        );
+        await tester.pumpAndSettle();
+
+        await tester.tap(
+          find.byWidgetPredicate(
+            (widget) => widget is Text && widget.data == 'NEXT',
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        await tester.tap(find.byType(MobileProductCard).first);
+        await tester.tap(find.byType(MobileProductCard).at(1));
+        await tester.pumpAndSettle();
+
+        await expectLater(
+          find.byType(GalleryApp),
+          matchesGoldenFile('goldens/shrine_mobile.png'),
+        );
+      },
+    );
+  });
+
+  group('desktop', () {
+    testWidgets(
+      'shrine displays shopping cart correctly',
+      (tester) async {
+        await setUpBinding(tester, size: desktopSize);
+        await pumpWidgetWithImages(
+          tester,
+          const GalleryApp(initialRoute: '/shrine/login'),
+          shrineAssets,
+        );
+        await tester.pumpAndSettle();
+
+        await tester.tap(
+          find.byWidgetPredicate(
+            (widget) => widget is Text && widget.data == 'NEXT',
+          ),
+        );
+        await tester.pumpAndSettle();
+
+        await tester.tap(find.byType(DesktopProductCard).first);
+        await tester.tap(find.byType(DesktopProductCard).at(1));
+        await tester.pumpAndSettle();
+
+        await expectLater(
+          find.byType(GalleryApp),
+          matchesGoldenFile('goldens/shrine_desktop.png'),
+        );
+      },
+    );
+  });
+}

test_goldens/testing/precache_images.dart

@@ -9,16 +9,16 @@ import 'package:flutter_test/flutter_test.dart';
 Future<void> pumpWidgetWithImages(
   WidgetTester tester,
   Widget widget,
-  List<String> assetNames,
+  List<AssetImage> assets,
 ) async {
   Future<void>? precacheFuture;
   await tester.pumpWidget(
     Builder(builder: (buildContext) {
       precacheFuture = tester.runAsync(() async {
         await Future.wait([
-          for (final assetName in assetNames)
+          for (final asset in assets)
             precacheImage(
-              AssetImage(assetName, package: 'flutter_gallery_assets'),
+              asset,
               buildContext,
             ),
         ]);

test_goldens/testing/util.dart

@@ -8,20 +8,105 @@ import 'package:flutter_test/flutter_test.dart';
 const mobileSize = Size(540, 960);
 const desktopSize = Size(1280, 850);
 const homeAssets = [
-  'assets/icons/cupertino/cupertino.png',
-  'assets/icons/material/material.png',
-  'assets/icons/reference/reference.png',
-  'assets/logo/flutter_logo.png',
-  'assets/studies/reply_card.png',
-  'assets/studies/reply_card_dark.png',
-  'assets/studies/crane_card.png',
-  'assets/studies/crane_card_dark.png',
-  'assets/studies/rally_card.png',
-  'assets/studies/rally_card_dark.png',
-  'assets/studies/shrine_card.png',
-  'assets/studies/shrine_card_dark.png',
-  'assets/studies/fortnightly_card.png',
-  'assets/studies/fortnightly_card_dark.png',
+  AssetImage(
+    'assets/icons/cupertino/cupertino.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/icons/material/material.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/icons/reference/reference.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/logo/flutter_logo.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/reply_card.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/reply_card_dark.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/crane_card.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/crane_card_dark.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/rally_card.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/rally_card_dark.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/shrine_card.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/shrine_card_dark.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/fortnightly_card.png',
+    package: 'flutter_gallery_assets',
+  ),
+  AssetImage(
+    'assets/studies/fortnightly_card_dark.png',
+    package: 'flutter_gallery_assets',
+  ),
+];
+
+const shrineAssets = [
+  AssetImage('0-0.jpg', package: 'shrine_images'),
+  AssetImage('1-0.jpg', package: 'shrine_images'),
+  AssetImage('2-0.jpg', package: 'shrine_images'),
+  AssetImage('3-0.jpg', package: 'shrine_images'),
+  AssetImage('4-0.jpg', package: 'shrine_images'),
+  AssetImage('5-0.jpg', package: 'shrine_images'),
+  AssetImage('6-0.jpg', package: 'shrine_images'),
+  AssetImage('7-0.jpg', package: 'shrine_images'),
+  AssetImage('8-0.jpg', package: 'shrine_images'),
+  AssetImage('9-0.jpg', package: 'shrine_images'),
+  AssetImage('10-0.jpg', package: 'shrine_images'),
+  AssetImage('11-0.jpg', package: 'shrine_images'),
+  AssetImage('12-0.jpg', package: 'shrine_images'),
+  AssetImage('13-0.jpg', package: 'shrine_images'),
+  AssetImage('14-0.jpg', package: 'shrine_images'),
+  AssetImage('15-0.jpg', package: 'shrine_images'),
+  AssetImage('16-0.jpg', package: 'shrine_images'),
+  AssetImage('17-0.jpg', package: 'shrine_images'),
+  AssetImage('18-0.jpg', package: 'shrine_images'),
+  AssetImage('19-0.jpg', package: 'shrine_images'),
+  AssetImage('20-0.jpg', package: 'shrine_images'),
+  AssetImage('21-0.jpg', package: 'shrine_images'),
+  AssetImage('22-0.jpg', package: 'shrine_images'),
+  AssetImage('23-0.jpg', package: 'shrine_images'),
+  AssetImage('24-0.jpg', package: 'shrine_images'),
+  AssetImage('25-0.jpg', package: 'shrine_images'),
+  AssetImage('26-0.jpg', package: 'shrine_images'),
+  AssetImage('27-0.jpg', package: 'shrine_images'),
+  AssetImage('28-0.jpg', package: 'shrine_images'),
+  AssetImage('29-0.jpg', package: 'shrine_images'),
+  AssetImage('30-0.jpg', package: 'shrine_images'),
+  AssetImage('31-0.jpg', package: 'shrine_images'),
+  AssetImage('32-0.jpg', package: 'shrine_images'),
+  AssetImage('33-0.jpg', package: 'shrine_images'),
+  AssetImage('34-0.jpg', package: 'shrine_images'),
+  AssetImage('35-0.jpg', package: 'shrine_images'),
+  AssetImage('36-0.jpg', package: 'shrine_images'),
+  AssetImage('37-0.jpg', package: 'shrine_images'),
+  AssetImage('diamond.png', package: 'shrine_images'),
+  AssetImage('slanted_menu.png', package: 'shrine_images'),
 ];
 
 Future<void> setUpBinding(