Pengujian Unit AngularJS: Tutorial Karma Jasmine

Salah satu fitur paling cemerlang dari Angular.JS adalah pengujian aspek. Ketika para pengembang di Google mengembangkan AngularJS, mereka terus memikirkan pengujian dan memastikan bahwa seluruh kerangka kerja AngularJS dapat diuji.

Di AngularJS, pengujian biasanya dilakukan menggunakan Karma (framework). Pengujian Angular JS dapat dilakukan tanpa Karma, tetapi kerangka Karma memiliki fungsi yang brilian untuk menguji kode AngularJS, sehingga masuk akal untuk menggunakan kerangka ini.

Di AngularJS, kita bisa melakukan Pengujian Unit secara terpisah untuk pengontrol dan arahan.
Kami juga dapat melakukan pengujian ujung ke ujung AngularJS, yaitu pengujian dari sudut pandang pengguna.

Pengenalan & Pemasangan kerangka Karma

Karma adalah a pengujian alat otomasi dibuat oleh tim Angular JS di Google. Langkah pertama untuk menggunakan Karma adalah menginstal Karma. Karma diinstal melalui npm (yang merupakan manajer paket yang digunakan untuk memudahkan instalasi modul pada mesin lokal).

Pemasangan Karma

Instalasi Karma melalui npm dilakukan dalam proses dua langkah.

Langkah 1) Jalankan baris di bawah ini dari dalam baris perintah

npm install karma karma-chrome-launcher karma-jasmine

Di mana,

npm adalah utilitas baris perintah untuk manajer paket node yang digunakan untuk menginstal modul khusus pada mesin apa pun.
Parameter install menginstruksikan utilitas baris perintah npm bahwa instalasi diperlukan.
Ada 3 perpustakaan yang ditentukan di baris perintah yang diperlukan untuk bekerja dengan karma.

karma adalah perpustakaan inti yang akan digunakan untuk tujuan pengujian.
karma-chrome-launcher adalah perpustakaan terpisah yang memungkinkan perintah karma dikenali oleh browser chrome.
karma-jasmine – Ini menginstal melati yang merupakan kerangka dependen untuk Karma.

Langkah 2) Langkah selanjutnya adalah menginstal utilitas baris perintah karma. Ini diperlukan untuk menjalankan perintah garis karma. Utilitas jalur karma akan digunakan untuk menginisialisasi lingkungan karma untuk pengujian.

Untuk menginstal utilitas baris perintah, jalankan baris di bawah ini dari dalam baris perintah

npm install karma-cli

di mana,

karma-cli digunakan untuk menginstal antarmuka baris perintah untuk karma yang akan digunakan untuk menulis perintah karma di antarmuka baris perintah.

Konfigurasi kerangka Karma

Langkah selanjutnya adalah mengkonfigurasi karma yang dapat dilakukan melalui perintah

"karma –init"

Setelah langkah di atas dijalankan, karma akan membuat file karma.conf.js. File tersebut mungkin akan terlihat seperti cuplikan di bawah ini

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

File konfigurasi di atas memberi tahu mesin runtime karma hal-hal berikut

'Nama Aplikasi Anda' – Ini akan diganti dengan nama aplikasi Anda.
'Nama aplikasi Anda'/AngularJS/AngularJS.js' – Ini memberi tahu karma bahwa aplikasi Anda bergantung pada modul inti di AngularJS
'Nama aplikasi Anda'/AngularJS-mocks/AngularJS-mocks.js' – Ini memberitahu karma untuk menggunakan fungsionalitas Unit Testing untuk AngularJS dari file Angular.JS-mocks.js.
Semua aplikasi utama atau file logika bisnis ada di folder lib aplikasi Anda.
Folder tes akan berisi semua tes unit.

Untuk memeriksa apakah karma berfungsi, buat file bernama Sample.js, masukkan kode di bawah ini dan letakkan di direktori pengujian.

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

Kode di atas memiliki aspek-aspek berikut

