Einführung in Angular-Unit-Tests mit Jasmine

<p>In diesem Artikel erfahren Sie, wie Sie Jasmine für Angular-Unit-Tests verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. </p> <p><img src="https://img.php.cn/upload/article/000/000/024/5f408f91953d2985.jpg" alt="Einführung in Angular-Unit-Tests mit Jasmine" ></p> <p>Das Folgende habe ich unter der Annahme erstellt, dass diejenigen, die selten oder gar keine Unit-Tests geschrieben haben, daher viele konzeptionelle Probleme in der Landessprache erklären können und sie auch in Kombination mit Jasmines entsprechenden Methoden erklären werden. </p> <p><span style="font-size: 20px;"><strong> 1. Konzept </strong></span></p> <p><span style="font-size: 18px;"><strong>Test Suite</strong></span></p> <p>Test Suite, selbst eine einfache Klasse, wird mehrere Testfälle haben, daher wird die Sammlung dieser Testfälle unter einer Kategorie <strong>Test Suite</strong> genannt. </p> <p>In Jasmine wird es durch die globale Funktion <code>describe</code> dargestellt. Der erste Zeichenfolgenparameter wird zur Darstellung des Namens oder Titels der Suite verwendet, und der zweite Methodenparameter dient zur Implementierung des Suite-Codes. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">describe(&#39;test suite name&#39;, () => { });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><span style="font-size: 18px;"><strong>Specs</strong></span></p><p>Eine Specs entspricht einem Testfall, also dem spezifischen Codekörper, den wir zum Testen implementieren. </p><p>Jasmine verwendet zur Darstellung die globale Funktion <code>it</code>, ähnlich wie <code>describe</code>, mit zwei Parametern: Zeichenfolge und Methode. </p><p>Jede Spezifikation enthält mehrere Erwartungen zum Testen des zu testenden Codes. Solange ein Erwartungsergebnis <code>false</code> ist, bedeutet dies, dass sich der Testfall in einem fehlgeschlagenen Zustand befindet. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">describe(&#39;demo test&#39;, () => { const VALUE = true; it(&#39;should be true&#39;, () => { expect(VALUE).toBe(VALUE); }) });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><span style="font-size: 18px;"><strong>Erwartungen</strong></span></p><p>Behauptungen, die durch <code>expect</code> globale Funktionen dargestellt werden, erhalten nur einen Repräsentanten des zu testenden <strong>tatsächlichen Werts</strong> und müssen mit einem Matcher abgeglichen werden, der den <strong>Erwartungswert</strong> darstellt. </p><p><span style="font-size: 20px;"><strong> 2. Häufig verwendete Methoden</strong></span></p><p><span style="font-size: 18px;"><strong>Matchers</strong></span></p><p>Übereinstimmungsvorgänge durchführen, zwischen tatsächlichen Werten und erwarteten Werten vergleichen und Jasmine über die Ergebnisse benachrichtigen. Schließlich bestimmt Jasmine, ob diese Spezifikation erfolgreich ist oder scheitert. </p><p>Jasmine bietet eine sehr umfangreiche API, einige häufig verwendete Matcher: </p><ul><li><code>toBe()</code> entspricht <code>===</code></li><li>toNotBe() entspricht <code>!==</code></li><li>toBeDefined() entspricht <code>!== undefined</code></li><li>toBeUndefined() entspricht <code>=== undefined</code></li> <li>toBeNull() Das Gleiche wie <code>=== null</code></li><li> toBeTruthy() entspricht <code>!!obj</code></li><li> toBeFalsy() entspricht <code>!obj</code></li><li> toBeLessThan() entspricht <code><</code></li><li>toBeGreaterThan() entspricht <code>></code></li><li>toEqual() Äquivalent to <code>==</code></li><li>toNotEqual() ist äquivalent zu <code>!=</code></li> <li>toContain() ist äquivalent zu <code>indexOf</code> </li><li>toBeCloseTo() definiert die Genauigkeit beim Vergleich numerischer Werte, wobei zuerst gerundet und dann verglichen wird. </li><li>toHaveBeenCalled() prüft, ob die Funktion aufgerufen wurde </li><li>toHaveBeenCalledWith() prüft, ob der eingehende Parameter als Parameter aufgerufen wurde </li><li>toMatch() ist äquivalent zu <code>new RegExp().test()</code></li><li>toNotMatch() ist äquivalent zu <code>!new RegExp().test()</code></li><li>toThrow( ) prüft, ob die Funktion einen Fehler auslöst </li></ul><p> und ob diese APIs zuvor <code>not</code> verwendet wurden, um eine negative Wertbeurteilung anzuzeigen. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">expect(true).not.toBe(false);</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Diese Matcher können fast unseren täglichen Bedarf decken. Natürlich können Sie Ihren eigenen Matcher auch an spezielle Bedürfnisse anpassen. </p><p><span style="font-size: 18px;"><strong>Setup und Teardown</strong></span></p><p>Ein leistungsfähiger Testcode ist sehr wichtig, damit wir diese wiederholten Setup- und Teardown-Codes in die entsprechenden <code>beforeEach</code> und <code>afterEach</code> globalen Funktionen einfügen können. </p><p><code>beforeEach</code> bedeutet, bevor jede Spezifikation ausgeführt wird und umgekehrt. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">describe(&#39;demo test&#39;, () => { let val: number = 0; beforeEach(() => { val = 1; }); it(&#39;should be true&#39;, () => { expect(val).toBe(1); }); it(&#39;should be false&#39;, () => { expect(val).not.toBe(0); }); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><span style="font-size: 18px;"><strong>Datenfreigabe</strong></span></p><p>Wie im obigen Beispiel können wir die entsprechenden Variablen am Anfang jeder Testdatei definieren, <code>describe</code>, sodass jeder <code>it</code> sie intern teilen kann. </p><p>Natürlich wird jeder Spec-Ausführungszyklus auch von einem leeren <code>this</code>-Objekt begleitet, bis es nach Ende der Spec-Ausführung gelöscht wird. Daten können auch mit <code>this</code> geteilt werden. </p><p><span style="font-size: 18px;"><strong>Verschachtelter Code</strong></span></p><p>Wenn wir eine Komponente testen, hat die Komponente manchmal unterschiedliche Zustände, um unterschiedliche Ergebnisse zu zeigen. Zu diesem Zeitpunkt erscheint die Verwendung nur eines <code>describe</code> zu elegant. </p><p>Durch die Verschachtelung <code>describe</code> sehen der Testcode und der Testbericht daher schöner aus. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">describe(&#39;AppComponent&#39;, () => { describe(&#39;Show User&#39;, () => { it(&#39;should be show panel.&#39;, () => {}); it(&#39;should be show avatar.&#39;, () => {}); }); describe(&#39;Hidden User&#39;, () => { it(&#39;should be hidden panel.&#39;, () => {}); }); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><span style="font-size: 18px;"><strong>Überspringen Sie den Testcodeblock</strong></span></p><p>Die Anforderungen sind immer halbherzig, aber der Testcode, der schließlich geschrieben wurde, sollte gelöscht werden? Nein... </p><p>Suites und Specs können die globalen Funktionen <code>xdescribe</code> bzw. <code>xit</code> verwenden, um diese Testcodeblöcke zu überspringen. </p><p><span style="font-size: 20px;"><strong>3. Arbeiten Sie mit dem Angular-Werkzeugset zusammen</strong></span></p><p><span style="font-size: 18px;"><strong>Spy</strong></span></p><p><a href="https://img.php.cn/upload/article/000/000/024/5f45c5bc2de7d900.jpg" target="_blank">Angular</a>的自定义事件实在太普遍了，但为了测试这些自定义事件，因此监控事件是否正常被调用是非常重要。好在，<code>Spy</code> 可以用于监测函数是否被调用，这简直就是我们的好伙伴。</p><p>以下示例暂时无须理会，暂且体验一下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">describe(&#39;AppComponent&#39;, () => { 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(); }); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><span style="font-size: 18px;"><strong>异步支持</strong></span></p><p>首先，这里的异步是指带有 Observable 或 Promise 的异步行为，因此对于组件在调用某个 Service 来异步获取数据时的测试状态。</p><p>假设我们的待测试组件代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">export class AppComponent { constructor(private _user: UserService) {} query() { this._user.quer().subscribe(() => {}); } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><strong>async</strong></p><p><code>async</code> 无任何参数与返回值，所有包裹代码块里的测试代码，可以通过调用 <code>whenStable()</code> 让<strong>所有待处理异步行为都完成后</strong>再进行回调；最后，再进行断言操作。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">it(&#39;should be get user list (async)&#39;, async(() => { // call component.query(); fixture.whenStable().then(() => { fixture.detectChanges(); expect(true).toBe(true); }); }));</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><strong>fakeAsync</strong></p><p>如果说 <code>async</code> 还需要回调才能进行断点让你受不了的话，那么 <code>fakeAsync</code> 可以解决这一点。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">it(&#39;should be get user list (async)&#39;, fakeAsync(() => { // call component.query(); tick(); fixture.detectChanges(); expect(true).toBe(true); }));</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>这里只是将回调换成 <code>tick()</code>，怎么样，是不是很酷。</p><p><strong>Jasmine自带异步</strong></p><p>如前面所说的异步是指带有 Observable 或 Promise 的异步行为，而有时候我们有些东西是依赖 <code>setTimeout</code> 或者可能是需要外部订阅结果以后才能触发时怎么办呢？</p><p>可以使用 <code>done()</code> 方法。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">it(&#39;async demo&#39;, (done: () => void) => { context.show().subscribe(res => { expect(true).toBe(true); done(); }); el.querySelected(&#39;xxx&#39;).click(); });</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p><span style="font-size: 20px;"><strong>四、结论</strong></span></p> <p>本章几乎所有的内容在Angular单元测试经常使用到的东西；特别是异步部分，三种不同异步方式并非共存的，而是需要根据具体业务而采用。否则，你会发现真TM难写单元测试。毕竟这是一个异步的世界。</p> <p>自此，我们算是为Angular写单元测试打下了基础。后续，将不会再对这类基础进行解释。</p> <p>happy coding!</p> <p>相关教程推荐：<a href="https://www.php.cn/course/list/20.html" target="_blank">angular教程</a></p>

Das obige ist der detaillierte Inhalt vonEinführung in Angular-Unit-Tests mit Jasmine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!