Cara Ujian Unit dalam JavaScript AngularJS Library_AngularJS

Pemaju semua bersetuju bahawa ujian unit sangat bermanfaat dalam projek pembangunan. Ia membantu anda memastikan kualiti kod anda, dengan itu memastikan pembangunan yang lebih stabil dan keyakinan yang lebih besar walaupun semasa pemfaktoran semula diperlukan.

Carta aliran pembangunan dipacu ujian

Tuntutan kod AngularJS tentang kebolehujian yang lebih tinggi sememangnya munasabah. Hanya contoh ujian hujung ke hujung yang disenaraikan dalam dokumen boleh menggambarkan perkara ini. Untuk projek seperti AngularJS, walaupun ujian unit dikatakan mudah, ia tidak mudah untuk melakukannya dengan baik. Walaupun dokumentasi rasmi memberikan contoh terperinci, ia masih sangat mencabar dalam permohonan sebenar saya. Di sini saya hanya akan menunjukkan cara saya mengendalikannya.

Karma Segera

Karma ialah rangka kerja ujian yang dibangunkan oleh pasukan Angular untuk JavaScript. Ia dengan mudah mengautomasikan tugas ujian dan menggantikan operasi manual yang membosankan (seperti set ujian regresi atau memuatkan kebergantungan ujian sasaran Kerjasama antara Karma dan Angular adalah seperti mentega kacang dan jeli.

).

Anda hanya perlu mentakrifkan fail konfigurasi dalam Karma untuk memulakannya, dan kemudian ia akan melaksanakan kes ujian secara automatik dalam persekitaran ujian yang dijangkakan. Anda boleh menentukan persekitaran ujian yang berkaitan dalam fail konfigurasi. angular-seed ialah penyelesaian yang saya sangat mengesyorkan dan boleh dilaksanakan dengan cepat. Konfigurasi Karma dalam projek terbaru saya adalah seperti berikut:

module.exports = function(config) {
  config.set({
    basePath: '../',
 
    files: [
      'app/lib/angular/angular.js',
      'app/lib/angular/angular-*.js',
      'app/js/**/*.js',
      'test/lib/recaptcha/recaptcha_ajax.js',
      'test/lib/angular/angular-mocks.js',
      'test/unit/**/*.js'
    ],
 
    exclude: [
      'app/lib/angular/angular-loader.js',
      'app/lib/angular/*.min.js',
      'app/lib/angular/angular-scenario.js'
    ],
 
    autoWatch: true,
 
    frameworks: ['jasmine'],
 
    browsers: ['PhantomJS'],
 
    plugins: [
      'karma-junit-reporter',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-jasmine',
      'karma-phantomjs-launcher'
    ],
 
    junitReporter: {
      outputFile: 'test_out/unit.xml',
      suite: 'unit'
    }
 
  })
}

Ini adalah serupa dengan konfigurasi lalai angular-seed tetapi mempunyai perbezaan berikut:

• Adalah perlu untuk menukar penyemak imbas daripada Chrome kepada PhantomJS, supaya tidak perlu membuka tetingkap penyemak imbas baharu setiap kali anda melompat, tetapi akan berlaku kelewatan tetingkap dalam sistem OSX. Jadi tetapan pemalam dan penyemak imbas telah ditukar.
• Oleh kerana aplikasi saya perlu merujuk perkhidmatan Recaptcha Google, saya menambah fail kecil recaptcha_ajax.js yang bergantung. Konfigurasi kecil ini semudah menambah baris kod pada fail konfigurasi Karma.

autoWatch ialah tetapan yang sangat keren, ia akan membenarkan Karma kembali secara automatik kepada kes ujian anda apabila terdapat perubahan fail. Anda boleh memasang Karma seperti ini:

npm install karma

angular-seed menyediakan skrip mudah inskrip/test.sh untuk mencetuskan ujian Karma.

Reka bentuk kes ujian dengan Jasmine

Kebanyakan sumber sudah tersedia apabila mereka bentuk kes ujian unit untuk Angular menggunakan Jasmine - rangka kerja ujian JavaScript dengan model pembangunan dipacu tingkah laku.

Ini yang saya ingin bincangkan seterusnya.

Jika anda ingin menguji unit pengawal AngularJS, anda boleh menggunakan suntikan kebergantungan Angular suntikan kebergantungan Fungsi mengimport versi perkhidmatan yang diperlukan oleh pengawal dalam senario ujian dan juga menyemak sama ada keputusan yang dijangkakan adalah betul . Sebagai contoh, saya menentukan pengawal ini untuk menyerlahkan tab yang perlu dilayari ke:

app.controller('NavCtrl', function($scope, $location) {
  $scope.isActive = function(route) {
    return route === $location.path();
  };
})

Apakah yang akan saya lakukan jika saya ingin menguji kaedah isActive? Saya akan menyemak sama ada pembolehubah $locationservice mengembalikan nilai yang dijangkakan dan kaedah mengembalikan nilai yang dijangkakan. Oleh itu, dalam penerangan ujian kami, kami akan menentukan pembolehubah tempatan untuk menyimpan versi terkawal yang diperlukan semasa ujian dan menyuntiknya ke dalam pengawal yang sepadan apabila diperlukan. Kemudian dalam kes ujian sebenar kami akan menambah penegasan untuk mengesahkan sama ada keputusan sebenar adalah betul. Seluruh proses adalah seperti berikut:

