AngularJS Birim Testi: Karma Jasmine Eğitimi

Angular.JS'nin en parlak özelliklerinden biri Test yapmak bakış açısı. Google'daki geliştiriciler AngularJS'yi geliştirirken testi akıllarında tuttular ve tüm AngularJS çerçevesinin test edilebilir olduğundan emin oldular.

AngularJS'de testler normalde Karma (çerçeve) kullanılarak gerçekleştirilir. Angular JS testi, Karma olmadan gerçekleştirilebilir, ancak Karma çerçevesi, AngularJS kodunu test etmek için o kadar mükemmel bir işlevselliğe sahiptir ki, bu çerçeveyi kullanmak mantıklıdır.

AngularJS'de şunları gerçekleştirebiliriz: Birim Testi denetleyiciler ve yönergeler için ayrı ayrı.
Ayrıca kullanıcı perspektifinden test yapan AngularJS'nin uç testini de gerçekleştirebiliriz.

Karma çerçevesinin tanıtımı ve kurulumu

Karma bir otomasyon aracını test etme Google'daki Angular JS ekibi tarafından oluşturuldu. Karma'yı kullanmanın ilk adımı Karma'yı yüklemektir. Karma, npm (modüllerin yerel bir makineye kolay kurulumu için kullanılan bir paket yöneticisi) aracılığıyla kurulur.

Karma'nın Kurulumu

Karma'nın npm aracılığıyla kurulumu iki adımlı bir işlemle gerçekleştirilir.

) 1 Adım Aşağıdaki satırı komut satırından yürütün

npm install karma karma-chrome-launcher karma-jasmine

burada,

npm, herhangi bir makineye özel modüller yüklemek için kullanılan düğüm paketi yöneticisinin komut satırı yardımcı programıdır.
Kurulum parametresi, npm komut satırı yardımcı programına kurulumun gerekli olduğunu bildirir.
Karma ile çalışmak için gereken komut satırında belirtilen 3 kitaplık vardır.

karma, test amacıyla kullanılacak çekirdek kütüphanedir.
karma-chrome-launcher, karma komutlarının Chrome tarayıcı tarafından tanınmasını sağlayan ayrı bir kitaplıktır.
karma-yasemin – Bu, Karma için bağımlı bir çerçeve olan yasemin yükler.

) 2 Adım Bir sonraki adım karma komut satırı yardımcı programını yüklemektir. Bu, karma satırı komutlarını yürütmek için gereklidir. Karma hattı yardımcı programı, karma ortamını test amacıyla başlatmak için kullanılacaktır.

Komut satırı yardımcı programını yüklemek için komut satırından aşağıdaki satırı çalıştırın

npm install karma-cli

burada,

karma-cli, karma komutlarını komut satırı arayüzüne yazmak için kullanılacak olan karma için komut satırı arayüzünü kurmak için kullanılır.

Karma çerçevesinin yapılandırılması

Bir sonraki adım, komut aracılığıyla yapılabilecek karmayı yapılandırmaktır.

"karma –init"

Yukarıdaki adım yürütüldükten sonra karma, bir karma.conf.js dosyası oluşturacaktır. Dosya muhtemelen aşağıda gösterilen kod parçasına benzeyecektir

files: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

Yukarıdaki yapılandırma dosyaları karma çalışma zamanı motoruna şu şeyleri söyler:

'Uygulama Adınız' – Bu, uygulamanızın adıyla değiştirilecektir.
'Uygulamanızın Adı'/AngularJS/AngularJS.js' – Bu, karma'ya uygulamanızın AngularJS'deki çekirdek modüllere bağlı olduğunu söyler
'Uygulama Adınız'/AngularJS-mocks/AngularJS-mocks.js' – Bu, karma'ya Angular.JS-mocks.js dosyasından AngularJS için Birim Testi işlevini kullanmasını söyler.
Ana uygulama veya iş mantığı dosyalarının tümü uygulamanızın lib klasöründe mevcuttur.
Testler klasörü tüm birim testlerini içerecektir.

Karmanın çalışıp çalışmadığını kontrol etmek için Sample.js adında bir dosya oluşturun, aşağıdaki kodu koyun ve test dizinine yerleştirin.

describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

Yukarıdaki kodun şu yönleri vardır

