[Question] How to test picking images?

[LuchoTurtle]

Hey there flutter-quill team 👋

Thanks for the repo, it is mighty useful!

I'm having a bit of trouble unit/integration testing my SPIKE app that uses flutter-quill, specifically picking an image.
I've already mocked a service that will switch devices at will on my testWidgets, so that is why you'll see it mentioned in the code snippet below.

Here's what I have so far:

  testWidgets('Select image', (WidgetTester tester) async {
    final platformServiceMock = MockPlatformService();

    // Platform is mobile
    when(platformServiceMock.isWebPlatform()).thenAnswer((_) => false);

    // Build our app and trigger a frame.
    await tester.pumpWidget(
      App(
        platformService: platformServiceMock,
      ),
    );
    await tester.pumpAndSettle();

    // Expect to find the normal page setup
    expect(find.text('Flutter Quill'), findsOneWidget);

    // Enter 'hi' into Quill Editor.
    await tester.tap(find.byType(QuillEditor));
    await tester.quillEnterText(find.byType(QuillEditor), 'hi\n');
    await tester.pumpAndSettle();

	// Clicks on the image button
    final imageButton = find.byType(ImageButton);
    await tester.tap(imageButton);
    await tester.pumpAndSettle();

    // how do I simulate a person choosing an image so I can check it is correctly embedded in the editor?
  });

I don't know how to "pick an image" now in tests. Since this is a test for a mobile device, I know image_picker is being used in the background.

I've used file_picker before in https://github.com/dwyl/flutter-image-upload-demo and the creators of the package mock the return of the pickFile() function to return a file in their tests. Because flutter_quill uses image_picker and it's "under the hood" of flutter_quill, I'm having a bit of trouble mocking it so I can simulate a person choosing an image.

I've inclusively followed the guide in https://docs.flutter.dev/testing/integration-tests to see the test flow was correct on a real device and it checks out: it opens the image gallery and waits for me to pick an image.

I've tried going over flutter-quill/test/widgets/editor_test.dart and over the example app tests in https://github.com/singerdmx/flutter-quill/blob/master/example/test/widget_test.dart and unfortunately haven't found anything related to this.

Is this even possible? Am I missing something?

Thank you!

[LuchoTurtle]

I've tried stubbing the method invocation by following the steps in https://stackoverflow.com/questions/56588555/how-to-test-imagepicker-in-flutter-driver.

  setUp(() {
    const channel = MethodChannel('plugins.flutter.io/image_picker');

    handler(MethodCall methodCall) async {
      if (methodCall.method == 'pickImage') {
        final data = await rootBundle.load('images/sample.jpeg');
        final bytes = data.buffer.asUint8List();
        final tempDir = await getTemporaryDirectory();
        final file = await File(
          '${tempDir.path}/tmp.tmp',
        ).writeAsBytes(bytes);
        return file.path;
      }
      return null;
    }

    TestWidgetsFlutterBinding.ensureInitialized();

    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger.setMockMethodCallHandler(channel, handler);
  });

This is using the not-deprecated setMockMethodCallHandler in https://github.com/flutter/flutter/blob/d7bee5ec948f9707a2052ef714f76197c244baba/packages/flutter_test/lib/src/deprecated.dart#L90-L92.

However, this seems to not work 😢

[nelsonic]

Any progress on this? 🤞

[LuchoTurtle]

I have some progress, but unfortunately, I haven't found a way to test simulating a person picking an image in a testWidgets.

I've inclusively simplified the implementation because I've tracked down the line that it supposedly "fails".

flutter-quill/flutter_quill_extensions/lib/embeds/toolbar/image_video_utils.dart

Lines 145 to 150 in 36d72c1

	static Future<String?> _pickImage(
	ImageSource source, OnImagePickCallback onImagePickCallback) async {
	final pickedFile = await ImagePicker().pickImage(source: source);
	if (pickedFile == null) {
	return null;
	}

Because in final pickedFile = await ImagePicker().pickImage(source: source); returns an XFile? object,
I've changed the mockImagePicker() (which is my attempt of stubbing the image_picker plugin method channel) implementation to barebones:

void mockImagePicker(WidgetTester tester) {
  const channel = MethodChannel('plugins.flutter.io/image_picker');

  Future<XFile?> handler(MethodCall methodCall) async {
    if (methodCall.method == 'pickImage') {
      final file = XFile('test/sample.jpeg');
      return file;
    } else {
      return null;
    }
  }

  tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(channel,
      (message) {
    return handler(message);
  });
}

Here is how I have set up my test in test/widget_test.dart, which calls mockImagePicker().

  setUpAll(() {
    TestWidgetsFlutterBinding.ensureInitialized();
  });

  testWidgets('Select image', (WidgetTester tester) async {
   
    // Mock image
    mockImagePicker(tester);

    // Build our app and trigger a frame.
    await tester.pumpWidget(
      App(),
    );
    await tester.pumpAndSettle();

    // Expect to find the normal page setup
    expect(find.text('Flutter Quill'), findsOneWidget);

    // Enter 'hi' into Quill Editor.
    await tester.tap(find.byType(QuillEditor));
    await tester.quillEnterText(find.byType(QuillEditor), 'hi\n');
    await tester.pumpAndSettle();

    final imageButton = find.byType(ImageButton);
    await tester.tap(imageButton);
    await tester.pumpAndSettle();
  });

While debugging, I know that it is invoked when final pickedFile = await ImagePicker().pickImage(source: source); is executed.

However, it seems I always get the following error:

══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════
The following PlatformException was thrown running a test:
PlatformException(error, Invalid argument: Instance of 'XFile', null, null)

When the exception was thrown, this was the stack:
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:652:7)
#1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:310:18)
<asynchronous suspension>
<asynchronous suspension>
(elided one frame from package:stack_trace)

The test description was:
  Select image

After searching for how to resolve this issue, I stumbled upon this link -> https://stackoverflow.com/questions/69030659/platformexception-invalid-argument-after-trying-to-mock-file-picker-for-integra.
It describes the same scenario and the way to resolve is to match the return type to the method channel call, which is what I've already done.

[LuchoTurtle]

Here's a small video showcasing how this happens whilst debugging:

clideo_editor_3e01c3f008c94b0581adb5f43feb87dc.mp4

[EchoEllet]

Hi, it looks like this issue has been fixed, we need to close it since there are no interactions with it, feel free to ask us questions at any time