[原文：Testing and faking Angular dependencies](https://dev.to/this-is-angular/testing-and-faking-angular-dependencies-p9i)

依賴注入是 Angular 的一個關鍵特性。這種靈活的方法使我們的可宣告和基於類的服務更容易隔離測試。

可搖樹依賴項移除了間接層 即Angular 模組，但我們如何測試它們的可搖樹 provider？我們將測試依賴於特定平臺 API 的注入令牌的值工廠。

某些元件具有特定於瀏覽器的功能。我們將一起測試通知使用者我們將終止 Internet Explorer 11 支援的橫幅。一個合適的測試套件可以給我們足夠的信心，我們甚至不必在 Internet Explorer 11 中測試橫幅。

我們必須小心不要對複雜的整合場景過於自信。我們應該始終確保在儘可能接近生產的環境中執行 QA（質量保證）測試。這意味著在*真實* Internet Explorer 11 瀏覽器中執行應用程式。

Angular 測試實用程式使我們能夠偽造依賴項以進行測試。我們將使用 Angular CLI 的測試框架 Jasmine 探索在 Angular 測試環境中配置和解決依賴關係的不同選項。

透過示例，我們將探索元件 fixtures、元件初始化、自定義 expectations、模擬事件。我們甚至會為非常精簡但明確的測試用例建立自定義測試工具。

# Faking dependency injection tokens used in token providers

看個例子。

我們建立了一個依賴注入令牌，該令牌評估為指示當前瀏覽器是否為 Internet Explorer 11 的標誌。

```typescript
// user-agent.token.ts
import { InjectionToken } from '@angular/core';

export const userAgentToken: InjectionToken<string> =
  new InjectionToken('User agent string', {
    factory: (): string => navigator.userAgent,
    providedIn: 'root',
  });
```

```typescript
// is-internet-explorer-11.token.ts
import { inject, InjectionToken } from '@angular/core';

import { userAgentToken } from './user-agent.token';

export const isInternetExplorer11Token: InjectionToken<boolean> =
  new InjectionToken('Internet Explorer 11 flag', {
    factory: (): boolean =>
      /Trident\/7\.0.+rv:11\.0/.test(inject(userAgentToken)),
    providedIn: 'root',
  });
```

為了單獨測試 Internet Explorer 11 標誌提供程式，我們可以用一個假值替換 userAgentToken。

我們注意到使用者代理字串提供程式從特定於平臺的 Navigator API 中提取相關資訊。 為了學習，假設我們將需要來自同一個全域性導航器物件的其他資訊。 根據我們使用的測試執行器，Navigator API 甚至可能在測試環境中不可用。

為了能夠建立虛假的導航器配置，我們為導航器 API 建立了一個依賴注入令牌。 我們可以在開發和測試期間使用這些虛假配置來模擬使用者上下文。

```typescript
// user-agent.token.ts
import { inject, InjectionToken } from '@angular/core';

import { navigatorToken } from './navigator.token';

export const userAgentToken: InjectionToken<string> =
  new InjectionToken('User agent string', {
    factory: (): string => inject(navigatorToken).userAgent,
    providedIn: 'root',
  });
```

```typescript
// navigator.token.ts
import { InjectionToken } from '@angular/core';

export const navigatorToken: InjectionToken<navigator> =
  new InjectionToken('Navigator API', {
    factory: (): Navigator => navigator,
    providedIn: 'root',
  });
```

對於我們的第一個測試，我們將為 Navigator API 令牌提供一個假值，該令牌在工廠提供程式中用作使用者代理字串令牌的依賴項。

為了出於測試目的替換令牌提供程式，我們在 Angular 測試模組中新增了一個覆蓋提供程式，類似於 Angular 模組自己的提供程式如何覆蓋匯入的 Angular 模組的提供程式。

```typescript
// navigator-api.spec.ts
import { inject, TestBed } from '@angular/core/testing';

import { navigatorToken } from './navigator.token';
import { userAgentToken } from './user-agent.token';

describe('Navigator API', () => {
  describe('User agent string', () => {
    describe('Provider', () => {
      beforeEach(() => {
        TestBed.configureTestingModule({
          providers: [
            {
              provide: navigatorToken,
              useValue: {
                userAgent: 'Fake browser',
              },
            },
          ],
        });
      });

it(
        'extracts the user agent string from the Navigator API token',
        inject([userAgentToken], (userAgent: string) => {
          expect(userAgent).toBe('Fake browser');
        }));
    });
  });
});
```

請注意，雖然我們正在測試的是 user agent 令牌及其提供者，但我們正在用假值替換 navigator 令牌依賴項。

# Resolving dependencies using the inject function

Angular 測試實用程式為我們提供了不止一種解決依賴關係的方法。 在這個測試中，我們使用@angular/core/testing 包中的 [inject](https://angular.io/api/core/testing/inject) 函式（*不是@angular/core 中的那個）。

注入函式允許我們透過在我們作為引數傳遞的陣列中列出它們的標記來解決多個依賴項。 每個依賴注入令牌都被解析並作為引數提供給測試用例函式。

例子：https://stackblitz.com/edit/testing-and-faking-angular-dependencies?file=src%2Fapp%2Finternet-explorer%2Finternet-explorer-11-banner.component.spec.ts

# Gotchas when using the Angular testing function inject

當我們使用沒有宣告的 Angular 測試模組時，即使在同一個測試用例中，我們通常也可以多次覆蓋 provider. 我們將在本文後面研究一個例子。

值得注意的是，在使用 Angular 測試功能 [inject](https://angular.io/api/core/testing/inject) 時，情況並非如此。 它在執行測試用例函式體之前解決依賴關係。

我們可以使用靜態方法 TestBed.configureTestingModule 和 TestBed.overrideProvider 替換 beforeAll 和 beforeEach 鉤子中的令牌提供者。 但是當我們使用注入測試功能來解決依賴關係時，我們不能在測試用例之間改變提供者或在測試用例期間替換它。

在沒有 declarables 的測試中解決 Angular 依賴關係的一種更靈活的方法是使用靜態方法 TestBed.get。 我們只需從測試用例函式或測試生命週期鉤子的任何地方傳遞我們想要解析的依賴注入令牌。

讓我們看另一個原生瀏覽器 API 示例，我們使用依賴注入令牌對其進行抽象，以進行開發和測試。

Location 依賴於 Document：

```typescript
// location.token.ts
import { DOCUMENT } from '@angular/common';
import { inject, InjectionToken } from '@angular/core';

export const locationToken: InjectionToken<location> =
  new InjectionToken('Location API', {
    factory: (): Location => inject(DOCUMENT).location,
    providedIn: 'root',
  });
```

![](https://img-blog.csdnimg.cn/img_convert/ba80e46cae7bb2c31f437d9fc7549e14.png)

```typescript
// location-api.spec.ts
import { DOCUMENT } from '@angular/common';
import { TestBed } from '@angular/core/testing';

import { locationToken } from './location.token';

describe('Location API', () => {
  describe('Provider', () => {
    it('extracts the location from the DOCUMENT token', () => {
      TestBed.configureTestingModule({
        providers: [
          {
            provide: DOCUMENT,
            useValue: {
              location: {
                href: 'Fake URL',
              },
            },
          },
        ],
      });

const location: Location = TestBed.get(locationToken);

expect(location.href).toBe('Fake URL');
    });
  });
});
```
我們透過使用靜態 TestBed.get 方法使 Angular 依賴注入系統解析 Location API。 正如 StackBlitz 測試專案中所證明的那樣，文件令牌被成功偽造並用於使用其真實的工廠提供程式來解析被測令牌。

# Gotchas when resolving dependencies using TestBed

在之前的測試中，我們透過在 Angular 測試模組中為 DOCUMENT 令牌提供文件來將文件替換為假物件。 如果我們沒有這樣做，Angular 就會提供全域性文件物件。

此外，如果我們想測試不同的文件配置，如果我們沒有為文件令牌建立 test provider，我們將無法這樣做。

在我們使用 TestBed.configureTestingModule 新增測試提供程式的情況下，我們可以使用靜態方法 TestBed.overrideProvider 在各種測試用例中將其替換為不同的假值。 在測試 Internet Explorer 11 檢測和 Internet Explorer 11 橫幅元件時，我們將使用此技術建立測試工具。

請注意，這是唯一可能的，因為我們不使用 declarable。 一旦我們呼叫 TestBed.createComponent，Angular 測試平臺的依賴就被鎖定了。

# Testing value factories with dependencies

在本文的第一部分中，我們介紹了一個在其提供程式中帶有值工廠的令牌。 值工廠評估使用者代理字串是否代表 Internet Explorer 11 瀏覽器。

為了測試值工廠中的瀏覽器檢測，我們從真實瀏覽器中收集了一些使用者代理字串並將它們放在一個列舉中。

```typescript
// fake-user-agent.ts
export enum FakeUserAgent {
  Chrome = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36',
  InternetExplorer10 = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)',
  InternetExplorer11 = 'Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko',
  Firefox = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0',
}
```

在 Internet Explorer 11 檢測測試套件中，我們將幾乎孤立地測試 isInternetExplorer11Token。 但真正的業務邏輯價值在於它的工廠提供者，它依賴於使用者代理令牌。

使用者代理令牌從 Navigator API 令牌中提取其值，但 Navigator API 測試套件已涵蓋該依賴項。 我們將選擇使用者代理令牌作為依賴鏈中合適的位置來開始偽造依賴。

```typescript
// internet-explorer-11-detection.spec.ts
import { TestBed } from '@angular/core/testing';

import { isInternetExplorer11Token } from './is-internet-explorer-11.token';
import { FakeUserAgent } from './fake-user-agent';
import { userAgentToken } from './user-agent.token';

describe('Internet Explorer 11 detection', () => {
  function setup({ userAgent }: { userAgent: string }) {
    TestBed.overrideProvider(userAgentToken, { useValue: userAgent });

return {
      isInternetExplorer11: TestBed.get(isInternetExplorer11Token),
    };
  }

const nonInternetExplorerUserAgents: ReadonlyArray<string> =
    Object.entries(FakeUserAgent)
      .filter(([browser]) =>
        !browser.toLowerCase().includes('internetexplorer'))
      .map(([_browser, userAgent]) => userAgent);

it('accepts an Internet Explorer 11 user agent', () => {
    const { isInternetExplorer11 } = setup({
      userAgent: FakeUserAgent.InternetExplorer11,
    });

expect(isInternetExplorer11).toBe(true);
  });

it('rejects an Internet Explorer 10 user agent', () => {
    const { isInternetExplorer11 } = setup({
      userAgent: FakeUserAgent.InternetExplorer10,
    });

expect(isInternetExplorer11).toBe(false);
  });

it('rejects other user agents', () => {
    nonInternetExplorerUserAgents.forEach(userAgent => {
      const { isInternetExplorer11 } = setup({ userAgent });

expect(isInternetExplorer11).toBe(
        false,
        `Expected to reject user agent: "${userAgent}"`);
    });
  });
});
```

在指定測試用例之前，我們建立了一個測試設定函式，並從我們的假使用者代理字串中減少了一組非 Internet Explorer 使用者代理字串。

測試設定函式採用使用者代理並使用它來偽造使用者代理令牌提供者。然後我們返回一個具有屬性 isInternetExplorer11 的物件，該物件具有透過 TestBed.get 方法從 isInternetExplorer11Token 評估的值。

讓我們先測試一下快樂路徑。我們傳遞 Internet Explorer 11 使用者代理字串，並期望被測令牌透過 Angular 的依賴注入系統評估為 true。正如 StackBlitz 測試專案中所見，瀏覽器檢測按預期工作。

當使用者使用 Internet Explorer 10 瀏覽時會發生什麼？我們的測試套件表明 Internet Explorer 11 在這種情況下不會導致誤報。

換句話說，當依賴令牌中提供 Internet Explorer 10 使用者代理字串時，被測令牌評估為 false。如果這不是預期用途，我們需要更改檢測邏輯。現在我們已經進行了測試，很容易證明該更改何時會成功。

最後的測試在 FakeUserAgent 列舉定義的非 Internet Explorer 瀏覽器上執行瀏覽器檢測。測試用例遍歷使用者代理字串，偽造使用者代理提供程式，評估 isInternetExplorer11Token 並期望其值為 false。如果不是這種情況，測試執行程式會顯示有用的錯誤訊息。

# Faking dependencies in component tests

現在我們對 Internet Explorer 11 瀏覽器檢測感到滿意，建立和顯示棄用橫幅很簡單。

```html

<aside>
  Sorry, we will not continue to support Internet Explorer 11.<br>
  Please upgrade to Microsoft Edge.<br>

<button>
    Dismiss
  </button>
</aside>
```

```typescript
// internet-explorer-11-banner.component.ts
import { Component, Inject } from '@angular/core';

import { isInternetExplorer11Token } from './is-internet-explorer-11.token';

@Component({
  selector: 'internet-explorer-11-banner',
  templateUrl: './internet-explorer-11-banner.component.html',
})
export class InternetExplorer11BannerComponent {
  private isDismissed = false;

get isBannerVisible() {
    return this.isInternetExplorer11 && !this.isDismissed;
  }

constructor(
    @Inject(isInternetExplorer11Token) private isInternetExplorer11: boolean,
  ) {}

onDismiss() {
    this.isDismissed = true;
  }
}
```

解除狀態只是作為本地 UI 狀態儲存在私有元件屬性中，該屬性由計算屬性 isBannerVisible 使用。

橫幅元件有一個依賴項——isInternetExplorer11Token，它被評估為一個布林值。 由於 Inject 裝飾器，這個布林值是透過橫幅元件建構函式注入的。

# Summary

在本文中，我們演示瞭如何在 Angular 專案中測試和偽造 tree-shakable 依賴項。 我們還測試了依賴於平臺特定 API 的價值工廠。

在此過程中，我們調查了使用注入測試功能解決依賴項時的問題。 使用 TestBed，我們解決了依賴注入令牌並探索了這種方法的陷阱。

我們以多種方式測試了 Internet Explorer 11 棄用橫幅，以至於幾乎不需要在實際瀏覽器中對其進行測試。 我們在它的元件測試套件中偽造了它的依賴項，但正如我們所討論的，我們應該始終在複雜的整合場景的真實瀏覽器目標中測試它。</string></location></navigator></string></boolean></string>

Angular 依賴的測試和 Fake

相關文章