Açıklama fonksiyonu testin açıklamasını vermek için kullanılır. Bizim durumumuzda testimize 'Örnek test' açıklamasını veriyoruz.
Teste isim vermek için 'it' fonksiyonu kullanılır. Bizim durumumuzda testimizin adını 'Koşul doğrudur' olarak veriyoruz. Testin isminin anlamlı olması gerekmektedir.
'Beklemek' ve 'olmak' anahtar kelimelerinin birleşimi, test sonucunun beklenen ve gerçek değerinin ne olduğunu belirtir. Gerçek ve beklenen değer aynı ise test başarılı olacak, aksi halde başarısız olacaktır.

Komut isteminde aşağıdaki satırı çalıştırdığınızda yukarıdaki test dosyası çalıştırılacaktır

KARMA start

Aşağıdaki çıktı IDE'den alınmıştır Webstorm yukarıdaki adımların gerçekleştirildiği yer.

Çıktı Karma Explorer'da gelir Webstorm. Bu pencere karma çerçevesinde tanımlanan tüm testlerin yürütülmesini gösterir.
Burada yürütülen testin açıklamasının “Örnek test” olarak gösterildiğini görebilirsiniz.
Daha sonra “Koşul doğrudur” adındaki testin kendisinin yürütüldüğünü görebilirsiniz.
Tüm testlerin yanında, tüm testlerin geçtiğini simgeleyen yeşil "Tamam" simgesinin bulunduğunu unutmayın.

AngularJS Denetleyicilerini Test Etme

Karma test çerçevesi aynı zamanda Denetleyicileri uçtan uca test etme işlevine de sahiptir. Buna Denetleyiciler içinde kullanılan $scope nesnesinin test edilmesi de dahildir.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım.

Örneğimizde,

Öncelikle bir kontrolör tanımlamamız gerekiyor. Bu kontrolör aşağıda belirtilen adımları gerçekleştirecektir

Bir kimlik değişkeni oluşturun ve ona 5 değerini atayın.
Kimlik değişkenini $scope nesnesine atayın.

Testimiz bu denetleyicinin varlığını test edecek ve ayrıca $scope nesnesinin kimlik değişkeninin 5'e ayarlanıp ayarlanmadığını test edecektir.

Öncelikle aşağıdaki ön koşulun mevcut olduğundan emin olmamız gerekiyor

Angular.JS-mocks kütüphanesini npm aracılığıyla kurun. Bu, komut isteminde aşağıdaki satırı çalıştırarak yapılabilir.

npm install Angular JS-mocks

Sonraki adım, teste doğru dosyaların dahil edildiğinden emin olmak için karma.conf.js dosyasını değiştirmektir. Aşağıdaki bölüm sadece karma.conf.js dosyasının değiştirilmesi gereken dosya kısmını göstermektedir

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

'files' parametresi temel olarak Karma'ya testlerin yürütülmesi için gerekli olan tüm dosyaları bildirir.
AngularJS birim testlerini çalıştırmak için AngularJS.js ve AngularJS-mocks.js dosyası gereklidir
İndex.js dosyası denetleyiciye ait kodumuzu içerecektir
Test klasörü tüm AngularJS testlerimizi içerecektir

Aşağıda uygulamamızın test klasöründe Index.js dosyası olarak saklanacak olan Angular.JS kodumuz bulunmaktadır.

Aşağıdaki kod sadece şu şeyleri yapar

Bir oluşturma AngularJS modülü sampleApp denir
AngularJSController adında bir denetleyici oluşturun
ID adında bir değişken oluşturun, ona 5 değerini verin ve onu $scope nesnesine atayın

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

Yukarıdaki kod başarıyla yürütüldüğünde, bir sonraki adım bir oluşturmak olacaktır. Test Durumu Kodun doğru şekilde yazıldığından ve yürütüldüğünden emin olmak için.

Testimizin kodu aşağıdaki gibi olacaktır.

Kod, test klasörüne yerleştirilecek ControllerTest.js adlı ayrı bir dosyada olacak. Aşağıdaki kod yalnızca şu temel şeyleri yapar

