Pengujian Unit AngularJS: Tutorial Karma Jasmine

Daftar Isi:

Anonim

Salah satu fitur paling brilian dari Angular.JS adalah aspek Pengujian. Ketika pengembang di Google mengembangkan AngularJS, mereka terus menguji dan memastikan bahwa seluruh kerangka kerja AngularJS dapat diuji.

Di AngularJS, pengujian biasanya dilakukan menggunakan Karma (kerangka kerja). Pengujian JS Angular dapat dilakukan tanpa Karma, tetapi kerangka Karma memiliki fungsionalitas yang begitu cemerlang untuk menguji kode AngularJS, sehingga masuk akal untuk menggunakan kerangka kerja ini.

  • Di AngularJS, kami dapat melakukan Pengujian Unit secara terpisah untuk pengontrol dan arahan.
  • Kami juga dapat melakukan pengujian akhir dari AngularJS, yang menguji dari perspektif pengguna.

Dalam tutorial ini, Anda akan belajar-

  • Pengenalan & Pemasangan kerangka Karma
    • Pemasangan Karma
    • Konfigurasi kerangka Karma
  • Menguji AngularJS Controllers
  • Menguji direktif AngularJS
  • End to End Pengujian aplikasi AngularJS JS

Pengenalan & Pemasangan kerangka Karma

Karma adalah alat otomatisasi pengujian yang 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 instalasi modul dengan mudah di 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

  1. npm adalah utilitas baris perintah untuk pengelola paket node yang digunakan untuk menginstal modul kustom pada mesin apa pun.
  2. Parameter install menginstruksikan utilitas baris perintah npm bahwa penginstalan diperlukan.
  3. Ada 3 pustaka yang ditentukan di baris perintah yang diperlukan untuk bekerja dengan karma
    • karma adalah pustaka inti yang akan digunakan untuk tujuan pengujian.
    • karma-chrome-launcher adalah pustaka terpisah yang memungkinkan perintah karma dikenali oleh browser chrome.
    • karma-jasmine - Ini memasang melati yang merupakan kerangka kerja dependen untuk Karma.

Langkah 2) Langkah selanjutnya adalah menginstal utilitas baris perintah karma. Ini diperlukan untuk menjalankan perintah baris karma. Utilitas garis 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,

  1. 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 potongan yang ditunjukkan 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

  1. 'Nama Aplikasi Anda' - Ini akan diganti dengan nama aplikasi Anda.
  2. ' Nama Aplikasi Anda' / AngularJS / AngularJS.js ' - Ini memberi tahu karma bahwa aplikasi Anda bergantung pada modul inti di AngularJS
  3. 'Nama Aplikasi Anda' / AngularJS-mocks / AngularJS-mocks.js ' - Ini memberitahu karma untuk menggunakan fungsionalitas Pengujian Unit untuk AngularJS dari file Angular.JS-mocks.js.
  4. Semua aplikasi utama atau file logika bisnis ada di folder lib aplikasi Anda.
  5. 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 tes.

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

Kode di atas memiliki aspek-aspek berikut

  1. Fungsi mendeskripsikan digunakan untuk memberikan gambaran tentang tes. Dalam kasus kami, kami memberikan deskripsi 'Uji sampel' untuk pengujian kami.
  2. Fungsi 'it' digunakan untuk memberi nama pada tes. Dalam kasus kami, kami memberi nama pengujian kami sebagai 'Kondisi benar'. Nama tes harus bermakna.
  3. Kombinasi kata kunci 'ekspektasi' dan 'toBe' menyatakan nilai yang diharapkan dan nilai sebenarnya dari hasil tes. Jika nilai sebenarnya dan nilai yang diharapkan sama, maka tes akan lulus jika tidak maka akan gagal.

Ketika Anda menjalankan baris berikut pada command prompt, itu akan mengeksekusi file tes di atas

KARMA start

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

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

Menguji AngularJS Controllers

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

Mari kita lihat contoh bagaimana kita bisa mencapai ini.

Dalam contoh kami,

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

  1. Buat variabel ID dan tetapkan nilai 5 ke dalamnya.
  2. Tetapkan variabel ID ke objek $ scope.

Pengujian kami akan menguji keberadaan pengontrol ini dan juga menguji untuk melihat apakah variabel ID dari objek $ scope disetel ke 5.

Pertama, kita perlu memastikan prasyarat berikut ini ada

    1. Instal pustaka Angular.JS-mocks melalui npm. Ini dapat dilakukan dengan menjalankan baris di bawah ini pada command prompt
npm install Angular JS-mocks
  1. Selanjutnya adalah memodifikasi file karma.conf.js untuk memastikan file yang tepat disertakan untuk pengujian. Segmen di bawah ini hanya menunjukkan bagian file dari karma.conf.js yang perlu dimodifikasi 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parameter 'files' pada dasarnya memberi tahu 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 kami untuk pengontrol
  • Folder tes akan berisi semua tes AngularJS kami

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

