Ujian Unit AngularJS: Tutorial Karma Jasmine

Isi kandungan:

Anonim

Salah satu ciri Angular.JS yang paling cemerlang adalah aspek Pengujian. Semasa pembangun di Google mengembangkan AngularJS, mereka terus menguji dan memastikan bahawa seluruh kerangka kerja AngularJS dapat diuji.

Di AngularJS, pengujian biasanya dilakukan dengan menggunakan Karma (framework). Pengujian JS sudut boleh dilakukan tanpa Karma, tetapi kerangka Karma mempunyai fungsi yang sangat baik untuk menguji kod AngularJS, sehingga masuk akal untuk menggunakan kerangka ini.

  • Di AngularJS, kita dapat melakukan Ujian Unit secara berasingan untuk pengawal dan arahan.
  • Kami juga boleh melakukan ujian akhir dari AngularJS, yang menguji dari perspektif pengguna.

Dalam tutorial ini, anda akan belajar-

  • Pengenalan & Pemasangan kerangka Karma
    • Pemasangan Karma
    • Konfigurasi kerangka Karma
  • Menguji Pengawal AngularJS
  • Menguji arahan AngularJS
  • Ujian Akhir ke Akhir Aplikasi JS AngularJS

Pengenalan & Pemasangan kerangka Karma

Karma adalah alat automasi pengujian yang dibuat oleh pasukan Angular JS di Google. Langkah pertama untuk menggunakan Karma adalah memasang Karma. Karma dipasang melalui npm (yang merupakan pengurus pakej yang digunakan untuk pemasangan modul pada mesin tempatan dengan mudah).

Pemasangan Karma

Pemasangan Karma melalui npm dilakukan dalam proses dua langkah.

Langkah 1) Jalankan baris di bawah dari dalam baris arahan

npm install karma karma-chrome-launcher karma-jasmine

Di mana

  1. npm adalah utiliti baris perintah untuk pengurus paket nod yang digunakan untuk memasang modul tersuai pada mesin mana pun.
  2. Parameter pemasangan mengarahkan utiliti baris perintah npm bahawa pemasangan diperlukan.
  3. Terdapat 3 perpustakaan yang ditentukan dalam baris perintah yang diperlukan untuk bekerja dengan karma
    • karma adalah perpustakaan teras yang akan digunakan untuk tujuan ujian.
    • karma-chrome-launcher adalah perpustakaan yang berasingan yang membolehkan perintah karma dikenali oleh penyemak imbas chrome.
    • karma-melati - Ini memasang melati yang merupakan kerangka yang bergantung kepada Karma.

Langkah 2) Langkah seterusnya adalah memasang utiliti baris perintah karma. Ini diperlukan untuk melaksanakan perintah baris karma. Utiliti garis karma akan digunakan untuk menginisialisasi persekitaran karma untuk ujian.

Untuk memasang utiliti baris perintah jalankan baris di bawah dari dalam baris perintah

npm install karma-cli

di mana,

  1. karma-cli digunakan untuk memasang antara muka baris perintah untuk karma yang akan digunakan untuk menulis perintah karma di antara muka baris perintah.

Konfigurasi kerangka Karma

Langkah seterusnya adalah mengkonfigurasi karma yang dapat dilakukan melalui perintah

"karma -init"

Setelah langkah di atas dilaksanakan, karma akan membuat fail karma.conf.js. Fail mungkin kelihatan seperti coretan yang ditunjukkan di bawah

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

Fail konfigurasi di atas memberitahu mesin karma runtime perkara berikut

  1. 'Nama aplikasi anda' - Ini akan diganti dengan nama aplikasi anda.
  2. ' Nama aplikasi anda' / AngularJS / AngularJS.js ' - Ini memberitahu karma bahawa aplikasi anda bergantung pada modul teras di AngularJS
  3. 'Nama aplikasi anda' / AngularJS-mocks / AngularJS-mocks.js ' - Ini memberitahu karma untuk menggunakan fungsi Uji Unit untuk AngularJS dari fail Angular.JS-mocks.js.
  4. Semua fail aplikasi atau logik perniagaan utama terdapat dalam folder lib aplikasi anda.
  5. Folder ujian akan mengandungi semua ujian unit

Untuk memeriksa sama ada karma berfungsi, buat fail bernama Sample.js, masukkan kod di bawah dan letakkan di direktori ujian.

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