beforeEach işlevi – Bu işlev, test çalıştırmasından önce 'sampleApp' adlı AngularJS.JS modülümüzü yüklemek için kullanılır. Bunun index.js dosyasındaki modülün adı olduğunu unutmayın.
$controller nesnesi index.js dosyamızda tanımlı olan “Angular JSController” denetleyicisi için maket nesnesi olarak oluşturulmuştur. Herhangi bir Birim Testinde sahte nesne, aslında test için kullanılacak olan yapay bir nesneyi temsil eder. Bu sahte nesne aslında denetleyicimizin davranışını simüle edecektir.
beforeEach(inject(function(_$controller_)) – Bu, gerçek denetleyici gibi davranması için testimize sahte nesneyi enjekte etmek için kullanılır.
var $kapsam = {}; Bu, $scope nesnesi için oluşturulan sahte bir nesnedir.
var denetleyici = $kontrolör('AngularJSController', { $kapsam: $kapsam }); – Burada 'Angular.JSController' isimli bir kontrolcünün varlığını kontrol ediyoruz. Burada ayrıca Index.js dosyasındaki denetleyicimizde bulunan $scope nesnemizden test dosyamızdaki $scope nesnesine kadar tüm değişkenleri atıyoruz.
Son olarak $scope.ID değerini 5 ile karşılaştırıyoruz.

describe('AngularJSController', function() {
    beforeEach(module('sampleApp'));

    var $controller;

    beforeEach(inject(function(_$controller_){
              $controller = _$controller_;
    }));

    describe('$scope.ID', function() {
        it('Check the scope object', function() {
            var $scope = {};
            var controller = $controller('AngularJSController', { $scope: $scope });
            expect($scope.ID).toEqual(5);
        });
    });
});

Yukarıdaki test karma tarayıcısında çalışacak ve önceki konuda gösterilenle aynı başarılı sonucu verecektir.

AngularJS Direktiflerini Test Etme

Karma test çerçevesi ayrıca özel yönergeleri test etme işlevine de sahiptir. Bu, özel yönergelerde kullanılan şablon URL'lerini içerir.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım.

Örneğimizde, öncelikle aşağıdaki işlemleri yapan özel bir yönerge tanımlayacağız

sampleApp adında bir AngularJS modülü oluşturun
Guru99 adıyla özel bir yönerge oluşturun
"Bu AngularJS Testidir" metnini görüntüleyen başlık etiketine sahip bir şablon döndüren bir işlev oluşturun.

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

Yukarıdaki kod başarıyla çalıştırıldıktan sonraki adım, kodun düzgün bir şekilde yazıldığından ve yürütüldüğünden emin olmak için bir test senaryosu oluşturmak olacaktır. Testimizin kodu aşağıda gösterildiği gibi olacaktır.

Kod, test klasörüne yerleştirilecek olan DirectionTest.js adlı ayrı bir dosyada olacaktır. Aşağıdaki kod yalnızca şu temel şeyleri yapar

beforeEach işlevi – Bu işlev, test çalıştırmasından önce 'sampleApp' adlı Angular JS modülümüzü yüklemek için kullanılır.
$compile hizmeti yönergeyi derlemek için kullanılır. Bu hizmet zorunludur ve Angular.JS'nin özel yönergemizi derlemek amacıyla kullanabilmesi için bildirilmesi gerekir.
$rootscope, herhangi bir AngularJS.JS uygulamasının birincil kapsamıdır. Controller'ın $scope nesnesini daha önceki bölümlerde görmüştük. $scope nesnesi, $rootscope nesnesinin alt nesnesidir. Bunun burada bildirilmesinin nedeni, özel yönergemiz aracılığıyla DOM'daki gerçek bir HTML etiketinde değişiklik yapıyor olmamızdır. Bu nedenle, bir HTML belgesinde herhangi bir değişiklik olduğunda gerçekten dinleyen veya bunu bilen $rootscope hizmetini kullanmamız gerekir.
var öğe = $derleme(“ ”) – Bu, direktifimizin olması gerektiği gibi enjekte edilip edilmediğini kontrol etmek için kullanılır. Özel direktifimizin adı Guru99'dur ve özel direktifler bölümümüzden biliyoruz ki, direktif HTML'mize enjekte edildiğinde ' olarak enjekte edilecektir. '. Dolayısıyla bu ifade bu kontrolü yapmak için kullanılır.
wait(element.html()).toContain(“This is AngularJS Testing”) – Bu, beklenti işlevine “This is” ifadesinin innerHTML metnini içerecek öğeyi (bizim durumumuzda div etiketi) bulması gerektiği talimatını vermek için kullanılır. AngularJS Testi”.

describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
   beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
 }));

 it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

Yukarıdaki test karma tarayıcısında çalışacak ve önceki konuda gösterilenle aynı başarılı sonucu verecektir.