describe('NavCtrl', function() {
  var $scope, $location, $rootScope, createController;
 
  beforeEach(inject(function($injector) {
    $location = $injector.get('$location');
    $rootScope = $injector.get('$rootScope');
    $scope = $rootScope.$new();
 
    var $controller = $injector.get('$controller');
 
    createController = function() {
      return $controller('NavCtrl', {
        '$scope': $scope
      });
    };
  }));
 
  it('should have a method to check if the path is active', function() {
    var controller = createController();
    $location.path('/about');
    expect($location.path()).toBe('/about');
    expect($scope.isActive('/about')).toBe(true);
    expect($scope.isActive('/contact')).toBe(false);
  });
});

Menggunakan keseluruhan struktur asas, anda boleh mereka bentuk pelbagai jenis ujian. Memandangkan senario ujian kami menggunakan persekitaran setempat untuk memanggil pengawal, anda juga boleh menambah beberapa lagi atribut dan kemudian melaksanakan kaedah untuk mengosongkan atribut ini dan kemudian mengesahkan sama ada atribut telah dikosongkan.

$httpBackendIs Cool

Jadi bagaimana jika anda memanggil $httpservice untuk meminta atau menghantar data ke pelayan? Nasib baik, Angular menyediakan

Kaedah olok-olok $httpBackend. Dengan cara ini, anda boleh menyesuaikan kandungan respons pelayan, atau memastikan bahawa keputusan respons pelayan adalah konsisten dengan jangkaan dalam ujian unit.

Butiran khusus adalah seperti berikut:

describe('MainCtrl', function() {
  var $scope, $rootScope, $httpBackend, $timeout, createController;
  beforeEach(inject(function($injector) {
    $timeout = $injector.get('$timeout');
    $httpBackend = $injector.get('$httpBackend');
    $rootScope = $injector.get('$rootScope');
    $scope = $rootScope.$new();
 
 
    var $controller = $injector.get('$controller');
 
    createController = function() {
      return $controller('MainCtrl', {
        '$scope': $scope
      });
    };
  }));
 
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });
 
  it('should run the Test to get the link data from the go backend', function() {
    var controller = createController();
    $scope.urlToScrape = 'success.com';
 
    $httpBackend.expect('GET', '/slurp?urlToScrape=http:%2F%2Fsuccess.com')
      .respond({
        "success": true,
        "links": ["http://www.google.com", "http://angularjs.org", "http://amazon.com"]
      });
 
    // have to use $apply to trigger the $digest which will
    // take care of the HTTP request
    $scope.$apply(function() {
      $scope.runTest();
    });
 
    expect($scope.parseOriginalUrlStatus).toEqual('calling');
 
    $httpBackend.flush();
 
    expect($scope.retrievedUrls).toEqual(["http://www.google.com", "http://angularjs.org", "http://amazon.com"]);
    expect($scope.parseOriginalUrlStatus).toEqual('waiting');
    expect($scope.doneScrapingOriginalUrl).toEqual(true);
  });
});

Seperti yang anda lihat, sebelumSetiap panggilan sebenarnya sangat serupa Satu-satunya perbezaan ialah kami mendapat $httpBackend daripada penyuntik dan bukannya mendapatkannya secara terus. Walaupun begitu, terdapat beberapa perbezaan yang jelas apabila membuat ujian yang berbeza. Sebagai permulaan, akan ada kaedah afterEachcall untuk memastikan bahawa $httpBackend tidak mempunyai permintaan abnormal yang jelas selepas setiap pelaksanaan kes penggunaan. Jika anda melihat pada tetapan senario ujian dan aplikasi kaedah $httpBackend, anda akan mendapati terdapat beberapa perkara yang tidak begitu intuitif.

Malah, kaedah memanggil $httpBackend adalah mudah dan jelas, tetapi ia tidak mencukupi - kita perlu memasukkan panggilan ke dalam kaedah $scope.runTest dalam ujian sebenar dalam kaedah menghantar nilai kepada $scope .$mohon. Dengan cara ini permintaan HTTP boleh diproses hanya selepas $digest dicetuskan. Seperti yang anda lihat, $httpBackend tidak akan dihuraikan sehingga kami memanggil kaedah $httpBackend.flush(), yang memastikan bahawa kami boleh mengesahkan sama ada hasil yang dikembalikan adalah betul semasa panggilan (dalam contoh di atas, pengawal $scope. sifat parseOriginalUrlStatusproperty akan dihantar kepada pemanggil, jadi kami boleh memantaunya dalam masa nyata)

Beberapa baris kod seterusnya ialah penegasan yang mengesan atribut $scopethat semasa panggilan. Sejuk kan?

Petua: Dalam sesetengah ujian unit, pengguna terbiasa menanda skop tanpa $ sebagai pembolehubah. Ini tidak wajib atau terlalu ditekankan dalam dokumentasi Sudut, tetapi saya menggunakan $scopelike untuk meningkatkan kebolehbacaan dan konsistensi.

Kesimpulan

Mungkin ini adalah salah satu perkara yang saya alami, tetapi belajar menulis ujian unit dalam Angular pastinya agak menyakitkan bagi saya pada mulanya. Saya mendapati bahawa kebanyakan pemahaman saya tentang cara untuk bermula datang daripada tampalan pelbagai catatan blog dan sumber di internet, tanpa amalan terbaik yang benar-benar konsisten atau jelas, tetapi melalui pilihan rawak yang datang secara semula jadi. Saya ingin menyediakan beberapa dokumentasi tentang apa yang saya dapat membantu orang lain yang mungkin bergelut kerana mereka hanya mahu menulis kod daripada perlu memahami semua ciri pelik dan unik penggunaan Angular dan Jasmine. Jadi saya harap artikel ini dapat membantu anda.