Pengujian Unit AngularJS dengan Karma & Jasmine

Salah satu fitur paling cemerlang dari AngularJS adalah... pengujian aspek. Ketika para pengembang di Google Saat mengembangkan AngularJS, mereka selalu mempertimbangkan pengujian dan memastikan bahwa seluruh kerangka kerja AngularJS dapat diuji.

Dalam AngularJS, pengujian biasanya dilakukan menggunakan Karma (framework). Pengujian AngularJS dapat dilakukan tanpa Karma, tetapi framework Karma memiliki fungsionalitas yang sangat bagus untuk menguji kode AngularJS, sehingga masuk akal untuk menggunakan framework ini.

• Di AngularJS, kita bisa melakukan Pengujian Unit secara terpisah untuk pengontrol dan arahan.
• Kita juga bisa tampil pengujian ujung ke ujung dari AngularJS, yaitu pengujian dari perspektif pengguna.

Pengenalan & Pemasangan kerangka Karma

Karma adalah a pengujian alat otomasi Dibuat oleh tim AngularJS di GoogleLangkah pertama untuk menggunakan Karma adalah menginstal Karma. Karma diinstal melalui npm (yaitu pengelola 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 --save-dev

Di mana,

1. npm adalah utilitas baris perintah untuk pengelola paket node yang digunakan untuk menginstal modul kustom pada mesin apa pun. npm disertakan dengan paket instalasi. Node.js.
2. Parameter install menginstruksikan utilitas baris perintah npm bahwa instalasi diperlukan.
3. 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 -g karma-cli

• karma-cli digunakan untuk menginstal antarmuka baris perintah untuk karma yang akan digunakan untuk menulis perintah karma di antarmuka baris perintah. Flag -g menginstalnya secara global sehingga perintah karma tersedia dari folder mana pun.

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

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

1. sudut.js – Ini memberi tahu Karma bahwa aplikasi Anda bergantung pada modul inti di AngularJS.
2. angular-mocks.js – Ini memberi tahu Karma untuk menggunakan fungsionalitas Pengujian Unit untuk AngularJS dari file angular-mocks.js.
3. Semua aplikasi utama atau file logika bisnis ada di folder lib aplikasi Anda.
4. 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

1. Fungsi deskripsikan digunakan untuk memberikan deskripsi tes. Dalam kasus kami, kami memberikan deskripsi 'Tes sampel' untuk pengujian kami.
2. Fungsi 'it' digunakan untuk memberi nama pada pengujian. Dalam kasus kami, kami memberi nama pengujian kami sebagai 'Kondisi benar'. Nama tesnya harus bermakna.
3. 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.

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

Apa itu Jasmine dalam pengujian unit AngularJS?

Karma menentukan di mana pengujian dijalankan, sementara Jasmine menentukan bagaimana pengujian tersebut ditulis. Jasmine adalah kerangka kerja spesifikasi berbasis perilaku yang menyediakan kosakata yang digunakan dalam setiap contoh di halaman ini, itulah sebabnya adaptor karma-jasmine diinstal bersamaan dengan runner.

Jasmine memberikan empat elemen dasar:

• menggambarkan(): Mengelompokkan spesifikasi terkait ke dalam sebuah rangkaian dan menerima deskripsi yang mudah dibaca dari unit yang sedang diuji.
• dia(): Mendeklarasikan satu spesifikasi tunggal. Nama tersebut harus menyatakan perilaku yang diverifikasi, bukan metode yang dipanggil.
• expect() dengan matcher: Membandingkan nilai aktual dengan nilai yang diharapkan. Pencocok umum meliputi toBe, toEqual, toContain, dan toBeDefined.
• sebelumEach() dan setelahEach(): Jalankan pengaturan dan pembersihan sebelum dan sesudah setiap spesifikasi, yang menjaga agar setiap pengujian tetap independen.

Jasmine juga menyediakan spy. Spy menggantikan fungsi sebenarnya dengan fungsi pengganti yang direkam, sehingga controller dapat diuji tanpa memanggil endpoint HTTP langsung. Karena Jasmine tidak memerlukan DOM dan pustaka assertion sendiri, kombinasi Karma dan Jasmine tetap menjadi cara paling ringan untuk menjalankan AngularJS. JavaPengujian unit skrip.

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

1. Buat variabel ID dan berikan nilai 5 padanya.
2. 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 pustaka angular-mocks melalui npm. Ini dapat dilakukan dengan menjalankan baris berikut di command prompt.

npm install angular-mocks --save-dev

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/angular.js', 'lib/angular-mocks.js', 'lib/index.js', 'test/*.js']

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

Berikut adalah kode AngularJS kami yang akan disimpan sebagai file Index.js di folder test aplikasi kami.

Kode di bawah ini hanya melakukan hal-hal berikut

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

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

1. Fungsi beforeEach – Fungsi ini digunakan untuk memuat modul AngularJS kita yang bernama 'sampleApp' sebelum pengujian dijalankan. Perhatikan bahwa ini adalah nama modul dalam file index.js.
2. Objek `$controller` dibuat sebagai objek tiruan (mockup) untuk controller “AngularJSController” yang didefinisikan dalam file index.js kita. Dalam pengujian unit apa pun, objek tiruan (mock object) mewakili objek dummy yang sebenarnya akan digunakan untuk pengujian. Objek tiruan ini akan mensimulasikan perilaku controller kita.
3. beforeEach(inject(function(_$controller_) – Ini digunakan untuk menginjeksi objek tiruan dalam pengujian kita sehingga berperilaku seperti pengontrol sebenarnya.
4. var $ruang lingkup = {}; Ini adalah objek tiruan yang dibuat untuk objek $scope.
5. var controller = $controller('AngularJSController', { $scope: $scope }); – Di sini kita memeriksa keberadaan controller bernama 'AngularJSController'. Di sini kita juga menetapkan semua variabel dari objek $scope di controller kita dalam file Index.js ke objek $scope di file pengujian kita.
6. 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 fungsionalitas untuk menguji arahan khusus. Ini termasuk templat.URLyang 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

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

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

1. Fungsi beforeEach – Fungsi ini digunakan untuk memuat modul AngularJS kita yang bernama 'sampleApp' sebelum pengujian dijalankan.
2. Layanan `$compile` digunakan untuk mengkompilasi directive. Layanan ini wajib dan perlu dideklarasikan agar AngularJS dapat menggunakannya untuk mengkompilasi directive kustom kita.
3. `$rootScope` adalah cakupan utama dari setiap aplikasi AngularJS. Kita telah melihat objek `$scope` dari controller di bab-bab sebelumnya. Nah, objek `$scope` adalah objek turunan dari objek `$rootScope`. Alasan mengapa ini dideklarasikan di sini adalah karena kita melakukan perubahan pada tag HTML sebenarnya di DOM melalui directive kustom kita. Oleh karena itu, kita perlu menggunakan layanan `$rootScope` yang sebenarnya mendengarkan atau mengetahui kapan terjadi perubahan dari dalam dokumen HTML.
4. var element = $compile(“ ”($rootScope) – Ini digunakan untuk memeriksa apakah directive kita diinjeksikan sebagaimana mestinya. Directive tersebut terdaftar dengan nama camel case guru99, sehingga AngularJS mencocokkan elemen huruf kecil. dalam markup. Oleh karena itu, pernyataan ini digunakan untuk melakukan pengecekan tersebut.
5. expect(element.html()).toContain(“This is AngularJS Testing”) – Ini digunakan untuk menginstruksikan fungsi expect agar menemukan elemen (dalam kasus kita tag h1) yang berisi teks innerHTML “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");
  });
});

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

Pengujian End-to-End Aplikasi AngularJS

Kerangka kerja pengujian karma beserta kerangka kerja yang disebut ProtracTor memiliki fungsionalitas untuk menguji aplikasi web secara menyeluruh (end-to-end).

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.

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

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

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 versi protracMenginstal pustaka Tor melalui npm. Ini dapat dilakukan dengan menjalankan baris berikut di command prompt.

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

1. Fungsi peramban disediakan oleh protracPustaka Tor dan mengasumsikan bahwa aplikasi AngularJS kita (dengan kode yang ditunjukkan di atas) berjalan di situs kita. URL – http://localhost:8080/Guru99 /
2. var list = element.all(by.repeater('ptutor in tutorial')); -Baris kode ini sebenarnya mengambil direktif ng-repeat yang diisi dengan kode 'ptutor in tutorial'. `element` dan `by.repeater` adalah kata kunci khusus yang disediakan oleh program.tracPustaka Tor yang memungkinkan kita untuk mendapatkan detail dari direktif ng-repeat.
3. 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.

Karma vs Jasmine vs Protractor: Perbedaan Utama

Ketiga alat yang digunakan di halaman ini seringkali membingungkan karena muncul dalam baris perintah yang sama. Masing-masing alat menempati lapisan yang berbeda dalam tumpukan pengujian, seperti yang dijelaskan dalam tabel di bawah ini.

Singkatnya, Jasmine menulis tesnya, Karma menjalankannya, dan ProtracTor memperluas sintaks Jasmine yang sama ke halaman yang dirender sepenuhnya.

Praktik Terbaik untuk Pengujian Unit AngularJS

Sejumlah kebiasaan sederhana menjaga agar rangkaian AngularJS tetap cepat dan andal seiring pertumbuhan aplikasi.

1. Uji satu unit dalam satu waktu. Hanya muat modul yang sedang diuji di dalam beforeEach, dan buat mock untuk setiap kolaborator sehingga kegagalan akan mengarah ke satu file saja.
2. Jangan pernah menghubungi backend sungguhan. Gunakan layanan $httpBackend dari angular-mocks untuk mengembalikan respons yang sudah ditentukan. Pengujian kemudian dijalankan secara offline dan menghasilkan hasil yang identik di setiap mesin.
3. Gunakan nama spesifikasi yang menunjukkan perilaku. Nama seperti “mengembalikan 5 saat pengontrol diinisialisasi” terbaca lebih baik dalam laporan daripada “test1”.
4. Selalu bersihkan siklus pencernaan. Panggil `$rootScope.$digest()` setelah mengubah data cakupan, jika tidak, pengikatan dan pengawas tidak akan pernah diperbarui dan pernyataan akan gagal karena alasan yang salah.
5. Ukurlah cakupannya, tetapi nilailah dengan hati-hati. Tambahkan karma-coverage untuk melihat cabang yang belum diuji. Cakupan tinggi dengan pernyataan yang lemah masih menyembunyikan cacat.
6. Jalankan rangkaian pengujian dalam integrasi berkelanjutan. Gunakan peluncur Chrome tanpa antarmuka grafis (headless) agar spesifikasi yang sama dijalankan pada setiap commit, bukan hanya pada mesin pengembang.

Menerapkan aturan-aturan ini mengubah contoh-contoh di atas dari demonstrasi terisolasi menjadi jaring pengaman regresi untuk basis kode AngularJS lama. Untuk gambaran yang lebih luas, lihat Tutorial AngularJS series.

Pertanyaan Umum Demo Slot