recherche
Maisoninterface Webjs tutorielTest AngularJS: blocs de bootstrap, itinéraires, événements et animations

AngularJS Testing: Bootstrap Blocks, Routes, Events, and Animations

Points clés

  • Les tests unitaires sont essentiels pour le développement de logiciels, en particulier pour les applications qui contiennent des centaines de milliers de lignes de code JavaScript. AngularJS prend en charge des fonctionnalités telles que l'injection de dépendance (DI) pour faciliter les tests de code.
  • Les blocs de configuration et d'exécution sont exécutés au début du cycle de vie du module et contiennent une logique importante. Ils ne peuvent pas être appelés directement comme d'autres composants, ce qui rend les tests délicats, mais en raison de leur rôle critique, ils ne peuvent pas être ignorés.
  • AngularJS fournit une agrégation d'événements via l'événement $scope sur $emit/$broadcast, permettant aux objets d'interagir les uns avec les autres même s'ils ne se connaissent pas. Les tests unitaires sont écrits isolément, donc la spécification de test doit simuler une extrémité pour tester la fonctionnalité.
  • Le routage définit la façon dont les utilisateurs naviguent dans l'application, et toutes les modifications peuvent entraîner une mauvaise expérience utilisateur. Par conséquent, le routage doit également être testé. Les deux routeurs les plus couramment utilisés dans les applications AngularJS sont NgOUTE et UI-Router.
  • Les animations de test dans AngularJS sont plus simples que les instructions de test, et la bibliothèque angular-mocks contient des modules ngAnimateMock pour simplifier ce processus. AngularJS empêche l'animation de fonctionner jusqu'à la fin de la première boucle de digest pour accélérer la liaison initiale.

En train de créer et de fournir des logiciels entièrement fonctionnels, nous appliquons une variété de technologies pour vérifier l'exactitude et la qualité du logiciel. Les tests unitaires sont l'une des techniques. De nombreuses organisations mettent l'accent sur les tests unitaires car il réduit le coût de la recherche et de la résolution des problèmes potentiels de l'application. Lorsque nous avons commencé à développer des applications contenant des centaines de milliers de lignes de code JavaScript, nous n'avons pas pu éviter de tester le code. Certains développeurs JavaScript disent que le test de JavaScript est plus important car le comportement de la langue est inconnu avant l'exécution. Heureusement, AngularJS facilite le code de test écrit en utilisant ce cadre plus facile en prenant en charge les fonctionnalités telles que l'injection de dépendance (DI). Dans mes articles précédents, j'ai discuté de quelques conseils sur la simulation, comment tester les contrôleurs, les services et les fournisseurs, et comment tester les instructions. Cet article introduira des tests pour les blocs de démarrage (y compris les blocs de configuration, les blocs d'exécution et les blocs de résolution de routage), les événements portée et les animations pour les applications AngularJS. Vous pouvez télécharger le code utilisé dans cet article à partir de notre référentiel GitHub, où vous pouvez également trouver des instructions pour exécuter les tests.

Test Configuration et exécutez le bloc

Les blocs de configuration et d'exécution sont exécutés au début du cycle de vie du module. Ils contiennent une logique importante pour contrôler le fonctionnement des modules, des widgets ou des applications. Les tester est un peu délicat car ils ne peuvent pas être appelés directement comme les autres composants. En même temps, ils ne peuvent pas être ignorés car leur rôle est crucial. Considérez la configuration suivante et les blocs d'exécution:

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);
    });
});

Similaire au cas avec le fournisseur de test, nous devons nous assurer que le module est chargé avant de tester la configuration et d'exécuter la fonctionnalité dans le bloc. Par conséquent, nous utiliserons un bloc d'injection vide pour charger le module. L'extrait de code suivant simule les dépendances utilisées dans le bloc ci-dessus et charge le module:

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());
});

Je n'ai pas délibérément simulé l'objet $routeProvider car nous testerons les itinéraires enregistrés dans cet article plus tard. Le module est maintenant chargé, les blocs de configuration et d'exécution sont exécutés. Nous pouvons donc commencer à tester leur comportement. Étant donné que le bloc de configuration enregistre l'itinéraire, nous pouvons vérifier s'il enregistre l'itinéraire correct. Nous testerons si le nombre attendu d'itinéraires est enregistré. Les tests suivants vérifient la fonctionnalité du bloc de configuration:

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();
    });
});

