Mengejutkan ketergantungan dalam ujian AngularJS

mata teras

AngularJS dilahirkan dengan ujian dalam fikiran, dan mekanisme suntikan ketergantungan terbina dalam membolehkan setiap komponen diuji menggunakan rangka kerja ujian JavaScript (seperti melati).
mengejek dalam ujian unit melibatkan keupayaan untuk mengasingkan coretan kod ujian, yang boleh mencabar kerana kebergantungan datang dari sumber yang berbeza. Simulasi dalam AngularJS dipermudahkan dengan modul
• , yang menyediakan simulasi untuk satu set perkhidmatan AngularJS yang biasa digunakan. angular-mocks
Simulasi Perkhidmatan di Angularjs boleh dicapai dengan mendapatkan contoh perkhidmatan sebenar dan mendengar perkhidmatan, atau menggunakan
• untuk melaksanakan perkhidmatan simulasi. Kaedah terakhir adalah lebih baik, yang boleh mengelakkan memanggil pelaksanaan kaedah sebenar perkhidmatan. $provide
Simulasi penyedia di AngularJS mengikuti peraturan yang sama sebagai simulasi perkhidmatan. Kaedah
• mesti dilaksanakan dalam ujian. Jika fungsi yang ditakrifkan dalam fungsi $get tidak diperlukan dalam fail ujian, ia boleh diberikan nilai kepada fungsi kosong. $get
objek global (seperti sebahagian daripada objek atau objek "tetingkap" global yang dibuat oleh perpustakaan pihak ketiga) boleh disimulasikan dengan menyuntikkannya ke
• atau menggunakan objek global untuk mencipta nilai atau pemalar dan menyuntikkannya Seperti yang diperlukan. $window

Konsep reka bentuk AngularJS termasuk ujian. Kod sumber rangka kerja sangat baik, dan mana -mana kod yang ditulis menggunakan rangka kerja juga boleh diuji. Mekanisme suntikan ketergantungan terbina dalam memungkinkan untuk menguji setiap komponen yang ditulis dalam AngularJS. Kod dalam aplikasi AngularJS boleh diuji unit menggunakan rangka kerja ujian JavaScript yang sedia ada. Rangka kerja yang paling biasa digunakan untuk menguji kod AngularJS adalah melati. Semua coretan kod sampel dalam artikel ini ditulis menggunakan Jasmine. Jika anda menggunakan rangka kerja ujian lain dalam projek sudut anda, anda masih boleh menggunakan idea -idea yang dibincangkan dalam artikel ini.

Artikel ini mengandaikan bahawa anda sudah mempunyai pengalaman dalam ujian unit dan menguji kod AngularJS. Anda tidak perlu menjadi pakar ujian. Jika anda mempunyai pemahaman asas ujian dan boleh menulis beberapa kes ujian mudah untuk aplikasi AngularJS, anda boleh terus membaca artikel ini.

Peranan simulasi dalam ujian unit

Tugas setiap ujian unit adalah untuk menguji fungsi sekeping kod secara berasingan. Mengasingkan sistem yang diuji kadang -kadang boleh mencabar kerana kebergantungan boleh datang dari sumber yang berbeza dan kita perlu memahami sepenuhnya tanggungjawab objek yang akan disimulasikan.

Dalam bahasa yang tidak ditaip secara statik seperti JavaScript, simulasi adalah sukar kerana tidak mudah untuk memahami struktur objek yang akan disimulasikan. Pada masa yang sama, ia juga menyediakan fleksibiliti, iaitu, untuk mensimulasikan hanya sebahagian daripada objek yang sedang digunakan oleh sistem yang diuji, dan mengabaikan yang lain.

mengejek dalam ujian AngularJS

Oleh kerana salah satu matlamat utama AngularJS adalah kesesuaian, pasukan teras meletakkan usaha tambahan ke dalam ini untuk menjadikan ujian lebih mudah dan memberikan kita satu set simulasi dalam modul angular-mocks. Modul ini mengandungi simulasi di sekitar satu set perkhidmatan AngularJS (seperti $http, $timeout, $animate, dan lain -lain) yang digunakan secara meluas dalam mana -mana aplikasi AngularJS. Modul ini mengurangkan jumlah masa yang diperlukan untuk pemaju menulis ujian.

