Flutter Widget Test
Herkese Merhaba,
Bu yazımızda arayüz tasarımı için olmazsa olmaz olan widget’lar için nasıl test yazabileceğimizden ve flutter için test işlemine yönelik tasarlanan modüllerden bahsedeceğiz.
Başlamadan önce genel olarak, “Test nedir, Neden test yazmaya ihtiyaç duyarız” gibi sorulara yanıtlar bulmaya çalışalım.
Test nedir? Neden test yazarız?
Yazılım testi için bir çok açıklama bulunsa da, Kısaca test nedir sorusunda, “Yazılımın, istenilen şekilde çalıştığını teyit etmek için belirli birtakım işemlerden geçme sürecidir.” cevabı verilebilir.
Yazılım, yapısı gereği hatalar barındırabilir. Gerek teknolojinin hafızayı ve süreçleri nasıl yönetildiği, gerek programlama yaparken hesaplayamadığımız durumların bizi hataya götürme olasılığı olabilir. Test, genellikle öngöremediğimiz bir hatayı erkenden tespit etmek amacıyla yazılır
Evet, test hakkında teknik bilgileri edindik. Şimdi bir uygulama geliştirip test edelim.
Uygulamayı oldukça basit düzeyde tutarak yazmaya başlayalım
Test işlemini temel düzeyde tutmak için önplanda “Text”, “RawMaterialButton”, “Image” kullanarak uygulamayı basit şekilde geliştireceğiz.
Uygulamadan beklentimiz butona her basıldığında resmi, sıradaki resim, yazıyı ise ‘şu an X. resim gösteriliyor’ şekilde güncellemek.
“main.dart” dosyası ile başlayalım. öncelikle etkileşimli bir sayfa olduğu için state yöneticisi olarak ‘provider’ paketini kullanıyoruz. Daha temiz bir kod için sayfalarımı ve durumlarımı ayrı dosyalarda programlıyoruz.
Ana sayfamız üzerinde ‘Text’, ‘Image’ ve ‘RawMaterialButton’ öğelerini ortalayacak şekilde bir tasarım gerçekleştiriyoruz.
State yönetimi için bir class açıp, state yönetimi için gerekli değişkenleri ve fonksiyonları tanımlıyoruz.
Uygulama için test yazma zamanı!
Öncelikle bu işlem sadece bir fonksiyonu test etmiyor, görsel arayüz elementlerini test ediyoruz. elemanları konumlandırma, metin girişi sağlama, tıklama ve benzeri işlemleri için dökümantasyona bir göz atmalıyız.
Başlangıç için adım adım ilerleyelim;
- Adım 1: geliştirme bağımlılıklarına ‘flutter_test’ eklemek
Bu işlem genel olarak bir proje oluşturduğunuzda öntanımlı şekilde gerçekleşir. Kontrol etmek için projenizin ana dizinindeki ‘pubspec.yaml’ dosyasına bakabilirsiniz.Eğer ‘flutter_test’ mevcut değilse test işlemi için eklemelisiniz.
dev_dependencies:
flutter_test:
sdk: flutter- Adım 2: Test dosyasını oluşturmak
Uygulama oluşturulurken öntanımlı şekilde oluşturulan test klasörü içerisinde, dosya ismi içinde “test” geçen bir dart dosyası oluşturalım. main fonksiyonunu açalım ve test işlemi için tasarlanan ‘testWidgets’ fonksiyonunu oluşturalım.
Bu fonksiyon iki parametre alır. İlk parametre test açıklamasıdır. ikinci parametre olarak ‘WidgetTester’ tipinde bir arguman alan ve asenkron olan bir fonksiyon alır. Örnek olarak ‘test/widget_test.dart’ dosyasının içeriği şöyle olabilir.
void main() {
testWidgets('Test açıklamam', (WidgetTester t) async {
// Test işlemleri burada yapılmaktadır.
});
}Şimdiye kadar test için hazırlandık, artık kullanıcıyı simüle etme aşamasına geçelim. öncelikle widget ağacını oluşturalım. sonra “her şey yolunda mı?” diye ilk testimizi gerçekleştirelim.
- Adım 3: Test edilmek istenilen widget ağacını ayağa kaldırma
Bu işlem için ‘pumpWidget’ fonksiyonu kullanılır. Fonksiyon, widget olmak üzere sadece bir argüman alır. Bu işlem sonuçlanana kadar beklemesi için satıra ‘await’ anahar kelimesi ile başlamalıyız.
... t.pumpWidget(RootWidget); // yukarıda t olarak tanımlanmasını baz alıyorum....
Not: Test ortamında ‘StatefulWidget’ kullanıyorsanız, setState çağrısı yeniden çizim işlemi yapmaz.Eğer animasyonlar ile çalışıyorsak, dökümantasyonda belirtildiği gibi ‘pump’ fonksiyonunu çağırmalıyız. Bu örnekte animasyon olmadığı için ‘pump’ fonksiyonunu kullanmayacağız.
Not 2: Eğer bu örnekteki gibi resmi ağ üzerinden çekiyorsanız muhtemelen ‘HTTP 400’ hatası alabilirsiniz.Bu hatayı nasıl çözebileceğimizi yazının devamında bulacağız.
- Adım 4: Widget bulma
Artık elimizde hazır bir widget var. bu widget ağacı içerisindeki öğeleri bulmak, onlar üzerinden işlem yapmamızı sağlar. bu öğeleri birkaç farklı fonksiyonla bulabiliriz. Tüm fonksiyonlara buradan erişebilirsiniz. Bu yazıda sadece 2 adet fonksiyonu kullanacağız.
- find.byType(widget_türü): Belirli türe sahip öğeleri bulur.
- find.text(“metin”): metin öğelerini bulur.
- Adım 5: Etkileşimde bulunma
“WidgetTester” kütüphanesine tanımlı olan tap(),drag() ve enterText() fonksiyonları, öğelere tıklamak,metin girişi sağlamak ve öğeleri sürüklemek için kullanılır.
...
t.tap(buton); // tap fonksiyonu arguman olarak verdiğimiz widget'a tıklama işlemi gerçekleştirir
...Artık uygulamamıza belirli talimatlar vererek bir takım işlemler gerçekleşmesini sağladık. işlemler bittikten sonra beklentimizi vermeliyiz. butona bastığında resmin değiştiğini doğrulamalıyız. Bu test için son aşamadır. beklentilerimiz gerçekleşirse uygulamamız testi geçmiş olacaktır.
- Adım 6: Beklentileri belirtme
Beklentilerimizi ‘expect’ fonksiyonu ile belirtiriz. Fonksiyon 2 adet argüman almaktadır. İlk argüman karşılaştırmak istediğimiz değer, ikinci argüman ise eşit olmasını beklediğimiz değer.
...
expect("kontrol edilecek değer", "karşılaştırılacak değer"); // son olarak beklentimizi belirtiyoruz
...Yukarıdaki bilgilerden de faydalanarak bir test yazıp çalıştıralım.
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail_image_network/mocktail_image_network.dart';
import 'package:showimage/states/state_one.dart';
import 'package:showimage/main.dart';void main() {
testWidgets('Network Image Widget Test', (tester) async {
await tester.pumpWidget(MyApp());
expect(find.byType(Image), findsOneWidget);
});
}
Çalışmasını beklerken HTTP 400 hatası aldım.
Bu hatayı çözmek için https://pub.dev/packages/mocktail_image_network paketini kullanabilirsiniz. Testin son halini şöyle şekillendirebiliriz.
Ve… Test sonucu başarılı oldu!
Çalıştırma zamanı! Uygulamayı çalıştırıp istediğimiz yönde çalıştığından emin olalım.
