案例 1.a：测试 - 在测试中禁止异步代码

我们都希望能快速连续地进行测试。一种实现方法就是全部使用同步测试，因为这种测试快速并且行为可预测。即使使用侵入式 mock 也不是所有测试都可以完全变为同步操作。重要的是需要有一种方法可以把测试标记为同步测试并且强制进行同步测试，而且随着时间的推移不会意外地出现异步行为。

var syncZoneSpec = {
  name: 'SyncZone', 
  onScheduleTask: function() {
    throw new Error('No Async work is allowed in test.');
  }
}
function sync(fn) {
  return function(...args) {
    Zone.current.fork(new EventReleaseZoneSpec).run(fn, args, this);
  }
}
it('should fail when doing async', sync(() => {
  Promise.resolve('value');
}));

译注：第十行应该是 Zone.current.fork(syncZoneSpec).run(fn, args, this);

重点：

再 SyncZone 中执行测试的时候，如果创建一个异步任务，测试将会自动失败。

案例 1.b：测试 - 自动清理事件

测试过程中，对全局变量的操作可能会遗留到下一次测试中。常见的操作时在 DOM 上比如 body 上添加监听事件，这些事件会遗留到下一次测试中。Zone 可以追踪所有监听事件的注册并且在测试完成之后自动清理这些事件。

class EventReleaseZoneSpec {
  constructor() {
    this.name = 'CleanupZone';
    // 在这里持续追踪事件任务
    this.eventTasks = [];
  }
  onScheduleTask(parentZoneDelegate, currentZone,
                          targetZone, task) {
    // 无论何时，只要事件任务被注册，就将他添加到这个列表中
    if (task.type == 'eventTask') {
       this.eventTasks.push(task);
    }
    return parentZoneDelegate.scheduleTask(targetZone, task);
  }
  cleanup() {
    // 取消所有任务
    while(this.eventTasks.length) {
      Zone.current.cancelTask(this.eventTasks.pop());
    }
  }
}
// 包装测试方法，并在测试完成后自动释放所有监听事件
function cleanup(fn) {
  return function(done) {
    let zoneSpec = new EventReleaseZoneSpec();
    let args = [() => {
      zoneSpec.cleanup();
      done();
    }];
    Zone.current.fork(zoneSpec).run(fn, this, args);
  }
}
it('should auto-cleanup events, cleanup((done) => {
  someElement.addEventListener('click', () => console.log('click'));
  someElement.click();
  done();
}));

译注：

37 行缺少一个单引号
测试中的 done 方法在 cleanup 中被修改，40 行的 done 方法实际执行的是 29 行 args 数组中的第一项的方法。

重点：

测试结束后会自动清理运行时注册的所有监听事件。

案例 1.c：测试 - 自动等待测试完成

当运行异步测试的时候，很难知道何时所有测试全部完成。通常测试用例会等待一个特定的任务完成并且断言为正确的结果。而在异步测试的时候会有很多不同的异步任务，很难知道这些任务何时全部完成。未完成的测试任务有可能会对下一次测试造成不利影响，尤其是如果它们修改了全局状态比如 DOM。我们需要一种能把测试标记为异步，并且在测试全部执行完毕后自动完成的方法。

class TrackTaskZoneSpec {
  constructor(done) {
    this.name = 'TaskTrackingZone';
    this.done = done;
  }
  onHasTask(delegate, current, target, hasTaskState) {
    if (!hasTaskState.microTask && !hasTaskState.macroTask) {
      this.done();
    }
  }
}
function async(fn) {
  return function(done) {
    Zone.current.fork(new TrackTaskZoneSpec(done)).run(fn);
  }
}
it('should auto-wait for async test', async(() => {
  setTimeout(() => {
    Promise.resolve(0).then(() => {
      // 只有在这行代码执行完成后，测试才会结束
      console.log('wait for me'));
    }
  }, 0);
}));

重点：

现在测试会自动等到所有异步任务完成之后才会进行下一个测试。
由于 zone 会自动检测测试何时完成，因此不会出现太早结束测试（调用 done 方法）的问题。这降低了下一个测试影响当前测试的可能性。

案例 2：长调用栈追踪

一般来说，如果一个应用在某个点抛出了一个错误，但是调用栈中不包含任务创建时的上下文，这种错误信息不是特别有用。看看下面这个例子：

Error: ReferenceError: name is not defined
  paintResponse()

我们知道这是个错误，但是我们不知道这个任务是何时创建的。长调用栈追踪通过输出一个更长的，跨越任务执行的调用栈来提供了这样一个上下文。

Error: ReferenceError: name is not defined
  at paintResponse()
---- async gap ----
  at requestAnimationFrame()
  at XMLHttpRequest.resolve()
---- async gap ----
  at XMLHttpRequest.send()
  at fetchData()
  at clickHandler()
---- async gap ----
  at addEventListener()
  at main()

通过长调用栈追踪，使得把从 event listener 创建，然后点击，然后通过 XHR 获取数据，到最终尝试使用 requestAnimationFrame 渲染但是失败这些片段联系起来成为可能。

class LongStackTraceZoneSpec {
  constructor() {
    this.name = 'LongStackTrace';
  }
  onScheduleTask(parentZoneDelegate, currentZone,
                          targetZone, task) {
    var task =  parentZoneDelegate.scheduleTask(targetZone, task);
    // 每次任务创建的时候，都将当前调用栈捕获保存下来
    task.data.trace = new Error('LongStackTrace');
    // 记录创建当前任务的父任务
    task.data.parentTask = Zone.currentTask;
    return task;
  }
  onHandleError: function(parentZD, current, target, error) {
    error.stack += this.getLongStackTrace();
    return parentZD.handleError(target, error);
  }
  // 把所有调用栈组合起来
  getLongStackTrace() {
    var trace = [''];
    var task = Zone.currentTask;
    while(task) {
      trace.push(task.data.trace);
      task = task.data.parentTask;
    }
    return trace.join('\n--- async gap --\n');
  }
}

重点：

当应用产品把这种调用栈发送回服务器处理时，开发者更容易推测到底发生了什么。

案例 3：框架自动渲染

框架，比如 Angular，需要知道应用何时工作完毕，并在宿主环境渲染之前更新 DOM。在实践中，这意味着框架对主任务和与其相关的微任务执行完毕，并且宿主环境还未接过控制的时间感兴趣。

class VMTurnZoneSpec {
  constructor(vmTurnDone) {
    this.name = 'VMTurnZone';
    this.vmTurnDone = vmTurnDone;
    this.hasMicroTask = false
  }
  onHasTask(delegate, current, target, hasTaskState) {
    this.hasMicroTask = hasTaskState.microTask;
    if (!this.hasMicroTask) {
      this.vmTurnDone();
    }
  }
  onInvokeTask(parent, current, target, task, applyThis, applyArgs){
    try {
      return parent.invokeTask(target, task, applyThis, applyArgs);
    } finally {
      if (!this.hasMicroTask) {
        this.vmTurnDone();
      }
    }
  }
}

重点：

当测试运行在 SyncZone 中时，如果出现了异步任务，测试会自动失败。

译注：这里是错的，应该是复制了上面禁止异步调用的部分下来了这里的代码是，每当微任务栈执行完毕之后，调用一次传入的 vmTurnDone 方法，可以在这里自动调用框架的渲染方法。

案例 4：追踪用户操作

案例 5：自动释放资源

译注：原文这里没有内容，应该是未完成。

Zonejs 新手指引 - 官方文档

第五章：使用案例

案例 1.a：测试 - 在测试中禁止异步代码

重点：

案例 1.b：测试 - 自动清理事件

重点：

案例 1.c：测试 - 自动等待测试完成

重点：

案例 2：长调用栈追踪

重点：

案例 3：框架自动渲染

重点：

案例 4：追踪用户操作

案例 5：自动释放资源

第五章：使用案例

案例 1.a： 测试 - 在测试中禁止异步代码

重点：

案例 1.b：测试 - 自动清理事件

重点：

案例 1.c：测试 - 自动等待测试完成

重点：

案例 2：长调用栈追踪

重点：

案例 3：框架自动渲染

重点：

案例 4：追踪用户操作

案例 5：自动释放资源

案例 1.a：测试 - 在测试中禁止异步代码