Kod di atas mempunyai aspek berikut

  1. Fungsi deskripsi digunakan untuk memberi penerangan mengenai ujian. Dalam kes kami, kami memberikan keterangan 'Contoh ujian' untuk ujian kami.
  2. Fungsi 'it' digunakan untuk memberi nama pada ujian. Dalam kes kami, kami memberikan nama ujian kami sebagai 'Condition is true'. Nama ujian itu mesti bermakna.
  3. Gabungan kata kunci 'mengharapkan' dan 'toBe' menyatakan mengenai berapa jangkaan dan nilai sebenar keputusan ujian. Sekiranya nilai sebenar dan yang diharapkan adalah sama, maka ujian akan lulus, ia akan gagal.

Apabila anda menjalankan baris berikut di command prompt, ia akan menjalankan fail ujian di atas

KARMA start

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

  1. Hasilnya datang dalam penjelajah Karma dalam Webstorm. Tingkap ini menunjukkan pelaksanaan semua ujian yang ditentukan dalam kerangka karma.
  2. Di sini anda dapat melihat bahawa keterangan ujian yang dijalankan ditunjukkan sebagai "Uji sampel."
  3. Seterusnya, anda dapat melihat bahawa ujian itu sendiri yang mempunyai nama "Condition is true" dijalankan.
  4. Perhatikan bahawa kerana semua ujian mempunyai ikon "Ok" hijau di sebelahnya yang melambangkan bahawa semua ujian lulus.

Menguji Pengawal AngularJS

Kerangka pengujian karma juga mempunyai fungsi untuk menguji Pengawal dari ujung ke ujung. Ini termasuk pengujian objek lingkup $ yang digunakan dalam Pengawal.

Mari kita lihat contoh bagaimana kita dapat mencapainya.

Dalam contoh kami,

Pertama kita perlu menentukan pengawal. Pengawal ini akan melakukan langkah-langkah yang disebutkan di bawah

  1. Buat pemboleh ubah ID dan berikan nilai 5 kepadanya.
  2. Tetapkan pemboleh ubah ID ke objek lingkup $.

Ujian kami akan menguji keberadaan pengawal ini dan juga menguji untuk melihat apakah pemboleh ubah ID objek $ lingkup ditetapkan ke 5.

Mula-mula kita perlu memastikan prasyarat berikut ada

    1. Pasang perpustakaan Angular.JS-mocks melalui npm. Ini dapat dilakukan dengan menjalankan baris di bawah pada command prompt
npm install Angular JS-mocks
  1. Seterusnya adalah mengubah fail karma.conf.js untuk memastikan fail yang betul disertakan untuk ujian. Segmen di bawah ini hanya menunjukkan bahagian fail dari karma.conf.js yang perlu diubah suai 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • Parameter 'files' pada dasarnya memberitahu Karma semua fail yang diperlukan dalam menjalankan ujian.
  • Fail AngularJS.js dan AngularJS-mocks.js diperlukan untuk menjalankan ujian unit AngularJS
  • Fail index.js akan mengandungi kod kami untuk pengawal
  • Folder ujian akan mengandungi semua ujian AngularJS kami

Berikut adalah kod Angular.JS kami yang akan disimpan sebagai file Index.js dalam folder ujian aplikasi kami.

Kod di bawah hanya melakukan perkara berikut

  1. Buat modul JS Angular yang disebut sampleApp
  2. Buat pengawal yang dipanggil AngularJSController
  3. Buat pemboleh ubah yang disebut ID, berikan nilai 5 dan tetapkan ke objek lingkup $
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

Setelah kod di atas dilaksanakan dengan jayanya, langkah selanjutnya adalah membuat Uji Kes untuk memastikan kod tersebut telah ditulis dan dilaksanakan dengan baik.

Kod untuk ujian kami adalah seperti di bawah.

Kod tersebut akan berada dalam fail berasingan yang disebut ControllerTest.js, yang akan ditempatkan di folder ujian. Kod di bawah hanya melakukan perkara penting berikut

  1. BeforeEach function - Fungsi ini digunakan untuk memuatkan modul AngularJS.JS kami yang dipanggil 'sampleApp' sebelum ujian dijalankan. Perhatikan bahawa ini adalah nama modul dalam fail index.js.

  2. Objek $ controller dibuat sebagai objek mockup untuk pengawal "Angular JSController" yang ditentukan dalam fail index.js kami. Dalam apa-apa jenis Ujian Unit, objek tiruan mewakili objek palsu yang sebenarnya akan digunakan untuk ujian. Objek tiruan ini sebenarnya akan mensimulasikan tingkah laku pengawal kami.

  3. BeforeEach (inject (function (_ $ controller_) - Ini digunakan untuk menyuntikkan objek tiruan dalam ujian kami supaya ia berperilaku seperti pengawal sebenar.

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

  5. var controller = $ controller ('AngularJSController', {$ lingkup: $ lingkup}); - Di sini kita memeriksa keberadaan pengawal bernama 'Angular.JSController'. Di sini kami juga menetapkan semua pemboleh ubah dari objek $ lingkup kami di pengawal kami dalam fail Index.js ke objek $ lingkup dalam fail ujian kami

  6. Akhirnya, kami membandingkan $ lingkup.ID hingga 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);});});});

