Petua Ujian AngularJS: Arahan Ujian

mata utama

Arahan dalam AngularJs adalah kritikal untuk operasi DOM dan tidak boleh diabaikan dalam ujian unit kerana ia memberi kesan yang signifikan kepada ketersediaan permohonan anda.
Ujian arahan melibatkan menubuhkan persekitaran ujian di mana arahan disusun secara manual dan mengejek objek dan perkhidmatan yang diperlukan untuk mengasingkan fungsi arahan.
• Fungsi
dalam arahan
• bertanggungjawab untuk pelaksanaan logik teras, seperti operasi DOM dan pengendalian acara, dan harus diuji dengan teliti menggunakan utiliti ujian AngularJS. link
memudahkan proses ujian dengan mengintegrasikan templat yang digunakan oleh arahan ke
• semasa ujian. $templateCache
Apabila menguji arahan yang diasingkan, pastikan sifat skop itu terikat dengan betul dan berjalan seperti yang diharapkan, yang penting untuk fungsi yang dimaksudkan Arahan dalam permohonan.

Ujian unit adalah bahagian penting dalam pembangunan perisian dan membantu mengurangkan kesilapan kod. Ujian adalah salah satu daripada beberapa tugas untuk meningkatkan kualiti kod. AngularJS dicipta dengan kesesuaian dalam fikiran, jadi mana -mana kod yang ditulis di atas kerangka boleh diuji dengan mudah. Dalam jawatan terakhir saya pada ujian, saya meliputi pengawal, perkhidmatan, dan penyedia ujian unit. Artikel ini terus membincangkan ujian arahan. Arahan adalah berbeza daripada komponen lain kerana ia tidak digunakan sebagai objek dalam kod JavaScript, tetapi dalam templat HTML aplikasi. Kami menulis arahan untuk melakukan operasi DOM dan kami tidak boleh mengabaikannya dalam ujian unit kerana mereka memainkan peranan penting. Selain itu, mereka secara langsung menjejaskan ketersediaan permohonan. Saya cadangkan anda menyemak artikel terdahulu mengenai kebergantungan mengejek dalam ujian AngularJS, kerana kami akan menggunakan beberapa teknik dari artikel itu dalam artikel ini. Jika anda ingin mencuba kod yang dibangunkan dalam tutorial ini, anda boleh menyemak repositori GitHub yang saya buat untuk anda.

Ujian Arahan

Arahan adalah komponen yang paling penting dan kompleks di AngularJS. Ujian arahan adalah rumit kerana mereka tidak dipanggil seperti fungsi. Dalam aplikasi, arahan digunakan secara deklaratif pada templat HTML. Apabila templat disusun dan pengguna berinteraksi dengan arahan, tindakan mereka dilaksanakan. Apabila melakukan ujian unit, kita perlu mengautomasikan operasi pengguna dan menyusun HTML secara manual untuk menguji fungsi arahan.

Tetapkan objek arahan ujian

Sama seperti menguji mana -mana bahasa atau menggunakan mana -mana coretan logik dalam mana -mana rangka kerja, kita perlu mendapatkan rujukan kepada objek yang diperlukan sebelum memulakan Arahan Ujian. Objek utama yang akan dibuat di sini adalah elemen yang mengandungi arahan yang akan diuji. Kita perlu menyusun serpihan HTML dengan arahan yang ditentukan agar arahan itu berkuatkuasa. Sebagai contoh, pertimbangkan arahan berikut:

Kitaran hidup arahan

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

akan bermula dan fungsi penyusun dan pautan akan dilaksanakan. Kami secara manual boleh menyusun mana -mana templat HTML menggunakan perkhidmatan

. Blok $compile berikut menyusun arahan di atas: beforeEach

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

Selepas penyusunan, kitaran hayat arahan akan bermula. Selepas kitaran pencernaan seterusnya, objek arahan akan berada dalam keadaan yang sama seperti yang terdapat pada halaman. Jika Arahan bergantung kepada mana -mana perkhidmatan untuk melaksanakan fungsinya, Perkhidmatan mesti disamar sebagai menyusun arahan supaya panggilan ke mana -mana kaedah perkhidmatan boleh diperiksa dalam ujian. Kami akan melihat contoh di bahagian seterusnya.

