Jasmine を使用した Angular 単体テストの概要

この記事では、Angular 単体テストに Jasmine を使用する方法について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

以下は、単体テストをほとんどまたはまったく作成したことがない人が多くの概念的な問題を専門用語で説明でき、Jasmine も使用することを想定して私が作成したものです。それらに対応する方法について説明します。

#1. コンセプト

テスト スイート

テスト スイート、単純なクラスにも複数のテスト ケースがあるため、これらのテスト ケースを 1 つのカテゴリに集めたものを

テスト スイート と呼びます。

Jasmine では、これは

describe グローバル関数によって表されます。その最初の文字列パラメータはスイートの名前またはタイトルを表すために使用され、2 番目のメソッド パラメータはスイートを実装するために使用されます。コードです。

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

仕様

仕様は、テストのために実装するコードの特定の本体であるテスト ケースに相当します。

Jasmine は、

describe と同様に、it グローバル関数を使用して、文字列とメソッドの 2 つのパラメーターを使用してそれを表します。

各仕様には、テストする必要があるコードをテストするための複数の期待値が含まれています。期待値の結果が

false である限り、テスト ケースは失敗した状態であることを意味します。

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

Expectations

アサーションは

expect グローバル関数によって表され、テスト対象の代表 ## を 1 つだけ受け取ります #実際の値 であり、 期待値 を表すために Matcher と照合する必要があります。

2. 一般的なメソッド

Matchersアサーション マッチング操作、実際の値と期待値を比較し、その結果を Jasmine に通知し、最後に Jasmine がこの仕様が成功するか失敗するかを判断します。

Jasmine は非常に豊富な API を提供しており、一般的に使用されるいくつかの Matcher:

toBe()
• は ===## と同等です。 #toNotBe() は !==
• toBeDefined() と同等です !== 未定義
• toBeUnknown() == = 未定義
• toBeNull() は === null
• toBeTruthy() と同等!!obj
• toBeFalsy() は !obj
• toBeLessThan() は 1d39b600c39b20975e376b7dd8f9211f<code>## と同等 #toEqual() は
==
• toNotEqual() は ## と同等#!=
• toContain() は indexOf
• toBeCloseTo() と同等であり、数値を比較する際の精度を定義します。最初に四捨五入してから比較します。
toHaveBeenCalled() 関数が呼び出されているかどうかを確認します
• toHaveBeenCalledWith() 受信パラメータがパラメータとして呼び出されているかどうかを確認します
toMatch() は
• と同等ですnew RegExp( ).test()
• toNotMatch() は
• !new RegExp().test()
• toThrow() と同等かどうかを確認します。関数はエラーをスローします
• これらの API は、以前は負の値の判定を示すために not を使用していました。

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

• これらの Matcher は、日常のニーズをほぼ満たすことができます。もちろん、特別なニーズに合わせて独自の Matcher をカスタマイズすることもできます。

セットアップとティアダウン

一般的なテスト コードは非常に重要なので、これらの繰り返しのセットアップ コードとティアダウン コードを対応する ## に置くことができます。 #beforeEach

と afterEach はグローバル関数内にあります。

beforeEach

は、各仕様が実行される前を意味し、その逆も同様です。 <pre class="brush:js;toolbar:false">describe(&amp;#39;demo test&amp;#39;, () =&gt; { let val: number = 0; beforeEach(() =&gt; { val = 1; }); it(&amp;#39;should be true&amp;#39;, () =&gt; { expect(val).toBe(1); }); it(&amp;#39;should be false&amp;#39;, () =&gt; { expect(val).not.toBe(0); }); });</pre>データ共有

上記の例のように、各テスト ファイルの先頭で定義できます (

describe#) ## 対応する変数。各

it が内部で共有できるようにします。 もちろん、各 Spec 実行サイクルには、Spec の実行が完了した後にクリアされるまで、空の this

オブジェクトも伴います。

this を使用することもできます。データ共有。

ネストされたコード

コンポーネントをテストするとき、コンポーネントにはさまざまな状態が表示され、その結果、 # を 1 つだけ使用することがあります。 ##describe では、現時点ではエレガントすぎるように思えます。

したがって、describe をネストすると、テストコードとテストレポートがより美しく見えます。

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

テストコードブロックをスキップしてください

要求はいつも中途半端ですが、最終的に書かれたテストコードは削除する必要がありますか？いいえ...スイートとスペックは、それぞれ

xdescribe

と xit グローバル関数を使用して、これらのテスト コード ブロックをスキップできます。

3. Angular ツール セットとの連携

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教程

以上がJasmine を使用した Angular 単体テストの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。