Simulasi ini sangat membantu apabila menulis ujian untuk aplikasi perniagaan sebenar. Pada masa yang sama, mereka tidak mencukupi untuk menguji keseluruhan permohonan. Kita perlu mengejek apa -apa kebergantungan dalam rangka kerja tetapi tidak mengejek - kebergantungan dari plugin pihak ketiga, objek global, atau kebergantungan yang dibuat dalam aplikasi. Artikel ini akan memperkenalkan beberapa petua mengenai kebergantungan angularjs yang mengejek.

Perkhidmatan simulasi

Perkhidmatan adalah jenis ketergantungan yang paling biasa dalam aplikasi AngularJS. Seperti yang anda sudah tahu, perkhidmatan adalah istilah yang terlalu banyak di AngularJS. Ia mungkin merujuk kepada perkhidmatan, kilang, nilai, pemalar, atau penyedia. Kami akan membincangkan pembekal di bahagian seterusnya. Perkhidmatan ini boleh disimulasikan dalam salah satu cara berikut:

• Kaedah menggunakan blok suntikan untuk mendapatkan contoh perkhidmatan sebenar dan mendengar perkhidmatan.
• Gunakan $provide untuk melaksanakan perkhidmatan simulasi.

Saya tidak suka kaedah pertama kerana ia boleh membawa kepada pelaksanaan kaedah sebenar perkhidmatan panggilan. Kami akan menggunakan kaedah kedua untuk mensimulasikan perkhidmatan berikut:

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

coretan kod berikut mencipta simulasi perkhidmatan di atas:

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模拟实现
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模拟实现
    });
  });
});

// 获取模拟服务的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

Walaupun contoh di atas menggunakan melati untuk mencipta mata -mata, anda boleh menggantikannya dengan sinon.js untuk mencapai fungsi yang setara.

Adalah lebih baik untuk membuat semua simulasi selepas memuat semua modul yang diperlukan untuk ujian. Jika tidak, jika perkhidmatan ditakrifkan dalam modul yang dimuatkan, pelaksanaan sebenar mengatasi pelaksanaan simulasi.

Pemalar, kilang, dan nilai boleh disimulasikan secara berasingan menggunakan $provide.constant, $provide.factory dan $provide.value.

Penyedia simulasi

Penyedia simulasi adalah serupa dengan perkhidmatan simulasi. Semua peraturan yang mesti diikuti apabila penulisan pembekal juga harus diikuti ketika mengejek mereka. Pertimbangkan pembekal berikut:

angular.module('mockingProviders',[])
  .provider('sample', function() {
    var registeredVals = [];

    this.register = function(val) {
      registeredVals.push(val);      
    };

    this.$get = function() {
      function getRegisteredVals() {
        return registeredVals;
      }

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });

coretan kod berikut mencipta simulasi untuk pembekal di atas:

module(function($provide) {
  $provide.provider('sample', function() {
    this.register = jasmine.createSpy('register');

    this.$get = function() {
      var getRegisteredVals = jasmine.createSpy('getRegisteredVals');

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });
});

// 获取提供程序的引用
var sampleProviderObj;

module(function(sampleProvider) {
  sampleProviderObj = sampleProvider;
});

Perbezaan antara mendapatkan rujukan kepada pembekal dan singleton lain adalah bahawa pembekal tidak tersedia di blok inject() pada masa ini, kerana pembekal ditukarkan ke kilang pada masa ini. Kita boleh menggunakan blok module() untuk mendapatkan objek mereka.

Dalam hal menentukan pembekal, kaedah $get juga harus dilaksanakan dalam ujian. Jika anda tidak memerlukan fungsi yang ditakrifkan dalam fungsi $get dalam fail ujian, anda boleh memberikannya kepada fungsi kosong.

modul analog

Jika modul dimuatkan dalam fail ujian memerlukan sekumpulan modul lain, modul di bawah ujian tidak boleh dimuatkan kecuali semua modul yang diperlukan dimuatkan. Memuatkan semua modul ini kadang -kadang menyebabkan ujian gagal kerana beberapa kaedah perkhidmatan sebenar boleh dipanggil dari ujian. Untuk mengelakkan kesukaran ini, kita boleh membuat modul maya untuk memuatkan modul yang diukur.

Sebagai contoh, katakan kod berikut mewakili modul dengan perkhidmatan contoh yang ditambahkan:

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

Kod berikut ialah blok beforeEach dalam fail ujian perkhidmatan sampel:

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模拟实现
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模拟实现
    });
  });
});

// 获取模拟服务的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

Sebagai alternatif, kita boleh menambah pelaksanaan simulasi perkhidmatan ke modul maya yang ditakrifkan di atas.

simulasi kaedah untuk kembali ke janji

Menulis aplikasi sudut akhir-ke-akhir boleh menjadi sukar tanpa menggunakan janji. Menguji coretan kod yang bergantung pada kaedah yang kembali menjanjikan menjadi cabaran. Perisik Jasmine biasa menyebabkan beberapa kes ujian gagal kerana fungsi di bawah ujian menjangkakan objek dengan struktur janji sebenar.

Kaedah asynchronous boleh disimulasikan dengan menggunakan kaedah asynchronous lain yang mengembalikan janji dengan nilai statik. Pertimbangkan kilang -kilang berikut:

angular.module('mockingProviders',[])
  .provider('sample', function() {
    var registeredVals = [];

    this.register = function(val) {
      registeredVals.push(val);      
    };

    this.$get = function() {
      function getRegisteredVals() {
        return registeredVals;
      }

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });

Kami akan menguji fungsi getData() di kilang di atas. Seperti yang dapat kita lihat, ia bergantung pada kaedah berkhidmat dataSourceSvc getAllItems(). Kita perlu mensimulasikan perkhidmatan dan kaedah sebelum menguji fungsi kaedah getData().

Perkhidmatan

$q mempunyai kaedah when() dan reject() yang membolehkan penggunaan nilai statik untuk menyelesaikan atau menolak janji. Kaedah ini sangat berguna dalam menguji kaedah mengejek yang kembali menjanjikan. Coretan kod berikut simulasi dataSourceSvc Kilang:

module(function($provide) {
  $provide.provider('sample', function() {
    this.register = jasmine.createSpy('register');

    this.$get = function() {
      var getRegisteredVals = jasmine.createSpy('getRegisteredVals');

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });
});

// 获取提供程序的引用
var sampleProviderObj;

module(function(sampleProvider) {
  sampleProviderObj = sampleProvider;
});

Janji

$q melengkapkan operasinya selepas kitaran pencernaan seterusnya. Kitaran dicerna berjalan secara berterusan dalam aplikasi sebenar, tetapi tidak dalam ujian. Oleh itu, kita perlu memanggil $rootScope.$digest() secara manual untuk menguatkuasakan janji. Coretan kod berikut menunjukkan ujian sampel:

angular.module('first', ['second', 'third'])
  // util 和 storage 分别在 second 和 third 中定义
  .service('sampleSvc', function(utilSvc, storageSvc) {
    // 服务实现
  });

Simulasi objek global

objek global datang dari sumber berikut:

1. objek yang merupakan sebahagian daripada objek "tetingkap" global (contohnya, LocalStorage, IndexedDB, matematik, dan lain -lain).
2. Objek yang dicipta oleh perpustakaan pihak ketiga seperti jQuery, garis bawah, momen, angin, atau mana-mana perpustakaan lain.

Secara lalai, objek global tidak boleh disimulasikan. Kita perlu mengikuti langkah -langkah tertentu untuk menjadikannya simulasi.

Kami mungkin tidak mahu mensimulasikan objek matematik atau objek utiliti (dicipta oleh Perpustakaan Underscore) kerana operasi mereka tidak melakukan logik perniagaan, mengendalikan UI, dan tidak berkomunikasi dengan sumber data. Walau bagaimanapun, objek seperti $ .ajax, localStorage, websockets, angin, dan toastr mesti disimulasikan. Kerana jika objek ini tidak dihina, mereka akan melakukan operasi sebenar mereka apabila melakukan ujian unit, yang boleh membawa kepada beberapa kemas kini UI yang tidak perlu, panggilan rangkaian, dan kadang -kadang kesilapan dalam kod ujian. _

Oleh kerana suntikan pergantungan, setiap bahagian kod yang ditulis dalam sudut boleh diuji. DI membolehkan kita lulus apa -apa objek yang mengikuti objek sebenar shim, hanya supaya kod yang diuji tidak akan pecah apabila dilaksanakan. Jika objek global boleh disuntik, mereka boleh disimulasikan. Terdapat dua cara untuk membuat objek global suntikan:

1. suntikan $window ke dalam perkhidmatan/pengawal yang memerlukan objek global dan mengakses objek global melalui $window. Sebagai contoh, perkhidmatan berikut menggunakan LocalStorage melalui $window:

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

2. Buat nilai atau malar menggunakan objek global dan suntikan di mana ia diperlukan. Sebagai contoh, kod berikut adalah malar untuk toastr:

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模拟实现
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模拟实现
    });
  });
});

