Flutter ‘da Widget Testi

Kubra Selcuk
Huawei Developers - Türkiye
4 min readFeb 17, 2023
Test Computer GIF — Find & Share on GIPHY

Herkese selam! bugün Flutter’da Widget Test Dokümantasyonu öğreniyoruz. Test belgeleri, Yazılımın test edilmesinden önce veya test sırasında geliştirilmesi gereken yapıların belgelenmesini içerir. Yazılım testi için belgeler, gereken test çabasının, test kapsamının, gereksinim izleme/izlemenin vb. tahmin edilmesine yardımcı olur.

Uygulamanız büyüdükçe daha karmaşık hale gelir, testlerin iyi bir şekilde düzenlenmesi zamandan tasarruf etmenize yardımcı olabilir, çünkü testler sıradan değişikliklerle ortaya çıkabilecek yeni hatalar keşfedebilir.

Uygulamamızın hatasız olması gerektiğinden uygulamamız için test senaryoları oluşturuyoruz ve çalışmamızı müşteri yayınlamadan önce uygulama gerekliliklerini yerine getiriyoruz. Test, bir uygulamanın gereksinimleri karşılayıp karşılamadığına veya doğru bir şekilde çalışıp çalışmadığına karar vereceği bir dizi koşuldur. Test senaryoları geliştirmeye giden yol, benzer şekilde, bir uygulamanın gereksinimlerindeki veya tasarımındaki sorunları keşfetmeye yardımcı olabilir.

Testler özellik ve hata düzeltme hızınızı korurken uygulamanızın siz yayınlamadan önce doğru şekilde çalışmasını garanti etmeye yardımcı olur.

Flutter testi üç kategoriye ayrılır:

Unit testi
Widget Testi
Entegrasyon testi

Bu yazıda sadece Widget testini ele alacağız.

Flutter uygulamamız için bir widget testi demosu uygulayacağız.

Widget Testi:
Widget testi, başka bir şekilde bileşen testi olarak adlandırılır. Adından da anlaşılacağı gibi, tek bir parçacığı test etmek için kullanılır ve bu testin amacı, widgetın çalışıp çalışmadığını ve şekile uygun görünüp görünmediğini kontrol etmektir. Widget testinin amacı, widget’ın kullanıcı arayüzünün beklendiği gibi göründüğünü ve etkileşimde bulunduğunu doğrulamaktır.

Aynı şekilde WidgetTester yardımcı programını test ederken çeşitli şeyler için kullanabilirsiniz, örneğin bir Text widget’ı Text içermiyorsa, değerleri onaylamak , test edilen Widget, kullanıcı eylemlerini ve olaylarını alıp bunlara yanıt verebilmeli, düzen gerçekleştirebilmeli ve alt widget’ları başlatabilmelidir. Bu nedenle bir widget testi, bir birim testinden daha kapsamlıdır. Bununla birlikte, bir birim testi gibi, bir widget testinin ortamı, tam gelişmiş bir UI sisteminden çok daha basit bir uygulama ile değiştirilir.

Implementation:

pubspec — yaml dosyasında , dev_dependency kısmınaflutter_test ekliyelim.

dev_dependencies:
flutter_test:
sdk: flutter

Sıradakı adımımız test için bir widget oluşturmak

2. Uygulama içerısinde, title ve message içeren bir widget oluşturalım.

3. Bir test tanımlamak için flutter_test paketi tarafından sağlanan testWidgets() işlevini kullanalim. testWidgets işlevi, bir widget testi tanımlamanıza izin verir ve birlikte çalışmak için bir WidgetTester oluşturur. Kullanacağımız tüm fonksiyonları bu fonksiyon içerisine yazıyoruz. İlk parametresi test case’inin ismi, ikincisi test ettiğimiz fonksiyon.

syntax:

testWidgets(description, callback)

testWidgets(Some Description, (WidgetTester tester) async {});

uygulamayla etkileşim kurmak için kullanılan WidgetTester adlı bir argüman alır.

testWidget fonksiyonumuza parametre olarak gelen bu yapı, test environment’ımıza Widget eklememize olanak sağlıyor. Sıfırdan bir widget yaratabildiğiniz gibi kendi widget’larınızı da ekleyebiliyorsunuz. Widget eklemek için pump fonksiyonlarını kullanmanız gerekiyor.

