Contoh ujian unit dalam angularjs_AngularJS

Apabila projek ng semakin besar, ujian unit akan dimasukkan ke dalam agenda Kadangkala pasukan akan menguji terlebih dahulu, dan ada yang akan melaksanakan fungsi itu dahulu dan kemudian menguji modul berfungsi itu kemudian . Hari ini saya akan bercakap tentang Mari kita bercakap tentang menggunakan karma dan melati untuk melaksanakan ujian unit modul ng.

Apakah itu Karma

Karma ialah rangka kerja kawalan larian ujian unit yang menyediakan ujian unit berjalan dalam persekitaran yang berbeza, seperti chrome, firfox, phantomjs, dll. Rangka kerja ujian menyokong melati, mocha, qunit dan merupakan modul npm menggunakan nodejs sebagai persekitaran .

Adalah disyorkan untuk menggunakan parameter ----save-dev untuk memasang modul npm yang berkaitan dengan ujian, kerana ini berkaitan dengan pembangunan Secara amnya, untuk menjalankan karma, anda hanya memerlukan dua arahan npm berikut

Salin kod Kod adalah seperti berikut:

npm install karma --save-dev
npm install karma-junit-reporter --save-dev

Apabila memasang karma, beberapa modul yang biasa digunakan akan dipasang secara automatik Sila rujuk atribut peerDependencies fail package.json dalam kod karma

Salin kod Kod adalah seperti berikut:

"PeerDependencies": {
"karma-jasmine": "~0.1.0",
"karma-requirejs": "~0.2.0",
"karma-coffee-preprocessor": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-chrome-launcher": "~0.1.0",
"karma-firefox-launcher": "~0.1.0",
"karma-phantomjs-launcher": "~0.1.0",
"karma-script-launcher": "~0.1.0"
}

Rangka kerja berjalan biasa biasanya memerlukan fail konfigurasi Dalam karma, ia boleh menjadi karma.conf.js Kod di dalam adalah dalam gaya nodejs. Contoh biasa adalah seperti berikut

Salin kod Kod adalah seperti berikut:

module.exports = function(config){
config.set({
//Direktori asas dalam fail di bawah
basePath : '../',
// Maklumat JS yang perlu dimuatkan dalam persekitaran ujian
fail : [
'app/bower_components/angular/angular.js',
        'app/bower_components/angular-route/angular-route.js',
       'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/**/*.js',
      'ujian/unit/**/*.js'
],
// Sama ada untuk memantau perubahan secara automatik dalam fail di atas dan menjalankan ujian secara automatik
autoTonton : benar,
// Rangka kerja ujian aplikasi
rangka kerja: ['melati'],
//Persekitaran apa yang hendak digunakan untuk menguji kod, berikut ialah chrome`
pelayar: ['Chrome'],
// Pemalam digunakan, seperti pelayar krom dan pemalam melati
pemalam : [
             'pelancar karma-krom',
             'pelancar karma-firefox',
             'karma-melati',
            'karma-junit-reporter'
],
// Output kandungan ujian dan nama modul untuk eksport
Wartawan: ['kemajuan', 'junit'],
//Tetapkan maklumat untuk mengeluarkan fail kandungan ujian
JunitReporter : {
Fail Output: 'test_out/unit.xml',
Suite: 'unit'
}
});

};

Perlu diingatkan di sini bahawa kebanyakan pemalam di atas tidak perlu dipasang secara berasingan, kerana ia sudah dipasang semasa memasang karma Hanya pemalam eksport karma-junit-reporter perlu dipasang secara berasingan. Saya ingin mengetahui lebih lanjut mengenai maklumat fail tersedia, Klik di sini

Itu sahaja untuk karma Jika anda ingin mengetahui lebih lanjut mengenainya, Klik di sini

Apa itu melati

Jasmine ialah rangka kerja pembangunan dipacu tingkah laku untuk menguji kod JavaScript. Ia tidak memerlukan DOM dan mempunyai sintaks yang bersih dan jelas supaya anda boleh menulis ujian dengan mudah.

Di atas adalah penjelasannya dalam dokumentasi rasmi melati Di bawah adalah terjemahan mudah dalam bahasa Cina

jasmine ialah rangka kerja ujian untuk pembangunan dipacu tingkah laku Ia tidak bergantung pada mana-mana rangka kerja js atau DOM Ia adalah perpustakaan ujian API yang sangat bersih dan mesra.

Berikut ialah contoh mudah untuk menggambarkan penggunaannya

Takrifkan arahan fail ujian sebagai test.js

Salin kod Kod adalah seperti berikut:

describe("Spec (dengan persediaan dan pembongkaran)", function() {
var foo;

sebelumSetiap(fungsi() {
foo = 0;
foo = 1;
});

selepasSetiap(fungsi() {
foo = 0;
});

it("hanya fungsi, jadi ia boleh mengandungi sebarang kod", function() {
Jangkakan(foo).toEqual(1);
});

it("boleh mempunyai lebih daripada satu jangkaan", function() {
Jangkakan(foo).toEqual(1);
Jangkakan(benar).toEqual(benar);
});
});

