AngularJS Birim Testi: Karma Jasmine Eğitimi

İçindekiler:

Anonim

Angular.JS'nin en parlak özelliklerinden biri Test yönüdür. Google'daki geliştiriciler AngularJS'yi geliştirdiklerinde, testleri akıllarında tuttular ve tüm AngularJS çerçevesinin test edilebilir olduğundan emin oldular.

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

  • AngularJS'de, kontrolörler ve yönergeler için Birim Testini ayrı ayrı gerçekleştirebiliriz.
  • Ayrıca, kullanıcı bakış açısıyla test eden AngularJS'nin son testini de gerçekleştirebiliriz.

Bu eğitimde öğreneceksiniz-

  • Karma çerçevesine Giriş ve Kurulum
    • Karma Kurulumu
    • Karma çerçevesinin yapılandırılması
  • AngularJS Denetleyicilerini Test Etme
  • AngularJS direktiflerini test etme
  • AngularJS JS uygulamalarının Uçtan Uca Testi

Karma çerçevesine Giriş ve Kurulum

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

Karma Kurulumu

Karma'nın npm aracılığıyla kurulumu iki aşamalı bir süreçte yapılır.

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

npm install karma karma-chrome-launcher karma-jasmine

Nerede

  1. npm, herhangi bir makineye özel modüller yüklemek için kullanılan düğüm paketi yöneticisine yönelik komut satırı yardımcı programıdır.
  2. İnstall parametresi, npm komut satırı yardımcı programına kurulumun gerekli olduğunu bildirir.
  3. Komut satırında karma ile çalışması gereken 3 kütüphane belirtiliyor
    • karma, test amacıyla kullanılacak çekirdek kütüphanedir.
    • karma-chrome-launcher, karma komutlarının krom 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.

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

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

npm install karma-cli

burada,

  1. karma-cli, komut satırı arayüzünde karma komutlarını 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 gerçekleştirildikten sonra, karma bir karma.conf.js dosyası oluşturacaktır. Dosya muhtemelen aşağıda gösterilen pasaj gibi görünecektir

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 aşağıdaki şeyleri söyler

  1. 'Uygulamanızın Adı' - Bu, uygulamanızın adı ile değiştirilecektir.
  2. ' Uygulamanızın Adı' / AngularJS / AngularJS.js ' - Bu, karmaya uygulamanızın AngularJS'deki çekirdek modüllere bağlı olduğunu söyler
  3. 'Uygulamanızın Adı' / AngularJS-mocks / AngularJS-mocks.js ' - Bu, karma'ya Angular.JS-mocks.js dosyasından AngularJS için Birim Test işlevini kullanmasını söyler.
  4. Tüm ana uygulama veya iş mantığı dosyaları, uygulamanızın lib klasöründe bulunur.
  5. Testler klasörü tüm birim testlerini içerecektir

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

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

Yukarıdaki kod aşağıdaki yönlere sahiptir

  1. Tanımlama işlevi, testin bir tanımını vermek için kullanılır. Bizim durumumuzda, testimize 'Örnek test' açıklaması veriyoruz.
  2. 'İt' işlevi, teste bir ad vermek için kullanılır. Bizim durumumuzda testimizin adını 'Koşul doğru' olarak veriyoruz. Testin adı anlamlı olmalıdır.
  3. 'Beklemek' ve 'toBe' anahtar kelimesinin kombinasyonu, test sonucunun beklenen ve gerçek değerinin ne olduğunu belirtir. Gerçek ve beklenen değer aynıysa, test geçecek, aksi takdirde başarısız olacaktır.

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

KARMA start

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

  1. Çıktı, Webstorm içindeki Karma kaşifinde gelir. Bu pencere karma çerçevesinde tanımlanan tüm testlerin yürütülmesini gösterir.
  2. Burada yürütülen testin açıklamasının "Örnek test" olarak gösterildiğini görebilirsiniz.
  3. Ardından, adı "Koşul doğru" olan testin kendisinin yürütüldüğünü görebilirsiniz.
  4. Tüm testlerin yanında, tüm testlerin geçtiğini simgeleyen yeşil "Tamam" simgesi bulunduğunu unutmayın.

AngularJS Denetleyicilerini Test Etme

Karma testi çerçevesi, Kontrolörleri uçtan uca test etme işlevselliğine de sahiptir. Bu, Denetleyiciler içinde kullanılan $ kapsam nesnesinin test edilmesini içerir.

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

Örneğimizde,

Önce bir denetleyici tanımlamamız gerekir. Bu kontrolör, aşağıda belirtilen adımları gerçekleştirecektir.

  1. Bir kimlik değişkeni oluşturun ve ona 5 değerini atayın.
  2. ID değişkenini $ kapsam nesnesine atayın.

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

Öncelikle aşağıdaki ön koşulun yerine getirildiğinden emin olmalıyız

    1. Angular.JS-mocks kitaplığını npm aracılığıyla kurun. Bu, komut isteminde aşağıdaki satırı çalıştırarak yapılabilir.
