Ujian AngularJS: Blok Bootstrap, Laluan, Acara, dan Animasi

mata utama

Ujian unit adalah kritikal untuk pembangunan perisian, terutamanya untuk aplikasi yang mengandungi beratus -ratus ribu baris kod JavaScript. AngularJS menyokong ciri -ciri seperti suntikan ketergantungan (DI) untuk membuat ujian kod lebih mudah.
Konfigurasi dan blok berjalan dilaksanakan pada permulaan kitaran hayat modul dan mengandungi logik penting. Mereka tidak boleh dipanggil secara langsung seperti komponen lain, yang membuat ujian mereka rumit, tetapi kerana peranan kritikal mereka, mereka tidak boleh diabaikan.
AngularJS menyediakan agregasi peristiwa melalui acara
• pada $scope, yang membolehkan objek berinteraksi antara satu sama lain walaupun mereka tidak tahu tentang satu sama lain. Ujian unit ditulis secara berasingan, jadi spesifikasi ujian perlu mensimulasikan satu hujung untuk menguji fungsi. $emit/$broadcast
Routing mentakrifkan bagaimana pengguna menavigasi dalam aplikasi, dan sebarang perubahan boleh membawa kepada pengalaman pengguna yang buruk. Oleh itu, penghalaan juga harus diuji. Kedua-dua router yang paling biasa digunakan dalam aplikasi AngularJS adalah ngroute dan ui-router.
Menguji animasi dalam AngularJs adalah lebih mudah daripada arahan ujian, dan perpustakaan
• mengandungi modul angular-mocks untuk memudahkan proses ini. AngularJS menghalang animasi dari berjalan sehingga gelung pencernaan pertama selesai untuk mempercepatkan pengikatan awal. ngAnimateMock

Dalam proses membina dan menyampaikan perisian berfungsi sepenuhnya, kami menggunakan pelbagai teknologi untuk memeriksa ketepatan dan kualiti perisian. Ujian unit adalah salah satu teknik. Banyak organisasi meletakkan penekanan yang besar terhadap ujian unit kerana ia mengurangkan kos mencari dan menetapkan masalah potensi permohonan. Apabila kami mula membangunkan aplikasi yang mengandungi beratus -ratus ribu baris kod JavaScript, kami tidak dapat mengelakkan menguji kod tersebut. Sesetengah pemaju JavaScript mengatakan ujian JavaScript lebih penting kerana tingkah laku bahasa tidak diketahui sebelum runtime. Syukurlah, AngularJS membuat kod ujian yang ditulis menggunakan rangka kerja ini lebih mudah dengan menyokong ciri -ciri seperti suntikan ketergantungan (DI). Dalam artikel terdahulu saya, saya membincangkan beberapa petua mengenai simulasi, bagaimana untuk menguji pengawal, perkhidmatan dan penyedia, dan bagaimana untuk menguji arahan. Artikel ini akan memperkenalkan ujian untuk blok boot (termasuk blok konfigurasi, blok larian, dan blok resolusi penghalaan), peristiwa scoped, dan animasi untuk aplikasi AngularJS. Anda boleh memuat turun kod yang digunakan dalam artikel ini dari repositori GitHub kami, di mana anda juga boleh mencari arahan untuk menjalankan ujian.

Konfigurasi ujian dan blok jalan

Konfigurasi dan blok berjalan dilaksanakan pada permulaan kitaran hayat modul. Mereka mengandungi logik penting untuk mengawal bagaimana modul, widget, atau aplikasi berfungsi. Menguji mereka agak rumit kerana mereka tidak boleh dipanggil secara langsung seperti komponen lain. Pada masa yang sama, mereka tidak boleh diabaikan kerana peranan mereka adalah penting. Pertimbangkan konfigurasi berikut dan blok berjalan:

angular.module('configAndRunBlocks', ['ngRoute'])
    .config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController',
        resolve: {
            bootstrap: ['$q', function ($q) {
                return $q.when({
                    prop: 'value'
                });
            }]
        }
    })
        .when('/details/:id', {
        templateUrl: 'details.html',
        controller: 'DetailsController'
    })
        .otherwise({
        redirectTo: '/home'
    });
})
    .run(function ($rootScope, messenger) {

    messenger.send('Bootstrapping application');
    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        messenger.send('Changing route to ' + next + ' from ' + current);
    });
});

Sama seperti kes dengan pembekal ujian, kita perlu memastikan bahawa modul dimuatkan sebelum menguji konfigurasi dan menjalankan fungsi di blok. Oleh itu, kami akan menggunakan blok suntikan kosong untuk memuatkan modul. Coretan kod berikut mensimulasikan kebergantungan yang digunakan dalam blok di atas dan memuat modul:

describe('config and run blocks', function () {
    var routeProvider, messenger;

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

        module(function ($provide, $routeProvider) {
            routeProvider = $routeProvider;
            spyOn(routeProvider, 'when').andCallThrough();
            spyOn(routeProvider, 'otherwise').andCallThrough();

            messenger = {
                send: jasmine.createSpy('send')
            };
            $provide.value('messenger', messenger);
        });

        module('configAndRunBlocks');
    });

    beforeEach(inject());
});

Saya sengaja tidak mensimulasikan objek $routeProvider kerana kami akan menguji laluan berdaftar dalam artikel ini kemudian. Modul kini dimuatkan, blok konfigurasi dan larian dilaksanakan. Jadi kita boleh mula menguji tingkah laku mereka. Oleh kerana blok konfigurasi mendaftarkan laluan, kita boleh menyemak sama ada ia mendaftarkan laluan yang betul. Kami akan menguji sama ada bilangan laluan yang dijangkakan didaftarkan. Ujian berikut mengesahkan fungsi blok konfigurasi:

describe('config block tests', function () {
    it('should have called registered 2 routes', function () {
        //Otherwise internally calls when. So, call count of when has to be 3
        expect(routeProvider.when.callCount).toBe(3);
    });

    it('should have registered a default route', function () {
        expect(routeProvider.otherwise).toHaveBeenCalled();
    });
});

Blok lari dalam kod sampel memanggil perkhidmatan dan mendaftarkan acara. Kami akan menguji acara ini kemudian dalam artikel ini. Pada masa ini, mari kita menguji panggilan ke kaedah perkhidmatan:

describe('run block tests', function () {
    var rootScope;
    beforeEach(inject(function ($rootScope) {
        rootScope = $rootScope;
    }));
    it('should send application bootstrap message', function () {
        expect(messenger.send).toHaveBeenCalled();
        expect(messenger.send).toHaveBeenCalledWith("Bootstrapping application");
    });
});

(Penerangan berikutnya mengenai peristiwa skop ujian, penghalaan, blok parsing dan animasi ditinggalkan di sini kerana batasan ruang. Untuk contoh kod ujian lengkap, sila rujuk repositori GitHub asal)

Kesimpulan

Melalui artikel ini, saya memperkenalkan kebanyakan teknik ujian yang saya pelajari dalam menguji kod AngularJS sejak dua tahun yang lalu. Ini bukan akhir, dan anda akan belajar lebih banyak apabila anda menulis ujian untuk senario perniagaan aplikasi sebenar anda. Saya harap anda kini mendapat pengetahuan yang cukup untuk menguji kod AngularJS. Kenapa tunggu? Tulis ujian untuk setiap baris kod yang saya tulis setakat ini!

(bahagian Soalan Lazim dalam teks asal juga ditinggalkan kerana batasan ruang)

Atas ialah kandungan terperinci Ujian AngularJS: Blok Bootstrap, Laluan, Acara, dan Animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!