angular 测试 api 说明

1. detectChanges(checkNoChanges?: boolean): void;
   • 触发组件的变更检测周期。它重新评估组件的模板并相应地更新视图。checkNoChanges参数是可选的，可用于检查是否存在不应发生的任何更改。
2. checkNoChanges(): void;
   • 执行变更检测运行，以确保组件没有意外的更改。用于检查组件的稳定性。
3. autoDetectChanges(autoDetect?: boolean): void;
   • 设置夹具是否应自动检测变更。如果autoDetect为true，它会启用自动变更检测。通常，此方法还会运行一次detectChanges以检测任何现有的更改。
4. isStable(): boolean;
   • 返回夹具当前是否稳定，或者是否有任何尚未完成的异步任务。这对于异步测试非常有用。
5. whenStable(): Promise<any>;
   • 返回一个承诺，当夹具稳定时解决。这对于测试场景非常有用，您需要等待异步活动或变更检测完成后再继续测试。
6. private _getRenderer;
   • 这似乎是一个私有方法或属性。它可能在测试工具内部使用，但不会对外部使用者暴露。
7. whenRenderingDone(): Promise<any>;
   • 返回一个承诺，当动画完成后，UI状态稳定。这可用于涉及动画或其他异步渲染任务的测试场景。
8. destroy(): void;
   • 触发组件销毁。此方法可能用于清理资源或测试场景，其中您希望销毁组件。

9.ComponentFixtureAutoDetect 是 Angular 测试中的一个配置选项，用于自动检测组件的变更并触发变更检测。通常，当 Angular 组件上发生变更时，需要手动调用 fixture.detectChanges() 来触发变更检测，以便更新组件的视图。然而，ComponentFixtureAutoDetect 允许你配置测试环境，使其在一些情况下自动检测变更，而不需要显式调用 detectChanges。

TestBed.configureTestingModule({
  declarations: [YourComponent],
  // 配置 ComponentFixtureAutoDetect 以自动检测变更
  providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }],
});

通过将 ComponentFixtureAutoDetect 提供给测试的 providers 数组，并将其值设置为 true，你告诉 Angular 测试环境在某些情况下自动检测组件的变更，而不需要手动触发 detectChanges()。这可以使你的测试代码更简洁，但在某些情况下可能需要小心，因为自动检测可能会导致不必要的性能开销或者在测试中的意外行为。因此，在使用 ComponentFixtureAutoDetect 时要谨慎考虑其影响。

10.ComponentFixtureNoNgZone 是 Angular 测试中的另一个配置选项，用于禁用 Angular 的 NgZone（变更检测区域）。通常情况下，Angular 使用 NgZone 来检测和触发变更，以及处理异步操作。但在某些测试情况下，你可能希望禁用 NgZone，以确保测试在没有异步操作和 NgZone 的影响下运行。

通过使用 ComponentFixtureNoNgZone 配置，你可以在 Angular 测试中禁用 NgZone。以下是一个示例：

import { ComponentFixtureNoNgZone } from '@angular/core/testing';

// 在测试配置中使用 ComponentFixtureNoNgZone
TestBed.configureTestingModule({
  declarations: [YourComponent],
  providers: [{ provide: ComponentFixtureNoNgZone, useValue: true }],
});

通过将 ComponentFixtureNoNgZone 提供给测试的 providers 数组，并将其值设置为 true，你告诉 Angular 测试环境在测试组件时禁用 NgZone。这可以用于一些特殊情况，例如，当你希望测试在没有异步操作的情况下运行，或者当你想完全控制测试中的时间流逝时。

需要注意的是，禁用 NgZone 可能会导致一些测试不再模拟真实的应用程序行为，因此应该谨慎使用，并仅用于特定的测试场景

11.discardPeriodicTasks 是 Angular 测试中的一个方法，用于清除周期性任务（Periodic Tasks）。周期性任务通常是由 setInterval 函数创建的，它们会在一定的时间间隔内重复执行某个操作。在测试环境中，你可能希望控制这些周期性任务的执行，以确保测试的可控性和可预测性。

在 Angular 测试中，你可以使用 discardPeriodicTasks 方法来清除所有的周期性任务，以防止它们在测试中干扰你的测试流程。通常，在执行某些测试操作后，你可以调用 discardPeriodicTasks 来确保没有周期性任务继续运行。

import { discardPeriodicTasks, fakeAsync, tick } from '@angular/core/testing';

it('should do something with periodic tasks', fakeAsync(() => {
  // 在这里执行一些测试操作，可能会触发周期性任务

  // 清除所有的周期性任务
  discardPeriodicTasks();

  // 继续执行测试操作
  // ...

  // 进行测试断言
}));

在上述示例中，使用了 fakeAsync 来模拟异步操作和时间的流逝。在测试的适当时机，调用 discardPeriodicTasks 来清除所有的周期性任务，以确保测试不受这些任务的干扰。

这个方法通常用于确保测试环境的稳定性和可预测性，以便更容易编写和维护 Angular 组件的单元测试。

12.fakeAsync 是 Angular 测试中的一个函数，它用于模拟异步操作和时间的流逝，以便更容易编写和执行 Angular 组件的单元测试。它通常用于创建测试函数，以便你可以在测试中编写异步代码，而无需等待实际的时间流逝。

函数签名 function fakeAsync(fn: Function): (...args: any[]) => any 解释如下：

• fakeAsync: 这是函数的名称，它用于模拟异步操作的执行。

• fn: Function: 这是一个参数，代表要在虚拟异步环境中执行的函数。你可以将测试代码包装在这个函数中。

• (...args: any[]) => any: 这是 fakeAsync 函数的返回类型。它返回一个函数，这个函数接受任意数量的参数（...args: any[]），并返回一个任意类型的值。通常情况下，这个函数用于包装测试函数，以便在虚拟的异步环境中执行测试代码。

  import { fakeAsync, tick } from '@angular/core/testing';

  it('should perform an asynchronous task', fakeAsync(() => {
  let result = null;

  // 在虚拟的异步环境中执行异步操作
  setTimeout(() => {
    result = 'done';
  }, 1000);
  
  // 使用 tick 模拟时间流逝
  tick(1000);
  
  // 断言结果
  expect(result).toBe('done');
  

  }));

在上述示例中，fakeAsync 函数包装了一个测试函数，它在虚拟的异步环境中执行了一个 setTimeout 操作。通过使用 tick 函数，我们可以模拟时间的流逝，以便在测试中等待异步操作完成。这使得测试更容易编写，因为不需要等待实际时间流逝

13.提供的 flush 函数通常用于 Angular 测试环境中，用于刷新待处理的异步操作和任务。以下是其函数签名的解释：

• function flush(maxTurns?: number): number;
  • maxTurns（可选参数）：一个数值参数，用于指定最大的事件循环迭代次数。这是一个可选参数。
  • 返回值：事件循环迭代的次数（任务被刷新的次数）。

flush 的目的是模拟时间的流逝，并确保执行任何待处理的异步任务，例如定时器、Promise 或 Observable。它帮助你以受控的方式推进测试时钟，使得更容易测试异步代码，而不需要等待真实时间流逝。

以下是如何在 Angular 测试中使用 flush 的示例：

import { flush } from '@angular/core/testing';

it('应该执行异步任务', () => {
  let asyncData = null;

  // 模拟一个异步任务，例如一个 Promise
  const promise = new Promise((resolve) => {
    setTimeout(() => {
      asyncData = '已解决的数据';
      resolve();
    }, 1000);
  });

  // 调用 flush 来执行待处理的异步任务
  flush();

  // 现在你可以对异步操作的结果进行断言
  expect(asyncData).toBe('已解决的数据');
});

在这个示例中，flush 用于执行任何待处理的异步任务，包括 setTimeout 回调。在调用 flush 后，你可以对异步操作的结果进行断言。flush 函数在需要精确控制异步代码执行的测试环境中特别有用。

14.flushMicrotasks 函数用于在Angular测试中刷新微任务队列。微任务通常包括Promise回调和其他微任务，它们比宏任务（如setTimeout）更早执行。在测试环境中，您可能需要手动控制微任务的执行以确保测试的可控性和可预测性。

import { flushMicrotasks } from '@angular/core/testing';

it('should perform asynchronous tasks', () => {
  let asyncData = null;

  // 模拟一个异步任务，例如一个Promise
  const promise = Promise.resolve('resolved data');

  promise.then((data) => {
    asyncData = data;
  });

  // 手动刷新微任务队列
  flushMicrotasks();

  // 现在您可以对异步操作的结果进行断言
  expect(asyncData).toBe('resolved data');
});

在这个示例中，flushMicrotasks 用于手动刷新微任务队列，以确保Promise的回调函数被执行。这允许您在测试中等待微任务的执行，然后进行断言。这对于测试依赖微任务的代码非常有用。

15.inject 是 Angular 测试中的一个函数，用于在测试函数中注入依赖项（依赖注入）。它通常与测试函数一起使用，以便在测试代码中访问和使用 Angular 服务或其他依赖项。

以下是 inject 函数的签名：

function inject(tokens: any[], fn: Function): () => any;

• tokens: 一个包含要注入的依赖项令牌的数组。这些令牌通常是 Angular 服务、组件、或其他依赖项的提供者。

• fn: 一个回调函数，它接受依赖项作为参数，并包含测试代码。该函数的参数的顺序和数量应与 tokens 数组中的令牌相匹配。

• 返回值: 一个函数，它用于执行测试代码，该函数没有参数，并返回测试函数的结果。

  import { inject } from '@angular/core/testing';

  it('should inject a service', inject([YourService], (service: YourService) => {
  // 在这里访问和使用注入的服务
  const result = service.doSomething();

  // 进行断言
  expect(result).toBe('expectedValue');
  

  }));

  it('should inject multiple dependencies', inject([Service1, Service2], (s1: Service1, s2: Service2) => {
  // 在这里访问和使用多个注入的依赖项
  const result = s1.someMethod(s2);

  // 进行断言
  expect(result).toBe('expectedResult');
  

  }));

在上述示例中，inject 函数用于注入依赖项（例如服务）并将它们传递给测试函数。这使得在测试中可以轻松访问和使用这些依赖项，以进行单元测试

16.initTestEnvironment 是 Angular 测试中的一个函数，用于初始化测试环境。它通常与测试运行器（如Jasmine、Jest等）一起使用，以确保 Angular 应用程序在测试环境中正确设置和初始化。

这是 initTestEnvironment 函数的一般形式

function initTestEnvironment(ngModule: any, platform: any): void;

• ngModule: 表示 Angular 模块的参数，通常是你的应用程序的根模块。该参数用于配置测试环境，以便使用 Angular 的依赖注入系统。

• platform: 表示 Angular 平台的参数，通常是 Angular 测试平台。它用于模拟 Angular 应用程序的运行环境。

  import { TestBed } from '@angular/core/testing';
  import { initTestEnvironment } from '@angular/platform-browser/testing';

  // 初始化测试环境
  initTestEnvironment(BrowserModule, platformBrowserDynamicTesting());

  // 配置测试模块
  TestBed.configureTestingModule({
  declarations: [YourComponent],
  providers: [YourService],
  });

  // 执行测试
  it('should do something', () => {
  // 在这里执行测试代码
  });

在上述示例中，initTestEnvironment 函数用于初始化测试环境，然后通过 TestBed 配置测试模块和执行测试代码。这确保了 Angular 测试环境的正确设置，以便进行单元测试。

请注意，具体的使用方式可能会根据你的测试运行器和测试配置而有所不同。通常，你需要根据你的应用程序的特定需求和测试框架的要求来使用 initTestEnvironment。

17.platformBrowserDynamicTesting 是 Angular 测试中的一个函数，用于创建一个测试用的 Angular 平台。它通常与 initTestEnvironment 函数一起使用，以确保在测试环境中正确设置和初始化 Angular 应用程序。

这是 platformBrowserDynamicTesting 函数的一般形式：

import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

// 创建测试用的 Angular 平台
const testingPlatform = platformBrowserDynamicTesting();

在测试环境中，你需要创建一个测试用的 Angular 平台，以模拟 Angular 应用程序的运行环境。platformBrowserDynamicTesting 函数用于创建这个测试平台。

使用示例：

import { TestBed } from '@angular/core/testing';
import { initTestEnvironment } from '@angular/platform-browser/testing';
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

// 初始化测试环境
initTestEnvironment(BrowserModule, platformBrowserDynamicTesting());

// 配置测试模块
TestBed.configureTestingModule({
  declarations: [YourComponent],
  providers: [YourService],
});

// 执行测试
it('should do something', () => {
  // 在这里执行测试代码
});

在上述示例中，platformBrowserDynamicTesting 用于创建测试用的 Angular 平台，并与 initTestEnvironment 一起用于初始化测试环境。这样可以确保测试环境正确设置，以便进行单元测试。

platformBrowserDynamicTesting 通常用于在浏览器环境中进行 Angular 组件的集成测试。