// 获取模拟服务的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

Saya lebih suka membungkus objek global dengan pemalar dan bukannya nilai, kerana pemalar boleh disuntik ke dalam blok konfigurasi atau penyedia, dan pemalar tidak boleh dihiasi.

coretan kod berikut menunjukkan simulasi localstorage dan toastr:

angular.module('mockingProviders',[])
  .provider('sample', function() {
    var registeredVals = [];

    this.register = function(val) {
      registeredVals.push(val);      
    };

    this.$get = function() {
      function getRegisteredVals() {
        return registeredVals;
      }

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });

Kesimpulan

Mock adalah salah satu komponen penting dalam ujian unit penulisan dalam mana -mana bahasa. Seperti yang telah kita lihat, suntikan pergantungan memainkan peranan penting dalam ujian dan simulasi. Kod mesti dianjurkan dengan cara supaya fungsinya dapat diuji dengan mudah. Artikel ini menyenaraikan set objek yang paling biasa untuk mensimulasikan apabila menguji aplikasi AngularJS. Kod yang berkaitan dengan artikel ini boleh dimuat turun dari GitHub.

FAQ mengenai kebergantungan mengejek dalam ujian AngularJS (FAQ)

Apakah tujuan mengejek kebergantungan dalam ujian AngularJS?

Mengejutkan ketergantungan dalam ujian AngularJS adalah bahagian utama ujian unit. Ia membolehkan pemaju mengasingkan kod yang diuji dan mensimulasikan tingkah laku dependensi mereka. Dengan cara ini, anda boleh menguji bagaimana kod anda berinteraksi dengan kebergantungannya tanpa benar -benar memanggilnya. Ini amat berguna apabila kebergantungan adalah rumit, perlahan, atau mempunyai kesan sampingan yang anda ingin elakkan semasa ujian. Dengan mengejek kebergantungan ini, anda boleh memberi tumpuan kepada menguji fungsi kod anda dalam persekitaran terkawal.

Bagaimana untuk membuat perkhidmatan mengejek di AngularJS?

Membuat perkhidmatan mengejek di AngularJS melibatkan menggunakan perkhidmatan $provide dalam konfigurasi modul. Anda boleh menggunakan kaedah $provide value, factory atau service perkhidmatan untuk menentukan pelaksanaan simulasi perkhidmatan. Berikut adalah contoh asas:

module(function($provide) {
  $provide.provider('sample', function() {
    this.register = jasmine.createSpy('register');

    this.$get = function() {
      var getRegisteredVals = jasmine.createSpy('getRegisteredVals');

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });
});

// 获取提供程序的引用
var sampleProviderObj;

module(function(sampleProvider) {
  sampleProviderObj = sampleProvider;
});

Dalam contoh ini, kami menggunakan kaedah $provide.value untuk menentukan pelaksanaan simulasi myService. Semasa ujian, perkhidmatan mock ini akan digunakan dan bukannya perkhidmatan sebenar.

(sila tanya soalan Soalan Lazim yang lain satu demi satu kerana batasan ruang, dan saya akan berusaha sebaik mungkin untuk memberikan jawapan ringkas dan jelas.)

Atas ialah kandungan terperinci Mengejutkan ketergantungan dalam ujian AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!