zoukankan      html  css  js  c++  java
  • [Unit Testing Angular] fakeAsync

    In this post, we are going to see how to use 'fakeAsync' to test async code in Angular Context.

    fakeAsync using Zoom.js underhook, it detects all the async operations.

    You can use the utilities function such as 

    • flush: Run all the pending async function in Event loop
    • flushMicrotasks: Run all the Promise Job
    • tick(1000): Move time forward 1000ms 
    import { fakeAsync, flush, flushMicrotasks, tick } from "@angular/core/testing";
    import { of } from "rxjs";
    import { delay } from "rxjs/operators";
    
    describe("Async Testing Examples", () => {
      // Using Jasmine done function for async task
      it("Asynchronous test example with Jasmine done()", (done: DoneFn) => {
        let test = false;
    
        setTimeout(() => {
          console.log("running assertions");
    
          test = true;
    
          expect(test).toBeTruthy();
    
          done();
        }, 1000);
      });
    
      // running in Angular Zoom: fakeAsync
      it("Asynchronous test example - setTimeout()", fakeAsync(() => {
        let test = false;
    
        setTimeout(() => {});
    
        setTimeout(() => {
          console.log("running assertions setTimeout()");
    
          test = true;
        }, 1000);
    
        // move time forworad 1000ms
        // tick(1000);
    
        // exec all the timeouts
        flush();
    
        expect(test).toBeTruthy();
      }));
    
      // Microtasks: Promise based
      // there are two types of event loops
      // one is for setTimeout, http, click.... they are added into event loop
      // those might affect DOM rendering
    
      // another type of event loop is Microtasks, for example, Promise
      // Microtasks is more lightweight, considering it will not changing DOM
    
      // Exec order Call stack --> Microtasks queue --> Event queue
      it("Asynchronous test example - plain Promise", fackAsync(() => {
        let test = false;
        // Microtasks
        Promise.resolve()
          .then(() => {
            console.log("Promise first then() evaluated successfully");
    
            return Promise.resolve();
          })
          .then(() => {
            console.log("Promise second then() evaluated successfully");
    
            test = true;
          });
    
        flushMicrotasks();
    
        expect(test).toBeTruthy();
      }));
    
      it("Asynchronous test example - Promises + setTimeout()", fakeAsync(() => {
        let counter = 0;
    
        Promise.resolve().then(() => {
          counter += 10;
    
          setTimeout(() => {
            counter += 1;
          }, 1000);
        });
    
        expect(counter).toBe(0);
    
        flushMicrotasks();
    
        expect(counter).toBe(10);
    
        tick(500);
    
        expect(counter).toBe(10);
    
        tick(500);
    
        expect(counter).toBe(11);
      }));
    
      it("Asynchronous test example - Observables", fakeAsync(() => {
        let test = false;
    
        console.log("Creating Observable");
    
        const test$ = of(test).pipe(delay(1000));
    
        test$.subscribe(() => {
          test = true;
        });
    
        tick(1000);
    
        console.log("Running test assertions");
        expect(test).toBe(true);
      }));
    });
  • 相关阅读:
    Redis进阶实践之一VMWare Pro虚拟机安装和Linux系统的安装
    HTTP常见面试题
    HBase WAL原理学习
    HBase TableExistsException: hbase:namespace
    HBase常用操作之namespace
    Hbase原理、基本概念、基本架构
    hbase 修复 hbase hbck
    hbase数据备份或者容灾方案
    Hbase 日常运维
    HBase shell scan 模糊查询
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12336750.html
Copyright © 2011-2022 走看看