Ujian di atas akan dijalankan dalam penyemak imbas karma dan memberikan hasil lulus yang sama seperti yang ditunjukkan dalam topik sebelumnya.

Menguji Arahan AngularJS

Kerangka pengujian karma juga mempunyai fungsi untuk menguji arahan khusus. Ini termasuk templateURL yang digunakan dalam arahan khusus.

Mari kita lihat contoh bagaimana kita dapat mencapainya.

Dalam contoh kami, pertama kami akan menentukan arahan khusus yang melakukan perkara-perkara berikut

  1. Buat modul AngularJS yang disebut sampleApp
  2. Buat arahan khusus dengan nama - Guru99
  3. Buat fungsi yang mengembalikan templat dengan tag tajuk yang memaparkan teks "Ini adalah Pengujian AngularJS."
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

Setelah kod di atas dieksekusi dengan jayanya, langkah selanjutnya adalah membuat kes ujian untuk memastikan kod tersebut telah ditulis dan dilaksanakan dengan baik. Kod untuk ujian kami adalah seperti di bawah

Kod tersebut akan berada dalam fail berasingan yang disebut DirectiveTest.js, yang akan ditempatkan di folder ujian. Kod di bawah hanya melakukan perkara penting berikut

  1. fungsi SebelumEach - Fungsi ini digunakan untuk memuat modul JS Angular kami yang dipanggil 'sampleApp' sebelum ujian dijalankan.

  2. Perkhidmatan $ compile digunakan untuk menyusun arahan. Perkhidmatan ini wajib dan perlu dinyatakan supaya Angular.JS dapat menggunakannya untuk menyusun arahan khusus kami.

  3. $ Rootscope adalah skop utama bagi setiap aplikasi AngularJS.JS. Kami telah melihat objek skop $ pengawal dalam bab-bab sebelumnya. Nah, objek lingkup $ adalah objek anak dari objek $ rootscope. Sebab ini dinyatakan di sini adalah kerana kami membuat perubahan pada tag HTML sebenar di DOM melalui arahan khusus kami. Oleh itu, kita perlu menggunakan perkhidmatan $ rootscope yang benar-benar mendengar atau mengetahui bila ada perubahan yang berlaku dari dalam dokumen HTML.

  4. var element = $ compile (" ") - Ini digunakan untuk memeriksa sama ada arahan kami disuntik sebagaimana mestinya. Nama arahan khusus kami adalah Guru99, dan kami tahu dari bab arahan khusus kami bahawa apabila arahan itu disuntikkan dalam HTML kami, perintah tersebut akan disuntikkan sebagai ' '. Oleh itu pernyataan ini digunakan untuk membuat pemeriksaan tersebut.

  5. expect (element.html ()). toContain ("This is AngularJS Testing") - Ini digunakan untuk mengarahkan fungsi jangka bahawa ia harus mencari elemen (dalam kes kita tag div) mengandungi teks HTML dalam "Ini adalah Ujian 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");});});

Ujian di atas akan dijalankan dalam penyemak imbas karma dan memberikan hasil lulus yang sama seperti yang ditunjukkan dalam topik sebelumnya.

Ujian Akhir ke Akhir Aplikasi JS AngularJS

Kerangka pengujian karma bersama dengan kerangka yang disebut Protractor mempunyai fungsi menguji aplikasi web dari ujung ke ujung.

Jadi bukan hanya menguji arahan dan pengawal, tetapi juga menguji perkara lain yang mungkin muncul di halaman HTML.

Mari kita lihat contoh bagaimana kita dapat mencapainya.

Dalam contoh di bawah ini, kita akan mempunyai aplikasi AngularJS yang membuat jadual data menggunakan arahan ng-ulangan.

  1. Kami mula-mula membuat pemboleh ubah yang disebut "tutorial" dan memberikannya beberapa pasangan kunci-nilai dalam satu langkah. Setiap pasangan nilai-kunci akan digunakan sebagai data ketika memaparkan jadual. Pemboleh ubah tutorial kemudian ditugaskan ke objek lingkup sehingga dapat diakses dari pandangan kami.
  2. Untuk setiap baris data dalam jadual, kami menggunakan arahan ng-ulangi. Arahan ini melalui setiap pasangan nilai-kunci dalam objek skop tutorial dengan menggunakan pemboleh ubah ptutor.
  3. Akhirnya, kami menggunakan tag bersama dengan pasangan nilai kunci (ptutor.Name dan ptutor.Description) untuk memaparkan data jadual.


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