Bu test, MyWidget’ın belirli bir title ve mesajı görüntülediğini doğrular. Buna göre başlıklandırılmıştır ve bir sonraki bölümde doldurulacaktır.

Yapmamız gereken ilk şey, hangi widget’ların test edileceğini söylemektir.

Test Dosyası:

4. WidgetTester tarafından sağlanan pumpWidget() yöntemini kullanarak MyWidget’ı test ortamında oluşturun. pumpWidget yöntemi, sağlanan widget’ı oluşturur ve senkron işler bu metod ile widgetimize erişebiliriz . Stateful Widget eklerken kullanışlı bir fonksiyondur kendileri fakat setState ile widget’ı tekrar rebuild ederken bunu kullanamazsınız. Bir test ortamında, verilen widget’ın ilk kullanıcı arayüzünü oluşturur.

pump() animasyonları ve renderları tetikler. Widget’ın yeniden build’ini sağlayan fonksiyondur . Parametre olarak verdiğiniz süre rebuild ederken geçen frame süresini belirtir.

Başlık olarak “T” ve mesaj olarak “M” görüntüleyen bir MyWidget örneği oluşturun.

5. Test ortamındaki bir widget ile, bir Finder kullanarak title ve mesaj widget’ları için widget ağacında arama yapar. Bu, widget’ların doğru şekilde görüntülendiğinin doğrulanmasına izin verir.

Bu amaçla, Finder oluşturmak için flutter_test paketi tarafından sağlanan üst düzey find() yöntemini Text widget’ları aradığınızı bildiğiniz için find.text() yöntemini kullanın.

Son olarak, flutter_test tarafından sağlanan Matcher sabitlerini kullanarak title ve Text widget’larının ekranda göründüğünü doğrulayın. Matcher sınıfları, test paketinin temel bir parçasıdır ve belirli bir değerin beklentileri karşıladığını doğrulamak için ortak bir yol sağlar.

Widget’ların ekranda tam olarak bir kez göründüğünden emin olun. Bu amaçla, findOneWidget Matcher’ı kullanılır.

Doğrulama için expect kütüphanesi kullanbiliriz:

expect(find.byText(”test”), findsOneWidget);

Bir veya daha fazla belirli widgetı arar ve onaylar. Bir eylem gerçekleştiren , animasyonu ve renderı tetikleyen WidgetTester’a iletirsiniz. Son olarak, Expect sınıfıyla sonucu doğrularsınız.

Projeyi widget_test.dart ta debug etmeyi unutmayın

Huawei’de Open Source projesi olan Flutter Favorites Package üzerinden örnek gösterelim

Key belirli widgetı testlerde bulabileceğimiz anlamına gelmektedir.

Widget Testinde widget’ı bulmak ve yerleştirmek çok önemlidir.
flutter test taketi, widget’ları bulmamıza izin veren üst düzey bulma yöntemleri sağlar.

Widget’ları bulmanın pek çok yolu olsa da, en yaygın yöntem, widget’ları byKey() kullanarak bulmaktır.

home_screen dosyasında yer alan ListView’ün doğru sayıda öğe içerdiğini ve doğru rengin kullanıldığını doğrulayalım.

Finding widgets

Widget’ları bulmak için Finder sınıfını kullanırsınız. Tam olarak aradığınızı bulmak için birçok yöntemi vardır.

find.byType : Widget’i type’ına göre bulmanızı sağlar.
find.byKey : Widget’lara gelen key parametresini kullanarak widget’larımızı bulmamızı sağlar.
find.text : Text widget’ları kolayca bulmamızı sağlar.

Sonuçlar

Flutter ile Widget Testine küçük bir girişti.

Uygulamanızın doğru davranışını doğrulayan widget testleri yazabilirsiniz.

Okuduğunuz için teşekkürler. Bir sonraki yazıda görüşmek üzere.

Bu yazı size yardımcı oluyorsa Alkış bırabilirsiniz👏

Kaynak

--

--

Kubra Selcuk
Huawei Developers - Türkiye

Flutter Developer | Robotic Coding Teacher | Software Developer | Musician