Le bloc d'exécution dans l'exemple de code appelle un service et enregistre un événement. Nous testerons cet événement plus tard dans cet article. Actuellement, testons l'appel vers la méthode de service:

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");
    });
});

(La description ultérieure des événements de portée de test, du routage, des blocs d'analyse et des animations est omis ici en raison des limitations de l'espace. Pour les exemples complets de code de test, veuillez vous référer au référentiel GitHub d'origine)

Conclusion

Grâce à cet article, je présente la plupart des techniques de test que j'ai apprises pour tester le code AngularJS au cours des deux dernières années. Ce n'est pas la fin, et vous en apprendrez plus lorsque vous rédigerez des tests pour un scénario commercial de votre véritable application. J'espère que vous avez maintenant suffisamment de connaissances sur le test du code angularjs. Pourquoi attendre? Écrivez des tests pour chaque ligne de code que j'ai écrite jusqu'à présent!

(La partie FAQ dans le texte d'origine est également omise en raison des limitations de l'espace)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Remplacer les caractères de chaîne en javascriptRemplacer les caractères de chaîne en javascriptMar 11, 2025 am 12:07 AM

Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi

Créez vos propres applications Web AjaxCréez vos propres applications Web AjaxMar 09, 2025 am 12:11 AM

Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J

10 JQUERY FUN ET PLIGINS DE GAMES10 JQUERY FUN ET PLIGINS DE GAMESMar 08, 2025 am 12:42 AM

10 plugins de jeu JQuery amusants pour rendre votre site Web plus attrayant et améliorer l'adhérence des utilisateurs! Bien que Flash soit toujours le meilleur logiciel pour développer des jeux Web occasionnels, JQuery peut également créer des effets surprenants, et bien qu'il ne soit pas comparable aux jeux Flash Pure Action, dans certains cas, vous pouvez également vous amuser inattendu dans votre navigateur. jeu jquery tic toe Le "Hello World" de la programmation de jeux a désormais une version jQuery. Code source JQUERY Crazy Word Composition Game Il s'agit d'un jeu de remplissage, et il peut produire des résultats étranges en raison de ne pas connaître le contexte du mot. Code source Jeu de balayage de la mine jQuery

Comment créer et publier mes propres bibliothèques JavaScript?Comment créer et publier mes propres bibliothèques JavaScript?Mar 18, 2025 pm 03:12 PM

L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.

Tutoriel JQuery Parallax - Contexte d'en-tête animéTutoriel JQuery Parallax - Contexte d'en-tête animéMar 08, 2025 am 12:39 AM

Ce tutoriel montre comment créer un effet de fond de parallaxe captivant à l'aide de jQuery. Nous allons construire une bannière d'en-tête avec des images en couches qui créent une profondeur visuelle étonnante. Le plugin mis à jour fonctionne avec jQuery 1.6.4 et plus tard. Télécharger le

Rafraîchissement automatique du contenu div utilisant jQuery et AjaxRafraîchissement automatique du contenu div utilisant jQuery et AjaxMar 08, 2025 am 12:58 AM

Cet article montre comment actualiser automatiquement le contenu d'un div toutes les 5 secondes à l'aide de jQuery et Ajax. L'exemple récupère et affiche les derniers articles de blog d'un flux RSS, ainsi que le dernier horodatage de rafraîchissement. Une image de chargement est en optiona

Commencer avec Matter.js: IntroductionCommencer avec Matter.js: IntroductionMar 08, 2025 am 12:53 AM

Matter.js est un moteur de physique du corps rigide 2D écrit en JavaScript. Cette bibliothèque peut vous aider à simuler facilement la physique 2D dans votre navigateur. Il fournit de nombreuses fonctionnalités, telles que la capacité de créer des corps rigides et d'attribuer des propriétés physiques telles que la masse, la zone ou la densité. Vous pouvez également simuler différents types de collisions et de forces, tels que la frottement de gravité. Matter.js prend en charge tous les navigateurs grand public. De plus, il convient aux appareils mobiles car il détecte les touches et est réactif. Toutes ces fonctionnalités font de votre temps pour apprendre à utiliser le moteur, car cela facilite la création d'un jeu ou d'une simulation 2D basé sur la physique. Dans ce tutoriel, je couvrirai les bases de cette bibliothèque, y compris son installation et son utilisation, et fournir un

Comment optimiser le code JavaScript pour les performances dans le navigateur?Comment optimiser le code JavaScript pour les performances dans le navigateur?Mar 18, 2025 pm 03:14 PM

L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft