Test-Driven Development pada Flutter | Definisi, Kelebihan, Kekurangan, dan Implementasinya
Halo teman-teman! Saya Michael, mahasiswa Ilmu Komputer dari Universitas Indonesia. Saya akan menjelaskan salah satu metodologi pengembangan perangkat lunak yang unik yaitu Test-Driven Development. Mari kita telururi bersama definisi, kelebihan, kekurangan, serta bagaimana implementasinya dalam artikel ini. Yuk simak!
Definisi
Test-Driven Development (TDD) adalah metodologi pengembangan perangkat lunak yang dimulai dengan pengujian atau testing terlebih dahulu sebelum mengimplementasikan kode program.
Dalam menerapkan metode TDD pada pengembangan perangkat lunak, terdapat tahapan-tahapan yang harus dilalui, yaitu sebagai berikut :
- Write Test First
Anda harus menulis test untuk fungsionalitas yang akan diimplementasikan. Test ini harus jelas menentukan apa yang diharapkan dan menjadi requirements dari fitur yang akan ditulis nantinya. Pada tahap ini, perlu diperhatikan bahwa test seharusnya gagal karena belum ada implementasi kode yang memenuhi kriteria test tersebut. Dengan membuat test yang seharusnya gagal, kita dapat memastikan bahwa kode memang terjamin gagal karena tidak memenuhi requirements yang sebelumnya dibuat. Kegagalan test merupakan bagian krusial dari proses pengembangan yang memastikan bahwa test memenuhi persyaratan yang telah ditetapkan sebelumnya. Tahap ini juga dikenal dengan istilah ‘Red’ dalam siklus Red, Green, Refactor. Pesan commit untuk tahap ini diawali dengan label [Red]. Selain itu, pastikan bahwa semua test yang Anda buat mengacu pada acceptance criteria yang telah ditetapkan secara rinci dalam user story atau persyaratan proyek. - Then, Write the Code (Implementation)
Langkah selanjutnya adalah menulis kode implementasi yang diperlukan untuk membuat test tersebut berhasil. Pada tahap ini, Anda hanya cukup untuk memenuhi kebutuhan yang ditetapkan oleh test yang telah ditulis pada tahap pertama. Prinsip utama di sini adalah menulis kode yang cukup untuk memenuhi persyaratan test, tanpa memperhatikan aspek lain dari kode atau fungsionalitas yang tidak relevan pada tahap ini. Jangan tergoda untuk menulis kode yang lebih kompleks dari yang diperlukan hanya untuk membuat test tersebut berhasil. Setelah menulis kode implementasi, pastikan untuk menjalankan semua test yang ada dan memastikan bahwa semuanya berhasil dan berjalan sesuai dengan spesifikasi yang telah ditetapkan. Tahap ini adalah ‘Green’ dalam siklus Red, Green, Refactor. Hasil perubahan dapat di-commit dengan memberikan label [Green]. Hal ini menandakan bahwa semua testing codes telah berhasil dan kode dapat dipublikasi. - Finally, Refactor the Code
Setelah berhasil menguji kode dan memastikan bahwa semua test telah lulus, langkah berikutnya adalah melakukan refactoring. Refactoring adalah proses memperbaiki struktur kode yang sudah ada agar lebih efisien, mudah dibaca, dan mudah dipelihara, tanpa mengubah requirements dari kode tersebut. Refactoring dapat melibatkan proses seperti menyederhanakan algoritma yang kompleks ataupun mengekstraksi kode yang sering muncul menjadi fungsi yang dapat digunakan kembali. Setelah selesai melakukan refactoring, pastikan untuk menjalankan semua test lagi untuk memastikan bahwa perubahan yang Anda buat tidak memengaruhi fungsionalitas dari kode. Tahap ini adalah ‘Refactor’ dalam siklus Red, Green, Refactor dan di-commit dengan memberikan label [Refactor].
Kelebihan & Kekurangan
Seperti halnya dengan setiap metodologi, Test-Driven Development datang dengan serangkaian kelebihan dan kekurangan yang dapat mempengaruhi keputusan tim pengembang dalam mengadopsinya, sebagai berikut :
Kelebihan
- Dokumentasi terintegrasi langsung dengan kode, mempermudah akses dan pemahaman terhadap dokumentasi [1].
- Memberikan definisi kualitas fungsional yang tidak ambigu; jika test berhasil, kode dianggap berkualitas [1].
- Meningkatkan kualitas kode melalui praktik dan siklus struktur dan desain yang digunakan dalam pengembangan [1, 2, 3].
- Mendorong pemahaman struktur dan desain sebelum pengkodean, yang juga dapat berfungsi sebagai manajemen kebutuhan dan desain [3].
Kekurangan
- Adopsi TDD memerlukan waktu tambahan untuk perencanaan dan penulisan test sebelum pengembangan sehingga berpotensial memperlambat pengiriman fitur. [4]
- TDD tidak menjamin identifikasi semua bug, terutama jika ada kesalahpahaman dalam implementasi dan tujuan test. [2, 4]
- Pemeliharaan dan pembaruan test menjadi lebih menuntut setiap kali kebutuhan berubah, memperberat proses pengembangan. [3, 4]
Update : Membuat Test dengan Lengkap dan Bersih
Setelah kita memahami apa itu TDD, selanjutnya, kita harus mengetahui bagaimana cara membuat test yang lengkap, di mana test harus mencakup success, failed, dan corner case. Apa ketiganya itu?
1. Success Case
Seperti namanya, test ini merujuk kepada output dengan hasil yang diharapkan atau requirements yang telah ditetapkan. Contoh implementasinya adalah pada fungsi menghapus objek yaitu jadwal dengan fungsi sebagai berikut :
public async delete(id: string) {
const schedule = await this.prisma.schedule.findUnique({ where: { id } });
if (!schedule) {
return this.responseUtil.response({
responseCode: 404,
responseMessage: `Schedule with ID ${id} not found`,
responseStatus: 'FAILED',
});
}
await this.prisma.schedule.delete({ where: { id } });
return this.responseUtil.response({
responseMessage: 'Data deleted successfully',
});
}Di sini, kita perlu menguji apakah fungsi delete tersebut berhasil sesuai dengan ekspektasi yaitu menghapus objek yang diberikan sesuai dengan id dan mengirimkan respons sukses. Berikut test untuk success case tersebut :
it('should create a schedule', async () => {
const scheduleData: CreateScheduleInput = {
userId: '81c41b32-7a45-4b64-a98e-928f16fc26d7',
hour: 10,
minute: 30,
};
const expected = { ...scheduleData, id: expect.any(String) };
mockFn.mockReturnValue(expected);
const createdSchedule = await service.create(scheduleData);
expect(createdSchedule).toEqual(expected);
expect(prismaService.schedule.create).toHaveBeenCalledTimes(1);
expect(prismaService.schedule.create).toHaveBeenCalledWith({
data: scheduleData,
});
});2. Failed Case
Case ini mengacu pada test dengan situasi di mana sistem tidak berjalan sesuai dengan requirements. Dengan fungsi yang masih sama dengan success case, kita perlu membuat test untuk failed case di mana id yang diberikan tidak terdaftar pada jadwal. Berikut implementasinya :
it('should return an error when trying to delete a schedule that does not exist', async () => {
const nonExistentId = 'non-existent-id';
mockFn.mockResolvedValueOnce(null);
const deleteResult = await service.delete(nonExistentId);
expect(deleteResult).toEqual(
expect.objectContaining({
responseCode: 404,
responseMessage: `Schedule with ID ${nonExistentId} not found`,
responseStatus: 'FAILED',
}),
);
expect(prismaService.schedule.delete).not.toHaveBeenCalled();
});3. Corner Case
Corner case atau biasa disebut edge case mengacu pada test dengan situasi yang tidak biasa / ekstrem/ atau paling ujung (di titik maksimum atau minimum). Corner case penting untuk diperhatikan karena sistem yang baik harus robust dan dapat diandalkan dalam berbagai kondisi. Contohnya adalah fungsi untuk menghitung akar kuadrat dari sebuah angka. Corner case di sini adalah user bisa jadi mengirimkan nilai negatif yang di mana secara matematis, nilai negatif tidak bisa memiliki akar kuadrat dalam bilangan real.
function calculateSquareRoot(number: number): number | null {
if (number < 0) {
console.log("Input tidak valid");
return null;
}
return Math.sqrt(number);
}Selanjutkan, bagaimana cara membuat kode test yang bersih?. Bersih atau Clean Test mengacu kepada prinsip F.I.R.S.T. atau singkatan dari Fast, Independent, Repeatable, Self-Validating, dan Timely.
1. Fast : Test harus cepat berjalan untuk mempercepat siklus pengembangan dan meningkatkan produktifitas developer.
2. Independent : Setiap test harus independen dari test lainnya di mana eksekusi satu test tidak bergantung dengan kondisi dari test lain. Dengan begitu, test dapat lebih mudah dipahami oleh developer dan lebih mudah dijaga karena jika test gagal, kita dapat tahu di mana sumber masalahnya.
3. Repeatable : Test dapat diulang sehingga, kapanpun dan dimanapun, perilaku dari test tersebut dapat berjalan dengan hasil yang sama sehingga test konsisten dan dapat diandalkan.
4. Self-Validating : Test harus menjalankan operasi dan dapat mengecek hasilnya pada programnya sendiri, sehingga kita tidak perlu melakukan operasi atau pengecekan secara manual. Hasil dari test juga jelas yaitu “success” atau “failed”.
5. Timely : Test harus ditulis pada waktu yang tepat yaitu saat kode produksi sedang diuji.
Implementasi TDD dalam Flutter
Pada proyek ini, kita akan membuat dialog modal “Game Over” dengan requirements yaitu modal dapat memberikan pemain feedback langsung tentang performa mereka di akhir sesi permainan. Modal ini akan menampilkan skor permainan saat ini, skor tertinggi yang telah dicapai, dan menawarkan opsi untuk bermain lagi atau kembali ke menu utama.
Step 1 — Mempersiapkan Lingkungan Flutter dan Struktur File
Pastikan Anda telah menginstal Flutter di komputer Anda. Anda bisa mengikuti panduan instalasi resmi di situs Flutter.
Kemudian, buka terminal atau command prompt, dan jalankan perintah berikut untuk membuat proyek Flutter baru:
flutter create new_project
cd new_projectKemudian, tambahkan paket test ke bagian dev_dependencies di file pubspec.yaml Anda untuk menulis dan menjalankan test.
flutter pub add dev:testSelanjutnya, kita dapat membuat struktur proyek yang lebih efektif sebagai berikut :
new_project
├── lib
│ ├── data
│ ├── domain
│ └── presentation
│ └── widgets
│ └── game_over_modal.dart
└── test
├── data
├── domain
└── presentation
└── widgets
└── game_over_modal_test.dartStep 2 — Menulis kode testing
Sebelum menulis kode implementasi, tulis test yang menggambarkan requirements yang diharapkan dari fitur yang ingin dibuat. Dalam Flutter, terdapat tiga macam teting yaitu bisa berupa unit test — untuk satu logika bisnis atau fungsi , widget test — untuk antarmuka pengguna dan interaksi widget, atau integration test — untuk alur kerja aplikasi secara keseluruhan, tergantung pada aspek aplikasi yang Anda kerjakan.
Saya akan membuat kode testing untuk modal “Game Over” sebagai berikut :
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
group('Game Over Modal Widget Tests', () {
late Widget modal;
bool mainLagiPressed = false;
bool menuPressed = false;
int currentScore = 999;
int highestScore = 9999;
setUp(() {
mainLagiPressed = false;
menuPressed = false;
modal = MaterialApp(
home: Scaffold(
body: GameOverModal(
currentScore: currentScore,
highestScore: highestScore,
onMainLagiPressed: () => mainLagiPressed = true,
onMenuPressed: () => menuPressed = true,
),
),
);
});
testWidgets('Verify current score and high score are displayed correctly',
(WidgetTester tester) async {
await tester.pumpWidget(modal);
expect(find.text('$currentScore'), findsOneWidget,
reason: 'Current score should be displayed correctly');
expect(find.text('$highestScore'), findsOneWidget,
reason: 'High score should be displayed correctly');
});
testWidgets('Verify "Main Lagi" button triggers callback',
(WidgetTester tester) async {
await tester.pumpWidget(modal);
final mainLagiButton = find.text('Main Lagi');
await tester.tap(mainLagiButton);
await tester.pump();
expect(mainLagiPressed, isTrue);
});
testWidgets('Verify "Menu" button triggers callback',
(WidgetTester tester) async {
await tester.pumpWidget(modal);
final menuButton = find.text('Menu');
await tester.tap(menuButton);
await tester.pump();
expect(menuPressed, isTrue);
});
});
}
Untuk menjalankan semua test yang ada dalam proyek Flutter Anda, gunakan perintah:
flutter testPada tahap ini, test tersebut akan gagal karena belum ada kode implementasi yang mendukung requirements yang diharapkan.
Step 3—Implementasi kode
Setelah merancang kode testing, lanjutkan dengan mengembangkan implementasi kode yang diperlukan untuk memenuhi kriteria requirements test tersebut.
import 'package:flutter/material.dart';
class GameOverModal extends StatelessWidget {
final int currentScore;
final int highestScore;
final VoidCallback onMainLagiPressed;
final VoidCallback onMenuPressed;
const GameOverModal({
Key? key,
required this.currentScore,
required this.highestScore,
required this.onMainLagiPressed,
required this.onMenuPressed,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: const [
BoxShadow(
color: Color(0xFFD3D8FF),
blurRadius: 10,
offset: Offset(0, 5),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding:
const EdgeInsets.symmetric(horizontal: 30.0, vertical: 5.0),
decoration: ShapeDecoration(
color: const Color(0xFFDD67ED),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
child: const Text(
"Yuk Main Lagi!",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w500,
),
),
),
const SizedBox(height: 10),
const Text(
'Skor Terkini',
style: TextStyle(
color: Color(0xFF5FCFFF),
fontSize: 20,
fontWeight: FontWeight.w500,
height: 0,
),
),
const SizedBox(height: 5),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 50.0, vertical: 5.0),
decoration: ShapeDecoration(
color: const Color(0xFFC2FDFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
child: Text(
'$currentScore',
style: const TextStyle(
color: Color(0xFF228AED),
fontSize: 24,
fontWeight: FontWeight.w500,
height: 1,
),
),
),
const SizedBox(height: 5),
const Text(
'Skor Tertinggi',
style: TextStyle(
color: Color(0xFF5FCFFF),
fontSize: 20,
fontWeight: FontWeight.w500,
height: 0,
),
),
const SizedBox(height: 5),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 50.0, vertical: 5.0),
decoration: ShapeDecoration(
color: const Color(0xFFC2FDFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
child: Text(
'$highestScore',
style: const TextStyle(
color: Color(0xFF228AED),
fontSize: 24,
fontWeight: FontWeight.w500,
height: 1,
),
),
),
const SizedBox(height: 15),
InkWell(
onTap: onMainLagiPressed,
child: SizedBox(
height: 45,
child: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: 40,
width: 150,
decoration: const BoxDecoration(
color: Color(0xFFFFB8B8),
borderRadius: BorderRadius.all(
Radius.circular(33),
),
),
),
),
Container(
height: 40,
width: 150,
decoration: const BoxDecoration(
color: Color(0xFFFF8080),
borderRadius: BorderRadius.all(
Radius.circular(33),
),
),
child: const Center(
child: Text(
'Main Lagi',
style: TextStyle(
color: Colors.white,
fontSize: 22,
),
),
),
),
],
),
),
),
const SizedBox(height: 5),
InkWell(
onTap: onMenuPressed,
child: SizedBox(
height: 45,
child: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: 40,
width: 150,
decoration: const BoxDecoration(
color: Color(0xFFFF8080),
borderRadius: BorderRadius.all(
Radius.circular(33),
),
),
),
),
Container(
height: 40,
width: 150,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(33),
),
border: Border.all(
width: 2,
color: const Color(0xFFFF8080),
),
),
child: const Center(
child: Text(
'Menu',
style: TextStyle(
color: Color(0xFFFF8080),
fontSize: 22,
),
),
),
),
],
),
),
),
],
),
),
),
);
}
}
Tampilan akhir yang didapat dari implementasi kode modal adalah sebagai berikut :
Step 4— Refactoring
Kemudian, saya melakukan refactoring kode untuk meningkatkan kualitas dan kemudahan readability. Pada kasus ini, saya mengambil kode yang sering muncul dan mengekstraknya menjadi fungsi yang dapat digunakan kembali. Setelah itu, ulangi test untuk memastikan bahwa hasil kode dari refactoring berjalan dengan baik.
import 'package:flutter/material.dart';
class GameOverModal extends StatelessWidget {
final int currentScore;
final int highestScore;
final VoidCallback onMainLagiPressed;
final VoidCallback onMenuPressed;
const GameOverModal({
Key? key,
required this.currentScore,
required this.highestScore,
required this.onMainLagiPressed,
required this.onMenuPressed,
}) : super(key: key);
Widget _buildScoreContainer(String title, int score, BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
title,
style: const TextStyle(
color: Color(0xFF5FCFFF),
fontSize: 20,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 5),
Container(
padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 5.0),
decoration: ShapeDecoration(
color: const Color(0xFFC2FDFF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
child: Text(
'$score',
style: const TextStyle(
color: Color(0xFF228AED),
fontSize: 24,
fontWeight: FontWeight.w500,
),
),
),
],
);
}
Widget _buildActionButton(String text, Color color, Color borderColor,
Color textColor, VoidCallback onTap) {
return InkWell(
onTap: onTap,
child: SizedBox(
height: 45,
child: Stack(
children: [
Positioned(
bottom: 0,
child: Container(
height: 40,
width: 150,
decoration: BoxDecoration(
color: borderColor,
borderRadius: const BorderRadius.all(
Radius.circular(33),
),
),
),
),
Container(
height: 40,
width: 150,
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.all(
Radius.circular(33),
),
border: Border.all(
width: 2,
color: const Color(0xFFFF8080),
),
),
child: Center(
child: Text(
text,
style: TextStyle(
color: textColor,
fontSize: 22,
),
),
),
),
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Center(
child: Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(30.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: const [
BoxShadow(
color: Color(0xFFD3D8FF),
blurRadius: 10,
offset: Offset(0, 5),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 30.0, vertical: 5.0),
decoration: ShapeDecoration(
color: const Color(0xFFDD67ED),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
child: const Text(
"Yuk Main Lagi!",
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w500,
),
),
),
const SizedBox(height: 10),
_buildScoreContainer('Skor Terkini', currentScore, context),
_buildScoreContainer('Skor Tertinggi', highestScore, context),
const SizedBox(height: 15),
_buildActionButton('Main Lagi', const Color(0xFFFF8080),
const Color(0xFFFFB8B8), Colors.white, onMainLagiPressed),
const SizedBox(height: 5),
_buildActionButton(
'Menu',
Colors.white,
const Color(0xFFFF8080),
const Color(0xFFFF8080),
onMenuPressed),
],
),
),
),
),
);
}
}
Step 5— Melihat Laporan Code Coverage
Jika Anda ingin melihat laporan code coverage bersamaan dengan menjalankan test, gunakan perintah:
flutter test --coverageUntuk mempermudah melihat laporan cakupan kode, Anda bisa menggunakan paket test_cov_consoledengan perintah :
flutter pub global activate test_cov_console
flutter pub global run test_cov_console
Dapat dilihat bahwa kode untuk modal “Game Over” sudah ter-coverage 100%. Pastikan bahwa code coverage Anda mencapai 100%, yang menunjukkan bahwa semua bagian kode telah diuji dengan baik dan TDD telah diterapkan secara efektif.
Step 6 (Lebih Advanced) — Static Code Analysis dengan SonarQube
Setelah melakukan commit terakhir, kita dapat melihat hasil dari SonarQube. Hal ini penting untuk mengecek apakah kode kita terbebas dari issues seperti bugs, vulnerabilites, ataupun code smells. Dapat dilihat pada SonarQube, code coverage dari file game_over_modal.dart sudah 100% dan tanpa ada bugs, vulnerability, code smells, maupun security hotspots, sehingga merupakan indikasi bahwa code kita memiliki kualitas yang baik.
Kesimpulan
Test-Driven Development (TDD) pada Flutter adalah praktik yang membantu memastikan kualitas dari perangkat lunak. Dengan TDD, pengembang menulis test terlebih dahulu sebelum mengimplementasikan fitur atau perubahan kode. Hal ini memastikan bahwa setiap bagian aplikasi diuji secara menyeluruh dan memenuhi kebutuhan fungsional. Dengan kerangka pengujian bawaan, Flutter dapat mendukung praktik TDD secara efektif, sehingga dapat meningkatkan produktivitas pengembangan secara keseluruhan.
Referensi
[1] Canfora, G., Cimitile, A., Garcia, F., Piattini, M., & Visaggio, C. A. (2006). Evaluating advantages of test driven development. Proceedings of the 2006 ACM/IEEE International Symposium on Empirical Software Engineering. https://doi.org/10.1145/1159733.1159788
[2] Ekman, F., Johannesson, S., Peber, E., & Sandberg, C. (n.d.). Test-Driven Development: Drawbacks, Benefits, Industrial Usage and Complementary Methods. Faculty of Engineering at Lund University. https://fileadmin.cs.lth.se/cs/Education/ETSN20/reports/GroupB.pdf
[3] Aguilar, R.P. (2016). Using test-driven development to improve software development practices. https://api.semanticscholar.org/CorpusID:113836263
[4] GfG. (2020). Advantages and disadvantages of Test Driven Development (TDD). GeeksforGeeks. https://www.geeksforgeeks.org/advantages-and-disadvantages-of-test-driven-development-tdd/
[5] Rohman, A. (2022, February 7). Tingkatkan kualitas aplikasi flutter Dengan Menerapkan proses test-driven development (TDD) dan Mengadopsi Clean Architecture. Medium. https://aditya-rohman.medium.com/mengembangkan-aplikasi-flutter-dengan-proses-test-driven-development-tdd-dan-mengadopsi-clean-29d29bb0702b
[6] https://www.code4it.dev/cleancodetips/f-i-r-s-t-unit-tests/