Fungsi deskripsikan digunakan untuk memberikan deskripsi tes. Dalam kasus kami, kami memberikan deskripsi 'Tes sampel' untuk pengujian kami.
Fungsi 'it' digunakan untuk memberi nama pada pengujian. Dalam kasus kami, kami memberi nama pengujian kami sebagai 'Kondisi benar'. Nama tesnya harus bermakna.
Kombinasi kata kunci 'expect' dan 'toBe' menyatakan berapa nilai yang diharapkan dan sebenarnya dari hasil tes. Jika nilai sebenarnya dan nilai yang diharapkan sama, maka pengujian akan lulus, jika tidak maka akan gagal.

Ketika Anda menjalankan baris berikut pada command prompt, maka akan menjalankan file pengujian di atas

KARMA start

Output di bawah ini diambil dari IDE Webstorm di mana langkah-langkah di atas dilakukan.

Outputnya berasal dari penjelajah Karma di dalamnya Webstorm. Jendela ini menunjukkan pelaksanaan semua pengujian yang ditentukan dalam kerangka karma.
Di sini Anda dapat melihat bahwa deskripsi pengujian yang dijalankan ditampilkan yaitu "Tes sampel".
Selanjutnya, Anda dapat melihat bahwa pengujian itu sendiri yang diberi nama “Kondisi benar” dijalankan.
Perhatikan bahwa karena semua tes memiliki ikon hijau “Ok” di sebelahnya yang melambangkan bahwa semua tes lulus.

Menguji Pengontrol AngularJS

Kerangka pengujian karma juga memiliki fungsi untuk menguji Pengendali secara menyeluruh. Ini termasuk pengujian objek $scope yang digunakan dalam Pengendali.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.

Dalam contoh kita,

Pertama-tama kita perlu mendefinisikan pengontrol. Pengontrol ini akan melakukan langkah-langkah yang disebutkan di bawah

Buat variabel ID dan berikan nilai 5 padanya.
Tetapkan variabel ID ke objek $scope.

Pengujian kita akan menguji keberadaan pengontrol ini dan juga menguji apakah variabel ID objek $scope disetel ke 5.

Pertama-tama kita perlu memastikan prasyarat berikut sudah ada

Instal perpustakaan Angular.JS-mocks melalui npm. Ini dapat dilakukan dengan menjalankan baris di bawah ini pada command prompt

npm install Angular JS-mocks

Berikutnya adalah memodifikasi file karma.conf.js untuk memastikan file yang tepat disertakan untuk pengujian. Segmen di bawah ini hanya menampilkan bagian file karma.conf.js yang perlu dimodifikasi

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

Parameter 'files' pada dasarnya memberitahu Karma semua file yang diperlukan dalam menjalankan pengujian.
File AngularJS.js dan AngularJS-mocks.js diperlukan untuk menjalankan pengujian unit AngularJS
File index.js akan berisi kode kita untuk pengontrol
Folder test akan berisi semua tes AngularJS kami

Di bawah ini adalah kode Angular.JS kita yang akan disimpan sebagai file Index.js di folder pengujian aplikasi kita.

Kode di bawah ini hanya melakukan hal-hal berikut

Buat Modul AngularJS disebut sampleApp
Buat pengontrol bernama AngularJSController
Buat variabel bernama ID, berikan nilai 5 dan tetapkan ke objek $scope

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

Setelah kode di atas berhasil dijalankan, langkah selanjutnya adalah membuat a Uji Kasus untuk memastikan kode telah ditulis dan dijalankan dengan benar.

Kode untuk pengujian kami akan seperti yang ditunjukkan di bawah ini.

Kode tersebut akan berada dalam file terpisah yang disebut ControllerTest.js, yang akan ditempatkan di folder pengujian. Kode di bawah ini hanya melakukan hal-hal penting berikut

