AngularJs yapısı gereği unit test’e uygun bir yapısı vardır. Bu uygunluğun nedeni de “Loose coupling” ve “Dependency Injection” felsefelerini benimsemiş olması. Yani içerdiği elemanların birbirine bağımlılığı yok.
Zaten angularjs ile test işlerine girmişseniz bu konulara aşinasınızdır daha fazla uzatmadan nasıl bir yol izleyeceğiz onu anlatayım. Tabii bazı varsayımlarım var. Birincisi modern bir web aplikasyonu yazdığınızı yani npm,bower gibi güçlü paket yöneticileri, grunt gibi bir task işleyicisi, karma gibi de bir test koşucunuz oldugunu ve ilk paragrafta bahsettiğim gibi DI bir mimariniz varsa (zaten olmasa yapmanız zor olacaktır işin içinden çıkamayacağınız bir durum alacaktır: aynen böyle olursunuz)
Malzemeler
- Karma
- Phantomjs (headless browser)
- Cobertura (coverage için)
- Bower
- Npm
- Jasmine
Tarif
Öncelikle daha önce de dediğim gibi bazı beklentilerim var. Projenizde npm ve bower paket yöneticisi olmalı. Bunlar projenizde eksik ise özellikle npm’i apt-get install … komutu ile kolayca kurabiliriz. Dolayısıyla elimizde bir package.json dosyası yani projemize yüklediğimiz paketler olmalı. Örnek olarak şöyle birşey:
Tabii test için ve lokalde kullanılacak paketler -dev parameteresiyle kurulmuştur. Buradaki bazı kütüphaneler olur da ihtiyacınız olur diye var (Ör: junit reporter, chrome-launcer vb).
İkinci paket yöneticimiz (yani bower) ile angular, bootstrap gibi kütüphaneleri kuruyoruz. Ekstra olarak yine bir development dependency olan angular-mocks kütüphanesini indiriyoruz. Bu bizim angular objelerini mock’lamak için yani sanal muadilini yaratmak için kullanacağımız kütüphane. Onu da bower install -dev … şeklinde kurabildiğinizi düşünüyorum.
Şimdi geldik karma’yı ayarlamaya. Anlatmaya direk dosyanın üzerinden devam ediyorum:
zaten gördüğünüz üzere bu karma.conf.js dosyası bir node js modülü. İçinde de belirli ayarlar var.
Detaylı bilgiye buradan ulaşabilirsiniz: https://karma-runner.github.io/0.13/config/configuration-file.html
Şimdi basit bir test yazmaya hazırız fakat öncelikle örnek bir kodumuz olmalı. Biz öncelikle en basitinden başlayalım: controller testi
loginController.js adında bir kontrolumuz olsun:
Beginner’lar için açıklıyayım module_name adlı modulumuzun altında loginController adlı bir controller’ımız var ve $scope’a bağımlı. İçinde closeAlert diye bir method var. Diğer satırlarda bazı değişkenler var.
Şimdi jasmine framework ile test yazacağız. Ama ondan önce isterseniz şu linke bir bakın: http://jasmine.github.io/2.4/introduction.html
Genel bir jasmine test template’i şu şekildedir:
Biz de bu yapı da birşey yapacağız ama işin içinde bir trick var. O da modülü mock’lamak olacaktır ve controller’dan başka bir scope’da yeni bir muadil yaratmak olacaktır. Tabii ki angular-mock kutuphanesini kullanarak. Ondan sonra da testleri yazacağız.
Bundan sonraki anlatımlarda direk çözüme yönelik testler yazacağız. Ör: filter,directive, timeout func. vb.
Esen kalın.