Kode di bawah ini hanya melakukan hal-hal berikut

  1. Buat modul JS Angular yang disebut sampleApp
  2. Buat pengontrol bernama AngularJSController
  3. 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 Test Case untuk memastikan kode telah ditulis dan dijalankan dengan benar.

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

Kode akan berada dalam file terpisah bernama ControllerTest.js, yang akan ditempatkan di folder uji. Kode di bawah ini hanya melakukan hal-hal utama berikut

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

  2. Objek $ controller dibuat sebagai objek mockup untuk controller '' Angular JSController '' yang didefinisikan dalam file index.js kami. Dalam Pengujian Unit apa pun, objek tiruan mewakili objek dummy yang sebenarnya akan digunakan untuk pengujian. Objek tiruan ini sebenarnya akan mensimulasikan perilaku pengontrol kami.

  3. beforeEach (inject (function (_ $ controller_) - Ini digunakan untuk menyuntikkan objek tiruan dalam pengujian kami sehingga berperilaku seperti pengontrol yang sebenarnya.

  4. var $ scope = {}; Ini adalah objek tiruan yang sedang dibuat untuk objek $ scope.

  5. var controller = $ controller ('AngularJSController', {$ scope: $ scope}); - Di sini kami memeriksa keberadaan pengontrol bernama 'Angular.JSController'. Di sini kami juga menetapkan semua variabel dari objek $ scope kami di controller kami di file Index.js ke objek $ scope di file pengujian kami

  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 berjalan di browser karma dan memberikan hasil lulus yang sama seperti yang ditunjukkan pada topik sebelumnya.

Menguji Direktif AngularJS

Kerangka kerja pengujian karma juga memiliki fungsi untuk menguji arahan kustom. Ini termasuk templateURL yang digunakan dalam perintah kustom.

Mari kita lihat contoh bagaimana kita bisa mencapai ini.

Dalam contoh kami, pertama-tama kami akan menentukan direktif kustom yang melakukan hal-hal berikut

  1. Buat modul AngularJS yang disebut sampleApp
  2. Buat arahan kustom dengan nama - Guru99
  3. Buat fungsi yang mengembalikan template dengan tag header yang menampilkan teks "This is AngularJS Testing."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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

Kode akan berada di file terpisah bernama DirectiveTest.js, yang akan ditempatkan di folder pengujian. Kode di bawah ini hanya melakukan hal-hal utama berikut

  1. beforeEach function - Fungsi ini digunakan untuk memuat modul Angular JS kami yang disebut 'sampleApp' sebelum pengujian dijalankan.

  2. Layanan $ compile digunakan untuk mengkompilasi direktif. Layanan ini wajib dan perlu dideklarasikan agar Angular.JS dapat menggunakannya untuk menyusun direktif kustom kita.

  3. $ Rootscope adalah cakupan utama dari semua aplikasi AngularJS.JS. Kita telah melihat objek $ scope dari controller di bab-bab sebelumnya. Nah, objek $ scope adalah objek turunan dari objek $ rootscope. Alasan ini dideklarasikan di sini adalah karena kami membuat perubahan ke tag HTML sebenarnya di DOM melalui perintah khusus kami. Oleh karena itu, kita perlu menggunakan layanan $ rootscope yang benar-benar mendengarkan atau mengetahui bila ada perubahan yang terjadi dari dalam dokumen HTML.

  4. var element = $ compile (" ") - Ini digunakan untuk memeriksa apakah direktif kami dimasukkan sebagaimana mestinya. Nama custom directive kami adalah Guru99, dan kami tahu dari bab custom directives kami bahwa ketika direktif dimasukkan ke dalam HTML kami, itu akan dimasukkan sebagai ' '. Oleh karena itu pernyataan ini digunakan untuk melakukan pemeriksaan itu.

  5. ekspektasi (element.html ()). toContain ("This is AngularJS Testing") - Ini digunakan untuk menginstruksikan fungsi ekspektasi bahwa ia harus menemukan elemen (dalam kasus kami tag div) berisi teks innerHTML dari "This is 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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

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

End to End Pengujian aplikasi AngularJS JS

Kerangka kerja pengujian karma bersama dengan kerangka kerja yang disebut Busur derajat memiliki fungsi pengujian aplikasi web ujung ke ujung.

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

Mari kita lihat contoh bagaimana kita bisa mencapai ini.

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

  1. Kami pertama kali membuat variabel yang disebut "tutorial" dan menetapkan beberapa pasangan nilai kunci dalam satu langkah. Setiap pasangan nilai kunci akan digunakan sebagai data saat menampilkan tabel. Variabel tutorial kemudian ditetapkan ke objek lingkup sehingga dapat diakses dari pandangan 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. Terakhir, kami menggunakan tag bersama dengan pasangan nilai kunci (ptutor.Name dan ptutor.Description) untuk menampilkan data tabel.


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