fungsi beforeEach – Fungsi ini digunakan untuk memuat modul AngularJS.JS kami yang disebut 'sampleApp' sebelum pengujian dijalankan. Perhatikan bahwa ini adalah nama modul dalam file index.js.
Objek $controller dibuat sebagai objek mockup untuk pengontrol "Angular JSController" yang didefinisikan dalam file index.js kami. Dalam Pengujian Unit apa pun, objek tiruan mewakili objek tiruan yang sebenarnya akan digunakan untuk pengujian. Objek tiruan ini sebenarnya akan mensimulasikan perilaku pengontrol kita.
beforeEach(inject(function(_$controller_) – Ini digunakan untuk menginjeksi objek tiruan dalam pengujian kita sehingga berperilaku seperti pengontrol sebenarnya.
var $ruang lingkup = {}; Ini adalah objek tiruan yang dibuat untuk objek $scope.
var pengontrol = $controller('AngularJSController', { $ruang lingkup: $ruang lingkup }); – Di sini kami memeriksa keberadaan pengontrol bernama 'Angular.JSController'. Di sini kami juga menugaskan semua variabel dari objek $scope di pengontrol kami di file Index.js ke objek $scope di file pengujian kami
Terakhir, kami membandingkan $scope.ID dengan 5

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);
        });
    });
});

Tes di atas akan dijalankan di browser karma dan memberikan hasil kelulusan yang sama seperti yang ditunjukkan pada topik sebelumnya.

Menguji Direktif AngularJS

Kerangka pengujian karma juga memiliki fungsi untuk menguji arahan khusus. Ini termasuk URL templat yang digunakan dalam arahan khusus.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.

Dalam contoh kita, pertama-tama kita akan mendefinisikan sebuah arahan khusus yang melakukan hal-hal berikut ini

Buat modul AngularJS bernama sampleApp
Buat arahan khusus dengan nama – Guru99
Buat fungsi yang mengembalikan templat dengan tag header yang menampilkan teks “Ini adalah Pengujian AngularJS.”

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

Setelah kode di atas berhasil dieksekusi, langkah selanjutnya adalah membuat test case untuk memastikan kode telah ditulis dan dieksekusi dengan benar. Kode untuk pengujian kami akan seperti yang ditunjukkan di bawah ini

Kode tersebut akan berada dalam file terpisah yang disebut DirectiveTest.js, yang akan ditempatkan di folder pengujian. Kode di bawah ini hanya melakukan hal-hal penting berikut

fungsi beforeEach – Fungsi ini digunakan untuk memuat modul Angular JS kami yang disebut 'sampleApp' sebelum pengujian dijalankan.
Layanan $compile digunakan untuk mengkompilasi arahan. Layanan ini wajib dan perlu dideklarasikan agar Angular.JS dapat menggunakannya untuk mengkompilasi arahan khusus kami.
$rootscope adalah cakupan utama dari setiap aplikasi AngularJS.JS. Kita telah melihat objek $scope dari pengontrol di bab sebelumnya. Nah, objek $scope adalah objek turunan dari objek $rootscope. Alasan hal ini dinyatakan di sini adalah karena kami membuat perubahan pada tag HTML sebenarnya di DOM melalui arahan khusus kami. Oleh karena itu, kita perlu menggunakan layanan $rootscope yang benar-benar mendengarkan atau mengetahui kapan perubahan terjadi dari dalam dokumen HTML.
elemen var = $kompilasi(“ ”) – Ini digunakan untuk memeriksa apakah arahan kita dimasukkan sebagaimana mestinya. Nama arahan khusus kami adalah Guru99, dan kami tahu dari bab arahan khusus kami bahwa ketika arahan tersebut dimasukkan ke dalam HTML kami, itu akan dimasukkan sebagai ' '. Oleh karena itu pernyataan ini digunakan untuk melakukan pemeriksaan itu.
ekspektasi(element.html()).toContain("Ini adalah Pengujian AngularJS") - Ini digunakan untuk menginstruksikan fungsi ekspektasi bahwa ia harus menemukan elemen (dalam kasus kami tag div) berisi teks innerHTML "Ini adalah Pengujian AngularJS”.

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");
  });
});

Tes di atas akan dijalankan di browser karma dan memberikan hasil kelulusan yang sama seperti yang ditunjukkan pada topik sebelumnya.

Pengujian ujung ke ujung aplikasi AngularJS JS

Kerangka pengujian karma bersama dengan kerangka yang disebut Busur Derajat memiliki fungsi menguji aplikasi web secara ujung ke ujung.

Jadi ini tidak hanya menguji arahan dan pengontrol, tetapi juga menguji hal lain yang mungkin muncul pada halaman HTML.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.

Dalam contoh di bawah ini, kita akan memiliki aplikasi AngularJS yang membuat tabel data menggunakan direktif ng-repeat.

