Flutter — Testes de integração com imagePicker

Você já precisou fazer teste de integração utilizando o componente ImagePicker no Flutter? Se sim, aposto que pensou que haveria um método pronto que trouxesse uma imagem da memória sem precisar abrir a câmera, simulando a captura de imagem, algum método com o nome pickImage(source: ImageSource.mock) ou inMemoryPhoto, e quando percebeu que não existia se perguntou: E agora?🤔

Calma, este artigo foi feito para te ajudar a resolver esse problema.😎

Let’s go

1. Crie um projeto Flutter

Aqui criamos um projeto chamado image_picker_test

Adicione as dependências imagePicker e pathProvider no projeto

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.6.7+2
  path_provider: ^1.6.1

Também adicione a dependência de test para que possamos utilizar as funções de test

dev_dependencies:
  flutter_driver:
    sdk: flutter
  test: any

Arquivo main.dart

2. Adicionando a imagem de mock no projeto

Na pasta raiz do projeto crie uma pasta com o nome assets e dentro dela a pasta images, agora copie para dentro da pasta images uma imagem de sua escolha e dê o nome de car.png.

assets/images/car.png

No arquivo pubspec.yaml na seção de imagens adicione a imagem car.png

assets:
  - assets/images/car.png

3. Criando os arquivos de teste

Diferente dos testes unitários e de widget, testes de integração não rodam no mesmo processo com o app sendo testado. Portanto, criamos dois arquivos que ficam no mesmo diretório. Por convenção, o nome do diretório é test_driver.

Crie dentro da pasta test_driver os seguintes arquivos

app.dart
app_test.dart

Estrutura de diretórios e arquivos:

image_picker_test/
  lib/
    main.dart
  test_driver/
    app.dart
    app_test.dart

4. Criando app.dart

Agora, no arquivo app.dart criaremos o método main, dentro dele habilitamos a chamada de componentes nativos com o comando:

enableFlutterDriverExtension();

A partir daí, criamos o método que irá interceptar as chamadas do componente imagePicker pelo teste de integração:

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

quando qualquer chamada do componente ocorrer no teste, o app direcionará o fluxo para nossa função:

channel.setMockMethodCallHandler((MethodCall methodCall) async {

Retornando sempre a imagem que adicionamos na pasta assets:

final ByteData data = await rootBundle.load('assets/logos/car.png');

5. Criando app_test.dart

Escrevendo os testes

Agora, com o arquivo app.dart configurado, você pode escrever os testes.

1. Conecte ao app antes de nossos testes executarem com a função setUpAll()

2. Teste o clique no botão que chama o componente imagePicker

3. Desconecte do app com a funçãoteardownAll()

6. Executando os testes

Para testar no iOS ou Android, inicie o emulador Android, Simulador iOS, ou conecte ao seu computador um dispositivo real Android/iOS

Então, execute o seguinte comando a partir da raiz do projeto:

Done!

Enjoy!