Contoh di atas adalah daripada tapak web rasmi Berikut adalah beberapa API penting untuk kegunaan lanjut, sila Klik di sini

1. Pertama, mana-mana kes ujian ditakrifkan dengan fungsi huraikan, yang mempunyai dua parameter yang pertama digunakan untuk menerangkan kandungan pusat umum ujian, dan parameter kedua ialah fungsi di mana beberapa kod ujian sebenar tertulis

2.ia digunakan untuk mentakrifkan satu tugas ujian khusus Ia juga mempunyai dua parameter Yang pertama digunakan untuk menerangkan kandungan ujian, dan parameter kedua ialah fungsi yang menyimpan beberapa kaedah ujian

.

3.expect digunakan terutamanya untuk mengira nilai pembolehubah atau ungkapan, dan kemudian membandingkannya dengan nilai yang dijangkakan atau melakukan beberapa peristiwa lain

4.beforeEach dan afterEach digunakan terutamanya untuk melakukan sesuatu sebelum dan selepas melaksanakan tugas ujian Contoh di atas adalah untuk menukar nilai pembolehubah sebelum pelaksanaan, dan kemudian menetapkan semula nilai pembolehubah selepas pelaksanaan selesai. 🎜>

Perkara terakhir untuk dikatakan ialah skop dalam fungsi huraikan boleh diakses dalam sub-fungsi seperti JS biasa, sama seperti ia mengakses pembolehubah foo di atas

Jika anda ingin menjalankan contoh ujian di atas, anda boleh menjalankannya melalui karar Contoh arahan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

ujian permulaan karma/karma.conf.js

Mari fokus pada ujian unit pengawal, arahan dan modul perkhidmatan dalam ng.

Ujian unit NG

Disebabkan rangka kerja ng itu sendiri, modul dimuatkan dan dijadikan instantiated melalui di. . , memuatkan, suntikan, dsb.

Mari kita bincangkan tentang beberapa kaedah biasa dalam ng-mock

1.angular.mock.module Kaedah ini juga dalam ruang nama tetingkap dan sangat mudah untuk dipanggil

modul digunakan untuk mengkonfigurasi maklumat modul yang disuntik oleh kaedah suntikan Parameter boleh menjadi rentetan, fungsi dan objek, dan boleh digunakan seperti berikut

Salin kod Kod adalah seperti berikut:

beforeEach(modul('myApp.filters'));
beforeEach(modul(fungsi($provide) {

$provide.value('version', 'TEST_VER');
}));

Ia biasanya digunakan dalam kaedah beforeEach, kerana ini boleh memastikan kaedah suntikan boleh mendapatkan konfigurasi modul apabila melaksanakan tugas ujian

1.angular.mock.inject Kaedah ini juga dalam ruang nama tetingkap dan sangat mudah untuk dipanggil

inject digunakan untuk menyuntik modul ng yang dikonfigurasikan di atas, yang dipanggil dalam fungsi ujian contoh panggilan biasa adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

angular.module('myApplicationModule', [])
      .value('mod', 'app')
      .value('versi', 'v1.0.1');

  describe('MyApp', function() {

    // Anda perlu memuatkan modul yang ingin anda uji,
    // ia hanya memuatkan modul "ng" secara lalai.
    beforeEach(modul('myApplicationModule'));

    // inject() digunakan untuk menyuntik argumen semua fungsi yang diberikan
    ia('harus menyediakan versi', inject(fungsi(mod, versi) {
      jangkakan(versi).toEqual('v1.0.1');
      jangkakan(mod).toEqual('app');
    }));

    // Kaedah suntikan dan modul juga boleh digunakan di dalam atau sebelumSetiap
    it('sepatutnya mengatasi versi dan menguji versi baharu disuntik', function() {
      // module() mengambil fungsi atau rentetan (alias modul)
      modul(fungsi($provide) {
        $provide.value('versi', 'overridden'); // mengatasi versi di sini
      });

      inject(fungsi(versi) {
        expect(version).toEqual('override');
      });
    });
  });

上面是官方提供的一些inject例子,代码很好看懂,其实inject里面就是利用angular.inject上的爩用angular.inject徹的用angular.赖注入实例,然后里面的模块注入跟普通ng模块里的依赖处理是一样的

简单的介绍完ng-mock之后,下面我们分别以控制器,指令,过滤器来编写一卅们分别以控制器,指令,过滤器来编写一卅个管.

ng里控制器的单元测试

定义一个简单的控制器

复制代码 代码如下:

var myApp = angular.module('myApp',[]);
    myApp.controller('MyController', function($scope) {

      $scope.spices = [{"name":"pasilla", "spiciness":"mild"},
                       {"name":"jalapeno", "spiciness":"panas panas panas!"},
                       {"nama":"habanero", "kepedasan":"PANAS LAVA!!"}];
      $scope.spice = "hello feenan!";
});

然后我们编写一个测试脚本

复制代码 代码如下:

describe('myController function', function() {
  huraikan('myController', function() {

    var $skop;

    beforeEach(modul('myApp'));

    beforeEach(inject(function($rootScope, $controller) {

      $scope = $rootScope.$new();
      $controller('MyController', {$scope: $scope});
    }));

    ia('harus mencipta model "rempah" dengan 3 rempah', fungsi() {

      jangkakan($scope.spices.length).toBe(3);
    });

    ia('sepatutnya tetapkan nilai lalai rempah', function() {

      jangkakan($scope.spice).toBe('hello feenan!');
    });
  });

});

上面利用了$rootScope来创建子作用域,然后把这个参数传进控制器的构廀建方法上面的控制器里的方法,然后我们检查子作用域里的数组数量以及字符串变量是否跟期望的值相等.

想要了解更多关于ng里的控制器的信息,可以

点击这里

ng里指令的单元测试

定义一个简单的指令

复制代码 代码如下:

var app = angular.module('myApp', []);

app.directive('aGreatEye', fungsi () {
    kembali {
        hadkan: 'E',
        gantikan: benar,
        templat: '

tanpa penutup, dililit dalam api, 1 kali

'
    };
});

然后我们编写一个简单的测试脚本

复制代码 代码如下:

describe('Unit menguji petikan hebat', function() {
    var $compile;
    var $rootScope;

    // Muatkan modul myApp, yang mengandungi arahan
    beforeEach(modul('myApp'));

    // Simpan rujukan kepada $rootScope dan $compile
    // jadi ia tersedia untuk semua ujian dalam blok huraikan ini
    beforeEach(inject(function(_$compile_, _$rootScope_){
      // Penyuntik membuka balutan garis bawah (_) dari sekeliling nama parameter apabila memadankan
      $compile = _$compile_;
      $rootScope = _$rootScope_;
    }));

    it('Menggantikan elemen dengan kandungan yang sesuai', function() {
        // Susun sekeping HTML yang mengandungi arahan
        elemen var = $compile("")($rootScope);
        // pecat semua jam tangan, jadi ungkapan skop 1 akan dinilai
        $rootScope.$digest();
        // Semak bahawa elemen yang disusun mengandungi kandungan templat
        expect(element.html()).toContain("tanpa penutup, dililit dalam api, 2 kali");
    });
});

上面的例子来自于官方提供的,最终上面的指令将会这用在html里使用

复制代码 代码如下:

测试脚本里首先注入$compile与$rootScope两个服务,一个用来编译html,一个用来创建,一个用来编译html,一个用来创建,埨用来创建,一个用来编译html默认ng里注入的服务前后加上_时,最后会被ng处理掉的,这两个服务保存在内部的两个变量里,方便下面的测试用例能调$compile方法传入原指令html,然后在返回的函数里传入$rootScope,这样就完成了作完成了作甎埆作甎埆调用$rootScope.$digest来触发所有监听,保证视图里的模型内容得到更新

然后获取当前指令对应元素的html内容与期望值进行对比.

想要了解更多关于ng里的指令的信息,可以

点击这里

ng里的过滤器单元测试

定义一个简单的过滤器

复制代码 代码如下:

var app = angular.module('myApp', []);
app.filter('interpolate', ['version', function(version) {
    kembali fungsi(teks) {
      kembalikan String(teks).ganti(/%VERSION%/mg, versi);
    };
  }]);

然后编写一个简单的测试脚本

复制代码 代码如下:

describe('filter', function() {
beforeEach(modul('myApp'));

huraikan('interpolate', function() {

sebelumSetiap(modul(fungsi($provide) {
$provide.value('version', 'TEST_VER');
}));

Ia('sepatutnya menggantikan VERSI', inject(function(interpolateFilter) {
Jangkakan(interpolateFilter('sebelum %VERSION% selepas')).toEqual('sebelum TEST_VER selepas');
}));
});
});

Kod di atas mula-mula mengkonfigurasi modul penapis, kemudian mentakrifkan nilai versi, kerana interpolate bergantung pada perkhidmatan ini, dan akhirnya menggunakan inject untuk menyuntik penapis interpolate Ambil perhatian bahawa akhiran Penapis mesti ditambah selepas penapis di sini, dan akhirnya kandungan teks dihantar kepada Dilaksanakan dalam fungsi penapis dan dibandingkan dengan nilai yang dijangkakan.

Ringkasan

Terdapat banyak faedah menggunakan ujian untuk membangunkan NG Ia dapat memastikan kestabilan modul ialah ia boleh mempunyai pemahaman yang mendalam tentang mekanisme operasi dalaman ng yang berkembang dengan ng cepat menebus ujian!