npm install Angular JS-mocks
  1. Sonraki adım, test için doğru dosyaların dahil edildiğinden emin olmak için karma.conf.js dosyasını değiştirmektir. Aşağıdaki segment sadece karma.conf.js'nin değiştirilmesi gereken dosya bölümünü gösterir. 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • 'Dosyalar' parametresi temelde Karma'ya testlerin çalıştırılması için gerekli olan tüm dosyaları söyler.
  • AngularJS.js ve AngularJS-mocks.js dosyası, AngularJS birim testlerini çalıştırmak için gereklidir
  • İndex.js dosyası denetleyici kodumuzu içerecek
  • Test klasörü tüm AngularJS testlerimizi içerecek

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

  1. SampleApp adlı bir Angular JS modülü oluşturun
  2. AngularJSController adlı bir denetleyici oluşturun
  3. ID adında bir değişken oluşturun, ona 5 değerini verin ve $ kapsam 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, 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 ControllerTest.js adlı ayrı bir dosyada olacaktır. Aşağıdaki kod sadece aşağıdaki önemli şeyleri yapar

  1. 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 bir index.js dosyasındaki modül adı olduğuna dikkat edin.

  2. $ Controller nesnesi, index.js dosyamızda tanımlanan "Angular JSController" denetleyicisi için bir mockup nesnesi olarak oluşturulur. Herhangi bir Birim Testinde, sahte bir nesne, aslında test için kullanılacak olan sahte bir nesneyi temsil eder. Bu sahte nesne aslında denetleyicimizin davranışını simüle edecek.

  3. beforeEach (inject (function (_ $ controller_) - Bu, gerçek denetleyici gibi davranması için testimizdeki sahte nesneyi enjekte etmek için kullanılır.

  4. var $ kapsam = {}; Bu, $ kapsam nesnesi için yaratılan sahte bir nesnedir.

  5. var denetleyici = $ denetleyici ('AngularJSController', {$ kapsam: $ kapsam}); - Burada 'Angular.JSController' adlı bir denetleyicinin varlığını kontrol ediyoruz. Burada ayrıca Index.js dosyasındaki denetleyicimizdeki $ kapsam nesnemizdeki tüm değişkenleri test dosyamızdaki $ kapsam nesnesine atıyoruz.

  6. Son olarak, $ kapsam.ID'yi 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 başlıkta gösterilenle aynı geçiş sonucunu verecektir.

AngularJS Direktiflerini Test Etme

Karma testi çerçevesi ayrıca özel direktifleri test etme işlevine de sahiptir. Bu, özel yönergelerde kullanılan templateURL'leri içerir.

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

Örneğimizde, önce aşağıdaki şeyleri yapan özel bir yönerge tanımlayacağız

  1. SampleApp adlı bir AngularJS modülü oluşturun
  2. - Guru99 adıyla özel bir yönerge oluşturun
  3. "Bu AngularJS Testidir" metnini görüntüleyen bir 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: '

This is AngularJS Testing

'};});

Yukarıdaki kod başarıyla yürütüldüğünde, 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 DirectiveTest.js adlı ayrı bir dosyada olacaktır. Aşağıdaki kod sadece aşağıdaki önemli şeyleri yapar

  1. 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.

  2. $ Compile hizmeti yönergeyi derlemek için kullanılır. Bu hizmet zorunludur ve Angular.JS'nin özel yönergemizi derlemek için kullanabilmesi için bildirilmesi gerekir.

  3. $ Rootcope, herhangi bir AngularJS.JS uygulamasının birincil kapsamıdır. Denetleyicinin $ kapsam nesnesini önceki bölümlerde görmüştük. $ Kapsam nesnesi, $ rootcope nesnesinin alt nesnesidir. Bunun burada bildirilmesinin nedeni, özel yönergemiz aracılığıyla DOM'daki gerçek bir HTML etiketine değişiklik yapıyor olmamızdır. Bu nedenle, gerçekten dinleyen veya bir HTML belgesinden herhangi bir değişiklik olduğunda bunu bilen $ rootcope hizmetini kullanmamız gerekir.

  4. var element = $ compile (" ") - Bu, direktifimizin olması gerektiği gibi enjekte edilip edilmediğini kontrol etmek için kullanılır. Özel yönergemizin adı Guru99'dur ve özel yönergeler bölümümüzden, yönergenin HTML'imize enjekte edildiğinde ' ' olarak enjekte edileceğini biliyoruz. Dolayısıyla bu ifade, bu kontrolü yapmak için kullanılır.

  5. wait (element.html ()). toContain ("Bu AngularJS Testidir") - Bu, beklenen işleve "Bu, 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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

Yukarıdaki test karma tarayıcısında çalışacak ve önceki başlıkta gösterilenle aynı geçiş sonucunu verecektir.

AngularJS JS uygulamalarının Uçtan Uca Testi

Protractor adlı bir çerçeve ile birlikte karma test çerçevesi, bir web uygulamasını uçtan uca test etme işlevselliğine sahiptir.

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

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

Aşağıdaki örneğimizde, ng-tekrar yönergesini kullanarak bir veri tablosu oluşturan bir AngularJS uygulamasına sahip olacağız.

  1. İlk olarak "öğretici" adlı bir değişken oluşturuyoruz ve ona bir adımda bazı anahtar-değer çiftleri atıyoruz. Tablo görüntülenirken her bir anahtar / değer çifti veri olarak kullanılacaktır. Eğitim değişkeni daha sonra, bizim görüşümüzden erişilebilmesi için kapsam nesnesine atanır.
  2. Tablodaki her veri satırı için ng-tekrar yönergesini kullanıyoruz. Bu yönerge, ptutor değişkenini kullanarak eğitim kapsam nesnesindeki her bir anahtar / değer çiftini inceler.
  3. Son olarak, tablo verilerini görüntülemek için anahtar değer çiftleriyle (ptutor.Name ve ptutor.Description) birlikte etiketini kullanıyoruz.


{{ ptutor.Name }}{{ ptutor.Description }}