Dasar-dasar Flutter untuk Pemula (Bagian IX)

Flutter memungkinkan Anda menulis pengujian sederhana dan langsung untuk berbagai bagian aplikasi Anda.





Hari ini kita akan mencoba menulis beberapa unit test yang digunakan untuk menguji kelas, metode, dan fungsi individu.





Kami juga akan mencoba menggunakan perpustakaan Mockito



yang memungkinkan Anda membuat implementasi palsu.





Baiklah, mari kita mulai menguji!





Rencana kita
  • Bagian 1  - pengantar pembangunan, lampiran pertama, konsep negara;





  • Bagian 2  - file pubspec.yaml dan menggunakan flutter pada baris perintah;





  • Bagian 3  - BottomNavigationBar dan Navigator;





  • Bagian 4  - MVC. Kami akan menggunakan pola khusus ini sebagai salah satu yang paling sederhana;





  • Bagian 5  - paket http. Pembuatan kelas Repositori, permintaan pertama, daftar posting;





  • Bagian 6  - bekerja dengan formulir, kotak teks dan membuat posting.





  • Bagian 7  - bekerja dengan gambar, menampilkan gambar dalam bentuk kisi, menerima gambar dari jaringan, menambahkan gambar Anda sendiri ke aplikasi;





  • Bagian 8 - membuat tema Anda sendiri, menambahkan font dan animasi khusus;





  • Bagian 9 (artikel saat ini) - sedikit tentang pengujian;





Menambahkan dependensi yang diperlukan

Kami membutuhkan dua paket tambahan mockito



dan build_runner



, oleh karena itu, tambahkan mereka:





#   
#     
dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito: ^5.0.10
  build_runner: ^2.0.4
      
      



Sekarang kita bisa mulai menguji





Menulis tes pertama

Akan ada kelas kecil sebagai objek pengujian Stack



:





class Stack<T> {
  final stack = <T>[];
  
  void push(T t) {
    stack.add(t);
  }
  
  T? pop() {
    if (isEmpty) {
      return null;
    }
    return stack.removeLast();
  }
  
  bool get isEmpty => stack.isEmpty; 
}

      
      



Harap dicatat: kelasnya Stack



generik.





Ada folder test,



uji di direktori root proyek kami.







Mari kita buat file baru di dalamnya stack_test.dart



:





import 'package:flutter_test/flutter_test.dart';
import 'package:json_placeholder_app/helpers/stack.dart';

void main() {
  //  
  group("Stack", () {
    //     
    test("Stack should be empty", () {
      // expect    
      //     
      //    ,   
      expect(Stack().isEmpty, true);
    });
    test("Stack shouldn't be empty", () {
      final stack = Stack<int>();
      stack.push(5);
      expect(stack.isEmpty, false);
    });
    test("Stack should be popped", () {
      final stack = Stack<int>();
      stack.push(5);
      expect(stack.pop(), 5);
    });
    test("Stack should be work correctly", () {
      final stack = Stack<int>();
      stack.push(1);
      stack.push(2);
      stack.push(5);
      expect(stack.pop(), 5);
      expect(stack.pop(), 2);
      expect(stack.isEmpty, false);
    });
  });
}
      
      



Cukup mudah! Bukankah begitu?





Sebenarnya, ini adalah salah satu jenis pengujian yang disebut unit.





Flutter juga mendukung:





  • Pengujian widget





  • Tes integrasi





Pada artikel ini, kami hanya akan membahas pengujian unit.





Mari kita jalankan pengujian kita dengan perintah flutter test test/stack_test.dart:







Berhasil!





Menguji pengambilan pos

Pertama, mari kita ubah metodenya fetchPosts



:





Future<PostList> fetchPosts({http.Client? client}) async {
  //   URL,  
  //    
  final url = Uri.parse("$SERVER/posts");
  //  GET 
  final response =  (client == null) ? await http.get(url) : await client.get(url);
  //   
  if (response.statusCode == 200) {
    //      
    // json.decode  
    return PostList.fromJson(json.decode(response.body));
  } else {
    //     
    throw Exception("failed request");
  }
}
      
      



Sekarang mari kita beralih ke menulis tes itu sendiri.





Kami akan menggunakan mockito



untuk membuat http.Client'



a palsu





Mari kita buat file post_test.dart



di folder tests



:





import 'package:flutter_test/flutter_test.dart';
import 'package:http/http.dart' as http;
import 'package:json_placeholder_app/data/repository.dart';
import 'package:json_placeholder_app/models/post.dart';
import 'package:mockito/annotations.dart';
import 'package:mockito/mockito.dart';

//    
import 'post_test.mocks.dart';

//  mockito
@GenerateMocks([http.Client])
void main() {
  //   
  final repo = Repository();
  group("fetchPosts", () {
      test('returns posts if the http call completes successfully', () async {
        //   
        final client = MockClient();

        //   
        when(client.get(Uri.parse('https://jsonplaceholder.typicode.com/posts')))
            .thenAnswer((_) async => http.Response('[{"userId": 1, "id": 2, "title": "Title", "content": "Content"}]', 200));

        //    fetchPosts
        //   
        final postList = await repo.fetchPosts(client: client);
        expect(postList, isA<PostList>());
        expect(postList.posts.length, 1);
        expect(postList.posts.first.title, "Title");
      });

      test('throws an exception if the http call completes with an error', () {
        final client = MockClient();

        //  
        when(client.get(Uri.parse('https://jsonplaceholder.typicode.com/posts')))
            .thenAnswer((_) async => http.Response('Not Found', 404));

        //   
        expect(repo.fetchPosts(client: client), throwsException);
      });
  });
}
      
      



Sebelum memulai pengujian, Anda perlu membuat post_test.mocks.dart



file:





flutter pub run build_runner build
      
      



Setelah itu, kami menjalankan pengujian kami dengan perintah flutter test test/post_test.dart



:





Voila!





Kesimpulan

Kami telah membahas salah satu jenis pengujian yang paling sederhana dan paling terkenal - unit.





Seperti yang telah disebutkan, Flutter memungkinkan Anda menguji widget secara terpisah, serta melakukan pengujian penuh menggunakan pengujian integrasi.





Tautan yang berguna:





  • Kode sumber Github





  • Pengantar pengujian unit unit





  • Ketergantungan tiruan menggunakan Mockito





  • Menguji aplikasi Flutter





Kode yang bagus semuanya!








All Articles