Introduction aux tests unitaires angulaires à l'aide de Jasmine

Cet article vous expliquera comment utiliser Jasmine pour les tests unitaires angulaires ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Ce qui suit est préparé par moi en supposant que ceux qui ont rarement ou pas écrit de tests unitaires peuvent donc expliquer de nombreux problèmes conceptuels en langue vernaculaire et utiliseront également Jasmine. pour y répondre, des méthodes sont expliquées.

1. Concept

Suite de tests

Suite de tests, Même une classe simple aura plusieurs cas de test, donc la collection de ces cas de test sous une seule catégorie est appelée Test Suite.

Dans Jasmine, il est représenté par la fonction globale describe Son premier paramètre de chaîne est utilisé pour représenter le nom ou le titre de la Suite, et le deuxième paramètre de méthode consiste à implémenter le code de la Suite.

describe('test suite name', () => {
});

Specs

Une spécification est équivalente à un scénario de test, qui est le corps spécifique de code que nous implémentons pour tester.

Jasmine utilise la fonction globale it pour le représenter. Semblable à describe, elle a deux paramètres : chaîne et méthode.

Chaque spécification comprend plusieurs attentes pour tester le code qui doit être testé Tant que le résultat d'une attente est false, cela signifie que le scénario de test est dans un état d'échec.

describe('demo test', () => {
    const VALUE = true;
    it('should be true', () => {
        expect(VALUE).toBe(VALUE);
    })
});

Attentes

L'assertion, représentée par la expect fonction globale, ne reçoit qu'une valeur réelle, et doit être mis en correspondance avec Matcher pour représenter la valeur attendue.

2. Méthodes courantes

Matchers

Opération de correspondance d'assertions , comparez la valeur réelle avec la valeur attendue et informez Jasmine du résultat. Enfin, Jasmine déterminera si cette spécification réussit ou échoue.

Jasmine fournit une API très riche, certains Matchers couramment utilisés :

• est équivalent à toBe()===
toNotBe() est équivalent à
• !==
toBeDefined() est équivalent à
• !== undefined
toBeUndefined() est équivalent à
• === undefined
toBeNull() est équivalent à
• === null
toBeTruthy() est équivalent à
• !!obj
toBeFalsy() est équivalent à
• !obj
toBeLessThan() est équivalent à
• 0d02ee59a7cc5dcc4ed99b3b3a168019
toEqual() est équivalent à
• ==
toNotEqual() est équivalent à
• !=
toContain() est équivalent à
• indexOf
toBeCloseTo() Définissez la précision lors de la comparaison des valeurs numériques, arrondissez d'abord puis comparez .
• toHaveBeenCalled() vérifie si la fonction a été appelée
• toHaveBeenCalledWith() vérifie si les paramètres entrants ont été appelés en tant que paramètres
• toMatch() est équivalent à
• new RegExp().test()
toNotMatch() est équivalent à
• !new RegExp().test()
toThrow() pour vérifier si la fonction générera une erreur

Ces API précédemment utilisées

. pour indiquer un jugement de valeur négatif. not

expect(true).not.toBe(false);

Ces Matchers peuvent presque répondre à nos besoins quotidiens. Bien sûr, vous pouvez également personnaliser votre propre Matcher pour répondre à des besoins particuliers.

Configuration et démontage

Un code de test général est très important, nous pouvons donc mettre ces codes de configuration et de démontage répétés dans le et

sont dans la fonction globale. beforeEachafterEach

signifie avant l'exécution de chaque spécification, et vice versa.

describe('demo test', () => {
    let val: number = 0;
    beforeEach(() => {
        val = 1;
    });
    it('should be true', () => {
        expect(val).toBe(1);
    });
    it('should be false', () => {
        expect(val).not.toBe(0);
    });
});

beforeEach

Partage des donnéesComme dans l'exemple ci-dessus, on peut définir les variables correspondantes au début de chaque fichier de test,

, De cette façon, chacun

peut les partager en interne. describeitBien entendu, chaque cycle d'exécution de la spécification sera accompagné d'un objet

vide jusqu'à ce qu'il soit effacé une fois l'exécution de la spécification terminée. Le partage de données peut également être effectué à l'aide de

. thisthis

Code imbriquéParfois, lorsque nous testons un composant, le composant aura différents états pour afficher différents. Par conséquent, en utilisant un seul

à ce moment-là, cela aura l'air trop élégant.

describe Par conséquent, l'imbrication

rendra le code de test et le rapport de test plus beaux.

describe('AppComponent', () => {
    describe('Show User', () => {
        it('should be show panel.', () => {});
        it('should be show avatar.', () => {});
    });
    describe('Hidden User', () => { 
        it('should be hidden panel.', () => {});
    });
});

describe

Passer le bloc de code de testLa demande est toujours timide, mais le code de test est finalement écrit, s'il est supprimé ? Non...

Les suites et les spécifications peuvent utiliser respectivement les fonctions globales

et

pour ignorer ces blocs de code de test. xdescribexit

3. Coopérer avec l'ensemble d'outils angulaires

Spy

Angular的自定义事件实在太普遍了，但为了测试这些自定义事件，因此监控事件是否正常被调用是非常重要。好在，Spy 可以用于监测函数是否被调用，这简直就是我们的好伙伴。

以下示例暂时无须理会，暂且体验一下：

describe('AppComponent', () => {
    let fixture: ComponentFixture<TestComponent>;
    let context: TestComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [TestComponent]
        });
        fixture = TestBed.createComponent(TestComponent);
        context = fixture.componentInstance;
        // 监听onSelected方法
        spyOn(context, &#39;onSelected&#39;);
        fixture.detectChanges();
    });

    it(&#39;should be called [selected] event.&#39;, () => {
        // 触发selected操作

        // 断言是否被调用过
        expect(context.onSelected).toHaveBeenCalled();
    });
});

异步支持

首先，这里的异步是指带有 Observable 或 Promise 的异步行为，因此对于组件在调用某个 Service 来异步获取数据时的测试状态。

假设我们的待测试组件代码：

export class AppComponent {
  constructor(private _user: UserService) {}

  query() {
    this._user.quer().subscribe(() => {});
  }
}

async

async 无任何参数与返回值，所有包裹代码块里的测试代码，可以通过调用 whenStable() 让所有待处理异步行为都完成后再进行回调；最后，再进行断言操作。

it('should be get user list (async)', async(() => {
    // call component.query();
    fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(true).toBe(true);
    });
}));

fakeAsync

如果说 async 还需要回调才能进行断点让你受不了的话，那么 fakeAsync 可以解决这一点。

it('should be get user list (async)', fakeAsync(() => {
    // call component.query();
    tick();
    fixture.detectChanges();
    expect(true).toBe(true);
}));

这里只是将回调换成 tick()，怎么样，是不是很酷。

Jasmine自带异步

如前面所说的异步是指带有 Observable 或 Promise 的异步行为，而有时候我们有些东西是依赖 setTimeout 或者可能是需要外部订阅结果以后才能触发时怎么办呢？

可以使用 done() 方法。

it('async demo', (done: () => void) => {
    context.show().subscribe(res => {
        expect(true).toBe(true);
        done();
    });
    el.querySelected('xxx').click();
});

四、结论

本章几乎所有的内容在Angular单元测试经常使用到的东西；特别是异步部分，三种不同异步方式并非共存的，而是需要根据具体业务而采用。否则，你会发现真TM难写单元测试。毕竟这是一个异步的世界。

自此，我们算是为Angular写单元测试打下了基础。后续，将不会再对这类基础进行解释。

happy coding!

相关教程推荐：angular教程

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!