AngularJS Unit Testing with Karma & Jasmine

One of the most brilliant features of AngularJS is the Test yapmak Bu yön. Geliştiriciler Google AngularJS'i geliştirirken, test etmeyi göz önünde bulundurdular ve tüm AngularJS çerçevesinin test edilebilir olmasını sağladılar.

In AngularJS, testing is normally carried out using Karma (framework). AngularJS testing can be carried out without Karma, but the Karma framework has such a brilliant functionality for testing AngularJS code, that it makes sense to use this framework.

• AngularJS'de şunları gerçekleştirebiliriz: Birim Testi denetleyiciler ve yönergeler için ayrı ayrı.
• Biz de performans gösterebiliriz end to end testing of AngularJS, which is testing from a user perspective.

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

Karma bir otomasyon aracını test etme created by the AngularJS team at Google. 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 --save-dev

burada,

1. npm is the command line utility for the node package manager used for installing custom modules on any machine. It ships with node.js.
2. Kurulum parametresi, npm komut satırı yardımcı programına kurulumun gerekli olduğunu bildirir.
3. 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 -g karma-cli

• karma-cli is used to install the command line interface for karma which will be used to write the karma commands in the command line interface. The -g flag installs it globally so that the karma command is available from any folder.

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: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

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

1. angular.js – This tells karma that your application depends on the core modules in AngularJS.
2. angular-mocks.js – This tells karma to use the Unit Testing functionality for AngularJS from the angular-mocks.js file.
3. Ana uygulama veya iş mantığı dosyalarının tümü uygulamanızın lib klasöründe mevcuttur.
4. 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

1. Açıklama fonksiyonu testin açıklamasını vermek için kullanılır. Bizim durumumuzda testimize 'Örnek test' açıklamasını veriyoruz.
2. 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.
3. '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.

1. Çıktı Karma Explorer'da gelir Webstorm. 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. Daha sonra “Koşul doğrudur” adındaki 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" simgesinin bulunduğunu unutmayın.

What is Jasmine in AngularJS Unit Testing?

Karma decides where tests run, while Jasmine decides how they are written. Jasmine is a behaviour driven specification framework that supplies the vocabulary used in every example on this page, which is why the karma-jasmine adapter is installed alongside the runner.

Jasmine contributes four building blocks:

• describe(): Groups related specifications into a suite and accepts a readable description of the unit under test.
• it(): Declares a single specification. The name should state the behaviour being verified rather than the method being called.
• expect() with matchers: Compares an actual value against an expected one. Common matchers include toBe, toEqual, toContain, and toBeDefined.
• beforeEach() and afterEach(): Run setup and teardown before and after every specification, which keeps each test independent.

Jasmine also provides spies. A spy replaces a real function with a recorded stand in, so a controller can be tested without calling a live HTTP endpoint. Because Jasmine needs no DOM and no assertion library of its own, the combination of Karma and Jasmine remains the lightest way to run AngularJS JavaScript unit tests.

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

1. Bir kimlik değişkeni oluşturun ve ona 5 değerini atayın.
2. 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

Install the angular-mocks library via npm. This can be done by executing the below line in the command prompt

npm install angular-mocks --save-dev

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/angular.js', 'lib/angular-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.
• The angular.js and angular-mocks.js file are required to run AngularJS unit tests
• İndex.js dosyası denetleyiciye ait kodumuzu içerecektir
• Test klasörü tüm AngularJS testlerimizi içerecektir

Below is our AngularJS code which will be stored as a file Index.js in the test folder of our application.

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

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

var sampleApp = angular.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

1. beforeEach function – This function is used to load our AngularJS module called ‘sampleApp’ before the test run. Note that this is the name of the module in an index.js file.
2. The $controller object is created as a mockup object for the controller “AngularJSController” which is defined in our index.js file. In any sort of Unit Testing, a mock object represents a dummy object which will actually be used for the testing. This mock object will actually simulate the behavior of our controller.
3. beforeEach(inject(function(_$controller_)) – Bu, gerçek denetleyici gibi davranması için testimize sahte nesneyi enjekte etmek için kullanılır.
4. var $kapsam = {}; Bu, $scope nesnesi için oluşturulan sahte bir nesnedir.
5. var controller = $controller(‘AngularJSController’, { $scope: $scope }); – Here we are checking for the existence of a controller named ‘AngularJSController’. In here we are also assigning all variables from our $scope object in our controller in the Index.js file to the $scope object in our test file
6. 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, özel yönergeleri test etme işlevine de sahiptir. Bu, şablonu da içerir.URLÖzel yönergeler içerisinde kullanılan 'ler.

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

1. sampleApp adında bir AngularJS modülü oluşturun
2. Create a custom directive with the name – guru99
3. "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 = angular.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

1. beforeEach function – This function is used to load our AngularJS module called ‘sampleApp’ before the test run.
2. The $compile service is used to compile the directive. This service is mandatory and needs to be declared so that AngularJS can use it to compile our custom directive.
3. The $rootScope is the primary scope of any AngularJS application. We have seen the $scope object of the controller in earlier chapters. Well, the $scope object is the child object of the $rootScope object. The reason this is declared here is because we are making a change to an actual HTML tag in the DOM via our custom directive. Hence, we need to use the $rootScope service which actually listens or knows when any change happens from within an HTML document.
4. var element = $compile(“<guru99></guru99>”)($rootScope) – This is used to check whether our directive gets injected as it should. The directive is registered with the camel case name guru99, so AngularJS matches the lowercase element <guru99> in the markup. Hence this statement is used to make that check.
5. expect(element.html()).toContain(“This is AngularJS Testing”) – This is used to instruct the expect function that it should find the element(in our case the h1 tag) to contain the innerHTML text of “This is AngularJS Testing”.

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("<guru99></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.

End to End Testing AngularJS applications

Karma test çerçevesi, Pro adı verilen bir çerçeveyle birlikte kullanılır.tracTor, 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.

1. Ö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.
2. 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.
3. 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 = angular.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"}
  ];
});

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.

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

profesyoneli yükleyintracnpm aracılığıyla Tor kütüphanesini ekleyebilirsiniz. Bunu, komut isteminde aşağıdaki satırı çalıştırarak yapabilirsiniz.

npm install -g 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

1. Tarayıcı işlevi profesyonel tarafından sağlanmaktadır.tracTor kütüphanesini kullanır ve yukarıda gösterilen kodla birlikte AngularJS uygulamamızın sitemizde çalıştığını varsayar. URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater(‘ptutor in tutorial’)); -This line of code is actually fetching the ng-repeat directive which is populated by the code ‘ptutor in tutorial’. The element and by.repeater are special keywords provided by the protracng-repeat yönergesinin ayrıntılarını almamızı sağlayan bir Tor kütüphanesi.
3. 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.

Karma vs Jasmine vs Protractor: Key Differences

The three tools used across this page are often confused because they appear in the same command line. Each one occupies a different layer of the testing stack, as the table below makes clear.

In short, Jasmine writes the test, Karma executes it, and Protractor extends the same Jasmine syntax to a fully rendered page.

Best Practices for AngularJS Unit Testing

A small set of habits keeps an AngularJS suite fast and trustworthy as the application grows.

1. Test one unit at a time. Load only the module under test inside beforeEach, and mock every collaborator so a failure points at a single file.
2. Never call a real backend. Use the $httpBackend service from angular-mocks to return canned responses. Tests then run offline and produce identical results on every machine.
3. Keep specification names behavioural. A name such as “returns 5 when the controller initialises” reads better in a report than “test1”.
4. Always flush the digest cycle. Call $rootScope.$digest() after changing scope data, otherwise bindings and watchers never update and assertions fail for the wrong reason.
5. Measure coverage, but judge it carefully. Add karma-coverage to see untested branches. High coverage with weak assertions still hides defects.
6. Run the suite in continuous integration. Use a headless Chrome launcher so the same specifications execute on every commit rather than only on a developer machine.

Applying these rules turns the examples above from isolated demonstrations into a regression safety net for a legacy AngularJS codebase. For the wider picture, see the AngularJS tutorial serisi.

SSS