AngularJS JS uygulamalarını uçtan uca test etme

Karma test çerçevesi, İletki adı verilen bir çerçeveyle birlikte, bir web uygulamasını uçtan uca test etme işlevine sahiptir.

Yani bu sadece direktiflerin ve denetleyicilerin test edilmesi değil aynı zamanda bir HTML sayfasında görünebilecek diğer her şeyin test edilmesidir.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım.

Aşağıdaki örneğimizde ng-repeat direktifini kullanarak veri tablosu oluşturan bir AngularJS uygulamamız olacak.

Öncelikle “öğretici” adı verilen bir değişken oluşturuyoruz ve ona tek adımda bazı anahtar/değer çiftlerini atadık. Tablo görüntülenirken her anahtar/değer çifti veri olarak kullanılacaktır. Öğretici değişken daha sonra kapsam nesnesine atanır, böylece ona görünümümüzden erişilebilir.
Tablodaki her veri satırı için ng-repeat direktifini kullanıyoruz. Bu yönerge, ptutor değişkenini kullanarak eğitim kapsamı nesnesindeki her anahtar/değer çiftinden geçer.
Son olarak şunu kullanıyoruz: anahtar değer çiftleriyle birlikte etiketleyin (ptutor.Name ve ptutor.Description) tablo verilerini görüntülemek için.

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

Testimiz aslında ng-repeat direktifini test edecek ve yukarıdaki örnekte olması gerektiği gibi 3 satırlık veri içerdiğinden emin olacak.

Öncelikle aşağıdaki ön koşulun mevcut olduğundan emin olmamız gerekiyor

İletki kitaplığını npm aracılığıyla yükleyin. Bu, komut isteminde aşağıdaki satırı çalıştırarak yapılabilir.

"npm install protractor"

Testimizin kodu aşağıdaki gibi olacaktır.

Kod, test klasörüne yerleştirilecek olan CompleteTest.js adlı ayrı bir dosyada olacak. Aşağıdaki kod yalnızca şu temel şeyleri yapar

Tarayıcı işlevi iletki kitaplığı tarafından sağlanır ve AngularJS uygulamamızın (yukarıda gösterilen kodla birlikte) site URL'mizde çalıştığını varsayar - http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Bu satır kodu aslında 'ptutor in tutorial' kodu tarafından doldurulan ng-repeat yönergesini getiriyor. element ve by.repeater, ng-repeat yönergesinin ayrıntılarını almamızı sağlayan protractor kütüphanesi tarafından sağlanan özel anahtar kelimelerdir.
beklenti(list.count()).toEqual(3); – Son olarak, ng-repeat direktifinin bir sonucu olarak tablomuzda gerçekten 3 öğenin doldurulduğunu görmek için wait fonksiyonunu kullanıyoruz.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

Yukarıdaki test karma tarayıcısında çalışacak ve önceki konuda gösterilenle aynı başarılı sonucu verecektir.

ÖZET

AngularJS'de test, Google'ın kendisi tarafından geliştirilen bir çerçeve olan karma çerçevesi kullanılarak gerçekleştirilir.
Karma çerçevesi, düğüm paketi yöneticisi kullanılarak kurulur. Temel test için kurulması gereken anahtar modüller karma, karma-chrome-launcher, karma-jasmine ve karma-cli'dir.
Testler ayrı js dosyalarında yazılır ve normalde uygulamanızın test klasöründe saklanır. Bu test dosyalarının konumu karma.conf.js adı verilen özel bir yapılandırma dosyasında belirtilmelidir. Karma, tüm testleri yürütürken bu yapılandırma dosyasını kullanır.
Karma, Denetleyicileri ve özel yönergeleri test etmek için de kullanılabilir.
Uçtan uca web testi için, paket yöneticisi Node aracılığıyla iletki adı verilen başka bir çerçevenin kurulması gerekir. Bu çerçeve, bir HTML sayfasındaki tüm öğeleri test etmek için kullanılabilecek özel yöntemler sağlar.

Beğenebilirsin:

Karma çerçevesinin tanıtımı ve kurulumu

Karma'nın Kurulumu

Karma çerçevesinin yapılandırılması

İLGİLİ MAKALELER

AngularJS Denetleyicilerini Test Etme

AngularJS Direktiflerini Test Etme

AngularJS JS uygulamalarını uçtan uca test etme

ÖZET