Fungsi pautan ujian

Fungsi

link adalah sifat yang paling biasa digunakan dalam objek definisi arahan (DDOS). Ia mengandungi kebanyakan logik teras arahan. Logik ini termasuk operasi DOM yang mudah, mendengar acara menerbitkan/melanggan, memantau perubahan objek atau atribut, perkhidmatan panggilan, mengendalikan acara UI, dan banyak lagi. Kami akan cuba menutup kebanyakan senario ini.

operasi dom

mari kita mulakan dengan kes arahan yang ditakrifkan dalam bahagian sebelumnya. Arahan ini menambah elemen span kepada kandungan elemen yang menggunakan arahan. Ia boleh diuji dengan mencari rentang di dalam arahan. Kes ujian berikut menegaskan tingkah laku ini:

var compile, scope, directiveElem;

beforeEach(function(){
  module('sampleDirectives');

  inject(function($compile, $rootScope){
    compile = $compile;
    scope = $rootScope.$new();
  });

  directiveElem = getCompiledElement();
});

function getCompiledElement(){
  var element = angular.element('<div first-directive=""></div>');
  var compiledElement = compile(element)(scope);
  scope.$digest();
  return compiledElement;
}

Observer

Sejak arahan bertindak pada keadaan semasa skop, mereka sepatutnya mempunyai pemerhati untuk mengemas kini arahan apabila keadaan skop berubah. Ujian unit pemerhati mesti memanipulasi data dan memaksa pemerhati untuk dijalankan dengan memanggil $digest, dan status arahan mesti diperiksa selepas kitaran dicerna. Kod berikut adalah versi yang sedikit diubahsuai dari arahan di atas. Ia menggunakan medan pada skop untuk mengikat teks di dalam rentang:

it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});

Ujian Arahan ini adalah serupa dengan Arahan Pertama; Kes ujian berikut mengesahkan sama ada status arahan telah berubah:

angular.module('sampleDirectives').directive('secondDirective', function(){
  return function(scope, elem){
    var spanElement = angular.element('' + scope.text + '');
    elem.append(spanElement);

    scope.$watch('text', function(newVal, oldVal){
      spanElement.text(newVal);
    });
  };
});

Teknik yang sama juga boleh digunakan untuk pemerhati pada sifat ujian.

(Kandungan berikutnya akan dipermudahkan dan diringkaskan kerana batasan ruang, dan kaedah dan idea ujian teras akan dikekalkan)

event dom Anda boleh menggunakan JQLite's triggerHandler untuk mensimulasikan peristiwa klik dan mengesahkan hasilnya.

Templat Templat Arahan Templat preload dengan $templateCache untuk memudahkan ujian.

Ujian Skop Arahan Sahkan harta yang mengikat dan kaedah panggilan untuk skop pengasingan.

Memerlukan Ujian Sahkan kebergantungan arahan, termasuk ketergantungan yang ketat dan pilihan.

Ganti ujian Periksa sama ada elemen arahan diganti.

Ujian transclude Sahkan bahawa Arahan mengendalikan kandungan yang diterjemahkan dengan betul.

Ringkasan

Seperti yang ditunjukkan dalam artikel ini, arahan lebih sukar untuk diuji daripada konsep lain di AngularJS. Pada masa yang sama, mereka tidak boleh diabaikan kerana mereka mengawal beberapa bahagian penting aplikasi. Ekosistem ujian AngularJS memudahkan kita menguji mana -mana bahagian projek. Saya berharap melalui tutorial ini, anda kini akan lebih yakin dalam menguji arahan. Tolong beritahu saya apa yang anda fikirkan di bahagian komen. Jika anda ingin mencuba kod yang dibangunkan dalam tutorial ini, anda boleh menyemak repositori GitHub yang saya buat untuk anda.

(bahagian Soalan Lazim ditinggalkan di sini kerana panjang artikel. Kandungan teras telah dilindungi di atas.)

Atas ialah kandungan terperinci Petua Ujian AngularJS: Arahan Ujian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!