From c870dbeac4b8df0536fb05e2bd983d96ca7e466e Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Sat, 1 Jul 2023 23:13:09 +0800 Subject: [PATCH] test: add more cover integration tests (#2922) --- .../document/cover_image_test.dart | 23 ++++--- .../util/editor_test_operations.dart | 26 ++++++++ .../integration_test/util/expectation.dart | 7 +-- .../editor_plugins/header/cover_editor.dart | 63 +++++++++++-------- .../header/custom_cover_picker.dart | 17 ++--- .../lib/style_widget/icon_button.dart | 2 +- 6 files changed, 83 insertions(+), 55 deletions(-) diff --git a/frontend/appflowy_flutter/integration_test/document/cover_image_test.dart b/frontend/appflowy_flutter/integration_test/document/cover_image_test.dart index 9b8695205b..20b84d0755 100644 --- a/frontend/appflowy_flutter/integration_test/document/cover_image_test.dart +++ b/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( - CoverType.asset, - "assets/images/app_flowy_abstract_cover_1.jpg", - ); + tester.expectToSeeDocumentCover(CoverType.asset); // 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( - CoverType.asset, - "assets/images/app_flowy_abstract_cover_1.jpg", - ); + tester.expectToSeeDocumentCover(CoverType.asset); // Hover over the cover toolbar and see that neither icons are shown await tester.editor.hoverOnCoverToolbar(); diff --git a/frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart b/frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart index d16acc4e03..190b68246b 100644 --- a/frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart +++ b/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 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 switchNetworkImageCover(String imageUrl) async { + final image = find.byWidgetPredicate( + (widget) => widget is ImageGridItem, + ); + await tester.tapButton(image); + } + Future tapOnRemoveCover() async { await tester.tapButton(find.byType(DeleteCoverButton)); } diff --git a/frontend/appflowy_flutter/integration_test/util/expectation.dart b/frontend/appflowy_flutter/integration_test/util/expectation.dart index 4de627cf80..fda463eb63 100644 --- a/frontend/appflowy_flutter/integration_test/util/expectation.dart +++ b/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 is DocumentCover && - widget.coverType == type && - widget.coverDetails == details, + (widget) => widget is DocumentCover && widget.coverType == type, ); expect(findCover, findsOneWidget); } diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart index 77b5abc1f5..d18900d66e 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart +++ b/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 { child: BlocBuilder( 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 { 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 { itemCount: images.length + 1, itemBuilder: (BuildContext ctx, index) { if (index == 0) { - return Container( - decoration: BoxDecoration( - border: Border.all( - 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; - }); - }, + return NewCustomCoverButton( + onPressed: () => setState( + () => isAddingImage = true, ), ); } @@ -328,6 +311,32 @@ class _ChangeCoverPopoverState extends State { } } +@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, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart index b5460450a3..39f0d239d3 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/custom_cover_picker.dart +++ b/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 { ), ) : CoverImagePreviewWidget(state: state), - const SizedBox( - height: 10, - ), + const VSpace(10), NetworkImageUrlInput( onAdd: (url) { context.read().add(UrlSubmit(url)); }, ), - const SizedBox( - height: 10, - ), + const VSpace(10), ImagePickerActionButtons( onBackPressed: () { widget.onBackPressed(); @@ -233,16 +230,12 @@ class _CoverImagePreviewWidgetState extends State { ), ], ), - const SizedBox( - height: 10, - ), + const VSpace(10), FlowyText( LocaleKeys.document_plugins_cover_or.tr(), fontWeight: FontWeight.w300, ), - const SizedBox( - height: 10, - ), + const VSpace(10), FlowyButton( hoverColor: Theme.of(context).hoverColor, onTap: () { diff --git a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart b/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart index a0083df0e9..26798b165d 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart +++ b/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,