test: add more cover integration tests (#2922)

frontend/appflowy_flutter/integration_test/document/cover_image_test.dart

@@ -36,21 +36,27 @@ void main() {
 
       // Insert a document cover
       await tester.editor.tapOnAddCover();
-      tester.expectToSeeDocumentCover(
+      tester.expectToSeeDocumentCover(CoverType.asset);
-        CoverType.asset,
-        "assets/images/app_flowy_abstract_cover_1.jpg",
-      );
 
       // Hover over the cover to show the 'Change Cover' and delete buttons
       await tester.editor.hoverOnCover();
       tester.expectChangeCoverAndDeleteButton();
 
       // Change cover to a solid color background
-      await tester.editor.hoverOnCover();
       await tester.editor.tapOnChangeCover();
       await tester.editor.switchSolidColorBackground();
       await tester.editor.dismissCoverPicker();
-      tester.expectToSeeDocumentCover(CoverType.color, "ffe8e0ff");
+      tester.expectToSeeDocumentCover(CoverType.color);
+
+      // Change cover to a network image
+      const imageUrl =
+          "https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy/main/frontend/appflowy_flutter/assets/images/appflowy_launch_splash.jpg";
+      await tester.editor.hoverOnCover();
+      await tester.editor.tapOnChangeCover();
+      await tester.editor.addNetworkImageCover(imageUrl);
+      await tester.editor.switchNetworkImageCover(imageUrl);
+      await tester.editor.dismissCoverPicker();
+      tester.expectToSeeDocumentCover(CoverType.file);
 
       // Remove the cover
       await tester.editor.hoverOnCover();
@@ -119,10 +125,7 @@ void main() {
 
       // Expect to see the icon and cover at the same time
       tester.expectToSeeDocumentIcon('😀');
-      tester.expectToSeeDocumentCover(
+      tester.expectToSeeDocumentCover(CoverType.asset);
-        CoverType.asset,
-        "assets/images/app_flowy_abstract_cover_1.jpg",
-      );
 
       // Hover over the cover toolbar and see that neither icons are shown
       await tester.editor.hoverOnCoverToolbar();

frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart

@@ -2,11 +2,13 @@ import 'dart:ui';
 
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_popover.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 
@@ -91,6 +93,30 @@ class EditorOperations {
     await tester.tapButton(findPurpleButton);
   }
 
+  Future<void> addNetworkImageCover(String imageUrl) async {
+    final findNewImageButton = find.byType(NewCustomCoverButton);
+    await tester.tapButton(findNewImageButton);
+
+    final imageUrlTextField = find.descendant(
+      of: find.byType(NetworkImageUrlInput),
+      matching: find.byType(TextField),
+    );
+    await tester.enterText(imageUrlTextField, imageUrl);
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_add.tr(),
+    );
+    await tester.tapButtonWithName(
+      LocaleKeys.document_plugins_cover_saveToGallery.tr(),
+    );
+  }
+
+  Future<void> switchNetworkImageCover(String imageUrl) async {
+    final image = find.byWidgetPredicate(
+      (widget) => widget is ImageGridItem,
+    );
+    await tester.tapButton(image);
+  }
+
   Future<void> tapOnRemoveCover() async {
     await tester.tapButton(find.byType(DeleteCoverButton));
   }

frontend/appflowy_flutter/integration_test/util/expectation.dart

@@ -85,12 +85,9 @@ extension Expectation on WidgetTester {
     expect(iconWidget, findsOneWidget);
   }
 
-  void expectToSeeDocumentCover(CoverType type, String details) {
+  void expectToSeeDocumentCover(CoverType type) {
     final findCover = find.byWidgetPredicate(
-      (widget) =>
+      (widget) => widget is DocumentCover && widget.coverType == type,
-          widget is DocumentCover &&
-          widget.coverType == type &&
-          widget.coverDetails == details,
     );
     expect(findCover, findsOneWidget);
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart

@@ -11,6 +11,7 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -83,7 +84,7 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
       child: BlocBuilder<ChangeCoverPopoverBloc, ChangeCoverPopoverState>(
         builder: (context, state) {
           return Padding(
-            padding: const EdgeInsets.all(15),
+            padding: const EdgeInsets.all(12),
             child: SingleChildScrollView(
               child: isAddingImage
                   ? CoverImagePicker(
@@ -116,18 +117,18 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
           LocaleKeys.document_plugins_cover_colors.tr(),
           color: Theme.of(context).colorScheme.tertiary,
         ),
-        const SizedBox(height: 10),
+        const VSpace(10),
         _buildColorPickerList(),
-        const SizedBox(height: 10),
+        const VSpace(10),
         _buildImageHeader(),
-        const SizedBox(height: 10),
+        const VSpace(10),
         _buildFileImagePicker(),
-        const SizedBox(height: 10),
+        const VSpace(10),
         FlowyText.semibold(
           LocaleKeys.document_plugins_cover_abstract.tr(),
           color: Theme.of(context).colorScheme.tertiary,
         ),
-        const SizedBox(height: 10),
+        const VSpace(10),
         _buildAbstractImagePicker(),
       ],
     );
@@ -249,27 +250,9 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
             itemCount: images.length + 1,
             itemBuilder: (BuildContext ctx, index) {
               if (index == 0) {
-                return Container(
+                return NewCustomCoverButton(
-                  decoration: BoxDecoration(
+                  onPressed: () => setState(
-                    border: Border.all(
+                    () => isAddingImage = true,
-                      color: Theme.of(context).colorScheme.primary,
-                    ),
-                    borderRadius: Corners.s8Border,
-                  ),
-                  child: FlowyIconButton(
-                    iconPadding: EdgeInsets.zero,
-                    icon: Icon(
-                      Icons.add,
-                      color: Theme.of(context).colorScheme.primary,
-                    ),
-                    hoverColor:
-                        Theme.of(context).colorScheme.primary.withOpacity(0.15),
-                    width: 20,
-                    onPressed: () {
-                      setState(() {
-                        isAddingImage = true;
-                      });
-                    },
                   ),
                 );
               }
@@ -328,6 +311,32 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
   }
 }
 
+@visibleForTesting
+class NewCustomCoverButton extends StatelessWidget {
+  final VoidCallback onPressed;
+  const NewCustomCoverButton({super.key, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        borderRadius: Corners.s8Border,
+      ),
+      child: FlowyIconButton(
+        icon: Icon(
+          Icons.add,
+          color: Theme.of(context).colorScheme.primary,
+        ),
+        hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.15),
+        onPressed: onPressed,
+      ),
+    );
+  }
+}
+
 class DeleteImageAlertDialog extends StatelessWidget {
   const DeleteImageAlertDialog({
     Key? key,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/custom_cover_picker_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/style_widget/snap_bar.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:flowy_infra/image.dart';
@@ -67,17 +68,13 @@ class _CoverImagePickerState extends State<CoverImagePicker> {
                         ),
                       )
                     : CoverImagePreviewWidget(state: state),
-                const SizedBox(
+                const VSpace(10),
-                  height: 10,
-                ),
                 NetworkImageUrlInput(
                   onAdd: (url) {
                     context.read<CoverImagePickerBloc>().add(UrlSubmit(url));
                   },
                 ),
-                const SizedBox(
+                const VSpace(10),
-                  height: 10,
-                ),
                 ImagePickerActionButtons(
                   onBackPressed: () {
                     widget.onBackPressed();
@@ -233,16 +230,12 @@ class _CoverImagePreviewWidgetState extends State<CoverImagePreviewWidget> {
               ),
             ],
           ),
-          const SizedBox(
+          const VSpace(10),
-            height: 10,
-          ),
           FlowyText(
             LocaleKeys.document_plugins_cover_or.tr(),
             fontWeight: FontWeight.w300,
           ),
-          const SizedBox(
+          const VSpace(10),
-            height: 10,
-          ),
           FlowyButton(
             hoverColor: Theme.of(context).hoverColor,
             onTap: () {

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart

@@ -78,7 +78,7 @@ class FlowyIconButton extends StatelessWidget {
           onPressed: onPressed,
           child: FlowyHover(
             style: HoverStyle(
-              hoverColor: hoverColor,
+              hoverColor: Colors.transparent,
               foregroundColorOnHover:
                   iconColorOnHover ?? Theme.of(context).iconTheme.color,
               backgroundColor: Colors.transparent,