Pertama-tama kita membuat variabel bernama "tutorial" dan menugaskannya beberapa pasangan nilai kunci dalam satu langkah. Setiap pasangan nilai kunci akan digunakan sebagai data saat menampilkan tabel. Variabel tutorial kemudian ditugaskan ke objek lingkup sehingga dapat diakses dari tampilan kita.
Untuk setiap baris data dalam tabel, kami menggunakan direktif ng-repeat. Arahan ini melewati setiap pasangan nilai kunci dalam objek lingkup tutorial dengan menggunakan variabel ptutor.
Akhirnya, kami menggunakan tag bersama dengan pasangan nilai kunci (ptutor.Name dan ptutor.Description) untuk menampilkan data tabel.

<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"}
			]   });

Pengujian kami sebenarnya akan menguji direktif ng-repeat dan memastikan bahwa direktif tersebut berisi 3 baris data sebagaimana mestinya dari contoh di atas.

Pertama-tama kita perlu memastikan prasyarat berikut sudah ada

Instal perpustakaan busur derajat melalui npm. Ini dapat dilakukan dengan menjalankan baris di bawah ini pada command prompt

"npm install protractor"

Kode untuk pengujian kami akan seperti yang ditunjukkan di bawah ini.

Kode tersebut akan berada dalam file terpisah yang disebut CompleteTest.js, yang akan ditempatkan di folder pengujian. Kode di bawah ini hanya melakukan hal-hal penting berikut

Fungsi browser disediakan oleh perpustakaan busur derajat dan mengasumsikan bahwa aplikasi AngularJS kami (dengan kode yang ditunjukkan di atas) berjalan di URL situs kami – http://localhost:8080/Guru99/
var list=element.all(by.repeater(ptutor in tutorial')); -Baris kode ini sebenarnya mengambil perintah ng-repeat yang diisi oleh kode 'ptutor in tutorial'. Element dan by.repeater adalah kata kunci khusus yang disediakan oleh pustaka protractor yang memungkinkan kita mendapatkan detail perintah ng-repeat.
harapkan(daftar.hitungan()).toEqual(3); – Terakhir, kita menggunakan fungsi ekspektasi untuk melihat bahwa kita memang mendapatkan 3 item yang diisi di tabel kita sebagai hasil dari direktif ng-repeat.

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);  }); });

Tes di atas akan dijalankan di browser karma dan memberikan hasil kelulusan yang sama seperti yang ditunjukkan pada topik sebelumnya.

Ringkasan

Pengujian di AngularJS dilakukan dengan menggunakan kerangka karma, kerangka kerja yang dikembangkan oleh Google sendiri.
Kerangka kerja karma diinstal menggunakan manajer paket node. Modul utama yang perlu diinstal untuk pengujian dasar adalah karma, karma-chrome-launcher, karma-jasmine, dan karma-cli.
Pengujian ditulis dalam file js terpisah, biasanya disimpan di folder pengujian aplikasi Anda. Lokasi file pengujian ini harus disebutkan dalam file konfigurasi khusus bernama karma.conf.js. Karma menggunakan file konfigurasi ini saat menjalankan semua pengujian.
Karma juga dapat digunakan untuk menguji Pengendali dan arahan khusus.
Untuk pengujian web ujung ke ujung, kerangka kerja lain yang disebut busur derajat perlu diinstal melalui Node, manajer paket. Framework ini menyediakan metode khusus yang dapat digunakan untuk menguji semua elemen pada halaman HTML.

Pengujian Unit AngularJS: Tutorial Karma Jasmine

Pengenalan & Pemasangan kerangka Karma

Pemasangan Karma

Konfigurasi kerangka Karma

Menguji Pengontrol AngularJS

Menguji Direktif AngularJS

Pengujian ujung ke ujung aplikasi AngularJS JS

Ringkasan

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin

Pengenalan & Pemasangan kerangka Karma

Pemasangan Karma

Konfigurasi kerangka Karma

ARTIKEL TERKAIT

Menguji Pengontrol AngularJS

Menguji Direktif AngularJS

Pengujian ujung ke ujung aplikasi AngularJS JS

Ringkasan

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin